@atlaskit/editor-core 187.19.1 → 187.20.1

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

@@ -5,7 +5,6 @@ import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { isTypeAheadAllowed } from '../type-ahead/utils';
 import { pluginKey as layoutStateKey } from '../layout';
 import { insertMacroFromMacroBrowser } from '../macro';
-import { emojiPluginKey } from '../emoji';
 import WithPluginState from '../../ui/WithPluginState';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { pluginKey as typeAheadPluginKey } from '../type-ahead/pm-plugins/key';
@@ -65,7 +64,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
             blockTypeState: blockTypeStateKey,
             mediaState: mediaStateKey,
             macroState: macroStateKey,
-            emojiState: emojiPluginKey,
             placeholderTextState: placeholderTextStateKey,
             layoutState: layoutStateKey
           },
@@ -74,7 +72,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               mediaState = _ref2.mediaState,
               _ref2$macroState = _ref2.macroState,
               macroState = _ref2$macroState === void 0 ? {} : _ref2$macroState,
-              emojiState = _ref2.emojiState,
               placeholderTextState = _ref2.placeholderTextState,
               layoutState = _ref2.layoutState;
             return /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -94,7 +91,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               blockTypeState: blockTypeState,
               mediaState: mediaState,
               macroState: macroState,
-              emojiState: emojiState,
               placeholderTextState: placeholderTextState,
               layoutState: layoutState,
               providers: providers,
@@ -130,16 +126,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     blockTypeState = _ref3.blockTypeState,
     mediaState = _ref3.mediaState,
     macroState = _ref3.macroState,
-    emojiState = _ref3.emojiState,
     placeholderTextState = _ref3.placeholderTextState,
     layoutState = _ref3.layoutState,
     featureFlags = _ref3.featureFlags;
   var buttons = toolbarSizeToButtons(toolbarSize);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
-    mentionState = _useSharedPluginState.mentionState;
+    mentionState = _useSharedPluginState.mentionState,
+    emojiState = _useSharedPluginState.emojiState;
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,

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

@@ -27,8 +27,7 @@ import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands
 import { insertExpand } from '../../../expand/commands';
 import { createTypeAheadTools } from '../../../type-ahead/api';
 import { updateStatusWithAnalytics } from '../../../status/actions';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
-import { insertEmoji } from '../../../emoji/commands/insert-emoji';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from './messages';
 import { createItems } from './create-items';
 import { BlockInsertMenu } from './block-insert-menu';
@@ -277,8 +276,10 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       };
     });
     _defineProperty(_assertThisInitialized(_this), "handleSelectedEmoji", function (emojiId) {
+      var _pluginInjectionApi$d8;
+      var pluginInjectionApi = _this.props.pluginInjectionApi;
       _this.props.editorView.focus();
-      insertEmoji(_this.editorAnalyticsAPI)(emojiId, INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.executeCommand((_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.emoji) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       _this.toggleEmojiPicker();
       return true;
     });

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

@@ -21,6 +21,7 @@ import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
@@ -245,13 +246,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
      * Get parent width for a nested media single node
      * @param view Editor view
      * @param pos node position
-     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
      */
     _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
+      if (isRichMediaInsideOfBlockNode(view, pos)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -263,6 +263,21 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       return null;
     });
+    /**
+     * Get parent width for a nested media single node for new experience
+     * @param view Editor view
+     * @param pos node position
+     */
+    _defineProperty(_assertThisInitialized(_this), "getLineLengthNext", function (view, pos) {
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      var $pos = view.state.doc.resolve(pos);
+      if ($pos && $pos.parent.type.name !== 'doc') {
+        return getParentWidthForNestedMediaSingleNode($pos, view);
+      }
+      return null;
+    });
     return _this;
   }
   _createClass(MediaSingleNode, [{
@@ -364,7 +379,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       var isSelected = selected();
       var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-      var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
+      var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -501,6 +516,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
       }
+      if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+        domRef.classList.add('media-extended-resize-experience');
+      }
       return domRef;
     }
   }, {

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

@@ -36,6 +36,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export { stateKey } from './plugin-key';
 export var MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export var MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
+export var MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
   var createElement = React.createElement;
@@ -66,6 +67,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     _defineProperty(this, "layout", 'center');
     _defineProperty(this, "mediaNodes", []);
     _defineProperty(this, "isResizing", false);
+    _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "destroyed", false);
     _defineProperty(this, "removeOnCloseListener", function () {});
     _defineProperty(this, "onPopupToggleCallback", function () {});
@@ -485,6 +487,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function setIsResizing(isResizing) {
       this.isResizing = isResizing;
     }
+  }, {
+    key: "setResizingWidth",
+    value: function setResizingWidth(width) {
+      this.resizingWidth = width;
+    }
   }, {
     key: "updateElement",
     value: function updateElement() {
@@ -626,9 +633,13 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
       },
       apply: function apply(tr, pluginState) {
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
+        var resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
         }
+        if (resizingWidth) {
+          pluginState.setResizingWidth(resizingWidth);
+        }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {

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

@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200 } from '@atlaskit/theme/colors';
 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))");
+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    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\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: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\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, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", 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

@@ -29,8 +29,8 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -258,12 +258,15 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
+          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
           if (!editorView) {
             return null;
           }
           var state = editorView.state,
             dispatch = editorView.dispatch;
           var selectedMediaSingleNode = getSelectedMediaSingle(state);
+          var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
+          var containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
@@ -271,13 +274,25 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           if (!selectedMediaNode) {
             return null;
           }
-          var singleMediaWidth = selectedMediaSingleNode.node.attrs.width;
+          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
+            singleMediaWidth = _selectedMediaSingleN.width,
+            widthType = _selectedMediaSingleN.widthType,
+            layout = _selectedMediaSingleN.layout;
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var pixelWidth = calcMediaSinglePixelWidth({
+            width: singleMediaWidth,
+            widthType: widthType,
+            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            layout: layout,
+            contentWidth: contentWidth,
+            containerWidth: containerWidth,
+            gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+          });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
-            width: singleMediaWidth,
+            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -297,11 +312,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
@@ -399,7 +412,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = getMediaLinkingState(state);
   var _ref3 = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {},
     hoverDecoration = _ref3.hoverDecoration;
-  if (!mediaPluginState || mediaPluginState.isResizing) {
+  if (!mediaPluginState) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -23,9 +23,11 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
+import throttle from 'lodash/throttle';
+import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -70,12 +72,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         layout = _this$props2.layout,
         state = _this$props2.view.state,
         containerWidth = _this$props2.containerWidth,
-        lineLength = _this$props2.lineLength;
+        lineLength = _this$props2.lineLength,
+        fullWidthMode = _this$props2.fullWidthMode;
       var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
       if (newPct <= 100) {
         if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
@@ -91,7 +94,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         };
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
+    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+      if (fullWidthMode) {
+        if (width < contentWidth) {
+          return 'center';
+        }
+        return 'full-width';
+      }
       if (width <= contentWidth) {
         return 'center';
       }
@@ -130,7 +139,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         state = _this$props$view.state,
         dispatch = _this$props$view.dispatch;
       var tr = state.tr;
-      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateSizeInPluginState", function (width) {
+      var _this$props$view2 = _this.props.view,
+        state = _this$props$view2.state,
+        dispatch = _this$props$view2.dispatch;
+      var tr = state.tr;
+      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     _defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
@@ -184,11 +201,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       });
       _this.selectCurrentMediaNode();
       _this.setIsResizing(true);
+      _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
       _this.guidelines = _this.getAllGuidelines();
       return 0;
     });
-    _defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
+    _defineProperty(_assertThisInitialized(_this), "handleResize", throttle(function (size, delta) {
       var _this$props4 = _this.props,
         originalWidth = _this$props4.width,
         originalHeight = _this$props4.height,
@@ -208,10 +226,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         },
         snaps: guidelineSnaps.snaps
       });
+      _this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
         originalWidth = _this$props5.width,
@@ -271,6 +290,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -296,6 +316,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
+      if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
+        // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
+        // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
+        this.setState(function (prevState) {
+          return {
+            size: {
+              width: calcMediaSingleMaxWidth(_this2.props.containerWidth),
+              height: prevState.size.height
+            }
+          };
+        });
+      }
       return true;
     }
 
@@ -455,7 +487,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
@@ -472,7 +504,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this2.insideInlineLike) {
+        if (side === 'left' && _this3.insideInlineLike) {
           enable[side] = false;
         }
       });

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

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
 import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -209,4 +209,22 @@ export function isCaptionNode(editorView) {
     return true;
   }
   return false;
-}
+}
+export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
+  var domNode = view.nodeDOM(resolvedPos.pos);
+  if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
+    var _view$state$schema$no = view.state.schema.nodes,
+      tableCell = _view$state$schema$no.tableCell,
+      tableHeader = _view$state$schema$no.tableHeader;
+    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
+      // since table has constant padding, use hardcoded constant instead of query the dom
+      var tablePadding = 8;
+      return domNode.parentElement.offsetWidth - tablePadding * 2;
+    }
+    return domNode.parentElement.offsetWidth;
+  }
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return null;
+};

package/dist/esm/plugins/text-color/commands/toggle-color.js

@@ -1,6 +1,7 @@
 import { toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { getDisabledState } from '../utils/disabled';
+import { pluginCommandToPMCommand } from '@atlaskit/editor-common/preset';
 export var toggleColor = function toggleColor(color) {
   return function (state, dispatch) {
     var textColor = state.schema.marks.textColor;
@@ -20,9 +21,9 @@ export var toggleColor = function toggleColor(color) {
         color: color
       });
       state.tr.scrollIntoView();
-      toggleMark(textColor, {
+      pluginCommandToPMCommand(toggleMark(textColor, {
         color: color
-      })(state, dispatch);
+      }))(state, dispatch);
     }
     return true;
   };

package/dist/esm/utils/document.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { getBreakoutMode } from './node-width';
 import { processRawValue, hasDocAsParent, getStepRange, isEmptyParagraph } from '@atlaskit/editor-common/utils';
+export { findFarthestParentNode } from '@atlaskit/editor-common/utils';
 
 /**
  * Checks if a node has any content. Ignores node that only contain empty block nodes.
@@ -50,28 +51,6 @@ export function processRawFragmentValue(schema, value, providerFactory, sanitize
   }
   return Fragment.from(adfEntities);
 }
-
-/**
- * Find the farthest node given a condition
- * @param predicate Function to check the node
- */
-export var findFarthestParentNode = function findFarthestParentNode(predicate) {
-  return function ($pos) {
-    var candidate = null;
-    for (var i = $pos.depth; i > 0; i--) {
-      var _node = $pos.node(i);
-      if (predicate(_node)) {
-        candidate = {
-          pos: i > 0 ? $pos.before(i) : 0,
-          start: $pos.start(i),
-          depth: i,
-          node: _node
-        };
-      }
-    }
-    return candidate;
-  };
-};
 export var isSelectionEndOfParagraph = function isSelectionEndOfParagraph(state) {
   return state.selection.$to.parent.type === state.schema.nodes.paragraph && state.selection.$to.pos === state.doc.resolve(state.selection.$to.pos).end();
 };

package/dist/esm/utils/index.js

@@ -2,7 +2,7 @@ import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { FakeTextCursorSelection } from '../plugins/fake-text-cursor/cursor';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { isNodeEmpty } from './document';
+export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { isNodeEmpty, findFarthestParentNode, isSelectionEndOfParagraph, nodesBetweenChanged, getNodesCount } from './document';
 export { sanitiseMarksInSelection } from './mark';
@@ -15,11 +15,6 @@ function isMarkTypeCompatibleWithMark(markType, mark) {
 function isMarkTypeAllowedInNode(markType, state) {
   return toggleMark(markType)(state);
 }
-export function isSelectionInsideLastNodeInDocument(selection) {
-  var docNode = selection.$anchor.node(0);
-  var rootNode = selection.$anchor.node(1);
-  return docNode.lastChild === rootNode;
-}
 export function getCursor(selection) {
   return selection.$cursor || undefined;
 }
@@ -67,36 +62,6 @@ export function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-export function checkNodeDown(selection, doc, filter) {
-  var ancestorDepth = findAncestorPosition(doc, selection.$to).depth;
-
-  // Top level node
-  if (ancestorDepth === 0) {
-    return false;
-  }
-  var res = doc.resolve(selection.$to.after(ancestorDepth));
-  return res.nodeAfter ? filter(res.nodeAfter) : false;
-}
-
-/**
- * Traverse the document until an "ancestor" is found. Any nestable block can be an ancestor.
- */
-function findAncestorPosition(doc, pos) {
-  var nestableBlocks = ['blockquote', 'bulletList', 'orderedList'];
-  if (pos.depth === 1) {
-    return pos;
-  }
-  var node = pos.node(pos.depth);
-  var newPos = pos;
-  while (pos.depth >= 1) {
-    pos = doc.resolve(pos.before(pos.depth));
-    node = pos.node(pos.depth);
-    if (node && nestableBlocks.indexOf(node.type.name) !== -1) {
-      newPos = pos;
-    }
-  }
-  return newPos;
-}
 var transformer = new JSONTransformer();
 export function toJSON(node) {
   return transformer.encode(node);
@@ -142,67 +107,6 @@ export function whichTransitionEvent() {
 export var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
-export var isEmptyNode = function isEmptyNode(schema) {
-  var _schema$nodes = schema.nodes,
-    doc = _schema$nodes.doc,
-    paragraph = _schema$nodes.paragraph,
-    codeBlock = _schema$nodes.codeBlock,
-    blockquote = _schema$nodes.blockquote,
-    panel = _schema$nodes.panel,
-    heading = _schema$nodes.heading,
-    listItem = _schema$nodes.listItem,
-    bulletList = _schema$nodes.bulletList,
-    orderedList = _schema$nodes.orderedList,
-    taskList = _schema$nodes.taskList,
-    taskItem = _schema$nodes.taskItem,
-    decisionList = _schema$nodes.decisionList,
-    decisionItem = _schema$nodes.decisionItem,
-    media = _schema$nodes.media,
-    mediaGroup = _schema$nodes.mediaGroup,
-    mediaSingle = _schema$nodes.mediaSingle;
-  var innerIsEmptyNode = function innerIsEmptyNode(node) {
-    switch (node.type) {
-      case media:
-      case mediaGroup:
-      case mediaSingle:
-        return false;
-      case paragraph:
-      case codeBlock:
-      case heading:
-      case taskItem:
-      case decisionItem:
-        return node.content.size === 0;
-      case blockquote:
-      case panel:
-      case listItem:
-        return node.content.size === 2 && innerIsEmptyNode(node.content.firstChild);
-      case bulletList:
-      case orderedList:
-        return node.content.size === 4 && innerIsEmptyNode(node.content.firstChild);
-      case taskList:
-      case decisionList:
-        return node.content.size === 2 && innerIsEmptyNode(node.content.firstChild);
-      case doc:
-        var isEmpty = true;
-        node.content.forEach(function (child) {
-          isEmpty = isEmpty && innerIsEmptyNode(child);
-        });
-        return isEmpty;
-      default:
-        return isNodeEmpty(node);
-    }
-  };
-  return innerIsEmptyNode;
-};
-export var insideTableCell = function insideTableCell(state) {
-  var _state$schema$nodes = state.schema.nodes,
-    tableCell = _state$schema$nodes.tableCell,
-    tableHeader = _state$schema$nodes.tableHeader;
-  return hasParentNodeOfType([tableCell, tableHeader])(state.selection);
-};
-export var isInListItem = function isInListItem(state) {
-  return hasParentNodeOfType(state.schema.nodes.listItem)(state.selection);
-};
 export var hasOpenEnd = function hasOpenEnd(slice) {
   return slice.openStart > 0 || slice.openEnd > 0;
 };