@atlaskit/editor-core 187.19.1 → 187.20.0

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

@@ -12,9 +12,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 const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -122,7 +124,16 @@ class ResizableMediaSingleNext extends React.Component {
         dispatch
       } = this.props.view;
       const tr = state.tr;
-      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    _defineProperty(this, "updateSizeInPluginState", width => {
+      const {
+        state,
+        dispatch
+      } = this.props.view;
+      const tr = state.tr;
+      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
@@ -167,11 +178,12 @@ class ResizableMediaSingleNext extends React.Component {
       });
       this.selectCurrentMediaNode();
       this.setIsResizing(true);
+      this.updateSizeInPluginState(this.state.size.width);
       // re-calucate guidelines
       this.guidelines = this.getAllGuidelines();
       return 0;
     });
-    _defineProperty(this, "handleResize", (size, delta) => {
+    _defineProperty(this, "handleResize", throttle((size, delta) => {
       const {
         width: originalWidth,
         height: originalHeight,
@@ -193,10 +205,11 @@ class ResizableMediaSingleNext extends React.Component {
         },
         snaps: guidelineSnaps.snaps
       });
+      this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
         width: originalWidth,

package/dist/es2019/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 const toggleColor = color => (state, dispatch) => {
   const {
     textColor
@@ -21,9 +22,9 @@ export const toggleColor = color => (state, dispatch) => {
       color
     });
     state.tr.scrollIntoView();
-    toggleMark(textColor, {
+    pluginCommandToPMCommand(toggleMark(textColor, {
       color
-    })(state, dispatch);
+    }))(state, dispatch);
   }
   return true;
 };

package/dist/es2019/utils/document.js

@@ -1,6 +1,7 @@
 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.
@@ -46,26 +47,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 const findFarthestParentNode = predicate => $pos => {
-  let candidate = null;
-  for (let i = $pos.depth; i > 0; i--) {
-    const node = $pos.node(i);
-    if (predicate(node)) {
-      candidate = {
-        pos: i > 0 ? $pos.before(i) : 0,
-        start: $pos.start(i),
-        depth: i,
-        node
-      };
-    }
-  }
-  return candidate;
-};
 export const isSelectionEndOfParagraph = state => state.selection.$to.parent.type === state.schema.nodes.paragraph && state.selection.$to.pos === state.doc.resolve(state.selection.$to.pos).end();
 export function getChangedNodesIn({
   tr,

package/dist/es2019/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) {
-  const docNode = selection.$anchor.node(0);
-  const 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) {
-  const ancestorDepth = findAncestorPosition(doc, selection.$to).depth;
-
-  // Top level node
-  if (ancestorDepth === 0) {
-    return false;
-  }
-  const 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) {
-  const nestableBlocks = ['blockquote', 'bulletList', 'orderedList'];
-  if (pos.depth === 1) {
-    return pos;
-  }
-  let node = pos.node(pos.depth);
-  let 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;
-}
 const transformer = new JSONTransformer();
 export function toJSON(node) {
   return transformer.encode(node);
@@ -142,69 +107,6 @@ export function whichTransitionEvent() {
 export const isTemporary = id => {
   return id.indexOf('temporary:') === 0;
 };
-export const isEmptyNode = schema => {
-  const {
-    doc,
-    paragraph,
-    codeBlock,
-    blockquote,
-    panel,
-    heading,
-    listItem,
-    bulletList,
-    orderedList,
-    taskList,
-    taskItem,
-    decisionList,
-    decisionItem,
-    media,
-    mediaGroup,
-    mediaSingle
-  } = schema.nodes;
-  const 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:
-        let isEmpty = true;
-        node.content.forEach(child => {
-          isEmpty = isEmpty && innerIsEmptyNode(child);
-        });
-        return isEmpty;
-      default:
-        return isNodeEmpty(node);
-    }
-  };
-  return innerIsEmptyNode;
-};
-export const insideTableCell = state => {
-  const {
-    tableCell,
-    tableHeader
-  } = state.schema.nodes;
-  return hasParentNodeOfType([tableCell, tableHeader])(state.selection);
-};
-export const isInListItem = state => {
-  return hasParentNodeOfType(state.schema.nodes.listItem)(state.selection);
-};
 export const hasOpenEnd = slice => {
   return slice.openStart > 0 || slice.openEnd > 0;
 };

package/dist/es2019/utils/prosemirror/position.js

@@ -1,51 +1 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { GapCursorSelection } from '../../plugins/selection/gap-cursor/selection';
-export function atTheEndOfDoc(state) {
-  const {
-    selection,
-    doc
-  } = state;
-  return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth;
-}
-export function atTheBeginningOfDoc(state) {
-  const {
-    selection
-  } = state;
-  return selection.$from.pos === selection.$from.depth;
-}
-export function atTheEndOfBlock(state) {
-  const {
-    selection
-  } = state;
-  const {
-    $to
-  } = selection;
-  if (selection instanceof GapCursorSelection) {
-    return false;
-  }
-  if (selection instanceof NodeSelection && selection.node.isBlock) {
-    return true;
-  }
-  return endPositionOfParent($to) === $to.pos + 1;
-}
-export function atTheBeginningOfBlock(state) {
-  const {
-    selection
-  } = state;
-  const {
-    $from
-  } = selection;
-  if (selection instanceof GapCursorSelection) {
-    return false;
-  }
-  if (selection instanceof NodeSelection && selection.node.isBlock) {
-    return true;
-  }
-  return startPositionOfParent($from) === $from.pos;
-}
-export function startPositionOfParent(resolvedPos) {
-  return resolvedPos.start(resolvedPos.depth);
-}
-export function endPositionOfParent(resolvedPos) {
-  return resolvedPos.end(resolvedPos.depth) + 1;
-}
+export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '@atlaskit/editor-common/selection';

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.19.1";
+export const version = "187.20.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.19.1",
+	"version": "187.20.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/emoji/commands/insert-emoji.js

@@ -7,32 +7,33 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
 export var insertEmoji = function insertEmoji(editorAnalyticsAPI) {
   return function (emojiId, inputMethod) {
-    return function (state, dispatch) {
-      var emoji = state.schema.nodes.emoji;
+    return function (_ref) {
+      var tr = _ref.tr;
+      var doc = tr.doc,
+        selection = tr.selection;
+      var emoji = tr.doc.type.schema.nodes.emoji;
       if (emoji && emojiId) {
         var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
           text: emojiId.fallback || emojiId.shortName
         }));
-        var textNode = state.schema.text(' ');
-        if (dispatch) {
-          var fragment = Fragment.fromArray([node, textNode]);
-          var tr = safeInsert(fragment)(state.tr);
-          if (inputMethod) {
-            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-              action: ACTION.INSERTED,
-              actionSubject: ACTION_SUBJECT.DOCUMENT,
-              actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
-              attributes: {
-                inputMethod: inputMethod
-              },
-              eventType: EVENT_TYPE.TRACK
-            })(tr);
-          }
-          dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        var textNode = doc.type.schema.text(' ');
+        var fragment = Fragment.fromArray([node, textNode]);
+        var newTr = safeInsert(fragment)(tr);
+        if (inputMethod) {
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: EVENT_TYPE.TRACK
+          })(newTr);
         }
-        return true;
+        newTr.setSelection(Selection.near(newTr.doc.resolve(selection.$from.pos + fragment.size)));
+        return newTr;
       }
-      return false;
+      return null;
     };
   };
 };

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

@@ -15,6 +15,7 @@ import { IconEmoji } from '@atlaskit/editor-common/quick-insert';
 import { EmojiNodeView } from './nodeviews/emoji';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openTypeAheadAtCursor } from '../type-ahead/transforms/open-typeahead-at-cursor';
+import { insertEmoji } from './commands/insert-emoji';
 export var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
   return {
     title: emoji.shortName || '',
@@ -60,7 +61,8 @@ var isFullShortName = function isFullShortName(query) {
   return query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 };
 var TRIGGER = ':';
-var emojiPlugin = function emojiPlugin(options, api) {
+export var emojiPlugin = function emojiPlugin(options, api) {
+  var _api$dependencies$ana9;
   var typeAhead = {
     id: TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -182,6 +184,15 @@ var emojiPlugin = function emojiPlugin(options, api) {
         }
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return emojiPluginKey.getState(editorState);
+    },
+    commands: {
+      insertEmoji: insertEmoji(api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions)
+    },
     pluginsOptions: {
       quickInsert: function quickInsert(_ref7) {
         var formatMessage = _ref7.formatMessage;
@@ -195,13 +206,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/React.createElement(IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana9;
+            var _api$dependencies$ana10;
             var tr = insert(undefined);
             openTypeAheadAtCursor({
               triggerHandler: typeAhead,
               inputMethod: INPUT_METHOD.QUICK_INSERT
             })(tr);
-            api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions.attachAnalyticsEvent({
+            api === null || api === void 0 ? void 0 : (_api$dependencies$ana10 = api.dependencies.analytics) === null || _api$dependencies$ana10 === void 0 ? void 0 : _api$dependencies$ana10.actions.attachAnalyticsEvent({
               action: ACTION.INVOKED,
               actionSubject: ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,
@@ -218,7 +229,6 @@ var emojiPlugin = function emojiPlugin(options, api) {
     }
   };
 };
-export default emojiPlugin;
 
 /**
  * Actions

package/dist/esm/plugins/index.js

@@ -6,7 +6,7 @@ export { default as clearMarksOnChangeToEmptyDocumentPlugin } from './clear-mark
 export { default as codeBlockPlugin } from './code-block';
 export { default as collabEditPlugin } from './collab-edit';
 export { default as datePlugin } from './date';
-export { default as emojiPlugin } from './emoji';
+export { emojiPlugin } from './emoji';
 export { default as extensionPlugin } from './extension';
 export { default as fakeTextCursorPlugin } from './fake-text-cursor';
 export { default as helpDialogPlugin } from './help-dialog';

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/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/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];