@atlaskit/editor-core 187.30.4 → 187.30.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 187.30.5
+
+### Patch Changes
+
+- [`ef2d5662e05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef2d5662e05) - [ux] Implement pixel entry input validation when submitting and render warning decoration for invalid input
+
 ## 187.30.4
 
 ### Patch Changes

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

@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaCard = require("@atlaskit/media-card");
 var _templateObject;
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-left::after,\n    .resizer-handle-right::after {\n      background: ", " !important;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
 
 /* `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/cjs/plugins/media/toolbar/index.js

@@ -28,13 +28,14 @@ var _messages2 = require("@atlaskit/editor-common/messages");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _filePreviewItem = require("./filePreviewItem");
 var _utils2 = require("./utils");
+var _mediaSingle = require("../utils/media-single");
 var _commands = require("./commands");
 var _styles = require("../nodeviews/styles");
 var _ImageBorder = _interopRequireDefault(require("../ui/ImageBorder"));
 var _currentMediaNode = require("../utils/current-media-node");
 var _imageBorder = require("./imageBorder");
 var _PixelEntry = require("../ui/PixelEntry");
-var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _mediaSingle2 = require("@atlaskit/editor-common/media-single");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -198,7 +199,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
-  var _pluginInjectionApi$d8;
+  var _pluginInjectionApi$d;
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -206,6 +207,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowResizingInTables = options.allowResizingInTables,
     allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
+  var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+    hoverDecoration = _ref.hoverDecoration;
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -219,12 +222,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var borderMark = (0, _currentMediaNode.currentMediaNodeBorderMark)(state);
         return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
           toggleBorder: function toggleBorder() {
-            var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(state, dispatch);
+            var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.analytics) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions)(state, dispatch);
           },
           setBorder: function setBorder(attrs) {
-            var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(attrs)(state, dispatch);
+            var _pluginInjectionApi$d4, _pluginInjectionApi$d5;
+            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions)(attrs)(state, dispatch);
           },
           showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
           borderMark: borderMark,
@@ -237,7 +240,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAdvancedToolBarOptions) {
-    var _pluginInjectionApi$d5;
+    var _pluginInjectionApi$d6;
     var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
     var isChangingLayoutDisabled = false;
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
@@ -251,7 +254,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       }
     }
-    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
+    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -272,11 +275,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var state = editorView.state,
             dispatch = editorView.dispatch;
           var selectedMediaSingleNode = (0, _utils2.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) || _editorSharedStyles.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) || _editorSharedStyles.akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
+          var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.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) || _editorSharedStyles.akEditorFullWidthLayoutWidth;
           var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
             return null;
@@ -288,30 +291,44 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var maxWidthForNestedNode = (0, _mediaSingle2.getMaxWidthForNestedNodeNext)(editorView, selectedMediaSingleNode.pos);
+          var maxWidth = maxWidthForNestedNode || _editorSharedStyles.akEditorFullWidthLayoutWidth;
+          var isVideoFile = (0, _mediaSingle.isVideo)(selectedMediaNode.attrs.__fileMimeType);
+          var minWidth = (0, _mediaSingle2.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
           var isLegacy = widthType !== 'pixel';
-          var pixelWidth = (0, _mediaSingle.calcMediaSinglePixelWidth)({
+          var pixelWidth = (0, _mediaSingle2.calcMediaSinglePixelWidth)({
             width: singleMediaWidth,
             widthType: widthType,
-            origWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
+            origWidth: mediaWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH,
             layout: layout,
-            contentWidth: (0, _mediaSingle.getMaxWidthForNestedNode)(editorView, selectedMediaSingleNode.pos) || contentWidth,
+            contentWidth: (0, _mediaSingle2.getMaxWidthForNestedNode)(editorView, selectedMediaSingleNode.pos) || contentWidth,
             containerWidth: containerWidth,
-            gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+            gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
           });
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             showMigration: !pluginState.isResizing && isLegacy,
-            mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
-            mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
+            mediaWidth: mediaWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH,
+            mediaHeight: mediaHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
             validate: function validate(value) {
-              if (value !== '' && !isNaN(value) && value >= _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
-                return true;
+              if (value && (value < minWidth || value > maxWidth)) {
+                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
+              } else {
+                // remove decoration when:
+                // input is within min-max range or
+                // input is empty
+                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
+              }
+              if (value === '') {
+                return false;
               }
-              return false;
+              return true;
             },
-            onSubmit: function onSubmit(_ref) {
-              var width = _ref.width;
+            onSubmit: function onSubmit(_ref2) {
+              var width = _ref2.width;
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
                 width: width,
                 widthType: 'pixel'
@@ -356,10 +373,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$d6;
+                var _pluginInjectionApi$d7;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions.attachAnalyticsEvent({
                   eventType: _analytics.EVENT_TYPE.TRACK,
                   action: _analytics.ACTION.VISITED,
                   actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -385,13 +402,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$d7;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions), {
+    var _pluginInjectionApi$d8;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.actions), {
       type: 'separator'
     });
   }
-  var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
-    hoverDecoration = _ref2.hoverDecoration;
   var removeButton = {
     id: 'editor.media.delete',
     type: 'button',

package/dist/cjs/plugins/media/ui/PixelEntry/index.js

@@ -27,6 +27,8 @@ var PixelEntry = function PixelEntry(_ref) {
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
     validate = _ref.validate,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate;
@@ -54,18 +56,33 @@ var PixelEntry = function PixelEntry(_ref) {
   // Handle submit when user presses enter in form
   var handleOnSubmit = function handleOnSubmit(data) {
     if (onSubmit) {
-      if (data.inputWidth === '') {
-        return;
+      var widthToBeSumitted = data.inputWidth;
+      var isInvalidInput = false;
+      if (data.inputWidth < minWidth) {
+        widthToBeSumitted = minWidth;
+        isInvalidInput = true;
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSumitted = maxWidth;
+        isInvalidInput = true;
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (isInvalidInput) {
+        setComputedWidth(widthToBeSumitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: data.inputWidth
+        width: widthToBeSumitted
       });
     }
   };
 
   // Syncronous validation returning undefined for valid and string for invalid
   var handleValidateWidth = (0, _react2.useCallback)(function (value) {
-    if (!value || !validate) {
+    if (!validate || value === undefined) {
       return;
     }
     if (validate) {
@@ -83,16 +100,20 @@ var PixelEntry = function PixelEntry(_ref) {
         case 'inputWidth':
           {
             setComputedWidth(newInputValue);
-            if (!isNaN(value)) {
+            if (newInputValue) {
               setComputedHeight(Math.round(ratioWidth * value));
+            } else {
+              setComputedHeight('');
             }
             break;
           }
         case 'inputHeight':
           {
             setComputedHeight(newInputValue);
-            if (!isNaN(value)) {
+            if (newInputValue) {
               setComputedWidth(Math.round(ratioHeight * value));
+            } else {
+              setComputedWidth('');
             }
             break;
           }
@@ -126,7 +147,9 @@ var PixelEntry = function PixelEntry(_ref) {
       var fieldProps = _ref3.fieldProps;
       return (0, _react.jsx)(_tooltip.default, {
         hideTooltipOnMouseDown: true,
-        content: formatMessage(_messages.messages.inputWidthTooltip),
+        content: formatMessage(_messages.messages.inputWidthTooltip, {
+          maxWidth: maxWidth
+        }),
         position: "top"
       }, (0, _react.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
         css: [_styles.pixelSizingWidthInput, _styles.pixelSizingInput],
@@ -134,7 +157,9 @@ var PixelEntry = function PixelEntry(_ref) {
         isCompact: true,
         onChange: handleOnChange('inputWidth'),
         pattern: "\\d*",
-        "aria-label": formatMessage(_messages.messages.inputWidthAriaLabel)
+        "aria-label": formatMessage(_messages.messages.inputWidthAriaLabel, {
+          maxWidth: maxWidth
+        })
       })));
     }), (0, _react.jsx)("span", {
       css: _styles.pixelSizingLabel

package/dist/cjs/plugins/media/ui/PixelEntry/messages.js

@@ -13,12 +13,12 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   inputWidthTooltip: {
     id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
-    defaultMessage: 'Width',
+    defaultMessage: 'Max width {maxWidth}px',
     description: 'The tooltip displayed ontop of the width input'
   },
   inputWidthAriaLabel: {
     id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
-    defaultMessage: 'width input',
+    defaultMessage: 'Max width {maxWidth}px',
     description: 'The width input aria label'
   },
   inputHeightTooltip: {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.getParentWidthForNestedMediaSingleNode = exports.createMediaSingleNode = void 0;
+exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
 exports.isCaptionNode = isCaptionNode;
 exports.isVideo = exports.isMediaSingle = void 0;
 exports.transformSliceForMedia = transformSliceForMedia;
@@ -225,23 +225,4 @@ function isCaptionNode(editorView) {
 var isVideo = function isVideo(fileType) {
   return !!fileType && fileType.includes('video');
 };
-exports.isVideo = isVideo;
-var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
-  var domNode = view.nodeDOM(resolvedPos.pos);
-  if (resolvedPos.nodeAfter && _utils3.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;
-};
-exports.getParentWidthForNestedMediaSingleNode = getParentWidthForNestedMediaSingleNode;
+exports.isVideo = isVideo;

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.30.4";
+var version = "187.30.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
-import { N60, B200 } from '@atlaskit/theme/colors';
+import { N60, B200, Y500 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
 export const mediaStyles = css`
   .ProseMirror {
@@ -158,6 +158,26 @@ export const mediaStyles = css`
       box-shadow: none;
     }
   }
+
+  .warning {
+    /* Media single */
+    .${richMediaClassName} .${fileCardImageViewSelector}::after {
+      border: 1px solid ${`var(--ds-border-warning, ${Y500})`};
+    }
+
+    .${richMediaClassName} .${inlinePlayerClassName}::after {
+      border: 1px solid ${`var(--ds-border-warning, ${Y500})`};
+    }
+
+    .${richMediaClassName} .${newFileExperienceClassName} {
+      box-shadow: 0 0 0 1px ${`var(--ds-border-warning, ${Y500})`} !important;
+    }
+
+    .resizer-handle-left::after,
+    .resizer-handle-right::after {
+      background: ${`var(--ds-icon-warning, ${Y500})`} !important;
+    }
+  }
 `;
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with

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

@@ -19,13 +19,14 @@ import { cardMessages } from '@atlaskit/editor-common/messages';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 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_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, getMaxWidthForNestedNode } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -191,7 +192,7 @@ const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hover
   return items;
 };
 const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) => {
-  var _pluginInjectionApi$d8;
+  var _pluginInjectionApi$d;
   const {
     mediaSingle
   } = state.schema.nodes;
@@ -203,6 +204,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     allowAltTextOnImages
   } = options;
   let toolbarButtons = [];
+  const {
+    hoverDecoration
+  } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -218,12 +222,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         const borderMark = currentMediaNodeBorderMark(state);
         return /*#__PURE__*/React.createElement(ImageBorderItem, {
           toggleBorder: () => {
-            var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-            toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(state, dispatch);
+            var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+            toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.analytics) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions)(state, dispatch);
           },
           setBorder: attrs => {
-            var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-            setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(attrs)(state, dispatch);
+            var _pluginInjectionApi$d4, _pluginInjectionApi$d5;
+            setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions)(attrs)(state, dispatch);
           },
           showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
           borderMark: borderMark,
@@ -236,7 +240,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     });
   }
   if (allowAdvancedToolBarOptions) {
-    var _pluginInjectionApi$d5;
+    var _pluginInjectionApi$d6;
     const widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
     let isChangingLayoutDisabled = false;
     if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
@@ -252,7 +256,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         }
       }
     }
-    const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
+    const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [...toolbarButtons, ...layoutButtons];
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -275,11 +279,11 @@ 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;
           }
+          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;
           const selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
             return null;
@@ -293,6 +297,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             width: mediaWidth,
             height: mediaHeight
           } = selectedMediaNode.attrs;
+          const maxWidthForNestedNode = getMaxWidthForNestedNodeNext(editorView, selectedMediaSingleNode.pos);
+          const maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
+          const isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
+          const minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
           const isLegacy = widthType !== 'pixel';
           const pixelWidth = calcMediaSinglePixelWidth({
             width: singleMediaWidth,
@@ -309,11 +317,21 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
             validate: value => {
-              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
-                return true;
+              if (value && (value < minWidth || value > maxWidth)) {
+                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
+              } else {
+                // remove decoration when:
+                // input is within min-max range or
+                // input is empty
+                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
+              }
+              if (value === '') {
+                return false;
               }
-              return false;
+              return true;
             },
             onSubmit: ({
               width
@@ -366,14 +384,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             };
             const openLink = () => {
               if (editorView) {
-                var _pluginInjectionApi$d6;
+                var _pluginInjectionApi$d7;
                 const {
                   state: {
                     tr
                   },
                   dispatch
                 } = editorView;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -399,14 +417,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$d7;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions), {
+    var _pluginInjectionApi$d8;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.actions), {
       type: 'separator'
     });
   }
-  const {
-    hoverDecoration
-  } = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {};
   const removeButton = {
     id: 'editor.media.delete',
     type: 'button',

package/dist/es2019/plugins/media/ui/PixelEntry/index.js

@@ -15,6 +15,8 @@ export const PixelEntry = ({
   mediaHeight,
   onSubmit,
   validate,
+  minWidth,
+  maxWidth,
   intl: {
     formatMessage
   },
@@ -39,18 +41,33 @@ export const PixelEntry = ({
   // Handle submit when user presses enter in form
   const handleOnSubmit = data => {
     if (onSubmit) {
-      if (data.inputWidth === '') {
-        return;
+      let widthToBeSumitted = data.inputWidth;
+      let isInvalidInput = false;
+      if (data.inputWidth < minWidth) {
+        widthToBeSumitted = minWidth;
+        isInvalidInput = true;
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSumitted = maxWidth;
+        isInvalidInput = true;
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (isInvalidInput) {
+        setComputedWidth(widthToBeSumitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: data.inputWidth
+        width: widthToBeSumitted
       });
     }
   };
 
   // Syncronous validation returning undefined for valid and string for invalid
   const handleValidateWidth = useCallback(value => {
-    if (!value || !validate) {
+    if (!validate || value === undefined) {
       return;
     }
     if (validate) {
@@ -67,16 +84,20 @@ export const PixelEntry = ({
       case 'inputWidth':
         {
           setComputedWidth(newInputValue);
-          if (!isNaN(value)) {
+          if (newInputValue) {
             setComputedHeight(Math.round(ratioWidth * value));
+          } else {
+            setComputedHeight('');
           }
           break;
         }
       case 'inputHeight':
         {
           setComputedHeight(newInputValue);
-          if (!isNaN(value)) {
+          if (newInputValue) {
             setComputedWidth(Math.round(ratioHeight * value));
+          } else {
+            setComputedWidth('');
           }
           break;
         }
@@ -110,7 +131,9 @@ export const PixelEntry = ({
       fieldProps
     }) => jsx(Tooltip, {
       hideTooltipOnMouseDown: true,
-      content: formatMessage(messages.inputWidthTooltip),
+      content: formatMessage(messages.inputWidthTooltip, {
+        maxWidth
+      }),
       position: "top"
     }, jsx(Textfield, _extends({}, fieldProps, {
       css: [pixelSizingWidthInput, pixelSizingInput],
@@ -118,7 +141,9 @@ export const PixelEntry = ({
       isCompact: true,
       onChange: handleOnChange('inputWidth'),
       pattern: "\\d*",
-      "aria-label": formatMessage(messages.inputWidthAriaLabel)
+      "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+        maxWidth
+      })
     })))), jsx("span", {
       css: pixelSizingLabel
     }, "x"), jsx(Field, {

package/dist/es2019/plugins/media/ui/PixelEntry/messages.js

@@ -7,12 +7,12 @@ export const messages = defineMessages({
   },
   inputWidthTooltip: {
     id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
-    defaultMessage: 'Width',
+    defaultMessage: 'Max width {maxWidth}px',
     description: 'The tooltip displayed ontop of the width input'
   },
   inputWidthAriaLabel: {
     id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
-    defaultMessage: 'width input',
+    defaultMessage: 'Max width {maxWidth}px',
     description: 'The width input aria label'
   },
   inputHeightTooltip: {

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

@@ -2,7 +2,7 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
 import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
@@ -217,23 +217,4 @@ export function isCaptionNode(editorView) {
   }
   return false;
 }
-export const isVideo = fileType => !!fileType && fileType.includes('video');
-export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
-  const domNode = view.nodeDOM(resolvedPos.pos);
-  if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
-    const {
-      tableCell,
-      tableHeader
-    } = view.state.schema.nodes;
-    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
-      // since table has constant padding, use hardcoded constant instead of query the dom
-      const tablePadding = 8;
-      return domNode.parentElement.offsetWidth - tablePadding * 2;
-    }
-    return domNode.parentElement.offsetWidth;
-  }
-  if (domNode instanceof HTMLElement) {
-    return domNode.offsetWidth;
-  }
-  return null;
-};
+export const isVideo = fileType => !!fileType && fileType.includes('video');

package/dist/es2019/version-wrapper.js

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

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

@@ -3,9 +3,9 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
-import { N60, B200 } from '@atlaskit/theme/colors';
+import { N60, B200, Y500 } 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    .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))");
+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\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-left::after,\n    .resizer-handle-right::after {\n      background: ", " !important;\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))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
 
 /* `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

@@ -23,13 +23,14 @@ import { cardMessages } from '@atlaskit/editor-common/messages';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { isVideo } from '../utils/media-single';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 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_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, getMaxWidthForNestedNode } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -191,7 +192,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
-  var _pluginInjectionApi$d8;
+  var _pluginInjectionApi$d;
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -199,6 +200,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowResizingInTables = options.allowResizingInTables,
     allowAltTextOnImages = options.allowAltTextOnImages;
   var toolbarButtons = [];
+  var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+    hoverDecoration = _ref.hoverDecoration;
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -212,12 +215,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var borderMark = currentMediaNodeBorderMark(state);
         return /*#__PURE__*/React.createElement(ImageBorderItem, {
           toggleBorder: function toggleBorder() {
-            var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-            toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(state, dispatch);
+            var _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+            toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.analytics) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.actions)(state, dispatch);
           },
           setBorder: function setBorder(attrs) {
-            var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-            setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(attrs)(state, dispatch);
+            var _pluginInjectionApi$d4, _pluginInjectionApi$d5;
+            setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions)(attrs)(state, dispatch);
           },
           showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
           borderMark: borderMark,
@@ -230,7 +233,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAdvancedToolBarOptions) {
-    var _pluginInjectionApi$d5;
+    var _pluginInjectionApi$d6;
     var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
     var isChangingLayoutDisabled = false;
     if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
@@ -244,7 +247,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
       }
     }
-    var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
+    var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -265,11 +268,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           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;
           }
+          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;
           var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
           if (!selectedMediaNode) {
             return null;
@@ -281,6 +284,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var maxWidthForNestedNode = getMaxWidthForNestedNodeNext(editorView, selectedMediaSingleNode.pos);
+          var maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
+          var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
+          var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
           var isLegacy = widthType !== 'pixel';
           var pixelWidth = calcMediaSinglePixelWidth({
             width: singleMediaWidth,
@@ -297,14 +304,24 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
+            minWidth: minWidth,
+            maxWidth: maxWidth,
             validate: function validate(value) {
-              if (value !== '' && !isNaN(value) && value >= MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH && value <= akEditorFullWidthLayoutWidth) {
-                return true;
+              if (value && (value < minWidth || value > maxWidth)) {
+                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
+              } else {
+                // remove decoration when:
+                // input is within min-max range or
+                // input is empty
+                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
+              }
+              if (value === '') {
+                return false;
               }
-              return false;
+              return true;
             },
-            onSubmit: function onSubmit(_ref) {
-              var width = _ref.width;
+            onSubmit: function onSubmit(_ref2) {
+              var width = _ref2.width;
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
                 width: width,
                 widthType: 'pixel'
@@ -349,10 +366,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$d6;
+                var _pluginInjectionApi$d7;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -378,13 +395,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$d7;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions), {
+    var _pluginInjectionApi$d8;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.actions), {
       type: 'separator'
     });
   }
-  var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
-    hoverDecoration = _ref2.hoverDecoration;
   var removeButton = {
     id: 'editor.media.delete',
     type: 'button',

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

@@ -16,6 +16,8 @@ export var PixelEntry = function PixelEntry(_ref) {
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
     validate = _ref.validate,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate;
@@ -43,18 +45,33 @@ export var PixelEntry = function PixelEntry(_ref) {
   // Handle submit when user presses enter in form
   var handleOnSubmit = function handleOnSubmit(data) {
     if (onSubmit) {
-      if (data.inputWidth === '') {
-        return;
+      var widthToBeSumitted = data.inputWidth;
+      var isInvalidInput = false;
+      if (data.inputWidth < minWidth) {
+        widthToBeSumitted = minWidth;
+        isInvalidInput = true;
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSumitted = maxWidth;
+        isInvalidInput = true;
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (isInvalidInput) {
+        setComputedWidth(widthToBeSumitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: data.inputWidth
+        width: widthToBeSumitted
       });
     }
   };
 
   // Syncronous validation returning undefined for valid and string for invalid
   var handleValidateWidth = useCallback(function (value) {
-    if (!value || !validate) {
+    if (!validate || value === undefined) {
       return;
     }
     if (validate) {
@@ -72,16 +89,20 @@ export var PixelEntry = function PixelEntry(_ref) {
         case 'inputWidth':
           {
             setComputedWidth(newInputValue);
-            if (!isNaN(value)) {
+            if (newInputValue) {
               setComputedHeight(Math.round(ratioWidth * value));
+            } else {
+              setComputedHeight('');
             }
             break;
           }
         case 'inputHeight':
           {
             setComputedHeight(newInputValue);
-            if (!isNaN(value)) {
+            if (newInputValue) {
               setComputedWidth(Math.round(ratioHeight * value));
+            } else {
+              setComputedWidth('');
             }
             break;
           }
@@ -115,7 +136,9 @@ export var PixelEntry = function PixelEntry(_ref) {
       var fieldProps = _ref3.fieldProps;
       return jsx(Tooltip, {
         hideTooltipOnMouseDown: true,
-        content: formatMessage(messages.inputWidthTooltip),
+        content: formatMessage(messages.inputWidthTooltip, {
+          maxWidth: maxWidth
+        }),
         position: "top"
       }, jsx(Textfield, _extends({}, fieldProps, {
         css: [pixelSizingWidthInput, pixelSizingInput],
@@ -123,7 +146,9 @@ export var PixelEntry = function PixelEntry(_ref) {
         isCompact: true,
         onChange: handleOnChange('inputWidth'),
         pattern: "\\d*",
-        "aria-label": formatMessage(messages.inputWidthAriaLabel)
+        "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+          maxWidth: maxWidth
+        })
       })));
     }), jsx("span", {
       css: pixelSizingLabel

package/dist/esm/plugins/media/ui/PixelEntry/messages.js

@@ -7,12 +7,12 @@ export var messages = defineMessages({
   },
   inputWidthTooltip: {
     id: 'fabric.editor.media.pixelEntry.inputWidthTooltip',
-    defaultMessage: 'Width',
+    defaultMessage: 'Max width {maxWidth}px',
     description: 'The tooltip displayed ontop of the width input'
   },
   inputWidthAriaLabel: {
     id: 'fabric.editor.media.pixelEntry.inputWidthAriaLabel',
-    defaultMessage: 'width input',
+    defaultMessage: 'Max width {maxWidth}px',
     description: 'The width input aria label'
   },
   inputHeightTooltip: {

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

@@ -5,7 +5,7 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
 import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
@@ -210,22 +210,4 @@ export function isCaptionNode(editorView) {
 }
 export var isVideo = function isVideo(fileType) {
   return !!fileType && fileType.includes('video');
-};
-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/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.30.4";
+export var version = "187.30.5";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/media/ui/PixelEntry/index.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, minWidth, maxWidth, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;

package/dist/types/plugins/media/ui/PixelEntry/types.d.ts

@@ -16,6 +16,14 @@ export type PixelEntryProps = {
      * The original media height used to calculate the width
      */
     mediaHeight: number;
+    /**
+     * The minimum acceptable width input
+     */
+    minWidth: number;
+    /**
+     * The maximum acceptable width input
+     */
+    maxWidth: number;
     /**
      * show migration button to convert to pixels for legacy image resize experience
      */
@@ -35,8 +43,8 @@ export type PixelEntryProps = {
     onMigrate?: () => void;
 };
 export type PixelEntryFormValues = {
-    inputWidth: number | '';
-    inputHeight: number | '';
+    inputWidth: number;
+    inputHeight: number;
 };
 export type PixelEntryFormData = {
     width: number;

package/dist/types/plugins/media/utils/media-single.d.ts

@@ -1,4 +1,4 @@
-import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
 import { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
@@ -20,4 +20,3 @@ export declare const createMediaSingleNode: (schema: Schema, collection: string,
 export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
 export declare function isCaptionNode(editorView: EditorView): boolean;
 export declare const isVideo: (fileType?: string) => boolean;
-export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/dist/types-ts4.5/plugins/media/ui/PixelEntry/index.d.ts

@@ -1,4 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, minWidth, maxWidth, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;

package/dist/types-ts4.5/plugins/media/ui/PixelEntry/types.d.ts

@@ -16,6 +16,14 @@ export type PixelEntryProps = {
      * The original media height used to calculate the width
      */
     mediaHeight: number;
+    /**
+     * The minimum acceptable width input
+     */
+    minWidth: number;
+    /**
+     * The maximum acceptable width input
+     */
+    maxWidth: number;
     /**
      * show migration button to convert to pixels for legacy image resize experience
      */
@@ -35,8 +43,8 @@ export type PixelEntryProps = {
     onMigrate?: () => void;
 };
 export type PixelEntryFormValues = {
-    inputWidth: number | '';
-    inputHeight: number | '';
+    inputWidth: number;
+    inputHeight: number;
 };
 export type PixelEntryFormData = {
     width: number;

package/dist/types-ts4.5/plugins/media/utils/media-single.d.ts

@@ -1,4 +1,4 @@
-import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
 import { Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
@@ -20,4 +20,3 @@ export declare const createMediaSingleNode: (schema: Schema, collection: string,
 export declare function transformSliceForMedia(slice: Slice, schema: Schema): (selection: Selection) => Slice;
 export declare function isCaptionNode(editorView: EditorView): boolean;
 export declare const isVideo: (fileType?: string) => boolean;
-export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.30.4",
+  "version": "187.30.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"