@atlaskit/editor-core 187.32.0 → 187.32.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 187.32.2
+
+### Patch Changes
+
+- [`eab48233583`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eab48233583) - Calculate parent content width properly when inserting a nested media single node
+
+## 187.32.1
+
+### Patch Changes
+
+- [`37624e80f01`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37624e80f01) - NO-ISSUE Cancel animation frame debounced call when unmounting scroll buttons
+- [`dc93b06778b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc93b06778b) - Fix pasted mediaSingle nodes into parent nodes
+
 ## 187.32.0
 
 ### Minor Changes

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ScrollButtons = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", ";\n  padding: ", " ", ";\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"));
 var LeftIcon = _chevronLeftLarge.default;
 var RightIcon = _chevronRightLarge.default;
-var _default = function _default(_ref) {
+var ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,
     node = _ref.node,
@@ -41,52 +41,56 @@ var _default = function _default(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     canScrollRight = _useState6[0],
     setCanScrollRight = _useState6[1];
-  var scheduledSetCanScroll = (0, _rafSchd.default)(function () {
-    var _ref2 = scrollContainerRef.current,
-      scrollLeft = _ref2.scrollLeft,
-      scrollWidth = _ref2.scrollWidth,
-      offsetWidth = _ref2.offsetWidth;
+  var setCanScrollDebounced = (0, _rafSchd.default)(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
     setCanScrollLeft(scrollLeft > 0);
     setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
   });
 
   var onScroll = function onScroll() {
-    return scheduledSetCanScroll();
+    return setCanScrollDebounced();
   };
   var scrollLeft = function scrollLeft() {
-    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
-    var _ref3 = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {},
-      _ref3$width = _ref3.width,
-      scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
-    var scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0;
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
 
     // scroll to current position - scroll container width
     var scrollTo = scrollLeft - scrollContainerWidth;
-    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollTo({
       top: 0,
       left: scrollTo,
       behavior: 'smooth'
     });
   };
   var scrollRight = function scrollRight() {
-    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
-    var _ref4 = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {},
-      _ref4$width = _ref4.width,
-      scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width;
-    var scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0;
+    var _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
+    var _ref3 = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.getBoundingClientRect()) || {},
+      _ref3$width = _ref3.width,
+      scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+    var scrollLeft = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollLeft) || 0;
 
     // scroll to current position + scroll container width
     var scrollTo = scrollLeft + scrollContainerWidth;
-    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+    (_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollTo({
       top: 0,
       left: scrollTo,
       behavior: 'smooth'
     });
   };
   var resizeObserver = new ResizeObserver(function (t) {
-    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-    var widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
-    var availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
+    var _scrollContainerRef$c8, _scrollContainerRef$c9, _scrollContainerRef$c10;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollWidth) || 0;
+    var availableSpace = (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : (_scrollContainerRef$c10 = _scrollContainerRef$c9.parentNode) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.offsetWidth;
     if (availableSpace >= widthNeededToShowAllItems) {
       setNeedScroll(false);
     } else {
@@ -109,6 +113,7 @@ var _default = function _default(_ref) {
         scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
         resizeObserver.unobserve(scrollContainerRefCurrent);
       }
+      setCanScrollDebounced.cancel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -142,4 +147,4 @@ var _default = function _default(_ref) {
     disabled: !canScrollRight || disabled
   })) : null;
 };
-exports.default = _default;
+exports.ScrollButtons = ScrollButtons;

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

@@ -36,7 +36,7 @@ var _EmojiPickerButton = require("./EmojiPickerButton");
 var _reactIntlNext = require("react-intl-next");
 var _messages = _interopRequireDefault(require("./messages"));
 var _commands2 = require("@atlaskit/editor-plugin-table/commands");
-var _ScrollButtons = _interopRequireDefault(require("./ScrollButtons"));
+var _ScrollButtons = require("./ScrollButtons");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _forceFocus = require("../pm-plugins/force-focus");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
@@ -489,7 +489,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         mountRef: this.mountRef,
         mounted: this.state.mounted,
         featureFlags: this.props.featureFlags
-      }))), scrollable && (0, _react2.jsx)(_ScrollButtons.default, {
+      }))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,

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

@@ -304,19 +304,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             mediaHeight: mediaHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,
             maxWidth: maxWidth,
-            validate: function validate(value) {
-              if (value && (value < minWidth || value > maxWidth)) {
+            onChange: function onChange(valid) {
+              if (valid) {
                 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 true;
             },
             onSubmit: function onSubmit(_ref2) {
               var width = _ref2.width;

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

@@ -26,9 +26,9 @@ var PixelEntry = function PixelEntry(_ref) {
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
-    validate = _ref.validate,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
+    onChange = _ref.onChange,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate;
@@ -55,6 +55,9 @@ var PixelEntry = function PixelEntry(_ref) {
 
   // Handle submit when user presses enter in form
   var handleOnSubmit = function handleOnSubmit(data) {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
     if (onSubmit) {
       var widthToBeSumitted = data.inputWidth;
       var isInvalidInput = false;
@@ -80,46 +83,33 @@ var PixelEntry = function PixelEntry(_ref) {
     }
   };
 
-  // Syncronous validation returning undefined for valid and string for invalid
-  var handleValidateWidth = (0, _react2.useCallback)(function (value) {
-    if (!validate || value === undefined) {
-      return;
-    }
-    if (validate) {
-      return validate(value) === true ? undefined : formatMessage(_messages.messages.validationFailedMessage);
-    }
-    return;
-  }, [validate, formatMessage]);
-
   // Handle updating computed fields based on
   var handleOnChange = (0, _react2.useCallback)(function (type) {
     return function (event) {
       var value = parseInt(event.currentTarget.value);
-      var newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : value;
+      var newWidth = '';
       switch (type) {
         case 'inputWidth':
           {
+            newWidth = newInputValue;
             setComputedWidth(newInputValue);
-            if (newInputValue) {
-              setComputedHeight(Math.round(ratioWidth * value));
-            } else {
-              setComputedHeight('');
-            }
+            var newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+            setComputedHeight(newHeight);
             break;
           }
         case 'inputHeight':
           {
             setComputedHeight(newInputValue);
-            if (newInputValue) {
-              setComputedWidth(Math.round(ratioHeight * value));
-            } else {
-              setComputedWidth('');
-            }
+            newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+            setComputedWidth(newWidth);
             break;
           }
       }
+      var isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+      onChange && onChange(isInvalidInputValid);
     };
-  }, [ratioHeight, ratioWidth]);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
     return (0, _react.jsx)(_tooltip.default, {
       content: formatMessage(_messages.messages.migrationButtonTooltip)
@@ -141,7 +131,6 @@ var PixelEntry = function PixelEntry(_ref) {
     }, (0, _react.jsx)(_form.Field, {
       key: "inputWidth",
       name: "inputWidth",
-      validate: handleValidateWidth,
       defaultValue: computedWidth
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;

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

@@ -103,7 +103,7 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
   var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
@@ -185,14 +185,29 @@ function transformSliceForMedia(slice, schema) {
     orderedList = _schema$nodes2.orderedList,
     media = _schema$nodes2.media,
     mediaInline = _schema$nodes2.mediaInline,
-    expand = _schema$nodes2.expand;
+    expand = _schema$nodes2.expand,
+    nestedExpand = _schema$nodes2.nestedExpand;
   return function (selection) {
     var newSlice = slice;
-    if ((0, _utils.hasParentNodeOfType)([layoutSection, table, bulletList, orderedList, expand])(selection)) {
+    if ((0, _utils.hasParentNodeOfType)([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
       newSlice = (0, _slice.mapSlice)(newSlice, function (node) {
-        var attrs = (0, _utils.hasParentNodeOfType)([layoutSection, table])(selection) ? {
+        var extendedOrLegacyAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
+          layout: node.attrs.layout,
+          widthType: node.attrs.widthType,
+          width: node.attrs.width
+        } : {
           layout: node.attrs.layout
-        } : {};
+        };
+        var attrs = {};
+        if ((0, _utils.hasParentNodeOfType)([layoutSection, table])(selection)) {
+          // Supports layouts
+          attrs = _objectSpread({}, extendedOrLegacyAttrs);
+        } else if ((0, _utils.hasParentNodeOfType)([bulletList, orderedList, expand, nestedExpand])(selection)) {
+          // does not support other layouts
+          attrs = _objectSpread(_objectSpread({}, extendedOrLegacyAttrs), {}, {
+            layout: 'center'
+          });
+        }
         return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
       });
     }

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

package/dist/es2019/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -18,7 +18,7 @@ const toolbarScrollButtons = css`
 `;
 const LeftIcon = ChevronLeftLargeIcon;
 const RightIcon = ChevronRightLargeIcon;
-export default (({
+export const ScrollButtons = ({
   intl,
   scrollContainerRef,
   node,
@@ -28,7 +28,11 @@ export default (({
   const [needScroll, setNeedScroll] = useState(false);
   const [canScrollLeft, setCanScrollLeft] = useState(true);
   const [canScrollRight, setCanScrollRight] = useState(true);
-  const scheduledSetCanScroll = rafSchedule(() => {
+  const setCanScrollDebounced = rafSchedule(() => {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
     const {
       scrollLeft,
       scrollWidth,
@@ -38,7 +42,7 @@ export default (({
     setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
   });
 
-  const onScroll = () => scheduledSetCanScroll();
+  const onScroll = () => setCanScrollDebounced();
   const scrollLeft = () => {
     var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
     const {
@@ -95,6 +99,7 @@ export default (({
         scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
         resizeObserver.unobserve(scrollContainerRefCurrent);
       }
+      setCanScrollDebounced.cancel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -127,4 +132,4 @@ export default (({
     onClick: scrollRight,
     disabled: !canScrollRight || disabled
   })) : null;
-});
+};

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

@@ -22,7 +22,7 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
-import ScrollButtons from './ScrollButtons';
+import { ScrollButtons } from './ScrollButtons';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 const ToolbarItems = /*#__PURE__*/React.memo(({

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

@@ -310,19 +310,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,
             maxWidth: maxWidth,
-            validate: value => {
-              if (value && (value < minWidth || value > maxWidth)) {
+            onChange: valid => {
+              if (valid) {
                 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 true;
             },
             onSubmit: ({
               width

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

@@ -14,9 +14,9 @@ export const PixelEntry = ({
   mediaWidth,
   mediaHeight,
   onSubmit,
-  validate,
   minWidth,
   maxWidth,
+  onChange,
   intl: {
     formatMessage
   },
@@ -40,6 +40,9 @@ export const PixelEntry = ({
 
   // Handle submit when user presses enter in form
   const handleOnSubmit = data => {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
     if (onSubmit) {
       let widthToBeSumitted = data.inputWidth;
       let isInvalidInput = false;
@@ -65,44 +68,31 @@ export const PixelEntry = ({
     }
   };
 
-  // Syncronous validation returning undefined for valid and string for invalid
-  const handleValidateWidth = useCallback(value => {
-    if (!validate || value === undefined) {
-      return;
-    }
-    if (validate) {
-      return validate(value) === true ? undefined : formatMessage(messages.validationFailedMessage);
-    }
-    return;
-  }, [validate, formatMessage]);
-
   // Handle updating computed fields based on
   const handleOnChange = useCallback(type => event => {
     const value = parseInt(event.currentTarget.value);
-    const newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+    const newInputValue = isNaN(value) ? '' : value;
+    let newWidth = '';
     switch (type) {
       case 'inputWidth':
         {
+          newWidth = newInputValue;
           setComputedWidth(newInputValue);
-          if (newInputValue) {
-            setComputedHeight(Math.round(ratioWidth * value));
-          } else {
-            setComputedHeight('');
-          }
+          const newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+          setComputedHeight(newHeight);
           break;
         }
       case 'inputHeight':
         {
           setComputedHeight(newInputValue);
-          if (newInputValue) {
-            setComputedWidth(Math.round(ratioHeight * value));
-          } else {
-            setComputedWidth('');
-          }
+          newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+          setComputedWidth(newWidth);
           break;
         }
     }
-  }, [ratioHeight, ratioWidth]);
+    const isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+    onChange && onChange(isInvalidInputValid);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
     return jsx(Tooltip, {
       content: formatMessage(messages.migrationButtonTooltip)
@@ -125,7 +115,6 @@ export const PixelEntry = ({
     }, jsx(Field, {
       key: "inputWidth",
       name: "inputWidth",
-      validate: handleValidateWidth,
       defaultValue: computedWidth
     }, ({
       fieldProps

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

@@ -1,7 +1,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 { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -93,7 +93,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  const contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  const contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
   const node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {
@@ -175,15 +175,33 @@ export function transformSliceForMedia(slice, schema) {
     orderedList,
     media,
     mediaInline,
-    expand
+    expand,
+    nestedExpand
   } = schema.nodes;
   return selection => {
     let newSlice = slice;
-    if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand])(selection)) {
+    if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
       newSlice = mapSlice(newSlice, node => {
-        const attrs = hasParentNodeOfType([layoutSection, table])(selection) ? {
+        const extendedOrLegacyAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+          layout: node.attrs.layout,
+          widthType: node.attrs.widthType,
+          width: node.attrs.width
+        } : {
           layout: node.attrs.layout
-        } : {};
+        };
+        let attrs = {};
+        if (hasParentNodeOfType([layoutSection, table])(selection)) {
+          // Supports layouts
+          attrs = {
+            ...extendedOrLegacyAttrs
+          };
+        } else if (hasParentNodeOfType([bulletList, orderedList, expand, nestedExpand])(selection)) {
+          // does not support other layouts
+          attrs = {
+            ...extendedOrLegacyAttrs,
+            layout: 'center'
+          };
+        }
         return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
       });
     }

package/dist/es2019/version-wrapper.js

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

package/dist/esm/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -13,7 +13,7 @@ import rafSchedule from 'raf-schd';
 var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", ";\n  padding: ", " ", ";\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N30, ")"));
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
-export default (function (_ref) {
+export var ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,
     node = _ref.node,
@@ -31,52 +31,56 @@ export default (function (_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     canScrollRight = _useState6[0],
     setCanScrollRight = _useState6[1];
-  var scheduledSetCanScroll = rafSchedule(function () {
-    var _ref2 = scrollContainerRef.current,
-      scrollLeft = _ref2.scrollLeft,
-      scrollWidth = _ref2.scrollWidth,
-      offsetWidth = _ref2.offsetWidth;
+  var setCanScrollDebounced = rafSchedule(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
     setCanScrollLeft(scrollLeft > 0);
     setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
   });
 
   var onScroll = function onScroll() {
-    return scheduledSetCanScroll();
+    return setCanScrollDebounced();
   };
   var scrollLeft = function scrollLeft() {
-    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
-    var _ref3 = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {},
-      _ref3$width = _ref3.width,
-      scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
-    var scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0;
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
 
     // scroll to current position - scroll container width
     var scrollTo = scrollLeft - scrollContainerWidth;
-    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollTo({
       top: 0,
       left: scrollTo,
       behavior: 'smooth'
     });
   };
   var scrollRight = function scrollRight() {
-    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
-    var _ref4 = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {},
-      _ref4$width = _ref4.width,
-      scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width;
-    var scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0;
+    var _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
+    var _ref3 = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.getBoundingClientRect()) || {},
+      _ref3$width = _ref3.width,
+      scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+    var scrollLeft = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollLeft) || 0;
 
     // scroll to current position + scroll container width
     var scrollTo = scrollLeft + scrollContainerWidth;
-    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+    (_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollTo({
       top: 0,
       left: scrollTo,
       behavior: 'smooth'
     });
   };
   var resizeObserver = new ResizeObserver(function (t) {
-    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-    var widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
-    var availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
+    var _scrollContainerRef$c8, _scrollContainerRef$c9, _scrollContainerRef$c10;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollWidth) || 0;
+    var availableSpace = (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : (_scrollContainerRef$c10 = _scrollContainerRef$c9.parentNode) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.offsetWidth;
     if (availableSpace >= widthNeededToShowAllItems) {
       setNeedScroll(false);
     } else {
@@ -99,6 +103,7 @@ export default (function (_ref) {
         scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
         resizeObserver.unobserve(scrollContainerRefCurrent);
       }
+      setCanScrollDebounced.cancel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -131,4 +136,4 @@ export default (function (_ref) {
     onClick: scrollRight,
     disabled: !canScrollRight || disabled
   })) : null;
-});
+};

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

@@ -32,7 +32,7 @@ import { EmojiPickerButton } from './EmojiPickerButton';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
-import ScrollButtons from './ScrollButtons';
+import { ScrollButtons } from './ScrollButtons';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {

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

@@ -297,19 +297,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,
             maxWidth: maxWidth,
-            validate: function validate(value) {
-              if (value && (value < minWidth || value > maxWidth)) {
+            onChange: function onChange(valid) {
+              if (valid) {
                 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 true;
             },
             onSubmit: function onSubmit(_ref2) {
               var width = _ref2.width;

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

@@ -15,9 +15,9 @@ export var PixelEntry = function PixelEntry(_ref) {
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
-    validate = _ref.validate,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
+    onChange = _ref.onChange,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate;
@@ -44,6 +44,9 @@ export var PixelEntry = function PixelEntry(_ref) {
 
   // Handle submit when user presses enter in form
   var handleOnSubmit = function handleOnSubmit(data) {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
     if (onSubmit) {
       var widthToBeSumitted = data.inputWidth;
       var isInvalidInput = false;
@@ -69,46 +72,33 @@ export var PixelEntry = function PixelEntry(_ref) {
     }
   };
 
-  // Syncronous validation returning undefined for valid and string for invalid
-  var handleValidateWidth = useCallback(function (value) {
-    if (!validate || value === undefined) {
-      return;
-    }
-    if (validate) {
-      return validate(value) === true ? undefined : formatMessage(messages.validationFailedMessage);
-    }
-    return;
-  }, [validate, formatMessage]);
-
   // Handle updating computed fields based on
   var handleOnChange = useCallback(function (type) {
     return function (event) {
       var value = parseInt(event.currentTarget.value);
-      var newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : value;
+      var newWidth = '';
       switch (type) {
         case 'inputWidth':
           {
+            newWidth = newInputValue;
             setComputedWidth(newInputValue);
-            if (newInputValue) {
-              setComputedHeight(Math.round(ratioWidth * value));
-            } else {
-              setComputedHeight('');
-            }
+            var newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+            setComputedHeight(newHeight);
             break;
           }
         case 'inputHeight':
           {
             setComputedHeight(newInputValue);
-            if (newInputValue) {
-              setComputedWidth(Math.round(ratioHeight * value));
-            } else {
-              setComputedWidth('');
-            }
+            newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+            setComputedWidth(newWidth);
             break;
           }
       }
+      var isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+      onChange && onChange(isInvalidInputValid);
     };
-  }, [ratioHeight, ratioWidth]);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
     return jsx(Tooltip, {
       content: formatMessage(messages.migrationButtonTooltip)
@@ -130,7 +120,6 @@ export var PixelEntry = function PixelEntry(_ref) {
     }, jsx(Field, {
       key: "inputWidth",
       name: "inputWidth",
-      validate: handleValidateWidth,
       defaultValue: computedWidth
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;

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

@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
-import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -91,7 +91,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
   var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
@@ -171,14 +171,29 @@ export function transformSliceForMedia(slice, schema) {
     orderedList = _schema$nodes2.orderedList,
     media = _schema$nodes2.media,
     mediaInline = _schema$nodes2.mediaInline,
-    expand = _schema$nodes2.expand;
+    expand = _schema$nodes2.expand,
+    nestedExpand = _schema$nodes2.nestedExpand;
   return function (selection) {
     var newSlice = slice;
-    if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand])(selection)) {
+    if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
       newSlice = mapSlice(newSlice, function (node) {
-        var attrs = hasParentNodeOfType([layoutSection, table])(selection) ? {
+        var extendedOrLegacyAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+          layout: node.attrs.layout,
+          widthType: node.attrs.widthType,
+          width: node.attrs.width
+        } : {
           layout: node.attrs.layout
-        } : {};
+        };
+        var attrs = {};
+        if (hasParentNodeOfType([layoutSection, table])(selection)) {
+          // Supports layouts
+          attrs = _objectSpread({}, extendedOrLegacyAttrs);
+        } else if (hasParentNodeOfType([bulletList, orderedList, expand, nestedExpand])(selection)) {
+          // does not support other layouts
+          attrs = _objectSpread(_objectSpread({}, extendedOrLegacyAttrs), {}, {
+            layout: 'center'
+          });
+        }
         return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
       });
     }

package/dist/esm/version-wrapper.js

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

package/dist/types/plugins/floating-toolbar/ui/ScrollButtons.d.ts

@@ -3,11 +3,11 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { IntlShape } from 'react-intl-next';
-export interface Props {
+interface ScrollButtonsProps {
     intl: IntlShape;
     scrollContainerRef: React.RefObject<HTMLDivElement>;
     node: Node;
     disabled: boolean;
 }
-declare const _default: ({ intl, scrollContainerRef, node, disabled }: Props) => jsx.JSX.Element | null;
-export default _default;
+export declare const ScrollButtons: ({ intl, scrollContainerRef, node, disabled, }: ScrollButtonsProps) => jsx.JSX.Element | null;
+export {};

package/dist/types/plugins/floating-toolbar/ui/Toolbar.d.ts

@@ -5,9 +5,8 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { WrappedComponentProps } from 'react-intl-next';
-import type { FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FloatingToolbarItem, FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 export type Item = FloatingToolbarItem<Function>;

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

@@ -3,7 +3,7 @@
 import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, minWidth, maxWidth, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
 export declare const FullWidthDisplay: React.FC<{
     intl: IntlShape;
 }>;

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

@@ -24,6 +24,11 @@ export type PixelEntryProps = {
      * The maximum acceptable width input
      */
     maxWidth: number;
+    /**
+     *
+     * Handler for valid input
+     */
+    onChange?: (valid: boolean) => void;
     /**
      * show migration button to convert to pixels for legacy image resize experience
      */
@@ -43,8 +48,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/floating-toolbar/ui/ScrollButtons.d.ts

@@ -3,11 +3,11 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { IntlShape } from 'react-intl-next';
-export interface Props {
+interface ScrollButtonsProps {
     intl: IntlShape;
     scrollContainerRef: React.RefObject<HTMLDivElement>;
     node: Node;
     disabled: boolean;
 }
-declare const _default: ({ intl, scrollContainerRef, node, disabled }: Props) => jsx.JSX.Element | null;
-export default _default;
+export declare const ScrollButtons: ({ intl, scrollContainerRef, node, disabled, }: ScrollButtonsProps) => jsx.JSX.Element | null;
+export {};

package/dist/types-ts4.5/plugins/floating-toolbar/ui/Toolbar.d.ts

@@ -5,9 +5,8 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { WrappedComponentProps } from 'react-intl-next';
-import type { FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { FloatingToolbarItem, FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
 export type Item = FloatingToolbarItem<Function>;

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

@@ -3,7 +3,7 @@
 import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
 import type { PixelEntryProps } from './types';
-export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, validate, minWidth, maxWidth, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
+export declare const PixelEntry: ({ width, mediaWidth, mediaHeight, onSubmit, minWidth, maxWidth, onChange, intl: { formatMessage }, showMigration, onMigrate, }: PixelEntryProps) => jsx.JSX.Element;
 export declare const FullWidthDisplay: React.FC<{
     intl: IntlShape;
 }>;

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

@@ -24,6 +24,11 @@ export type PixelEntryProps = {
      * The maximum acceptable width input
      */
     maxWidth: number;
+    /**
+     *
+     * Handler for valid input
+     */
+    onChange?: (valid: boolean) => void;
     /**
      * show migration button to convert to pixels for legacy image resize experience
      */
@@ -43,8 +48,8 @@ export type PixelEntryProps = {
     onMigrate?: () => void;
 };
 export type PixelEntryFormValues = {
-    inputWidth: number;
-    inputHeight: number;
+    inputWidth: number | '';
+    inputHeight: number | '';
 };
 export type PixelEntryFormData = {
     width: number;

package/package.json

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