@atlaskit/editor-core 187.19.1 → 187.20.0

package/dist/cjs/utils/index.js

@@ -10,7 +10,12 @@ Object.defineProperty(exports, "SetAttrsStep", {
     return _steps.SetAttrsStep;
   }
 });
-exports.checkNodeDown = checkNodeDown;
+Object.defineProperty(exports, "checkNodeDown", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.checkNodeDown;
+  }
+});
 exports.compose = compose;
 exports.dedupe = dedupe;
 Object.defineProperty(exports, "findFarthestParentNode", {
@@ -33,14 +38,31 @@ Object.defineProperty(exports, "insideTable", {
     return _coreUtils.insideTable;
   }
 });
-exports.insideTableCell = void 0;
+Object.defineProperty(exports, "insideTableCell", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.insideTableCell;
+  }
+});
 Object.defineProperty(exports, "isElementInTableCell", {
   enumerable: true,
   get: function get() {
     return _utils2.isElementInTableCell;
   }
 });
-exports.isInsideBlockQuote = exports.isInListItem = exports.isEmptyNode = void 0;
+Object.defineProperty(exports, "isEmptyNode", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.isEmptyNode;
+  }
+});
+Object.defineProperty(exports, "isInListItem", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.isInListItem;
+  }
+});
+exports.isInsideBlockQuote = void 0;
 Object.defineProperty(exports, "isLastItemMediaGroup", {
   enumerable: true,
   get: function get() {
@@ -72,7 +94,12 @@ Object.defineProperty(exports, "isSelectionEndOfParagraph", {
     return _document.isSelectionEndOfParagraph;
   }
 });
-exports.isSelectionInsideLastNodeInDocument = isSelectionInsideLastNodeInDocument;
+Object.defineProperty(exports, "isSelectionInsideLastNodeInDocument", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.isSelectionInsideLastNodeInDocument;
+  }
+});
 exports.isTemporary = void 0;
 Object.defineProperty(exports, "isText", {
   enumerable: true,
@@ -138,13 +165,13 @@ var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
 var _cursor = require("../plugins/fake-text-cursor/cursor");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _document = require("./document");
+var _utils2 = require("@atlaskit/editor-common/utils");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _document = require("./document");
 var _mark = require("./mark");
 var _nodes = require("./nodes");
 var _selection = require("./selection");
 var _measureEnum = _interopRequireDefault(require("./performance/measure-enum"));
-var _utils2 = require("@atlaskit/editor-common/utils");
 var _steps = require("@atlaskit/adf-schema/steps");
 function isMarkTypeCompatibleWithMark(markType, mark) {
   return !mark.type.excludes(markType) && !markType.excludes(mark.type);
@@ -152,11 +179,6 @@ function isMarkTypeCompatibleWithMark(markType, mark) {
 function isMarkTypeAllowedInNode(markType, state) {
   return (0, _commands.toggleMark)(markType)(state);
 }
-function isSelectionInsideLastNodeInDocument(selection) {
-  var docNode = selection.$anchor.node(0);
-  var rootNode = selection.$anchor.node(1);
-  return docNode.lastChild === rootNode;
-}
 function getCursor(selection) {
   return selection.$cursor || undefined;
 }
@@ -204,36 +226,6 @@ function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-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 _editorJsonTransformer.JSONTransformer();
 function toJSON(node) {
   return transformer.encode(node);
@@ -280,70 +272,6 @@ var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
 exports.isTemporary = isTemporary;
-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 (0, _document.isNodeEmpty)(node);
-    }
-  };
-  return innerIsEmptyNode;
-};
-exports.isEmptyNode = isEmptyNode;
-var insideTableCell = function insideTableCell(state) {
-  var _state$schema$nodes = state.schema.nodes,
-    tableCell = _state$schema$nodes.tableCell,
-    tableHeader = _state$schema$nodes.tableHeader;
-  return (0, _utils.hasParentNodeOfType)([tableCell, tableHeader])(state.selection);
-};
-exports.insideTableCell = insideTableCell;
-var isInListItem = function isInListItem(state) {
-  return (0, _utils.hasParentNodeOfType)(state.schema.nodes.listItem)(state.selection);
-};
-exports.isInListItem = isInListItem;
 var hasOpenEnd = function hasOpenEnd(slice) {
   return slice.openStart > 0 || slice.openEnd > 0;
 };

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

@@ -3,48 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.atTheBeginningOfBlock = atTheBeginningOfBlock;
-exports.atTheBeginningOfDoc = atTheBeginningOfDoc;
-exports.atTheEndOfBlock = atTheEndOfBlock;
-exports.atTheEndOfDoc = atTheEndOfDoc;
-exports.endPositionOfParent = endPositionOfParent;
-exports.startPositionOfParent = startPositionOfParent;
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _selection = require("../../plugins/selection/gap-cursor/selection");
-function atTheEndOfDoc(state) {
-  var selection = state.selection,
-    doc = state.doc;
-  return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth;
-}
-function atTheBeginningOfDoc(state) {
-  var selection = state.selection;
-  return selection.$from.pos === selection.$from.depth;
-}
-function atTheEndOfBlock(state) {
-  var selection = state.selection;
-  var $to = selection.$to;
-  if (selection instanceof _selection.GapCursorSelection) {
-    return false;
+Object.defineProperty(exports, "atTheBeginningOfBlock", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheBeginningOfBlock;
   }
-  if (selection instanceof _state.NodeSelection && selection.node.isBlock) {
-    return true;
+});
+Object.defineProperty(exports, "atTheBeginningOfDoc", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheBeginningOfDoc;
+  }
+});
+Object.defineProperty(exports, "atTheEndOfBlock", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheEndOfBlock;
+  }
+});
+Object.defineProperty(exports, "atTheEndOfDoc", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheEndOfDoc;
   }
-  return endPositionOfParent($to) === $to.pos + 1;
-}
-function atTheBeginningOfBlock(state) {
-  var selection = state.selection;
-  var $from = selection.$from;
-  if (selection instanceof _selection.GapCursorSelection) {
-    return false;
+});
+Object.defineProperty(exports, "endPositionOfParent", {
+  enumerable: true,
+  get: function get() {
+    return _selection.endPositionOfParent;
   }
-  if (selection instanceof _state.NodeSelection && selection.node.isBlock) {
-    return true;
+});
+Object.defineProperty(exports, "startPositionOfParent", {
+  enumerable: true,
+  get: function get() {
+    return _selection.startPositionOfParent;
   }
-  return startPositionOfParent($from) === $from.pos;
-}
-function startPositionOfParent(resolvedPos) {
-  return resolvedPos.start(resolvedPos.depth);
-}
-function endPositionOfParent(resolvedPos) {
-  return resolvedPos.end(resolvedPos.depth) + 1;
-}
+});
+var _selection = require("@atlaskit/editor-common/selection");

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.19.1";
+var version = "187.20.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

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

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

@@ -3,34 +3,38 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
 export const insertEmoji = editorAnalyticsAPI => (emojiId, inputMethod) => {
-  return (state, dispatch) => {
+  return ({
+    tr
+  }) => {
+    const {
+      doc,
+      selection
+    } = tr;
     const {
       emoji
-    } = state.schema.nodes;
+    } = tr.doc.type.schema.nodes;
     if (emoji && emojiId) {
       const node = emoji.createChecked({
         ...emojiId,
         text: emojiId.fallback || emojiId.shortName
       });
-      const textNode = state.schema.text(' ');
-      if (dispatch) {
-        const fragment = Fragment.fromArray([node, textNode]);
-        const 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
-            },
-            eventType: EVENT_TYPE.TRACK
-          })(tr);
-        }
-        dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+      const textNode = doc.type.schema.text(' ');
+      const fragment = Fragment.fromArray([node, textNode]);
+      const 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
+          },
+          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/es2019/plugins/emoji/index.js

@@ -12,6 +12,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 const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
   title: emoji.shortName || '',
   key: emoji.id || emoji.shortName,
@@ -54,7 +55,8 @@ const memoizedToItem = memoize(emojiToTypeaheadItem);
 export const defaultListLimit = 50;
 const isFullShortName = query => query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 const TRIGGER = ':';
-const emojiPlugin = (options, api) => {
+export const emojiPlugin = (options, api) => {
+  var _api$dependencies$ana9;
   const typeAhead = {
     id: TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -175,6 +177,15 @@ const emojiPlugin = (options, api) => {
         }
       }];
     },
+    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: ({
         formatMessage
@@ -186,13 +197,13 @@ const emojiPlugin = (options, api) => {
         keyshortcut: ':',
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
         action(insert, state) {
-          var _api$dependencies$ana9;
+          var _api$dependencies$ana10;
           const 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,
@@ -208,7 +219,6 @@ const emojiPlugin = (options, api) => {
     }
   };
 };
-export default emojiPlugin;
 
 /**
  * Actions

package/dist/es2019/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/es2019/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';
@@ -62,7 +61,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState: blockTypeStateKey,
             mediaState: mediaStateKey,
             macroState: macroStateKey,
-            emojiState: emojiPluginKey,
             placeholderTextState: placeholderTextStateKey,
             layoutState: layoutStateKey
           },
@@ -70,7 +68,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState,
             mediaState,
             macroState = {},
-            emojiState,
             placeholderTextState,
             layoutState
           }) => /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -90,7 +87,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState: blockTypeState,
             mediaState: mediaState,
             macroState: macroState,
-            emojiState: emojiState,
             placeholderTextState: placeholderTextState,
             layoutState: layoutState,
             providers: providers,
@@ -124,7 +120,6 @@ function ToolbarInsertBlockWithInjectionApi({
   blockTypeState,
   mediaState,
   macroState,
-  emojiState,
   placeholderTextState,
   layoutState,
   featureFlags
@@ -135,8 +130,9 @@ function ToolbarInsertBlockWithInjectionApi({
     dateState,
     hyperlinkState,
     imageUploadState,
-    mentionState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention']);
+    mentionState,
+    emojiState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']);
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,

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

@@ -16,8 +16,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';
@@ -283,8 +282,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
+      var _pluginInjectionApi$d8;
+      const {
+        pluginInjectionApi
+      } = this.props;
       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/es2019/plugins/media/pm-plugins/main.js

@@ -27,6 +27,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export { stateKey } from './plugin-key';
 export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export const MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
+export const MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 const createDropPlaceholder = (intl, allowDropLine) => {
   const dropPlaceholder = document.createElement('div');
   const createElement = React.createElement;
@@ -55,6 +56,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "layout", 'center');
     _defineProperty(this, "mediaNodes", []);
     _defineProperty(this, "isResizing", false);
+    _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "destroyed", false);
     _defineProperty(this, "removeOnCloseListener", () => {});
     _defineProperty(this, "onPopupToggleCallback", () => {});
@@ -428,6 +430,9 @@ export class MediaPluginStateImplementation {
   setIsResizing(isResizing) {
     this.isResizing = isResizing;
   }
+  setResizingWidth(width) {
+    this.resizingWidth = width;
+  }
   updateElement() {
     let newElement;
     const selectedContainer = this.selectedMediaContainerNode();
@@ -530,9 +535,13 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
       },
       apply(tr, pluginState) {
         const isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
+        const 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/es2019/plugins/media/toolbar/index.js

@@ -25,8 +25,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';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -266,6 +266,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'custom',
         fallback: [],
         render: editorView => {
+          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
           if (!editorView) {
             return null;
           }
@@ -274,6 +275,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             dispatch
           } = editorView;
           const selectedMediaSingleNode = getSelectedMediaSingle(state);
+          const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
+          const 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;
           }
@@ -282,15 +285,26 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             return null;
           }
           const {
-            width: singleMediaWidth
+            width: singleMediaWidth,
+            widthType,
+            layout
           } = selectedMediaSingleNode.node.attrs;
           const {
             width: mediaWidth,
             height: mediaHeight
           } = selectedMediaNode.attrs;
+          const pixelWidth = calcMediaSinglePixelWidth({
+            width: singleMediaWidth,
+            widthType,
+            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            layout,
+            contentWidth,
+            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: value => {
@@ -312,11 +326,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
@@ -423,7 +435,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {};
-  if (!mediaPluginState || mediaPluginState.isResizing) {
+  if (!mediaPluginState) {
     return;
   }
   const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];