@atlaskit/editor-core 187.8.13 → 187.9.2

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/resizable-media-single-messages.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.defineMessages)({
+  fullWidthImage: {
+    id: 'fabric.editor.image.fullWidthImage',
+    defaultMessage: 'Full width image',
+    description: 'The image has reached its full width'
+  }
+});
+exports.messages = messages;

package/dist/cjs/plugins/selection/pm-plugins/events/keydown.js

@@ -5,38 +5,69 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.onKeydown = void 0;
 var _state = require("@atlaskit/editor-prosemirror/state");
+/*
+ * The way expand was built, no browser reconize selection on it.
+ * For instance, when a selection going to a "collapsed" expand
+ * the browser will try to send the cursor to inside the expand content (wrong),
+ * this behavior is caused because the expand content is never true hidden
+ * we just set the height to 1px.
+ *
+ * So, we need to capture a possible selection event
+ * when a collapsed exxpand is the next node in the common depth.
+ * If that is true, we create a new TextSelection and stop the event bubble
+ */
 var isCollpasedExpand = function isCollpasedExpand(node) {
   return Boolean(node && ['expand', 'nestedExpand'].includes(node.type.name) && !node.attrs.__expanded);
 };
-var findFixedProblematicNodePosition = function findFixedProblematicNodePosition($pos, direction) {
-  if ($pos.pos === 0 || $pos.depth === 0) {
+
+/**
+ * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty
+ */
+var isBodiedExtension = function isBodiedExtension(node) {
+  return Boolean(node && ['bodiedExtension'].includes(node.type.name));
+};
+var isProblematicNode = function isProblematicNode(node) {
+  return isCollpasedExpand(node) || isBodiedExtension(node);
+};
+var findFixedProblematicNodePosition = function findFixedProblematicNodePosition(doc, $head, direction) {
+  if ($head.pos === 0 || $head.depth === 0) {
     return null;
   }
-  var pos = direction === 'up' ? $pos.before() : $pos.after();
-  var $posResolved = $pos.doc.resolve(pos);
-  var maybeExpandNode = direction === 'up' ? $posResolved.nodeBefore : $posResolved.nodeAfter;
-  if (maybeExpandNode && isCollpasedExpand(maybeExpandNode)) {
-    var nodeSize = maybeExpandNode.nodeSize;
-    var expandPosition = direction === 'up' ? pos - nodeSize : pos + nodeSize;
-    var startPosNode = Math.max(expandPosition, 0);
-    var $startPosNode = $pos.doc.resolve(Math.min(startPosNode, $pos.doc.content.size));
-    return $startPosNode;
+  if (direction === 'up') {
+    var pos = $head.before();
+    var $posResolved = $head.doc.resolve(pos);
+    var maybeProblematicNode = $posResolved.nodeBefore;
+    if (maybeProblematicNode && isProblematicNode(maybeProblematicNode)) {
+      var nodeSize = maybeProblematicNode.nodeSize;
+      var nodeStartPosition = pos - nodeSize;
+
+      // ($head.pos - 1) will correspond to (nodeStartPosition + nodeSize) when we are at the start of the text node
+      var isAtEndOfProblematicNode = $head.pos - 1 === nodeStartPosition + nodeSize;
+      if (isAtEndOfProblematicNode) {
+        var startPosNode = Math.max(nodeStartPosition, 0);
+        var $startPosNode = $head.doc.resolve(Math.min(startPosNode, $head.doc.content.size));
+        return $startPosNode;
+      }
+    }
+  }
+  if (direction === 'down') {
+    var _pos = $head.after();
+    var _maybeProblematicNode = doc.nodeAt(_pos);
+    if (_maybeProblematicNode && isProblematicNode(_maybeProblematicNode) && $head.pos + 1 === _pos) {
+      var _nodeSize = _maybeProblematicNode.nodeSize;
+      var nodePosition = _pos + _nodeSize;
+      var _startPosNode = Math.max(nodePosition, 0);
+      var _$startPosNode = $head.doc.resolve(Math.min(_startPosNode, $head.doc.content.size));
+      return _$startPosNode;
+    }
   }
   return null;
 };
 var onKeydown = function onKeydown(view, event) {
   /*
-   * This workaround is needed for some specific situation with collapsed expand.
-   *
-   * The way expand was built, no browser reconize selection on it.
-   * For instance, when a selection going to a "collapsed" expand
-   * the browser will try to send the cursor to inside the expand content (wrong),
-   * this behavior is caused because the expand content is never true hidden
-   * we just set the height to 1px.
-   *
-   * So, we need to capture a possible selection event
-   * when a collapsed exxpand is the next node in the common depth.
-   * If that is true, we create a new TextSelection and stop the event bubble
+   * This workaround is needed for some specific situations.
+   * - expand collapse
+   * - bodied extension
    */
   if (!(event instanceof KeyboardEvent)) {
     return false;
@@ -47,16 +78,21 @@ var onKeydown = function onKeydown(view, event) {
   if (!['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
     return false;
   }
-  var _view$state$selection = view.state.selection,
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    _view$state$selection = _view$state.selection,
     $head = _view$state$selection.$head,
     $anchor = _view$state$selection.$anchor;
   if (event.key === 'ArrowRight' && $head.nodeAfter || event.key === 'ArrowLeft' && $head.nodeBefore) {
     return false;
   }
   var direction = ['ArrowLeft', 'ArrowUp', 'Home'].includes(event.key) ? 'up' : 'down';
-  var $fixedProblematicNodePosition = findFixedProblematicNodePosition($head, direction);
+  var $fixedProblematicNodePosition = findFixedProblematicNodePosition(doc, $head, direction);
   if ($fixedProblematicNodePosition) {
-    var forcedTextSelection = _state.TextSelection.create(view.state.doc, $anchor.pos, $fixedProblematicNodePosition.pos);
+    // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+    var headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+    var head = $fixedProblematicNodePosition.pos + headOffset;
+    var forcedTextSelection = _state.TextSelection.create(view.state.doc, $anchor.pos, head);
     var tr = view.state.tr;
     tr.setSelection(forcedTextSelection);
     view.dispatch(tr);

package/dist/cjs/ui/Resizer/ResizeLabel/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var ResizeLabelBreakoutWidth = 110;
+var ResizeLabel = function ResizeLabel(props) {
+  return (0, _react.jsx)("div", {
+    css: _styles.wrapper
+  }, (0, _react.jsx)("span", {
+    css: [_styles.text, props.containerWidth < ResizeLabelBreakoutWidth && _styles.smallText]
+  }, props.label));
+};
+var _default = ResizeLabel;
+exports.default = _default;

package/dist/cjs/ui/Resizer/ResizeLabel/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapper = exports.text = exports.smallText = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject, _templateObject2, _templateObject3;
+var wrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  width: 100%;\n  text-align: center;\n  position: absolute;\n  transform: translateY(-125%);\n  top: 0;\n"])), "var(--ds-font-size-100, 14px)");
+exports.wrapper = wrapper;
+var text = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  border-radius: 6px;\n  min-width: 75px;\n  background-color: ", ";\n  color: ", ";\n  padding: ", " ", ";\n  letter-spacing: 0.5px;\n"])), "var(--ds-text-accent-blue, ".concat(_colors.B300, ")"), "var(--ds-text-inverse, white)", "var(--ds-space-050, 4px)", "var(--ds-space-200, 16px)");
+exports.text = text;
+var smallText = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  letter-spacing: -0.5px;\n  font-size: ", ";\n  min-width: 27px;\n  padding: ", " ", ";\n"])), "var(--ds-font-size-050, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)");
+exports.smallText = smallText;

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

package/dist/cjs/version.json

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

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

@@ -1,8 +1,8 @@
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { addAnalytics, EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '../../analytics';
-export function insertEmoji(emojiId, inputMethod) {
+import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
+export const insertEmoji = editorAnalyticsAPI => (emojiId, inputMethod) => {
   return (state, dispatch) => {
     const {
       emoji
@@ -17,7 +17,7 @@ export function insertEmoji(emojiId, inputMethod) {
         const fragment = Fragment.fromArray([node, textNode]);
         const tr = safeInsert(fragment)(state.tr);
         if (inputMethod) {
-          addAnalytics(state, tr, {
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
@@ -25,7 +25,7 @@ export function insertEmoji(emojiId, inputMethod) {
               inputMethod
             },
             eventType: EVENT_TYPE.TRACK
-          });
+          })(tr);
         }
         dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
       }
@@ -33,4 +33,4 @@ export function insertEmoji(emojiId, inputMethod) {
     }
     return false;
   };
-}
+};

package/dist/es2019/plugins/emoji/index.js

@@ -169,7 +169,10 @@ const emojiPlugin = (options, api) => {
           schema,
           providerFactory,
           featureFlags
-        }) => asciiInputRulePlugin(schema, providerFactory, featureFlags)
+        }) => {
+          var _api$dependencies$ana8;
+          return asciiInputRulePlugin(schema, providerFactory, featureFlags, api === null || api === void 0 ? void 0 : (_api$dependencies$ana8 = api.dependencies.analytics) === null || _api$dependencies$ana8 === void 0 ? void 0 : _api$dependencies$ana8.actions);
+        }
       }];
     },
     pluginsOptions: {
@@ -183,13 +186,13 @@ const emojiPlugin = (options, api) => {
         keyshortcut: ':',
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
         action(insert, state) {
-          var _api$dependencies$ana8;
+          var _api$dependencies$ana9;
           const tr = insert(undefined);
           openTypeAheadAtCursor({
             triggerHandler: typeAhead,
             inputMethod: INPUT_METHOD.QUICK_INSERT
           })(tr);
-          api === null || api === void 0 ? void 0 : (_api$dependencies$ana8 = api.dependencies.analytics) === null || _api$dependencies$ana8 === void 0 ? void 0 : _api$dependencies$ana8.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions.attachAnalyticsEvent({
             action: ACTION.INVOKED,
             actionSubject: ACTION_SUBJECT.TYPEAHEAD,
             actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,

package/dist/es2019/plugins/emoji/pm-plugins/ascii-input-rules.js

@@ -2,12 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { createRule, createPlugin } from '@atlaskit/prosemirror-input-rules';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
-import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '../../analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 let matcher;
-export function inputRulePlugin(schema, providerFactory, featureFlags) {
+export function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
   if (schema.nodes.emoji && providerFactory) {
     initMatcher(providerFactory);
-    const asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler);
+    const asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
     return createPlugin('emoji', [asciiEmojiRule]);
   }
   return;
@@ -25,17 +25,17 @@ function initMatcher(providerFactory) {
   };
   providerFactory.subscribe('emojiProvider', handleProvider);
 }
-function inputRuleHandler(state, matchParts, start, end) {
+const inputRuleHandler = editorAnalyticsAPI => (state, matchParts, start, end) => {
   if (!matcher) {
     return null;
   }
   const match = matcher.match(matchParts);
   if (match) {
-    const transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end);
+    const transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI);
     return transactionCreator.create();
   }
   return null;
-}
+};
 const REGEX_LEADING_CAPTURE_INDEX = 1;
 const REGEX_EMOJI_LEADING_PARENTHESES = 2;
 const REGEX_EMOJI_ASCII_CAPTURE_INDEX = 3;
@@ -107,15 +107,17 @@ class RecordingAsciiEmojiMatcher extends AsciiEmojiMatcher {
   }
 }
 class AsciiEmojiTransactionCreator {
-  constructor(state, match, start, end) {
+  constructor(state, match, start, end, editorAnalyticsAPI) {
     this.state = state;
     this.match = match;
     this.start = start;
     this.end = end;
+    this.editorAnalyticsAPI = editorAnalyticsAPI;
   }
   create() {
+    var _this$editorAnalytics;
     const tr = this.state.tr.replaceWith(this.from, this.to, this.createNodes());
-    return addAnalytics(this.state, tr, {
+    (_this$editorAnalytics = this.editorAnalyticsAPI) === null || _this$editorAnalytics === void 0 ? void 0 : _this$editorAnalytics.attachAnalyticsEvent({
       action: ACTION.INSERTED,
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
@@ -123,7 +125,8 @@ class AsciiEmojiTransactionCreator {
         inputMethod: INPUT_METHOD.ASCII
       },
       eventType: EVENT_TYPE.TRACK
-    });
+    })(tr);
+    return tr;
   }
   get from() {
     return this.start + this.match.leadingString.length;
@@ -160,7 +163,7 @@ class AsciiEmojiTransactionCreator {
   }
 }
 export const stateKey = new PluginKey('asciiEmojiPlugin');
-const plugins = (schema, providerFactory, featureFlags) => {
-  return [inputRulePlugin(schema, providerFactory, featureFlags)].filter(plugin => !!plugin);
+const plugins = (schema, providerFactory, featureFlags, editorAnalyticsAPI) => {
+  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI)].filter(plugin => !!plugin);
 };
 export default plugins;

package/dist/es2019/plugins/extension/pm-plugins/main.js

@@ -1,4 +1,7 @@
+import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { isSelectionAtStartOfNode, isSelectionAtEndOfNode } from '@atlaskit/editor-common/selection';
 import { createSelectionClickHandler } from '../../selection/utils';
 import ExtensionNodeView from '../nodeviews/extension';
 import { updateState, clearEditingContext } from '../commands';
@@ -163,6 +166,53 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
     },
     key: pluginKey,
     props: {
+      handleDOMEvents: {
+        /**
+         * ED-18072 - Cannot shift + arrow past bodied extension if it is not empty.
+         * This code is to handle the case where the selection starts inside or on the node and the user is trying to shift + arrow.
+         * For other part of the solution see code in: packages/editor/editor-core/src/plugins/selection/pm-plugins/events/keydown.ts
+         */
+        keydown: (view, event) => {
+          if (event instanceof KeyboardEvent && event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            const {
+              schema,
+              selection,
+              selection: {
+                $head
+              },
+              doc,
+              tr
+            } = view.state;
+            const {
+              bodiedExtension
+            } = schema.nodes;
+            if (selection instanceof TextSelection || selection instanceof NodeSelection) {
+              const maybeBodiedExtension = selection instanceof TextSelection ? findParentNodeOfTypeClosestToPos($head, bodiedExtension) : findSelectedNodeOfType(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                const end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && isSelectionAtStartOfNode($head, maybeBodiedExtension)) {
+                  const anchor = end + 1;
+
+                  // an offset is used here so that left arrow selects the first character before the node (consistent with arrow right)
+                  const headOffset = event.key === 'ArrowLeft' ? -1 : 0;
+                  const head = maybeBodiedExtension.pos + headOffset;
+                  const newSelection = TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && isSelectionAtEndOfNode($head, maybeBodiedExtension)) {
+                  const anchor = maybeBodiedExtension.pos - 1;
+                  const head = end + 1;
+                  const newSelection = TextSelection.create(doc, Math.min(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        }
+      },
       nodeViews: {
         // WARNING: referentiality-plugin also creates these nodeviews
         extension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -315,7 +315,7 @@ function floatingToolbarPluginFactory(options) {
   };
   const apply = (tr, pluginState) => {
     const newPluginState = {
-      getConfigWithNodeInfo
+      ...pluginState
     };
     dispatch(pluginKey, newPluginState);
     return newPluginState;

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

@@ -290,7 +290,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
       this.props.editorView.focus();
-      insertEmoji(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
+      insertEmoji(this.editorAnalyticsAPI)(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
       this.toggleEmojiPicker();
       return true;
     });

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
@@ -8,6 +7,7 @@ import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaski
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -22,6 +22,8 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
     super(...args);
@@ -133,7 +135,8 @@ export default class MediaSingleNode extends Component {
       const tr = state.tr.setNodeMarkup(pos, undefined, {
         ...this.props.node.attrs,
         layout,
-        width
+        width,
+        widthType: 'pixel'
       });
       tr.setMeta('scrollIntoView', false);
       /**
@@ -220,14 +223,21 @@ export default class MediaSingleNode extends Component {
       view: {
         state
       },
-      view
+      view,
+      pluginInjectionApi,
+      width: containerWidth,
+      lineLength,
+      dispatchAnalyticsEvent
     } = this.props;
     const {
       layout,
-      width: mediaSingleWidth
+      widthType,
+      width: mediaSingleWidthAttribute
     } = node.attrs;
     const childNode = node.firstChild;
     const attrs = childNode.attrs;
+
+    // original width and height of child media node (scaled)
     let {
       width,
       height
@@ -259,15 +269,29 @@ export default class MediaSingleNode extends Component {
       width = DEFAULT_IMAGE_WIDTH;
       height = DEFAULT_IMAGE_HEIGHT;
     }
+    const isSelected = selected();
     const mediaSingleProps = {
       layout,
       width,
       height,
-      containerWidth: this.props.width,
-      lineLength: this.props.lineLength,
-      pctWidth: mediaSingleWidth,
+      containerWidth: containerWidth,
+      lineLength: this.getLineLength(view, getPos()) || lineLength,
+      pctWidth: mediaSingleWidthAttribute,
       fullWidthMode,
-      hasFallbackContainer: false
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidthAttribute && getMediaSinglePixelWidth(mediaSingleWidthAttribute, lineLength, widthType)
+    };
+    const ResizableMediaSingleProps = {
+      view: view,
+      getPos: getPos,
+      updateSize: this.updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: this.state.viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      ...mediaSingleProps
     };
     let canResize = !!this.props.mediaOptions.allowResizing;
     if (!this.props.mediaOptions.allowResizingInTables) {
@@ -282,12 +306,10 @@ export default class MediaSingleNode extends Component {
         canResize = canResize && !disabledNode;
       }
     }
-    const lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
-    const isSelected = selected();
     const shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
     const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
-      css: figureWrapper,
+      css: [figureWrapper],
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
     }, jsx("div", {
@@ -296,18 +318,7 @@ export default class MediaSingleNode extends Component {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
-    return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
-      lineLength: lineLength,
-      view: this.props.view,
-      getPos: getPos,
-      updateSize: this.updateSize,
-      gridSize: 12,
-      viewMediaClientConfig: this.state.viewMediaClientConfig,
-      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
-      selected: isSelected,
-      dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent,
-      pluginInjectionApi: this.props.pluginInjectionApi
-    }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
   }
 }
 _defineProperty(MediaSingleNode, "defaultProps", {

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

@@ -16,8 +16,9 @@ import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/media-ui';
 import { cardMessages } from '@atlaskit/editor-common/messages';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia, removeMediaGroupNode } from './utils';
+import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark } from './commands';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
 import ImageBorderItem from '../ui/ImageBorder';
@@ -231,7 +232,22 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   }
   if (allowAdvancedToolBarOptions) {
     var _pluginInjectionApi$d;
-    const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables);
+    const widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    let isChangingLayoutDisabled = false;
+    if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+      var _widthPlugin$sharedSt;
+      const contentWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
+      const selectedNode = getSelectedMediaSingle(state);
+      if (selectedNode && contentWidth) {
+        const {
+          width
+        } = selectedNode.node.attrs;
+        if (width >= contentWidth) {
+          isChangingLayoutDisabled = true;
+        }
+      }
+    }
+    const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
     toolbarButtons = [...toolbarButtons, ...layoutButtons];
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -342,7 +358,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d4 !== void 0 ? _pluginInjectionApi$d4 : {};
-  if (!mediaPluginState) {
+  if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }
   const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

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

@@ -1,5 +1,5 @@
 import { getMediaClient } from '@atlaskit/media-client';
-import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -40,4 +40,10 @@ export const removeMediaGroupNode = state => {
     tr = removeSelectedNode(tr);
   }
   return tr;
+};
+export const getSelectedMediaSingle = state => {
+  const {
+    mediaSingle
+  } = state.schema.nodes;
+  return findSelectedNodeOfType(mediaSingle)(state.selection) || findParentNodeOfType(mediaSingle)(state.selection);
 };