@atlaskit/editor-plugin-media 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media
 
+## 0.6.3
+
+### Patch Changes
+
+- [#59409](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59409) [`e37f95e368fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e37f95e368fd) - Refactor code to use allowInlineImages plugin state instead of FF check
+
+## 0.6.2
+
+### Patch Changes
+
+- [#59086](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59086) [`8b5cbc397cfd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b5cbc397cfd) - [ux] add convert media inline image to media single floating toolbar item
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -24,6 +24,7 @@ var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-n
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
+var _isType = require("../utils/is-type");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _styles = require("./styles");
 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); }
@@ -183,7 +184,8 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
       isSelected: false
     });
   }
-  if ((0, _mediaInline.shouldShowInlineImage)(type)) {
+  var allowInlineImages = props.mediaPluginState.allowInlineImages;
+  if (allowInlineImages && (0, _isType.isImage)(type)) {
     return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
       mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfig),
       identifier: identifier,

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

@@ -244,7 +244,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       }
       switch ((0, _mediaInline.getMediaNodeInsertionType)(state, (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
         case 'inline':
-          (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
+          (0, _mediaFiles.insertMediaInlineNode)(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.allowInlineImages, _this.getInputMethod(pickerType));
           break;
         case 'block':
           // read width state right before inserting to get up-to-date and define values

package/dist/cjs/toolbar/commands.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -12,6 +12,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _analytics2 = require("../utils/analytics");
 var _currentMediaNode = require("../utils/current-media-node");
+var _mediaSingle = require("../utils/media-single");
 var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -93,6 +94,19 @@ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeM
     return true;
   };
 };
+var changeMediaInlineToMediaSingle = exports.changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState) {
+  return function (state, dispatch, view) {
+    var mediaInline = state.schema.nodes.mediaInline;
+    var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+    if (!selectedNode) {
+      return false;
+    }
+    if (view) {
+      return (0, _mediaSingle.changeFromMediaInlineToMediaSingleNode)(view, selectedNode, widthPluginState, editorAnalyticsAPI);
+    }
+    return true;
+  };
+};
 var removeInlineCard = exports.removeInlineCard = function removeInlineCard(state, dispatch) {
   if ((0, _utils.isNodeSelection)(state.selection)) {
     if (dispatch) {

package/dist/cjs/toolbar/index.js

@@ -470,13 +470,12 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = (0, _mediaInline.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = (0, _mediaInline.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/cjs/toolbar/mediaInline.js

@@ -7,22 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMediaInlineImageToolbar = exports.generateMediaInlineFloatingToolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _mediaInline = require("@atlaskit/editor-common/media-inline");
+var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaUi = require("@atlaskit/media-ui");
+var _isType = require("../utils/is-type");
 var _commands = require("./commands");
 var _filePreviewItem = require("./filePreviewItem");
 var _utils = require("./utils");
 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; }
-var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
+  var _pluginInjectionApi$a, _pluginInjectionApi$w;
+  var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaType = state.selection instanceof _state.NodeSelection && state.selection.node.attrs.type;
-  if ((0, _mediaInline.shouldShowInlineImage)(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI);
+  if (mediaPluginState.allowInlineImages && (0, _isType.isImage)(mediaType)) {
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState);
   }
   var items = [{
     id: 'editor.media.view.switcher',
@@ -95,12 +99,41 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
   }];
   return items;
 };
-var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState) {
   var mediaInline = state.schema.nodes.mediaInline;
+  var mediaInlineImageTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
   // if type is image, return inline image floating toolbar items
   var inlineImageItems = [
   // TODO: border marks, media single switcher, link, alt text, etc
   {
+    id: 'editor.media.convert.mediainline',
+    type: 'button',
+    title: mediaInlineImageTitle,
+    icon: function icon() {
+      return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
+        size: "medium",
+        label: mediaInlineImageTitle
+      });
+    },
+    onClick: function onClick() {
+      return true;
+    },
+    selected: true
+  }, {
+    id: 'editor.media.convert.mediasingle',
+    type: 'button',
+    title: mediaSingleTitle,
+    icon: function icon() {
+      return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
+        size: "medium",
+        label: mediaSingleTitle
+      });
+    },
+    onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
+  }, {
+    type: 'separator'
+  }, {
     type: 'copy-button',
     items: [{
       state: state,

package/dist/cjs/utils/is-type.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isVideo = exports.isImage = void 0;
-var isImage = exports.isImage = function isImage(fileType) {
-  return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+var isImage = exports.isImage = function isImage(type) {
+  return !!type && (type.indexOf('image/') > -1 || type.indexOf('video/') > -1 || type === 'image');
 };
 var isVideo = exports.isVideo = function isVideo(fileType) {
   return !!fileType && fileType.includes('video/');

package/dist/cjs/utils/media-files.js

@@ -10,7 +10,6 @@ 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 _isType = require("./is-type");
 var _mediaCommon = require("./media-common");
 var canInsertMediaInline = exports.canInsertMediaInline = function canInsertMediaInline(state) {
@@ -77,10 +76,11 @@ function shouldAppendParagraph(state, node) {
  * Create a new media inline to insert the new media.
  * @param view Editor view
  * @param mediaState Media file to be added to the editor
+ * @param allowInlineImages Configuration for allowing adding of inline images
  * @param collection Collection for the media to be added
  */
 var insertMediaInlineNode = exports.insertMediaInlineNode = function insertMediaInlineNode(editorAnalyticsAPI) {
-  return function (view, mediaState, collection, inputMethod) {
+  return function (view, mediaState, collection, allowInlineImages, inputMethod) {
     var state = view.state,
       dispatch = view.dispatch;
     var schema = state.schema,
@@ -99,9 +99,7 @@ var insertMediaInlineNode = exports.insertMediaInlineNode = function insertMedia
       id: id,
       collection: collection
     };
-    if (
-    // TODO: replace it with new shouldShowInlineImage
-    (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.inline-image.base-support') && (0, _isType.isImage)(mediaState.fileMimeType)) {
+    if (allowInlineImages && (0, _isType.isImage)(mediaState.fileMimeType)) {
       var _ref = dimensions || {
           width: undefined,
           height: undefined

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
+exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = exports.changeFromMediaInlineToMediaSingleNode = void 0;
 exports.isCaptionNode = isCaptionNode;
 exports.isVideo = exports.isMediaSingle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -86,6 +86,13 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
   };
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
 };
+var getFileExtension = function getFileExtension(fileName) {
+  if (fileName) {
+    var extensionIdx = fileName.lastIndexOf('.');
+    return extensionIdx >= 0 ? fileName.substring(extensionIdx + 1) : undefined;
+  }
+  return undefined;
+};
 var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) {
   var _state$selection$$fro;
   if (collection === undefined) {
@@ -132,6 +139,46 @@ var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMedia
   }
   return true;
 };
+var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI) {
+  var _state$selection$$fro2;
+  var state = view.state,
+    dispatch = view.dispatch;
+  var mediaInline = state.schema.nodes.mediaInline;
+  if (fromNode.type !== mediaInline) {
+    return false;
+  }
+  var grandParentNodeType = (_state$selection$$fro2 = state.selection.$from.node(-1)) === null || _state$selection$$fro2 === void 0 ? void 0 : _state$selection$$fro2.type;
+  var parentNodeType = state.selection.$from.parent.type;
+
+  // add undefined as fallback as we don't want media single width to have upper limit as 0
+  // if widthPluginState.width is 0, default 760 will be used
+  var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var node = replaceWithMediaSingleNode(state.schema, contentWidth, _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH)(fromNode);
+  var fileExtension = getFileExtension(fromNode.attrs.__fileName);
+  // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+  if ((0, _insert.shouldSplitSelectedNodeOnNodeInsertion)({
+    parentNodeType: parentNodeType,
+    grandParentNodeType: grandParentNodeType,
+    content: node
+  })) {
+    return insertNodesWithOptionalParagraph([node], {
+      fileExtension: fileExtension
+    }, editorAnalyticsAPI)(state, dispatch);
+  } else {
+    var nodePos = state.tr.doc.resolve(state.selection.from).end();
+    var tr = null;
+    tr = (0, _utils2.removeSelectedNode)(state.tr);
+    tr = (0, _insert.safeInsert)(node, nodePos)(tr);
+    if (!tr) {
+      var content = shouldAddParagraph(view.state) ? _model.Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
+      tr = (0, _utils2.safeInsert)(content, undefined, true)(state.tr);
+    }
+    // TODO: add analytics specifically for change mediaInline to mediaSingle later
+    dispatch(tr);
+  }
+  return true;
+};
 var createMediaSingleNode = exports.createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
   return function (mediaState) {
     var id = mediaState.id,
@@ -172,6 +219,22 @@ var createMediaSingleNode = exports.createMediaSingleNode = function createMedia
     return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
   };
 };
+var replaceWithMediaSingleNode = function replaceWithMediaSingleNode(schema, maxWidth, minWidth) {
+  return function (mediaNode) {
+    var width = mediaNode.attrs.width;
+    var _schema$nodes2 = schema.nodes,
+      media = _schema$nodes2.media,
+      mediaSingle = _schema$nodes2.mediaSingle;
+    var copiedMediaNode = media.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+      type: 'file'
+    }), mediaNode.content, mediaNode.marks);
+    var extendedMediaSingleAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
+      width: (0, _mediaSingle.getMediaSingleInitialWidth)(width, maxWidth, minWidth),
+      widthType: 'pixel'
+    } : {};
+    return mediaSingle.createChecked(extendedMediaSingleAttrs, copiedMediaNode);
+  };
+};
 function isCaptionNode(editorView) {
   var $from = editorView.state.selection.$from;
   var immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));

package/dist/es2019/nodeviews/mediaInline.js

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { MediaInlineImageCard, shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
+import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { isImage } from '../utils/is-type';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineNodeSelector } from './styles';
 export const createMediaNodeUpdater = props => {
@@ -110,7 +111,10 @@ export const MediaInline = props => {
       isSelected: false
     });
   }
-  if (shouldShowInlineImage(type)) {
+  const {
+    allowInlineImages
+  } = props.mediaPluginState;
+  if (allowInlineImages && isImage(type)) {
     return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
       identifier: identifier,

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

@@ -175,7 +175,7 @@ export class MediaPluginStateImplementation {
       }
       switch (getMediaNodeInsertionType(state, (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
         case 'inline':
-          insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.getInputMethod(pickerType));
+          insertMediaInlineNode(editorAnalyticsAPI)(this.view, mediaStateWithContext, collection, this.allowInlineImages, this.getInputMethod(pickerType));
           break;
         case 'block':
           // read width state right before inserting to get up-to-date and define values

package/dist/es2019/toolbar/commands.js

@@ -4,6 +4,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export const DEFAULT_BORDER_COLOR = '#091e4224';
 export const DEFAULT_BORDER_SIZE = 2;
@@ -82,6 +83,19 @@ export const changeMediaCardToInline = editorAnalyticsAPI => (state, dispatch) =
   }
   return true;
 };
+export const changeMediaInlineToMediaSingle = (editorAnalyticsAPI, widthPluginState) => (state, dispatch, view) => {
+  const {
+    mediaInline
+  } = state.schema.nodes;
+  const selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+  if (!selectedNode) {
+    return false;
+  }
+  if (view) {
+    return changeFromMediaInlineToMediaSingleNode(view, selectedNode, widthPluginState, editorAnalyticsAPI);
+  }
+  return true;
+};
 export const removeInlineCard = (state, dispatch) => {
   if (isNodeSelection(state.selection)) {
     if (dispatch) {

package/dist/es2019/toolbar/index.js

@@ -477,13 +477,12 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi);
   } else {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele3;

package/dist/es2019/toolbar/mediaInline.js

@@ -1,20 +1,24 @@
 import React from 'react';
-import { shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
-import commonMessages, { cardMessages } from '@atlaskit/editor-common/messages';
+import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
+import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
-import { changeInlineToMediaCard, removeInlineCard } from './commands';
+import { isImage } from '../utils/is-type';
+import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia } from './utils';
-export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
+export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) => {
+  var _pluginInjectionApi$a, _pluginInjectionApi$w;
+  const editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   const {
     mediaInline
   } = state.schema.nodes;
   const mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
-  if (shouldShowInlineImage(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI);
+  if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState);
   }
   const items = [{
     id: 'editor.media.view.switcher',
@@ -87,14 +91,39 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
   }];
   return items;
 };
-export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
+export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState) => {
   const {
     mediaInline
   } = state.schema.nodes;
+  const mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
   // if type is image, return inline image floating toolbar items
   const inlineImageItems = [
   // TODO: border marks, media single switcher, link, alt text, etc
   {
+    id: 'editor.media.convert.mediainline',
+    type: 'button',
+    title: mediaInlineImageTitle,
+    icon: () => /*#__PURE__*/React.createElement(IconInline, {
+      size: "medium",
+      label: mediaInlineImageTitle
+    }),
+    onClick: () => {
+      return true;
+    },
+    selected: true
+  }, {
+    id: 'editor.media.convert.mediasingle',
+    type: 'button',
+    title: mediaSingleTitle,
+    icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
+      size: "medium",
+      label: mediaSingleTitle
+    }),
+    onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
+  }, {
+    type: 'separator'
+  }, {
     type: 'copy-button',
     items: [{
       state,

package/dist/es2019/utils/is-type.js

@@ -1,5 +1,5 @@
-export const isImage = fileType => {
-  return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+export const isImage = type => {
+  return !!type && (type.indexOf('image/') > -1 || type.indexOf('video/') > -1 || type === 'image');
 };
 export const isVideo = fileType => {
   return !!fileType && fileType.includes('video/');

package/dist/es2019/utils/media-files.js

@@ -4,7 +4,6 @@ import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfPar
 import { findFarthestParentNode, insideTableCell, isInLayoutColumn, isInListItem, isSupportedInParent, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { canInsert, hasParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { isImage } from './is-type';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph, isSelectionNonMediaBlockNode, posOfMediaGroupNearby, posOfParentMediaGroup, posOfPrecedingMediaGroup } from './media-common';
 export const canInsertMediaInline = state => {
@@ -79,9 +78,10 @@ function shouldAppendParagraph(state, node) {
  * Create a new media inline to insert the new media.
  * @param view Editor view
  * @param mediaState Media file to be added to the editor
+ * @param allowInlineImages Configuration for allowing adding of inline images
  * @param collection Collection for the media to be added
  */
-export const insertMediaInlineNode = editorAnalyticsAPI => (view, mediaState, collection, inputMethod) => {
+export const insertMediaInlineNode = editorAnalyticsAPI => (view, mediaState, collection, allowInlineImages, inputMethod) => {
   const {
     state,
     dispatch
@@ -107,9 +107,7 @@ export const insertMediaInlineNode = editorAnalyticsAPI => (view, mediaState, co
     id,
     collection
   };
-  if (
-  // TODO: replace it with new shouldShowInlineImage
-  getBooleanFF('platform.editor.media.inline-image.base-support') && isImage(mediaState.fileMimeType)) {
+  if (allowInlineImages && isImage(mediaState.fileMimeType)) {
     const {
       width,
       height

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

@@ -5,7 +5,7 @@ import { getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_
 import { atTheBeginningOfBlock } 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 } from '@atlaskit/editor-prosemirror/utils';
+import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { isImage } from './is-type';
@@ -77,6 +77,13 @@ export const insertMediaAsMediaSingle = (view, node, inputMethod, editorAnalytic
   };
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
 };
+const getFileExtension = fileName => {
+  if (fileName) {
+    const extensionIdx = fileName.lastIndexOf('.');
+    return extensionIdx >= 0 ? fileName.substring(extensionIdx + 1) : undefined;
+  }
+  return undefined;
+};
 export const insertMediaSingleNode = (view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) => {
   var _state$selection$$fro;
   if (collection === undefined) {
@@ -125,6 +132,50 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
   }
   return true;
 };
+export const changeFromMediaInlineToMediaSingleNode = (view, fromNode, widthPluginState, editorAnalyticsAPI) => {
+  var _state$selection$$fro2;
+  const {
+    state,
+    dispatch
+  } = view;
+  const {
+    mediaInline
+  } = state.schema.nodes;
+  if (fromNode.type !== mediaInline) {
+    return false;
+  }
+  const grandParentNodeType = (_state$selection$$fro2 = state.selection.$from.node(-1)) === null || _state$selection$$fro2 === void 0 ? void 0 : _state$selection$$fro2.type;
+  const parentNodeType = state.selection.$from.parent.type;
+
+  // add undefined as fallback as we don't want media single width to have upper limit as 0
+  // if widthPluginState.width is 0, default 760 will be used
+  const contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  const node = replaceWithMediaSingleNode(state.schema, contentWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH)(fromNode);
+  const fileExtension = getFileExtension(fromNode.attrs.__fileName);
+  // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+  if (shouldSplitSelectedNodeOnNodeInsertion({
+    parentNodeType,
+    grandParentNodeType,
+    content: node
+  })) {
+    return insertNodesWithOptionalParagraph([node], {
+      fileExtension
+    }, editorAnalyticsAPI)(state, dispatch);
+  } else {
+    const nodePos = state.tr.doc.resolve(state.selection.from).end();
+    let tr = null;
+    tr = removeSelectedNode(state.tr);
+    tr = safeInsert(node, nodePos)(tr);
+    if (!tr) {
+      const content = shouldAddParagraph(view.state) ? Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
+      tr = pmSafeInsert(content, undefined, true)(state.tr);
+    }
+    // TODO: add analytics specifically for change mediaInline to mediaSingle later
+    dispatch(tr);
+  }
+  return true;
+};
 export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, alignLeftOnInsert) => mediaState => {
   const {
     id,
@@ -168,6 +219,24 @@ export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, al
   copyOptionalAttrsFromMediaState(mediaState, mediaNode);
   return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
 };
+const replaceWithMediaSingleNode = (schema, maxWidth, minWidth) => mediaNode => {
+  const {
+    width
+  } = mediaNode.attrs;
+  const {
+    media,
+    mediaSingle
+  } = schema.nodes;
+  const copiedMediaNode = media.create({
+    ...mediaNode.attrs,
+    type: 'file'
+  }, mediaNode.content, mediaNode.marks);
+  const extendedMediaSingleAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+    width: getMediaSingleInitialWidth(width, maxWidth, minWidth),
+    widthType: 'pixel'
+  } : {};
+  return mediaSingle.createChecked(extendedMediaSingleAttrs, copiedMediaNode);
+};
 export function isCaptionNode(editorView) {
   const {
     $from

package/dist/esm/nodeviews/mediaInline.js

@@ -14,12 +14,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect, useState } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { MediaInlineImageCard, shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
+import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { isImage } from '../utils/is-type';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { MediaInlineNodeSelector } from './styles';
 export var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
@@ -173,7 +174,8 @@ export var MediaInline = function MediaInline(props) {
       isSelected: false
     });
   }
-  if (shouldShowInlineImage(type)) {
+  var allowInlineImages = props.mediaPluginState.allowInlineImages;
+  if (allowInlineImages && isImage(type)) {
     return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
       mediaClient: getMediaClient(viewMediaClientConfig),
       identifier: identifier,

package/dist/esm/pm-plugins/main.js

@@ -229,7 +229,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       }
       switch (getMediaNodeInsertionType(state, (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags, mediaStateWithContext.fileMimeType)) {
         case 'inline':
-          insertMediaInlineNode(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
+          insertMediaInlineNode(editorAnalyticsAPI)(_this.view, mediaStateWithContext, collection, _this.allowInlineImages, _this.getInputMethod(pickerType));
           break;
         case 'block':
           // read width state right before inserting to get up-to-date and define values

package/dist/esm/toolbar/commands.js

@@ -7,6 +7,7 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
 import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
 import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export var DEFAULT_BORDER_COLOR = '#091e4224';
 export var DEFAULT_BORDER_SIZE = 2;
@@ -86,6 +87,19 @@ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnal
     return true;
   };
 };
+export var changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState) {
+  return function (state, dispatch, view) {
+    var mediaInline = state.schema.nodes.mediaInline;
+    var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
+    if (!selectedNode) {
+      return false;
+    }
+    if (view) {
+      return changeFromMediaInlineToMediaSingleNode(view, selectedNode, widthPluginState, editorAnalyticsAPI);
+    }
+    return true;
+  };
+};
 export var removeInlineCard = function removeInlineCard(state, dispatch) {
   if (isNodeSelection(state.selection)) {
     if (dispatch) {

package/dist/esm/toolbar/index.js

@@ -460,13 +460,12 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     };
     items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$a8;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/esm/toolbar/mediaInline.js

@@ -1,18 +1,22 @@
 import React from 'react';
-import { shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
-import commonMessages, { cardMessages } from '@atlaskit/editor-common/messages';
+import { IconEmbed, IconInline } from '@atlaskit/editor-common/card';
+import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { messages } from '@atlaskit/media-ui';
-import { changeInlineToMediaCard, removeInlineCard } from './commands';
+import { isImage } from '../utils/is-type';
+import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCard } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { downloadMedia } from './utils';
-export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
+  var _pluginInjectionApi$a, _pluginInjectionApi$w;
+  var editorAnalyticsAPI = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions;
+  var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var mediaInline = state.schema.nodes.mediaInline;
   var mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
-  if (shouldShowInlineImage(mediaType)) {
-    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI);
+  if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
+    return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState);
   }
   var items = [{
     id: 'editor.media.view.switcher',
@@ -85,12 +89,41 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   }];
   return items;
 };
-export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, widthPluginState) {
   var mediaInline = state.schema.nodes.mediaInline;
+  var mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  var mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
   // if type is image, return inline image floating toolbar items
   var inlineImageItems = [
   // TODO: border marks, media single switcher, link, alt text, etc
   {
+    id: 'editor.media.convert.mediainline',
+    type: 'button',
+    title: mediaInlineImageTitle,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(IconInline, {
+        size: "medium",
+        label: mediaInlineImageTitle
+      });
+    },
+    onClick: function onClick() {
+      return true;
+    },
+    selected: true
+  }, {
+    id: 'editor.media.convert.mediasingle',
+    type: 'button',
+    title: mediaSingleTitle,
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(IconEmbed, {
+        size: "medium",
+        label: mediaSingleTitle
+      });
+    },
+    onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
+  }, {
+    type: 'separator'
+  }, {
     type: 'copy-button',
     items: [{
       state: state,

package/dist/esm/utils/is-type.js

@@ -1,5 +1,5 @@
-export var isImage = function isImage(fileType) {
-  return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+export var isImage = function isImage(type) {
+  return !!type && (type.indexOf('image/') > -1 || type.indexOf('video/') > -1 || type === 'image');
 };
 export var isVideo = function isVideo(fileType) {
   return !!fileType && fileType.includes('video/');

package/dist/esm/utils/media-files.js

@@ -4,7 +4,6 @@ import { atTheBeginningOfBlock, atTheEndOfBlock, atTheEndOfDoc, endPositionOfPar
 import { findFarthestParentNode, insideTableCell, isInLayoutColumn, isInListItem, isSupportedInParent, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { canInsert, hasParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { isImage } from './is-type';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph, isSelectionNonMediaBlockNode, posOfMediaGroupNearby, posOfParentMediaGroup, posOfPrecedingMediaGroup } from './media-common';
 export var canInsertMediaInline = function canInsertMediaInline(state) {
@@ -71,10 +70,11 @@ function shouldAppendParagraph(state, node) {
  * Create a new media inline to insert the new media.
  * @param view Editor view
  * @param mediaState Media file to be added to the editor
+ * @param allowInlineImages Configuration for allowing adding of inline images
  * @param collection Collection for the media to be added
  */
 export var insertMediaInlineNode = function insertMediaInlineNode(editorAnalyticsAPI) {
-  return function (view, mediaState, collection, inputMethod) {
+  return function (view, mediaState, collection, allowInlineImages, inputMethod) {
     var state = view.state,
       dispatch = view.dispatch;
     var schema = state.schema,
@@ -93,9 +93,7 @@ export var insertMediaInlineNode = function insertMediaInlineNode(editorAnalytic
       id: id,
       collection: collection
     };
-    if (
-    // TODO: replace it with new shouldShowInlineImage
-    getBooleanFF('platform.editor.media.inline-image.base-support') && isImage(mediaState.fileMimeType)) {
+    if (allowInlineImages && isImage(mediaState.fileMimeType)) {
       var _ref = dimensions || {
           width: undefined,
           height: undefined

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

@@ -8,7 +8,7 @@ import { getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_
 import { atTheBeginningOfBlock } 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 } from '@atlaskit/editor-prosemirror/utils';
+import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { isImage } from './is-type';
@@ -77,6 +77,13 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   };
   return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
 };
+var getFileExtension = function getFileExtension(fileName) {
+  if (fileName) {
+    var extensionIdx = fileName.lastIndexOf('.');
+    return extensionIdx >= 0 ? fileName.substring(extensionIdx + 1) : undefined;
+  }
+  return undefined;
+};
 export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) {
   var _state$selection$$fro;
   if (collection === undefined) {
@@ -123,6 +130,46 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   }
   return true;
 };
+export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI) {
+  var _state$selection$$fro2;
+  var state = view.state,
+    dispatch = view.dispatch;
+  var mediaInline = state.schema.nodes.mediaInline;
+  if (fromNode.type !== mediaInline) {
+    return false;
+  }
+  var grandParentNodeType = (_state$selection$$fro2 = state.selection.$from.node(-1)) === null || _state$selection$$fro2 === void 0 ? void 0 : _state$selection$$fro2.type;
+  var parentNodeType = state.selection.$from.parent.type;
+
+  // add undefined as fallback as we don't want media single width to have upper limit as 0
+  // if widthPluginState.width is 0, default 760 will be used
+  var contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var node = replaceWithMediaSingleNode(state.schema, contentWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH)(fromNode);
+  var fileExtension = getFileExtension(fromNode.attrs.__fileName);
+  // should split if media is valid content for the grandparent of the selected node
+  // and the parent node is a paragraph
+  if (shouldSplitSelectedNodeOnNodeInsertion({
+    parentNodeType: parentNodeType,
+    grandParentNodeType: grandParentNodeType,
+    content: node
+  })) {
+    return insertNodesWithOptionalParagraph([node], {
+      fileExtension: fileExtension
+    }, editorAnalyticsAPI)(state, dispatch);
+  } else {
+    var nodePos = state.tr.doc.resolve(state.selection.from).end();
+    var tr = null;
+    tr = removeSelectedNode(state.tr);
+    tr = safeInsert(node, nodePos)(tr);
+    if (!tr) {
+      var content = shouldAddParagraph(view.state) ? Fragment.fromArray([node, state.schema.nodes.paragraph.create()]) : node;
+      tr = pmSafeInsert(content, undefined, true)(state.tr);
+    }
+    // TODO: add analytics specifically for change mediaInline to mediaSingle later
+    dispatch(tr);
+  }
+  return true;
+};
 export var createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
   return function (mediaState) {
     var id = mediaState.id,
@@ -163,6 +210,22 @@ export var createMediaSingleNode = function createMediaSingleNode(schema, collec
     return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
   };
 };
+var replaceWithMediaSingleNode = function replaceWithMediaSingleNode(schema, maxWidth, minWidth) {
+  return function (mediaNode) {
+    var width = mediaNode.attrs.width;
+    var _schema$nodes2 = schema.nodes,
+      media = _schema$nodes2.media,
+      mediaSingle = _schema$nodes2.mediaSingle;
+    var copiedMediaNode = media.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+      type: 'file'
+    }), mediaNode.content, mediaNode.marks);
+    var extendedMediaSingleAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+      width: getMediaSingleInitialWidth(width, maxWidth, minWidth),
+      widthType: 'pixel'
+    } : {};
+    return mediaSingle.createChecked(extendedMediaSingleAttrs, copiedMediaNode);
+  };
+};
 export function isCaptionNode(editorView) {
   var $from = editorView.state.selection.$from;
   var immediateWrapperParentNode = editorView.state.doc.nodeAt($from.before(Math.max($from.depth, 1)));

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

@@ -34,6 +34,7 @@ export interface MediaPluginState {
     isResizing: boolean;
     resizingWidth: number;
     currentMaxWidth?: number;
+    allowInlineImages?: boolean;
     dispatch?: Dispatch;
     onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;

package/dist/types/toolbar/commands.d.ts

@@ -1,12 +1,14 @@
 import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EventInput } from '../pm-plugins/types';
 import type { PixelEntryValidation } from '../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;

package/dist/types/toolbar/mediaInline.d.ts

@@ -1,8 +1,10 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaPluginState } from '../pm-plugins/types';
-export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarItem<Command>[];
-export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarItem<Command>[];
+export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarItem<Command>[];
+export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => FloatingToolbarItem<Command>[];

package/dist/types/utils/is-type.d.ts

@@ -1,2 +1,2 @@
-export declare const isImage: (fileType?: string) => boolean;
+export declare const isImage: (type?: string) => boolean;
 export declare const isVideo: (fileType?: string) => boolean;

package/dist/types/utils/media-files.d.ts

@@ -11,9 +11,10 @@ export declare const canInsertMediaInline: (state: EditorState) => boolean;
  * Create a new media inline to insert the new media.
  * @param view Editor view
  * @param mediaState Media file to be added to the editor
+ * @param allowInlineImages Configuration for allowing adding of inline images
  * @param collection Collection for the media to be added
  */
-export declare const insertMediaInlineNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (view: EditorView, mediaState: MediaState, collection: string, inputMethod?: InputMethodInsertMedia) => boolean;
+export declare const insertMediaInlineNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (view: EditorView, mediaState: MediaState, collection: string, allowInlineImages: boolean, inputMethod?: InputMethodInsertMedia) => boolean;
 /**
  * Insert a media into an existing media group
  * or create a new media group to insert the new media.

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

@@ -15,6 +15,7 @@ export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => b
 export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia) => boolean;
 export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => boolean;
 export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
+export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
 export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
 export declare function isCaptionNode(editorView: EditorView): boolean;
 export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -34,6 +34,7 @@ export interface MediaPluginState {
     isResizing: boolean;
     resizingWidth: number;
     currentMaxWidth?: number;
+    allowInlineImages?: boolean;
     dispatch?: Dispatch;
     onContextIdentifierProvider: (_name: string, provider?: Promise<ContextIdentifierProvider>) => Promise<void>;
     setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;

package/dist/types-ts4.5/toolbar/commands.d.ts

@@ -1,12 +1,14 @@
 import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EventInput } from '../pm-plugins/types';
 import type { PixelEntryValidation } from '../ui/PixelEntry/types';
 export declare const DEFAULT_BORDER_COLOR = "#091e4224";
 export declare const DEFAULT_BORDER_SIZE = 2;
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
+export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;

package/dist/types-ts4.5/toolbar/mediaInline.d.ts

@@ -1,8 +1,10 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { Command, ExtractInjectionAPI, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { MediaNextEditorPluginType } from '../next-plugin-type';
 import type { MediaPluginState } from '../pm-plugins/types';
-export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarItem<Command>[];
-export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarItem<Command>[];
+export declare const generateMediaInlineFloatingToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => FloatingToolbarItem<Command>[];
+export declare const getMediaInlineImageToolbar: (state: EditorState, intl: IntlShape, mediaPluginState: MediaPluginState, hoverDecoration: HoverDecorationHandler | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => FloatingToolbarItem<Command>[];

package/dist/types-ts4.5/utils/is-type.d.ts

@@ -1,2 +1,2 @@
-export declare const isImage: (fileType?: string) => boolean;
+export declare const isImage: (type?: string) => boolean;
 export declare const isVideo: (fileType?: string) => boolean;

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

@@ -11,9 +11,10 @@ export declare const canInsertMediaInline: (state: EditorState) => boolean;
  * Create a new media inline to insert the new media.
  * @param view Editor view
  * @param mediaState Media file to be added to the editor
+ * @param allowInlineImages Configuration for allowing adding of inline images
  * @param collection Collection for the media to be added
  */
-export declare const insertMediaInlineNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (view: EditorView, mediaState: MediaState, collection: string, inputMethod?: InputMethodInsertMedia) => boolean;
+export declare const insertMediaInlineNode: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (view: EditorView, mediaState: MediaState, collection: string, allowInlineImages: boolean, inputMethod?: InputMethodInsertMedia) => boolean;
 /**
  * Insert a media into an existing media group
  * or create a new media group to insert the new media.

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

@@ -15,6 +15,7 @@ export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => b
 export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia) => boolean;
 export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => boolean;
 export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, newInsertionBehaviour?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
+export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
 export declare const createMediaSingleNode: (schema: Schema, collection: string, maxWidth?: number, minWidth?: number, alignLeftOnInsert?: boolean) => (mediaState: MediaSingleState) => PMNode;
 export declare function isCaptionNode(editorView: EditorView): boolean;
 export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -53,7 +53,7 @@
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/form": "^9.0.0",
     "@atlaskit/icon": "^22.0.0",
-    "@atlaskit/media-card": "^77.4.0",
+    "@atlaskit/media-card": "^77.5.0",
     "@atlaskit/media-client": "^25.1.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.0.0",