@atlaskit/editor-core 187.41.1 → 187.41.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 187.41.4
+
+### Patch Changes
+
+- [`aeb5c9a01e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aeb5c9a01e8) - Delete adf-schema from AFE and rely on npm package for adf-schema
+- [`111ff4f4f1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/111ff4f4f1f) - Add input resizing event analytics
+- [`da629b62ef9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da629b62ef9) - ED-19617 Refactor actions to remove createExtenstionAPI and call it instead during initialisation
+- [`4b4dcfe0bba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4b4dcfe0bba) - Delete adf-schema, use published version
+- Updated dependencies
+
+## 187.41.3
+
+### Patch Changes
+
+- [`85b6a5da67a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85b6a5da67a) - [ux] Fix [Regression] keyboard selections within actions are unpredictable
+
 ## 187.41.1
 
 ### Patch Changes
@@ -15075,105 +15091,105 @@ Remove applicationCard node and action mark
 
 ## 87.6.1
 
-- [patch][bdc9961" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bdc9961"
+- [patch][bdc9961](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bdc9961"
   d):
 
   - Fixes the codeblock insert rules
 
 ## 87.6.0
 
-- [minor][bb3336a" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bb3336a"
+- [minor][bb3336a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bb3336a"
   d):
 
   - Make text formatting toolbar account for different item titles legnths
 
 ## 87.5.0
 
-- [minor][d182ad9" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d182ad9"
+- [minor][d182ad9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d182ad9"
   d):
 
   - Add <-> to ↔︎ convertion rule
 
 ## 87.4.3
 
-- [patch][8fb4b1e" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8fb4b1e"
+- [patch][8fb4b1e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8fb4b1e"
   d):
 
   - ED-5274 Fixes tables have excessive margin above
 
 ## 87.4.2
 
-- [patch][4cc767e" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4cc767e"
+- [patch][4cc767e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4cc767e"
   d):
 
   - ED-5030: Fixed gap-cursor on nodeviews in breakout mode.
 
 ## 87.4.1
 
-- [patch][abd19cd" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/abd19cd"
+- [patch][abd19cd](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/abd19cd"
   d):
 
   - ED-5616: fix inline cursor navigation
 
 ## 87.4.0
 
-- [minor][5981cec" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5981cec"
+- [minor][5981cec](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5981cec"
   d):
 
   - TypeAhead to preserve marks
 
 ## 87.3.2
 
-- [patch][14d581b" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/14d581b"
+- [patch][14d581b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/14d581b"
   d):
 
   - Disable clear formatting menu when there is no formatting
 
 ## 87.3.1
 
-- [patch][52f5b51" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/52f5b51"
+- [patch][52f5b51](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/52f5b51"
   d):
 
   - ED-4366: fix text selection inside table cell on triple click
 
 ## 87.3.0
 
-- [minor][b911028" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b911028"
+- [minor][b911028](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b911028"
   d):
 
   - Show selected color in a table contextual menu
 
 ## 87.2.0
 
-- [minor][746c927" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/746c927"
+- [minor][746c927](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/746c927"
   d):
 
   - Add buffer to the bottom fullpage editor
 
 ## 87.1.13
 
-- [patch][f3d067d" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f3d067d"
+- [patch][f3d067d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f3d067d"
   d):
 
   - Fix font size for numbered column in tables with dynamic text sizing
 
 ## 87.1.12
 
-- [patch][534f6ab" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/534f6ab"
+- [patch][534f6ab](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/534f6ab"
   d):
 
   - ED-5615: Fix block element padding inside table cells.
 
 ## 87.1.11
 
-- [patch][cb4168f" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cb4168f"
+- [patch][cb4168f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cb4168f"
   d):
 
   - ED-5307: make text white for selected heading menu item
 
 ## 87.1.10
 
-- [patch][db65837" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/db65837"
+- [patch][db65837](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/db65837"
   d):
 
   - ED-3762: fix setting text cursor when clicking on editor gutter
@@ -15186,7 +15202,7 @@ Remove applicationCard node and action mark
 
 ## 87.1.8
 
-- [patch][3c505aa" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3c505aa"
+- [patch][3c505aa](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3c505aa"
   d):
 
   - Adds Danish and Romanian translations
@@ -15199,14 +15215,14 @@ Remove applicationCard node and action mark
 
 ## 87.1.6
 
-- [patch][6201223" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6201223"
+- [patch][6201223](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6201223"
   d):
 
   - Add examples.
 
 ## 87.1.5
 
-- [patch][1662ae0" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1662ae0"
+- [patch][1662ae0](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1662ae0"
   d):
 
   - ED-5440 convert sections to use percentages

package/dist/cjs/plugins/extension/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _adfSchema = require("@atlaskit/adf-schema");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _main = require("./pm-plugins/main");
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _uniqueId = require("./pm-plugins/unique-id");
@@ -13,11 +14,16 @@ var _toolbar = require("./toolbar");
 var _contextPanel = require("./context-panel");
 var _extensionApi = require("./extension-api");
 var extensionPlugin = function extensionPlugin(_ref) {
-  var _api$featureFlags, _api$contextPanel2, _api$contextPanel3;
+  var _api$featureFlags, _api$contextPanel3, _api$contextPanel4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
-    api = _ref.api;
-  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+    _api = _ref.api;
+  var featureFlags = (_api === null || _api === void 0 ? void 0 : (_api$featureFlags = _api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  var editorViewRef = {
+    current: null
+  };
   return {
     name: 'extension',
     nodes: function nodes() {
@@ -41,7 +47,7 @@ var extensionPlugin = function extensionPlugin(_ref) {
             portalProviderAPI = _ref2.portalProviderAPI,
             eventDispatcher = _ref2.eventDispatcher;
           var extensionHandlers = options.extensionHandlers || {};
-          return (0, _main.createPlugin)(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
+          return (0, _main.createPlugin)(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, _api, options.useLongPressSelection, {
             appearance: options.appearance
           });
         }
@@ -49,25 +55,45 @@ var extensionPlugin = function extensionPlugin(_ref) {
         name: 'extensionKeymap',
         plugin: function plugin() {
           var _api$contextPanel;
-          return (0, _keymap.default)(api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          return (0, _keymap.default)(_api === null || _api === void 0 ? void 0 : (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
         plugin: function plugin() {
           return (0, _uniqueId.createPlugin)();
         }
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: function plugin() {
+          return new _safePlugin.SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     },
     actions: {
-      createExtensionAPI: _extensionApi.createExtensionAPI
+      api: function api() {
+        var _api$contextPanel2;
+        return (0, _extensionApi.createExtensionAPI)({
+          editorView: editorViewRef.current,
+          applyChange: _api === null || _api === void 0 ? void 0 : (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        });
+      }
     },
     pluginsOptions: {
       floatingToolbar: (0, _toolbar.getToolbarConfig)({
         breakoutEnabled: options.breakoutEnabled,
-        hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        hoverDecoration: _api === null || _api === void 0 ? void 0 : _api.decorations.actions.hoverDecoration,
+        applyChangeToContextPanel: _api === null || _api === void 0 ? void 0 : (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
       }),
-      contextPanel: (0, _contextPanel.getContextPanel)(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange)
+      contextPanel: (0, _contextPanel.getContextPanel)(options.allowAutoSave, featureFlags, _api === null || _api === void 0 ? void 0 : (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/cjs/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -14,7 +14,6 @@ var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _utils = require("../../../utils");
-var _extensionApi = require("../../extension/extension-api");
 var _ui = require("@atlaskit/editor-common/ui");
 var _Separator = _interopRequireDefault(require("./Separator"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,8 +54,7 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
 var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
-    editorView = props.editorView,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    extensionApi = props.extensionApi;
   var ButtonIcon = _react.default.useMemo(function () {
     return item.icon ? (0, _reactLoadable.default)({
       loader: function () {
@@ -84,11 +82,7 @@ var ExtensionButton = function ExtensionButton(props) {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
     }
     var targetNodeAdf = (0, _utils.nodeToJSON)(node);
-    var api = (0, _extensionApi.createExtensionAPI)({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    });
-    item.action(targetNodeAdf, api);
+    item.action(targetNodeAdf, extensionApi);
   };
   return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     title: item.label,
@@ -106,7 +100,8 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     editorView = props.editorView,
     extensionProvider = props.extensionProvider,
     separator = props.separator,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    applyChangeToContextPanel = props.applyChangeToContextPanel,
+    extensionApi = props.extensionApi;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     extensions = _useState2[0],
@@ -150,11 +145,8 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     return (0, _utils.nodeToJSON)(node);
   }, [node]);
   var extensionItems = _react.default.useMemo(function () {
-    return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, nodeAdf, (0, _extensionApi.createExtensionAPI)({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    }));
-  }, [extensions, nodeAdf, editorView, applyChangeToContextPanel]);
+    return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
   if (!extensionItems.length) {
     return null;
   }
@@ -170,7 +162,8 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
       node: node,
       item: item,
       editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
     }));
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/_react.default.createElement(_Separator.default, null));

package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js

@@ -69,7 +69,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
-    var _api$contextPanel;
+    var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
         var ButtonIcon = item.icon;
@@ -241,7 +241,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
         return (0, _react2.jsx)(_Separator.default, {

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\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, ")"));
+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    .resizer-handle-thumb {\n      background: ", " !important;\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-thumb {\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/commands.js

@@ -1,15 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _analytics = require("@atlaskit/editor-common/analytics");
+var _analytics = require("../utils/analytics");
+var _analytics2 = require("@atlaskit/editor-common/analytics");
 var _utils2 = require("./utils");
 var _currentMediaNode = require("../utils/current-media-node");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_BORDER_COLOR = '#091e4224';
 exports.DEFAULT_BORDER_COLOR = DEFAULT_BORDER_COLOR;
 var DEFAULT_BORDER_SIZE = 2;
@@ -40,12 +45,12 @@ var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAP
     tr = (0, _utils.safeInsert)(group, nodePos, true)(tr);
     if (dispatch) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-        action: _analytics.ACTION.CHANGED_TYPE,
-        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _analytics2.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+        eventType: _analytics2.EVENT_TYPE.TRACK,
         attributes: {
-          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
-          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
+          newType: _analytics2.ACTION_SUBJECT_ID.MEDIA_GROUP,
+          previousType: _analytics2.ACTION_SUBJECT_ID.MEDIA_INLINE
         }
       })(tr);
       dispatch(tr);
@@ -78,12 +83,12 @@ var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAP
     tr = (0, _utils.safeInsert)(node, nodePos, true)(tr);
     if (dispatch) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-        action: _analytics.ACTION.CHANGED_TYPE,
-        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _analytics2.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+        eventType: _analytics2.EVENT_TYPE.TRACK,
         attributes: {
-          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
-          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
+          newType: _analytics2.ACTION_SUBJECT_ID.MEDIA_INLINE,
+          previousType: _analytics2.ACTION_SUBJECT_ID.MEDIA_GROUP
         }
       })(tr);
       dispatch(tr);
@@ -129,10 +134,10 @@ var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
     if (dispatch) {
       if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-          action: _analytics.ACTION.DELETED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics2.ACTION.DELETED,
+          actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics2.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics2.EVENT_TYPE.TRACK,
           attributes: {
             previousColor: borderMark.attrs.color,
             previousSize: borderMark.attrs.size
@@ -140,10 +145,10 @@ var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
         })(tr);
       } else {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-          action: _analytics.ACTION.ADDED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics2.ACTION.ADDED,
+          actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics2.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics2.EVENT_TYPE.TRACK,
           attributes: {
             color: DEFAULT_BORDER_COLOR,
             size: DEFAULT_BORDER_SIZE
@@ -186,10 +191,10 @@ var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
       }
       if (dispatch) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-          action: _analytics.ACTION.UPDATED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics2.ACTION.UPDATED,
+          actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics2.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics2.EVENT_TYPE.TRACK,
           attributes: {
             previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
             previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
@@ -203,4 +208,37 @@ var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
     };
   };
 };
-exports.setBorderMark = setBorderMark;
+exports.setBorderMark = setBorderMark;
+var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
+  return function (width, validation, layout) {
+    return function (state, dispatch) {
+      var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+      if (!selectedMediaSingleNode) {
+        return false;
+      }
+      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+        width: width,
+        widthType: 'pixel',
+        layout: layout
+      }));
+      tr.setMeta('scrollIntoView', false);
+      tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+      var parentNodeType = $pos ? $pos.parent.type.name : undefined;
+      var payload = (0, _analytics.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
+        width: width,
+        layout: layout,
+        validation: validation,
+        parentNode: parentNodeType
+      });
+      if (payload) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      }
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+exports.updateMediaSingleWidth = updateMediaSingleWidth;

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

@@ -312,15 +312,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               }
             },
             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',
-                layout: (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled)
-              }));
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
+              var _pluginInjectionApi$a4;
+              var width = _ref2.width,
+                validation = _ref2.validation;
+              var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled);
+              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -375,10 +371,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$a4;
+                var _pluginInjectionApi$a5;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
                   eventType: _analytics.EVENT_TYPE.TRACK,
                   action: _analytics.ACTION.VISITED,
                   actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -404,8 +400,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a5;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
+    var _pluginInjectionApi$a6;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
       type: 'separator'
     });
   }
@@ -489,22 +485,22 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a6;
+    var _pluginInjectionApi$a7;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

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

@@ -60,25 +60,26 @@ var PixelEntry = function PixelEntry(_ref) {
     }
     if (onSubmit) {
       var widthToBeSumitted = data.inputWidth;
-      var isInvalidInput = false;
+      var validation = 'valid';
       if (data.inputWidth < minWidth) {
         widthToBeSumitted = minWidth;
-        isInvalidInput = true;
+        validation = 'less-than-min';
       }
       if (data.inputWidth > maxWidth) {
         widthToBeSumitted = maxWidth;
-        isInvalidInput = true;
+        validation = 'greater-than-max';
       }
 
       // 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) {
+      if (validation !== 'valid') {
         setComputedWidth(widthToBeSumitted);
         setComputedHeight(Math.round(ratioWidth * widthToBeSumitted));
       }
       onSubmit({
-        width: widthToBeSumitted
+        width: widthToBeSumitted,
+        validation: validation
       });
     }
   };

package/dist/cjs/plugins/media/utils/analytics.js

@@ -42,7 +42,7 @@ var getMediaInputResizeAnalyticsEvent = function getMediaInputResizeAnalyticsEve
   return {
     action: _analytics.ACTION.EDITED,
     actionSubject: actionSubject,
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.INPUT_RESIZED,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.RESIZED,
     attributes: {
       width: width,
       layout: layout,