@atlaskit/editor-core 187.30.4 → 187.30.6

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

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

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

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

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

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

package/dist/es2019/plugins/selection/gap-cursor/utils/place-gap-cursor.js

@@ -8,7 +8,10 @@ import { Side } from '../selection';
  */
 const nestedCases = {
   'tableView-content-wrap': 'table',
-  'mediaSingleView-content-wrap': '.rich-media-item'
+  'mediaSingleView-content-wrap': '.rich-media-item',
+  'bodiedExtensionView-content-wrap': '.extension-container',
+  'embedCardView-content-wrap': '.rich-media-item',
+  'datasourceView-content-wrap': '.datasourceView-content-inner-wrap'
 };
 const computeNestedStyle = dom => {
   const foundKey = Object.keys(nestedCases).find(className => dom.classList.contains(className));
@@ -71,12 +74,12 @@ export const toDOM = (view, getPos) => {
     const style = computeNestedStyle(dom) || window.getComputedStyle(dom);
     const gapCursor = element.firstChild;
     gapCursor.style.height = `${measureHeight(style)}px`;
+    const layoutMode = node && getLayoutModeFromTargetNode(node);
 
     // TODO remove this table specific piece. need to figure out margin collapsing logic
-    if (nodeStart !== 0 || node && node.type.name === 'table') {
+    if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
       gapCursor.style.marginTop = style.getPropertyValue('margin-top');
     }
-    const layoutMode = node && getLayoutModeFromTargetNode(node);
     if (layoutMode) {
       gapCursor.setAttribute('layout', layoutMode);
       gapCursor.style.width = `${measureWidth(style)}px`;

package/dist/es2019/version-wrapper.js

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

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

@@ -3,9 +3,9 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
-import { N60, B200 } from '@atlaskit/theme/colors';
+import { N60, B200, Y500 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))");
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-left::after,\n    .resizer-handle-right::after {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on

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

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

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

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

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

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

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

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

package/dist/esm/plugins/selection/gap-cursor/utils/place-gap-cursor.js

@@ -9,7 +9,10 @@ import { Side } from '../selection';
  */
 var nestedCases = {
   'tableView-content-wrap': 'table',
-  'mediaSingleView-content-wrap': '.rich-media-item'
+  'mediaSingleView-content-wrap': '.rich-media-item',
+  'bodiedExtensionView-content-wrap': '.extension-container',
+  'embedCardView-content-wrap': '.rich-media-item',
+  'datasourceView-content-wrap': '.datasourceView-content-inner-wrap'
 };
 var computeNestedStyle = function computeNestedStyle(dom) {
   var foundKey = Object.keys(nestedCases).find(function (className) {
@@ -74,12 +77,12 @@ export var toDOM = function toDOM(view, getPos) {
     var style = computeNestedStyle(dom) || window.getComputedStyle(dom);
     var gapCursor = element.firstChild;
     gapCursor.style.height = "".concat(measureHeight(style), "px");
+    var layoutMode = node && getLayoutModeFromTargetNode(node);
 
     // TODO remove this table specific piece. need to figure out margin collapsing logic
-    if (nodeStart !== 0 || node && node.type.name === 'table') {
+    if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
       gapCursor.style.marginTop = style.getPropertyValue('margin-top');
     }
-    var layoutMode = node && getLayoutModeFromTargetNode(node);
     if (layoutMode) {
       gapCursor.setAttribute('layout', layoutMode);
       gapCursor.style.width = "".concat(measureWidth(style), "px");

package/dist/esm/version-wrapper.js

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

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

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

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

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

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

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

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

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

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

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

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

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