@atlaskit/editor-plugin-media 9.1.1 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 9.3.0
+
+### Minor Changes
+
+- [`12da6b7aac3a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12da6b7aac3a9) -
+  add support of disable resize handles in resizable media single
+
+## 9.2.0
+
+### Minor Changes
+
+- [`ca937489954b8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca937489954b8) -
+  Introduce new insertMediaSingle on media plugin and deprecate old action version.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.1.1
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -105,6 +105,7 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
   });
 };
 var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
+  var _api$analytics3;
   var _ref3$config = _ref3.config,
     options = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
@@ -159,7 +160,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
     commands: {
       showMediaViewer: _commands.showMediaViewer,
       hideMediaViewer: _commands.hideMediaViewer,
-      trackMediaPaste: _commands.trackMediaPaste
+      trackMediaPaste: _commands.trackMediaPaste,
+      insertMediaSingle: (0, _commands.insertMediaAsMediaSingleCommand)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.allowPixelResizing)
     },
     nodes: function nodes() {
       var _ref5 = options || {},
@@ -234,9 +236,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
       }, {
         name: 'mediaKeymap',
         plugin: function plugin(_ref7) {
-          var _api$analytics3, _api$selection;
+          var _api$analytics4, _api$selection;
           var getIntl = _ref7.getIntl;
-          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
+          return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
@@ -256,9 +258,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
           plugin: function plugin(_ref9) {
-            var _api$analytics4;
+            var _api$analytics5;
             var schema = _ref9.schema;
-            return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+            return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
           }
         });
       }

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -498,6 +498,52 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
   })));
+  if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+    return mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      showLegacyNotification: widthType !== 'pixel',
+      forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
+      disableHandles: !canResize
+    }, MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
+      pctWidth: mediaSingleWidthAttribute,
+      disableHandles: !canResize
+    }, MediaChildren);
+  }
   return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
     view: view,
     getPos: getPos,

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -22,7 +22,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _commands = require("../commands");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }

package/dist/cjs/pm-plugins/commands.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.trackMediaPaste = exports.showMediaViewer = exports.hideMediaViewer = void 0;
+exports.trackMediaPaste = exports.showMediaViewer = exports.insertMediaAsMediaSingleCommand = exports.hideMediaViewer = void 0;
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
+var _mediaSingle = require("./utils/media-single");
 var showMediaViewer = exports.showMediaViewer = function showMediaViewer(media) {
   return function (_ref) {
     var tr = _ref.tr;
@@ -37,4 +38,9 @@ var trackMediaPaste = exports.trackMediaPaste = function trackMediaPaste(attrs)
     });
     return tr;
   };
+};
+var insertMediaAsMediaSingleCommand = exports.insertMediaAsMediaSingleCommand = function insertMediaAsMediaSingleCommand(editorAnalyticsAPI, allowPixelResizing) {
+  return function (mediaAttrs, inputMethod, insertMediaVia) {
+    return (0, _mediaSingle.createInsertMediaAsMediaSingleCommand)(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing);
+  };
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isVideo = exports.isMediaSingle = exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.changeFromMediaInlineToMediaSingleNode = void 0;
+exports.isVideo = exports.isMediaSingle = exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createInsertMediaAsMediaSingleCommand = exports.changeFromMediaInlineToMediaSingleNode = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -14,6 +14,7 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCommon = require("../utils/media-common");
 var _analytics2 = require("./analytics");
 var _isType = require("./is-type");
@@ -44,6 +45,21 @@ function insertNodesWithOptionalParagraph(_ref) {
     insertMediaVia = _ref.insertMediaVia;
   return function (state, dispatch) {
     var tr = state.tr;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_introduce_insert_media_command')) {
+      var _updatedTr = insertNodesWithOptionalParagraphCommand({
+        nodes: nodes,
+        analyticsAttributes: analyticsAttributes,
+        editorAnalyticsAPI: editorAnalyticsAPI,
+        insertMediaVia: insertMediaVia
+      })({
+        tr: tr
+      });
+      if (_updatedTr && dispatch) {
+        dispatch === null || dispatch === void 0 || dispatch(_updatedTr);
+        return true;
+      }
+      return false;
+    }
     var inputMethod = analyticsAttributes.inputMethod,
       fileExtension = analyticsAttributes.fileExtension,
       newType = analyticsAttributes.newType,
@@ -76,6 +92,43 @@ function insertNodesWithOptionalParagraph(_ref) {
     return true;
   };
 }
+function insertNodesWithOptionalParagraphCommand(_ref2) {
+  var nodes = _ref2.nodes,
+    _ref2$analyticsAttrib = _ref2.analyticsAttributes,
+    analyticsAttributes = _ref2$analyticsAttrib === void 0 ? {} : _ref2$analyticsAttrib,
+    editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+    insertMediaVia = _ref2.insertMediaVia;
+  return function (_ref3) {
+    var tr = _ref3.tr;
+    var inputMethod = analyticsAttributes.inputMethod,
+      fileExtension = analyticsAttributes.fileExtension,
+      newType = analyticsAttributes.newType,
+      previousType = analyticsAttributes.previousType;
+    var updatedTr = tr;
+    var openEnd = 0;
+    if (tr.selection.empty) {
+      var insertFrom = (0, _selection.selectionIsAtTheBeginningOfBlock)(tr.selection) ? tr.selection.$from.before() : tr.selection.from;
+
+      // the use of pmSafeInsert causes the node selection to media single node.
+      // It leads to discrepancy between the full-page and comment editor - not sure why :shrug:
+      // When multiple images are uploaded, the node selection is set to the previous node
+      // and got overridden by the next node inserted.
+      // It also causes the images position shifted when the images are uploaded.
+      // E.g the images are uploaded after a table, the images will be inserted inside the table.
+      // so we revert to use tr.insert instead. No extra paragraph is added.
+      updatedTr = updatedTr.insert(insertFrom, nodes);
+    } else {
+      updatedTr.replaceSelection(new _model.Slice(_model.Fragment.from(nodes), 0, openEnd));
+    }
+    if (inputMethod) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension, insertMediaVia))(updatedTr);
+    }
+    if (newType && previousType) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent((0, _analytics2.getChangeMediaAnalytics)(previousType, newType, (0, _analytics2.findChangeFromLocation)(tr.selection)))(updatedTr);
+    }
+    return updatedTr;
+  };
+}
 var isMediaSingle = exports.isMediaSingle = function isMediaSingle(schema, fileMimeType) {
   return !!schema.nodes.mediaSingle && (0, _isType.isImage)(fileMimeType);
 };
@@ -94,6 +147,16 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
   if (node.type !== media || !(0, _isType.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
+  if ((0, _platformFeatureFlags.fg)('platform_editor_introduce_insert_media_command')) {
+    var updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing)({
+      tr: state.tr
+    });
+    if (updatedTr && dispatch) {
+      dispatch === null || dispatch === void 0 || dispatch(updatedTr);
+      return true;
+    }
+    return false;
+  }
   var mediaSingleAttrs = allowPixelResizing ? {
     widthType: 'pixel',
     width: (0, _mediaSingle.getMediaSingleInitialWidth)((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH),
@@ -112,6 +175,42 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
     insertMediaVia: insertMediaVia
   })(state, dispatch);
 };
+var createInsertMediaAsMediaSingleCommand = exports.createInsertMediaAsMediaSingleCommand = function createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing) {
+  return function (_ref4) {
+    var _mediaAttrs$__fileMim, _mediaAttrs$width, _mediaAttrs$__fileMim2;
+    var tr = _ref4.tr;
+    var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+      mediaSingle = _tr$doc$type$schema$n.mediaSingle,
+      media = _tr$doc$type$schema$n.media;
+    if (!mediaSingle || !media) {
+      return null;
+    }
+    if (mediaAttrs.type !== 'external' && !(0, _isType.isImage)((_mediaAttrs$__fileMim = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim !== void 0 ? _mediaAttrs$__fileMim : undefined)) {
+      return null;
+    }
+    var mediaSingleAttrs = allowPixelResizing ? {
+      widthType: 'pixel',
+      width: (0, _mediaSingle.getMediaSingleInitialWidth)((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH),
+      layout: 'center'
+    } : {};
+    var mediaNode = media.create(mediaAttrs);
+    var mediaSingleNode = mediaSingle.create(mediaSingleAttrs, mediaNode);
+    var nodes = [mediaSingleNode];
+    var analyticsAttributes = {
+      inputMethod: inputMethod,
+      // External images have no file extension
+      fileExtension: mediaAttrs.type !== 'external' && mediaAttrs.__fileMimeType ? (_mediaAttrs$__fileMim2 = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim2 !== void 0 ? _mediaAttrs$__fileMim2 : undefined : undefined
+    };
+    return insertNodesWithOptionalParagraphCommand({
+      nodes: nodes,
+      analyticsAttributes: analyticsAttributes,
+      editorAnalyticsAPI: editorAnalyticsAPI,
+      insertMediaVia: insertMediaVia
+    })({
+      tr: tr
+    });
+  };
+};
 var getFileExtension = function getFileExtension(fileName) {
   if (fileName) {
     var extensionIdx = fileName.lastIndexOf('.');
@@ -225,12 +324,12 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, m
       _mediaState$scaleFact = mediaState.scaleFactor,
       scaleFactor = _mediaState$scaleFact === void 0 ? 1 : _mediaState$scaleFact,
       fileName = mediaState.fileName;
-    var _ref2 = dimensions || {
+    var _ref5 = dimensions || {
         height: undefined,
         width: undefined
       },
-      width = _ref2.width,
-      height = _ref2.height;
+      width = _ref5.width,
+      height = _ref5.height;
     var _schema$nodes = schema.nodes,
       media = _schema$nodes.media,
       mediaSingle = _schema$nodes.mediaSingle;

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -170,7 +170,8 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     updateSize = props.updateSize,
     view = props.view,
     viewMediaClientConfig = props.viewMediaClientConfig,
-    forceHandlePositioning = props.forceHandlePositioning;
+    forceHandlePositioning = props.forceHandlePositioning,
+    disableHandles = props.disableHandles;
   var initialWidth = (0, _react.useMemo)(function () {
     return mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
   }, [mediaSingleWidth]);
@@ -247,6 +248,9 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
+    if (!isResizing && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return "var(--ak-editor-max-container-width)";
+    }
     return calcMaxWidth({
       containerWidth: containerWidth,
       editorAppearance: editorAppearance
@@ -262,7 +266,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
   var resizerNextClassName = (0, _react.useMemo)(function () {
     if ((0, _expValEquals.expValEquals)('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
       var _classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, _styles.resizerItemClassName, {
-        'display-handle': selected,
+        'display-handle': (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -274,7 +278,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     return (0, _classnames.default)(classNameNext, _styles.resizerStyles);
-  }, [className, isResizing, layout, selected]);
+  }, [className, disableHandles, isResizing, layout, selected]);
   var isInsideInlineLike = (0, _react.useMemo)(function () {
     if (nodePosition === null) {
       return false;
@@ -284,6 +288,12 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
   }, [nodePosition, view]);
   var enable = (0, _react.useMemo)(function () {
+    if (disableHandles && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return {
+        left: false,
+        right: false
+      };
+    }
     return _ui.handleSides.reduce(function (acc, side) {
       var oppositeSide = side === 'left' ? 'right' : 'left';
       acc[side] = _utils.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
@@ -292,7 +302,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       }
       return acc;
     }, {});
-  }, [layout, isInsideInlineLike]);
+  }, [disableHandles, layout, isInsideInlineLike]);
   var defaultGuidelines = (0, _react.useMemo)(function () {
     if (isAdjacentMode) {
       return [];
@@ -520,7 +530,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     snap: snaps,
     resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
-    isHandleVisible: selected,
+    isHandleVisible: (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
     handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));

package/dist/cjs/ui/ResizableMediaSingle/index.js

@@ -366,6 +366,12 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
       var enable = {};
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
+        if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+          if (_this2.props.disableHandles) {
+            enable[side] = false;
+            return;
+          }
+        }
         enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
         if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;

package/dist/es2019/mediaPlugin.js

@@ -16,7 +16,7 @@ import { mediaInlineSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaInli
 import { mediaSingleSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/mediaSingle';
 import { createPlugin as createMediaAltTextPlugin } from './pm-plugins/alt-text';
 import keymapMediaAltTextPlugin from './pm-plugins/alt-text/keymap';
-import { hideMediaViewer, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
+import { hideMediaViewer, insertMediaAsMediaSingleCommand, showMediaViewer, trackMediaPaste } from './pm-plugins/commands';
 import keymapPlugin from './pm-plugins/keymap';
 import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
@@ -103,6 +103,7 @@ export const mediaPlugin = ({
   config: options = {},
   api
 }) => {
+  var _api$analytics3;
   let previousMediaProvider;
   const mediaErrorLocalIds = new Set();
   return {
@@ -153,7 +154,8 @@ export const mediaPlugin = ({
     commands: {
       showMediaViewer,
       hideMediaViewer,
-      trackMediaPaste
+      trackMediaPaste,
+      insertMediaSingle: insertMediaAsMediaSingleCommand(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.allowPixelResizing)
     },
     nodes() {
       const {
@@ -229,8 +231,8 @@ export const mediaPlugin = ({
         plugin: ({
           getIntl
         }) => {
-          var _api$analytics3, _api$selection;
-          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
+          var _api$analytics4, _api$selection;
+          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
@@ -251,8 +253,8 @@ export const mediaPlugin = ({
           plugin: ({
             schema
           }) => {
-            var _api$analytics4;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+            var _api$analytics5;
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
           }
         });
       }

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -457,6 +457,52 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
+  if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+    return mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      showLegacyNotification: widthType !== 'pixel',
+      forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
+      disableHandles: !canResize
+    }, MediaChildren) : jsx(ResizableMediaSingle, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
+      pctWidth: mediaSingleWidthAttribute,
+      disableHandles: !canResize
+    }, MediaChildren);
+  }
   return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
     view: view,
     getPos: getPos,

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -17,7 +17,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButton as Button, ErrorMessage, PanelTextInput } from '@atlaskit/editor-common/ui';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
-import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length

package/dist/es2019/pm-plugins/commands.js

@@ -1,6 +1,7 @@
 import { ACTIONS } from '../pm-plugins/actions';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { getIdentifier } from '../pm-plugins/utils/media-common';
+import { createInsertMediaAsMediaSingleCommand } from './utils/media-single';
 export const showMediaViewer = media => ({
   tr
 }) => {
@@ -30,4 +31,5 @@ export const trackMediaPaste = attrs => ({
     identifier
   });
   return tr;
-};
+};
+export const insertMediaAsMediaSingleCommand = (editorAnalyticsAPI, allowPixelResizing) => (mediaAttrs, inputMethod, insertMediaVia) => createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing);