@atlaskit/editor-plugin-media 9.1.1 → 9.3.0

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

@@ -2,10 +2,11 @@ import memoizeOne from 'memoize-one';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { atTheBeginningOfBlock } from '@atlaskit/editor-common/selection';
+import { atTheBeginningOfBlock, selectionIsAtTheBeginningOfBlock } from '@atlaskit/editor-common/selection';
 import { checkNodeDown, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { findChangeFromLocation, getChangeMediaAnalytics } from './analytics';
 import { isImage } from './is-type';
@@ -34,6 +35,21 @@ function insertNodesWithOptionalParagraph({
     const {
       tr
     } = state;
+    if (fg('platform_editor_introduce_insert_media_command')) {
+      const updatedTr = insertNodesWithOptionalParagraphCommand({
+        nodes,
+        analyticsAttributes,
+        editorAnalyticsAPI,
+        insertMediaVia
+      })({
+        tr
+      });
+      if (updatedTr && dispatch) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(updatedTr);
+        return true;
+      }
+      return false;
+    }
     const {
       inputMethod,
       fileExtension,
@@ -68,6 +84,46 @@ function insertNodesWithOptionalParagraph({
     return true;
   };
 }
+function insertNodesWithOptionalParagraphCommand({
+  nodes,
+  analyticsAttributes = {},
+  editorAnalyticsAPI,
+  insertMediaVia
+}) {
+  return ({
+    tr
+  }) => {
+    const {
+      inputMethod,
+      fileExtension,
+      newType,
+      previousType
+    } = analyticsAttributes;
+    let updatedTr = tr;
+    const openEnd = 0;
+    if (tr.selection.empty) {
+      const insertFrom = 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 Slice(Fragment.from(nodes), 0, openEnd));
+    }
+    if (inputMethod) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension, insertMediaVia))(updatedTr);
+    }
+    if (newType && previousType) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getChangeMediaAnalytics(previousType, newType, findChangeFromLocation(tr.selection)))(updatedTr);
+    }
+    return updatedTr;
+  };
+}
 export const isMediaSingle = (schema, fileMimeType) => !!schema.nodes.mediaSingle && isImage(fileMimeType);
 export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing) => {
   var _node$attrs$width;
@@ -87,6 +143,16 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
   if (node.type !== media || !isImage(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
+  if (fg('platform_editor_introduce_insert_media_command')) {
+    const updatedTr = createInsertMediaAsMediaSingleCommand(node.attrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing)({
+      tr: state.tr
+    });
+    if (updatedTr && dispatch) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch(updatedTr);
+      return true;
+    }
+    return false;
+  }
   const mediaSingleAttrs = allowPixelResizing ? {
     widthType: 'pixel',
     width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH),
@@ -105,6 +171,44 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
     insertMediaVia
   })(state, dispatch);
 };
+export const createInsertMediaAsMediaSingleCommand = (mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing) => {
+  return ({
+    tr
+  }) => {
+    var _mediaAttrs$__fileMim, _mediaAttrs$width, _mediaAttrs$__fileMim2;
+    const {
+      mediaSingle,
+      media
+    } = tr.doc.type.schema.nodes;
+    if (!mediaSingle || !media) {
+      return null;
+    }
+    if (mediaAttrs.type !== 'external' && !isImage((_mediaAttrs$__fileMim = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim !== void 0 ? _mediaAttrs$__fileMim : undefined)) {
+      return null;
+    }
+    const mediaSingleAttrs = allowPixelResizing ? {
+      widthType: 'pixel',
+      width: getMediaSingleInitialWidth((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : DEFAULT_IMAGE_WIDTH),
+      layout: 'center'
+    } : {};
+    const mediaNode = media.create(mediaAttrs);
+    const mediaSingleNode = mediaSingle.create(mediaSingleAttrs, mediaNode);
+    const nodes = [mediaSingleNode];
+    const analyticsAttributes = {
+      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,
+      analyticsAttributes,
+      editorAnalyticsAPI,
+      insertMediaVia
+    })({
+      tr
+    });
+  };
+};
 const getFileExtension = fileName => {
   if (fileName) {
     const extensionIdx = fileName.lastIndexOf('.');

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

@@ -161,7 +161,8 @@ export const ResizableMediaSingleNextFunctional = props => {
     updateSize,
     view,
     viewMediaClientConfig,
-    forceHandlePositioning
+    forceHandlePositioning,
+    disableHandles
   } = props;
   const initialWidth = useMemo(() => {
     return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -224,6 +225,9 @@ export const ResizableMediaSingleNextFunctional = props => {
     if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
+    if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return `var(--ak-editor-max-container-width)`;
+    }
     return calcMaxWidth({
       containerWidth,
       editorAppearance
@@ -239,7 +243,7 @@ export const ResizableMediaSingleNextFunctional = props => {
   const resizerNextClassName = useMemo(() => {
     if (expValEquals('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
       const classNameNext = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
-        'display-handle': selected,
+        'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -251,7 +255,7 @@ export const ResizableMediaSingleNextFunctional = props => {
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     return classnames(classNameNext, resizerStyles);
-  }, [className, isResizing, layout, selected]);
+  }, [className, disableHandles, isResizing, layout, selected]);
   const isInsideInlineLike = useMemo(() => {
     if (nodePosition === null) {
       return false;
@@ -263,6 +267,12 @@ export const ResizableMediaSingleNextFunctional = props => {
     return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
   }, [nodePosition, view]);
   const enable = useMemo(() => {
+    if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return {
+        left: false,
+        right: false
+      };
+    }
     return handleSides.reduce((acc, side) => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
       acc[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
@@ -271,7 +281,7 @@ export const ResizableMediaSingleNextFunctional = props => {
       }
       return acc;
     }, {});
-  }, [layout, isInsideInlineLike]);
+  }, [disableHandles, layout, isInsideInlineLike]);
   const defaultGuidelines = useMemo(() => {
     if (isAdjacentMode) {
       return [];
@@ -499,7 +509,7 @@ export const ResizableMediaSingleNextFunctional = props => {
     snap: snaps,
     resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
-    isHandleVisible: selected,
+    isHandleVisible: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
     handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));

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

@@ -296,6 +296,12 @@ export default class ResizableMediaSingle extends React.Component {
     const enable = {};
     handleSides.forEach(side => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        if (this.props.disableHandles) {
+          enable[side] = false;
+          return;
+        }
+      }
       enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
       if (side === 'left' && this.insideInlineLike) {
         enable[side] = false;

package/dist/esm/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';
@@ -96,6 +96,7 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
   });
 };
 export var mediaPlugin = function mediaPlugin(_ref3) {
+  var _api$analytics3;
   var _ref3$config = _ref3.config,
     options = _ref3$config === void 0 ? {} : _ref3$config,
     api = _ref3.api;
@@ -150,7 +151,8 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
     commands: {
       showMediaViewer: showMediaViewer,
       hideMediaViewer: hideMediaViewer,
-      trackMediaPaste: trackMediaPaste
+      trackMediaPaste: trackMediaPaste,
+      insertMediaSingle: 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 || {},
@@ -225,9 +227,9 @@ export var 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 keymapPlugin(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 keymapPlugin(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) {
@@ -247,9 +249,9 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
           plugin: function plugin(_ref9) {
-            var _api$analytics4;
+            var _api$analytics5;
             var schema = _ref9.schema;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
           }
         });
       }

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -492,6 +492,52 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     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/esm/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -24,7 +24,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 var MAX_ALT_TEXT_LENGTH = 510; // double tweet length

package/dist/esm/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 var showMediaViewer = function showMediaViewer(media) {
   return function (_ref) {
     var tr = _ref.tr;
@@ -31,4 +32,9 @@ export var trackMediaPaste = function trackMediaPaste(attrs) {
     });
     return tr;
   };
+};
+export var insertMediaAsMediaSingleCommand = function insertMediaAsMediaSingleCommand(editorAnalyticsAPI, allowPixelResizing) {
+  return function (mediaAttrs, inputMethod, insertMediaVia) {
+    return createInsertMediaAsMediaSingleCommand(mediaAttrs, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing);
+  };
 };

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

@@ -5,10 +5,11 @@ import memoizeOne from 'memoize-one';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { atTheBeginningOfBlock } from '@atlaskit/editor-common/selection';
+import { atTheBeginningOfBlock, selectionIsAtTheBeginningOfBlock } from '@atlaskit/editor-common/selection';
 import { checkNodeDown, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { findChangeFromLocation, getChangeMediaAnalytics } from './analytics';
 import { isImage } from './is-type';
@@ -37,6 +38,21 @@ function insertNodesWithOptionalParagraph(_ref) {
     insertMediaVia = _ref.insertMediaVia;
   return function (state, dispatch) {
     var tr = state.tr;
+    if (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,
@@ -69,6 +85,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 = 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 Slice(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(getChangeMediaAnalytics(previousType, newType, findChangeFromLocation(tr.selection)))(updatedTr);
+    }
+    return updatedTr;
+  };
+}
 export var isMediaSingle = function isMediaSingle(schema, fileMimeType) {
   return !!schema.nodes.mediaSingle && isImage(fileMimeType);
 };
@@ -87,6 +140,16 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   if (node.type !== media || !isImage(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
+  if (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: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH),
@@ -105,6 +168,42 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
     insertMediaVia: insertMediaVia
   })(state, dispatch);
 };
+export var 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' && !isImage((_mediaAttrs$__fileMim = mediaAttrs.__fileMimeType) !== null && _mediaAttrs$__fileMim !== void 0 ? _mediaAttrs$__fileMim : undefined)) {
+      return null;
+    }
+    var mediaSingleAttrs = allowPixelResizing ? {
+      widthType: 'pixel',
+      width: getMediaSingleInitialWidth((_mediaAttrs$width = mediaAttrs.width) !== null && _mediaAttrs$width !== void 0 ? _mediaAttrs$width : 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('.');
@@ -218,12 +317,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/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -160,7 +160,8 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     updateSize = props.updateSize,
     view = props.view,
     viewMediaClientConfig = props.viewMediaClientConfig,
-    forceHandlePositioning = props.forceHandlePositioning;
+    forceHandlePositioning = props.forceHandlePositioning,
+    disableHandles = props.disableHandles;
   var initialWidth = useMemo(function () {
     return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
   }, [mediaSingleWidth]);
@@ -237,6 +238,9 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
+    if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return "var(--ak-editor-max-container-width)";
+    }
     return calcMaxWidth({
       containerWidth: containerWidth,
       editorAppearance: editorAppearance
@@ -252,7 +256,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
   var resizerNextClassName = useMemo(function () {
     if (expValEquals('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
       var _classNameNext = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
-        'display-handle': selected,
+        'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -264,7 +268,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     return classnames(classNameNext, resizerStyles);
-  }, [className, isResizing, layout, selected]);
+  }, [className, disableHandles, isResizing, layout, selected]);
   var isInsideInlineLike = useMemo(function () {
     if (nodePosition === null) {
       return false;
@@ -274,6 +278,12 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
   }, [nodePosition, view]);
   var enable = useMemo(function () {
+    if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return {
+        left: false,
+        right: false
+      };
+    }
     return handleSides.reduce(function (acc, side) {
       var oppositeSide = side === 'left' ? 'right' : 'left';
       acc[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
@@ -282,7 +292,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
       }
       return acc;
     }, {});
-  }, [layout, isInsideInlineLike]);
+  }, [disableHandles, layout, isInsideInlineLike]);
   var defaultGuidelines = useMemo(function () {
     if (isAdjacentMode) {
       return [];
@@ -510,7 +520,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     snap: snaps,
     resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
-    isHandleVisible: selected,
+    isHandleVisible: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
     handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));

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

@@ -362,6 +362,12 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       var enable = {};
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
+        if (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(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
         if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;

package/dist/types/mediaPluginType.d.ts

@@ -1,4 +1,5 @@
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
+import type { InputMethodInsertMedia, InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { MediaProvider } from '@atlaskit/editor-common/provider-factory';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -48,6 +49,11 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
          * Callback to be called when there is an error rendering a media node.
          */
         handleMediaNodeRenderError: (node: PMNode, reason: string) => void;
+        /**
+         * @private
+         * @deprecated Use the command `insertMediaSingle` instead which is decoupled from EditorView
+         * and easier to use.
+         */
         insertMediaAsMediaSingle: InsertMediaAsMediaSingle;
         /**
          * Used to update the initial provider passed to the media plugin.
@@ -62,6 +68,15 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     };
     commands: {
         hideMediaViewer: EditorCommand;
+        /**
+         * Inserts a media node as a media single.
+         * This command creates a media single node from a set of attributes
+         *
+         * @param attrs - The media node attributes of the node to insert
+         * @param inputMethod - The method used to input the media
+         * @param insertMediaVia - Optional parameter indicating how the media was inserted
+         */
+        insertMediaSingle: (attrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => EditorCommand;
         showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
         trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
     };

package/dist/types/pm-plugins/commands.d.ts

@@ -1,5 +1,7 @@
 import type { MediaADFAttrs } from '@atlaskit/adf-schema';
+import type { EditorAnalyticsAPI, InputMethodInsertMedia, InsertMediaVia } from '@atlaskit/editor-common/analytics';
 import type { EditorCommand } from '@atlaskit/editor-common/types';
 export declare const showMediaViewer: (media: MediaADFAttrs) => EditorCommand;
 export declare const hideMediaViewer: EditorCommand;
 export declare const trackMediaPaste: (attrs: MediaADFAttrs) => EditorCommand;
+export declare const insertMediaAsMediaSingleCommand: (editorAnalyticsAPI?: EditorAnalyticsAPI, allowPixelResizing?: boolean) => (mediaAttrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => EditorCommand;

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

@@ -1,12 +1,14 @@
+import type { MediaADFAttrs } from '@atlaskit/adf-schema';
 import type { EditorAnalyticsAPI, InputMethodInsertMedia } from '@atlaskit/editor-common/analytics';
 import { type InsertMediaVia } from '@atlaskit/editor-common/analytics';
-import type { EditorContainerWidth as WidthPluginState } from '@atlaskit/editor-common/types';
+import type { EditorCommand, EditorContainerWidth as WidthPluginState } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaState } from '../../types';
 export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
 export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
 export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const createInsertMediaAsMediaSingleCommand: (mediaAttrs: MediaADFAttrs, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => EditorCommand;
 export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, onNodeInserted?: (id: string, selectionPosition: number) => void, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
 export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, allowPixelResizing?: boolean) => boolean;
 export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;