@atlaskit/editor-core 187.8.13 → 187.9.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 187.9.2
+
+### Patch Changes
+
+- [`6190030df97`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6190030df97) - Migrate `emoji` plugin to the new Analytics API
+- [`78068814a36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/78068814a36) - [ux] Fix user selection via arrow keys getting stuck inside nested body macro if it's not empty or cannot shift + arrow into the macro
+
+## 187.9.0
+
+### Minor Changes
+
+- [`936c30f8dc9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936c30f8dc9) - support new image resize experience under feature flag
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 187.8.13
 
 ### Patch Changes

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

@@ -4,40 +4,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertEmoji = insertEmoji;
+exports.insertEmoji = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _analytics = require("../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function insertEmoji(emojiId, inputMethod) {
-  return function (state, dispatch) {
-    var emoji = state.schema.nodes.emoji;
-    if (emoji && emojiId) {
-      var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
-        text: emojiId.fallback || emojiId.shortName
-      }));
-      var textNode = state.schema.text(' ');
-      if (dispatch) {
-        var fragment = _model.Fragment.fromArray([node, textNode]);
-        var tr = (0, _utils.safeInsert)(fragment)(state.tr);
-        if (inputMethod) {
-          (0, _analytics.addAnalytics)(state, tr, {
-            action: _analytics.ACTION.INSERTED,
-            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
-            attributes: {
-              inputMethod: inputMethod
-            },
-            eventType: _analytics.EVENT_TYPE.TRACK
-          });
+var insertEmoji = function insertEmoji(editorAnalyticsAPI) {
+  return function (emojiId, inputMethod) {
+    return function (state, dispatch) {
+      var emoji = state.schema.nodes.emoji;
+      if (emoji && emojiId) {
+        var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
+          text: emojiId.fallback || emojiId.shortName
+        }));
+        var textNode = state.schema.text(' ');
+        if (dispatch) {
+          var fragment = _model.Fragment.fromArray([node, textNode]);
+          var tr = (0, _utils.safeInsert)(fragment)(state.tr);
+          if (inputMethod) {
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
+              attributes: {
+                inputMethod: inputMethod
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+          }
+          dispatch(tr.setSelection(_state.Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
         }
-        dispatch(tr.setSelection(_state.Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        return true;
       }
-      return true;
-    }
-    return false;
+      return false;
+    };
   };
-}
+};
+exports.insertEmoji = insertEmoji;

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

@@ -188,10 +188,11 @@ var emojiPlugin = function emojiPlugin(options, api) {
       }, {
         name: 'emojiAsciiInputRule',
         plugin: function plugin(_ref6) {
+          var _api$dependencies$ana8;
           var schema = _ref6.schema,
             providerFactory = _ref6.providerFactory,
             featureFlags = _ref6.featureFlags;
-          return (0, _asciiInputRules.inputRulePlugin)(schema, providerFactory, featureFlags);
+          return (0, _asciiInputRules.inputRulePlugin)(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);
         }
       }];
     },
@@ -208,13 +209,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana8;
+            var _api$dependencies$ana9;
             var tr = insert(undefined);
             (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
               triggerHandler: typeAhead,
               inputMethod: _analytics.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: _analytics.ACTION.INVOKED,
               actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,

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

@@ -16,14 +16,14 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
-var _analytics = require("../../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var matcher;
-function inputRulePlugin(schema, providerFactory, featureFlags) {
+function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
   if (schema.nodes.emoji && providerFactory) {
     initMatcher(providerFactory);
-    var asciiEmojiRule = (0, _prosemirrorInputRules.createRule)(AsciiEmojiMatcher.REGEX, inputRuleHandler);
+    var asciiEmojiRule = (0, _prosemirrorInputRules.createRule)(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
     return (0, _prosemirrorInputRules.createPlugin)('emoji', [asciiEmojiRule]);
   }
   return;
@@ -41,17 +41,19 @@ function initMatcher(providerFactory) {
   };
   providerFactory.subscribe('emojiProvider', handleProvider);
 }
-function inputRuleHandler(state, matchParts, start, end) {
-  if (!matcher) {
+var inputRuleHandler = function inputRuleHandler(editorAnalyticsAPI) {
+  return function (state, matchParts, start, end) {
+    if (!matcher) {
+      return null;
+    }
+    var match = matcher.match(matchParts);
+    if (match) {
+      var transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI);
+      return transactionCreator.create();
+    }
     return null;
-  }
-  var match = matcher.match(matchParts);
-  if (match) {
-    var transactionCreator = new AsciiEmojiTransactionCreator(state, match, start, end);
-    return transactionCreator.create();
-  }
-  return null;
-}
+  };
+};
 var REGEX_LEADING_CAPTURE_INDEX = 1;
 var REGEX_EMOJI_LEADING_PARENTHESES = 2;
 var REGEX_EMOJI_ASCII_CAPTURE_INDEX = 3;
@@ -150,18 +152,20 @@ var RecordingAsciiEmojiMatcher = /*#__PURE__*/function (_AsciiEmojiMatcher) {
   return RecordingAsciiEmojiMatcher;
 }(AsciiEmojiMatcher);
 var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
-  function AsciiEmojiTransactionCreator(state, match, start, end) {
+  function AsciiEmojiTransactionCreator(state, match, start, end, editorAnalyticsAPI) {
     (0, _classCallCheck2.default)(this, AsciiEmojiTransactionCreator);
     this.state = state;
     this.match = match;
     this.start = start;
     this.end = end;
+    this.editorAnalyticsAPI = editorAnalyticsAPI;
   }
   (0, _createClass2.default)(AsciiEmojiTransactionCreator, [{
     key: "create",
     value: function create() {
+      var _this$editorAnalytics;
       var tr = this.state.tr.replaceWith(this.from, this.to, this.createNodes());
-      return (0, _analytics.addAnalytics)(this.state, tr, {
+      (_this$editorAnalytics = this.editorAnalyticsAPI) === null || _this$editorAnalytics === void 0 ? void 0 : _this$editorAnalytics.attachAnalyticsEvent({
         action: _analytics.ACTION.INSERTED,
         actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
@@ -169,7 +173,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
           inputMethod: _analytics.INPUT_METHOD.ASCII
         },
         eventType: _analytics.EVENT_TYPE.TRACK
-      });
+      })(tr);
+      return tr;
     }
   }, {
     key: "from",
@@ -221,8 +226,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
 }();
 var stateKey = new _state.PluginKey('asciiEmojiPlugin');
 exports.stateKey = stateKey;
-var plugins = function plugins(schema, providerFactory, featureFlags) {
-  return [inputRulePlugin(schema, providerFactory, featureFlags)].filter(function (plugin) {
+var plugins = function plugins(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
+  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI)].filter(function (plugin) {
     return !!plugin;
   });
 };

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

@@ -27,14 +27,17 @@ Object.defineProperty(exports, "pluginKey", {
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _utils = require("../../selection/utils");
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils2 = require("../../selection/utils");
 var _extension = _interopRequireDefault(require("../nodeviews/extension"));
 var _commands = require("../commands");
-var _utils2 = require("../utils");
+var _utils3 = require("../utils");
 var _pluginFactory = require("../plugin-factory");
 var _pluginKey = require("../plugin-key");
-var _utils3 = require("./utils");
+var _utils4 = require("./utils");
 var shouldShowEditButton = function shouldShowEditButton(extensionHandler, extensionProvider) {
   var usesLegacyMacroBrowser = !extensionHandler && !extensionProvider || typeof extensionHandler === 'function';
   var usesModernUpdateMethod = (0, _typeof2.default)(extensionHandler) === 'object' && typeof extensionHandler.update === 'function';
@@ -60,7 +63,7 @@ var getUpdateExtensionPromise = /*#__PURE__*/function () {
             break;
           }
           _context.next = 7;
-          return (0, _utils3.updateEditButton)(view, extensionProvider);
+          return (0, _utils4.updateEditButton)(view, extensionProvider);
         case 7:
           updateMethod = _context.sent;
           if (!updateMethod) {
@@ -100,7 +103,7 @@ var createExtensionProviderHandler = function createExtensionProviderHandler(vie
               extensionProvider: extensionProvider
             })(view.state, view.dispatch);
             _context2.next = 8;
-            return (0, _utils3.updateEditButton)(view, extensionProvider);
+            return (0, _utils4.updateEditButton)(view, extensionProvider);
           case 8:
             _context2.next = 13;
             break;
@@ -177,7 +180,7 @@ var handleUpdate = function handleUpdate(_ref4) {
     showEditButton = _getPluginState.showEditButton;
 
   // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
-  var selectedExtension = (0, _utils2.getSelectedExtension)(state, true);
+  var selectedExtension = (0, _utils3.getSelectedExtension)(state, true);
   if (!selectedExtension) {
     if (showContextPanel) {
       (0, _commands.clearEditingContext)(applyChange)(state, dispatch);
@@ -185,11 +188,11 @@ var handleUpdate = function handleUpdate(_ref4) {
     return;
   }
   var node = selectedExtension.node;
-  var newElement = (0, _utils2.getSelectedDomElement)(state.schema, domAtPos, selectedExtension);
+  var newElement = (0, _utils3.getSelectedDomElement)(state.schema, domAtPos, selectedExtension);
 
   // In some cases, showEditButton can be stale and the edit button doesn't show - @see ED-15285
   // To be safe, we update the showEditButton state here
-  var shouldUpdateEditButton = !showEditButton && extensionProvider && element === newElement && !(0, _utils2.getSelectedExtension)(prevState, true);
+  var shouldUpdateEditButton = !showEditButton && extensionProvider && element === newElement && !(0, _utils3.getSelectedExtension)(prevState, true);
   var isNewNodeSelected = node.attrs.localId ? localId !== node.attrs.localId :
   // This is the current assumption and it's wrong but we are keeping it
   // as fallback in case we need to turn off `allowLocalIdGeneration`
@@ -263,6 +266,48 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
     },
     key: _pluginKey.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: function keydown(view, event) {
+          if (event instanceof KeyboardEvent && event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            var _view$state = view.state,
+              schema = _view$state.schema,
+              selection = _view$state.selection,
+              $head = _view$state.selection.$head,
+              doc = _view$state.doc,
+              tr = _view$state.tr;
+            var bodiedExtension = schema.nodes.bodiedExtension;
+            if (selection instanceof _state.TextSelection || selection instanceof _state.NodeSelection) {
+              var maybeBodiedExtension = selection instanceof _state.TextSelection ? (0, _utils.findParentNodeOfTypeClosestToPos)($head, bodiedExtension) : (0, _utils.findSelectedNodeOfType)(bodiedExtension)(selection);
+              if (maybeBodiedExtension) {
+                var end = maybeBodiedExtension.pos + maybeBodiedExtension.node.nodeSize;
+                if (event.key === 'ArrowUp' || event.key === 'ArrowLeft' && (0, _selection.isSelectionAtStartOfNode)($head, maybeBodiedExtension)) {
+                  var anchor = end + 1;
+
+                  // 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 = maybeBodiedExtension.pos + headOffset;
+                  var newSelection = _state.TextSelection.create(doc, Math.max(anchor, selection.anchor), head);
+                  view.dispatch(tr.setSelection(newSelection));
+                  return true;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowRight' && (0, _selection.isSelectionAtEndOfNode)($head, maybeBodiedExtension)) {
+                  var _anchor = maybeBodiedExtension.pos - 1;
+                  var _head = end + 1;
+                  var _newSelection = _state.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: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi),
@@ -271,7 +316,7 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
         // WARNING: referentiality-plugin also creates these nodeviews
         inlineExtension: (0, _extension.default)(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi)
       },
-      handleClickOn: (0, _utils.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
+      handleClickOn: (0, _utils2.createSelectionClickHandler)(['extension', 'bodiedExtension'], function (target) {
         return !target.closest('.extension-content');
       }, {
         useLongPressSelection: useLongPressSelection

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

@@ -334,9 +334,7 @@ function floatingToolbarPluginFactory(options) {
     return relevantConfig;
   };
   var apply = function apply(tr, pluginState) {
-    var newPluginState = {
-      getConfigWithNodeInfo: getConfigWithNodeInfo
-    };
+    var newPluginState = _objectSpread({}, pluginState);
     dispatch(pluginKey, newPluginState);
     return newPluginState;
   };

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

@@ -288,7 +288,7 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedEmoji", function (emojiId) {
       _this.props.editorView.focus();
-      (0, _insertEmoji.insertEmoji)(emojiId, _analytics.INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
+      (0, _insertEmoji.insertEmoji)(_this.editorAnalyticsAPI)(emojiId, _analytics.INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
       _this.toggleEmojiPicker();
       return true;
     });

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ReactMediaSingleNode = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -24,6 +23,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
 var _utils2 = require("../../../utils");
+var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
@@ -38,6 +38,8 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _captions = require("../commands/captions");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -208,7 +210,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, _this.props.node.attrs), {}, {
         layout: layout,
-        width: width
+        width: width,
+        widthType: 'pixel'
       }));
       tr.setMeta('scrollIntoView', false);
       /**
@@ -320,12 +323,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         mediaOptions = _this$props2.mediaOptions,
         fullWidthMode = _this$props2.fullWidthMode,
         state = _this$props2.view.state,
-        view = _this$props2.view;
+        view = _this$props2.view,
+        pluginInjectionApi = _this$props2.pluginInjectionApi,
+        containerWidth = _this$props2.width,
+        lineLength = _this$props2.lineLength,
+        dispatchAnalyticsEvent = _this$props2.dispatchAnalyticsEvent;
       var _ref4 = node.attrs,
         layout = _ref4.layout,
-        mediaSingleWidth = _ref4.width;
+        widthType = _ref4.widthType,
+        mediaSingleWidthAttribute = _ref4.width;
       var childNode = node.firstChild;
       var attrs = childNode.attrs;
+
+      // original width and height of child media node (scaled)
       var width = attrs.width,
         height = attrs.height;
       if (attrs.type === 'external') {
@@ -352,16 +362,29 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         width = _ui.DEFAULT_IMAGE_WIDTH;
         height = _ui.DEFAULT_IMAGE_HEIGHT;
       }
+      var isSelected = selected();
       var mediaSingleProps = {
         layout: layout,
         width: width,
         height: height,
-        containerWidth: this.props.width,
-        lineLength: this.props.lineLength,
-        pctWidth: mediaSingleWidth,
+        containerWidth: containerWidth,
+        lineLength: this.getLineLength(view, getPos()) || lineLength,
+        pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
-        hasFallbackContainer: false
+        hasFallbackContainer: false,
+        mediaSingleWidth: mediaSingleWidthAttribute && (0, _mediaSingle.getMediaSinglePixelWidth)(mediaSingleWidthAttribute, lineLength, widthType)
       };
+      var ResizableMediaSingleProps = _objectSpread({
+        view: view,
+        getPos: getPos,
+        updateSize: this.updateSize,
+        gridSize: 12,
+        viewMediaClientConfig: this.state.viewMediaClientConfig,
+        allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+        selected: isSelected,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: pluginInjectionApi
+      }, mediaSingleProps);
       var canResize = !!this.props.mediaOptions.allowResizing;
       if (!this.props.mediaOptions.allowResizingInTables) {
         // If resizing not allowed in tables, check parents for tables
@@ -373,12 +396,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           canResize = canResize && !disabledNode;
         }
       }
-      var lineLength = this.getLineLength(view, getPos()) || this.props.lineLength;
-      var isSelected = selected();
       var shouldShowPlaceholder = (0, _mediaCommon2.getMediaFeatureFlag)('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
       var MediaChildren = (0, _react.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
-        css: _styles.figureWrapper,
+        css: [_styles.figureWrapper],
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
       }, (0, _react.jsx)("div", {
@@ -387,18 +408,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _react.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, 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) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;

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

@@ -25,6 +25,7 @@ var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mediaUi = require("@atlaskit/media-ui");
 var _messages2 = require("@atlaskit/editor-common/messages");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _filePreviewItem = require("./filePreviewItem");
 var _utils2 = require("./utils");
 var _commands = require("./commands");
@@ -232,7 +233,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }
   if (allowAdvancedToolBarOptions) {
     var _pluginInjectionApi$d;
-    var layoutButtons = (0, _card.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);
+    var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
+    var isChangingLayoutDisabled = false;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience')) {
+      var _widthPlugin$sharedSt;
+      var contentWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
+      var selectedNode = (0, _utils2.getSelectedMediaSingle)(state);
+      if (selectedNode && contentWidth) {
+        var width = selectedNode.node.attrs.width;
+        if (width >= contentWidth) {
+          isChangingLayoutDisabled = true;
+        }
+      }
+    }
+    var layoutButtons = (0, _card.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 = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
     if (layoutButtons.length) {
       toolbarButtons.push({
@@ -334,7 +348,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   var _ref2 = (_pluginInjectionApi$d4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d4 !== void 0 ? _pluginInjectionApi$d4 : {},
     hoverDecoration = _ref2.hoverDecoration;
-  if (!mediaPluginState) {
+  if (!mediaPluginState || mediaPluginState.isResizing) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedMediaContainerNodeAttrs = exports.downloadMedia = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.downloadMedia = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _mediaClient = require("@atlaskit/media-client");
@@ -68,4 +68,9 @@ var removeMediaGroupNode = function removeMediaGroupNode(state) {
   }
   return tr;
 };
-exports.removeMediaGroupNode = removeMediaGroupNode;
+exports.removeMediaGroupNode = removeMediaGroupNode;
+var getSelectedMediaSingle = function getSelectedMediaSingle(state) {
+  var mediaSingle = state.schema.nodes.mediaSingle;
+  return (0, _utils.findSelectedNodeOfType)(mediaSingle)(state.selection) || (0, _utils.findParentNodeOfType)(mediaSingle)(state.selection);
+};
+exports.getSelectedMediaSingle = getSelectedMediaSingle;