@atlaskit/editor-plugin-media 0.6.5 → 0.6.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-media
 
+## 0.6.7
+
+### Patch Changes
+
+- [#58246](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58246) [`a381b2599716`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a381b2599716) - ED-21371 Update adf-schema to 35.1.0
+
+## 0.6.6
+
+### Patch Changes
+
+- [#60345](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60345) [`0510fbeefadd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0510fbeefadd) - [ux] [ED-21290] Add inline and floating switcher buttons to media single floating toolbar and implement onClick handler
+
 ## 0.6.5
 
 ### Patch Changes

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.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaSingleToMediaInline = 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");
@@ -248,4 +248,38 @@ var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMed
       return true;
     };
   };
+};
+var changeMediaSingleToMediaInline = exports.changeMediaSingleToMediaInline = function changeMediaSingleToMediaInline(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var selectedNodeWithPos = (0, _utils2.getSelectedMediaSingle)(state);
+    var _state$schema$nodes3 = state.schema.nodes,
+      mediaInline = _state$schema$nodes3.mediaInline,
+      paragraph = _state$schema$nodes3.paragraph;
+    if (!selectedNodeWithPos) {
+      return false;
+    }
+    var mediaSingleNode = selectedNodeWithPos.node;
+    var mediaNode = mediaSingleNode.firstChild;
+    if (!mediaNode) {
+      return false;
+    }
+    var mediaInlineNode = mediaInline.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+      type: 'image'
+      // TODO: [ED-20261] copy marks across once both border and link marks are supported for inline image
+    }));
+
+    var space = state.schema.text(' ');
+    var content = _model.Fragment.from([mediaInlineNode, space]);
+    var node = paragraph.createChecked({}, content);
+    var from = state.selection.from;
+    var tr = state.tr;
+    tr = (0, _utils.removeSelectedNode)(tr);
+    tr = (0, _utils.safeInsert)(node, from, true)(tr);
+    // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
+    tr.setSelection(_state.TextSelection.create(tr.doc, from + 3));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
 };

package/dist/cjs/toolbar/index.js

@@ -225,6 +225,48 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
     }
 
+    // floating and inline switcher
+    if (pluginState.allowInlineImages && selectedNode && (0, _utils2.canShowSwitchButtons)(selectedNode.node)) {
+      var _pluginInjectionApi$a4;
+      var inlineSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+      var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
+
+      // This is temporary for PF release and can be removed once we have border and link support for inline images
+      // TODO: [ED-20261] remove this once both border and link marks are supported for inline image
+      var tempTooltipContent = /*#__PURE__*/_react.default.createElement("span", null, "Display inline ", /*#__PURE__*/_react.default.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
+      toolbarButtons.push({
+        type: 'button',
+        id: 'editor.media.image.view.switcher.inline',
+        title: inlineSwitcherTitle,
+        tooltipContent: tempTooltipContent,
+        icon: function icon() {
+          return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
+            size: "medium",
+            label: inlineSwitcherTitle
+          });
+        },
+        onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+        testId: 'image-inline-appearance'
+      }, {
+        type: 'button',
+        id: 'editor.media.image.view.switcher.floating',
+        title: floatingSwitcherTitle,
+        icon: function icon() {
+          return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
+            size: "medium",
+            label: floatingSwitcherTitle
+          });
+        },
+        onClick: function onClick() {
+          return true;
+        },
+        testId: 'image-floating-appearance',
+        selected: true
+      }, {
+        type: 'separator'
+      });
+    }
+
     // Pixel Entry Toolbar Support
     var selection = state.selection;
     var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
@@ -282,11 +324,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               }
             },
             onSubmit: function onSubmit(_ref2) {
-              var _pluginInjectionApi$a4;
+              var _pluginInjectionApi$a5;
               var width = _ref2.width,
                 validation = _ref2.validation;
               var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
+              (0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -341,10 +383,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$a5;
+                var _pluginInjectionApi$a6;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 || _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                   eventType: _analytics.EVENT_TYPE.TRACK,
                   action: _analytics.ACTION.VISITED,
                   actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -370,8 +412,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a6;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -461,14 +503,14 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    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);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/cjs/toolbar/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.calcNewLayout = void 0;
+exports.removeMediaGroupNode = exports.getSelectedMediaSingle = exports.getSelectedMediaContainerNodeAttrs = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -13,6 +13,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaSingle2 = require("../utils/media-single");
 var getSelectedMediaContainerNodeAttrs = exports.getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -118,4 +119,16 @@ var getSelectedLayoutIcon = exports.getSelectedLayoutIcon = function getSelected
   return layoutIcons.find(function (icon) {
     return icon.value === (_utils.nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
   });
+};
+
+/**
+ * Check if 'original size' and 'inline' buttons can be shown in the toolbar for a given mediaSingle node.
+ * @param mediaSingleNode node to be checked
+ */
+var canShowSwitchButtons = exports.canShowSwitchButtons = function canShowSwitchButtons(mediaSingleNode) {
+  if (mediaSingleNode) {
+    var mediaNode = mediaSingleNode.content.firstChild;
+    return mediaNode && !(0, _mediaSingle2.isVideo)(mediaNode.attrs.__fileMimeType);
+  }
+  return false;
 };

package/dist/es2019/toolbar/commands.js

@@ -1,6 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } 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';
@@ -224,4 +224,40 @@ export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation,
     dispatch(tr);
   }
   return true;
+};
+export const changeMediaSingleToMediaInline = editorAnalyticsAPI => (state, dispatch) => {
+  const selectedNodeWithPos = getSelectedMediaSingle(state);
+  const {
+    mediaInline,
+    paragraph
+  } = state.schema.nodes;
+  if (!selectedNodeWithPos) {
+    return false;
+  }
+  const mediaSingleNode = selectedNodeWithPos.node;
+  const mediaNode = mediaSingleNode.firstChild;
+  if (!mediaNode) {
+    return false;
+  }
+  const mediaInlineNode = mediaInline.create({
+    ...mediaNode.attrs,
+    type: 'image'
+    // TODO: [ED-20261] copy marks across once both border and link marks are supported for inline image
+  });
+
+  const space = state.schema.text(' ');
+  const content = Fragment.from([mediaInlineNode, space]);
+  const node = paragraph.createChecked({}, content);
+  const {
+    from
+  } = state.selection;
+  let tr = state.tr;
+  tr = removeSelectedNode(tr);
+  tr = safeInsert(node, from, true)(tr);
+  // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
+  tr.setSelection(TextSelection.create(tr.doc, from + 3));
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
 };

package/dist/es2019/toolbar/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { alignmentIcons, buildLayoutButtons, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
-import commonMessages, { cardMessages } from '@atlaskit/editor-common/messages';
+import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -22,14 +22,14 @@ import { FullWidthDisplay, PixelEntry } from '../ui/PixelEntry';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { isVideo } from '../utils/media-single';
 import { altTextButton, getAltTextToolbar } from './alt-text';
-import { changeMediaCardToInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LayoutGroup } from './layout-group';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 const mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -220,6 +220,44 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       }
     }
 
+    // floating and inline switcher
+    if (pluginState.allowInlineImages && selectedNode && canShowSwitchButtons(selectedNode.node)) {
+      var _pluginInjectionApi$a4;
+      const inlineSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+      const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
+
+      // This is temporary for PF release and can be removed once we have border and link support for inline images
+      // TODO: [ED-20261] remove this once both border and link marks are supported for inline image
+      const tempTooltipContent = /*#__PURE__*/React.createElement("span", null, "Display inline ", /*#__PURE__*/React.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
+      toolbarButtons.push({
+        type: 'button',
+        id: 'editor.media.image.view.switcher.inline',
+        title: inlineSwitcherTitle,
+        tooltipContent: tempTooltipContent,
+        icon: () => /*#__PURE__*/React.createElement(IconInline, {
+          size: "medium",
+          label: inlineSwitcherTitle
+        }),
+        onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+        testId: 'image-inline-appearance'
+      }, {
+        type: 'button',
+        id: 'editor.media.image.view.switcher.floating',
+        title: floatingSwitcherTitle,
+        icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
+          size: "medium",
+          label: floatingSwitcherTitle
+        }),
+        onClick: () => {
+          return true;
+        },
+        testId: 'image-floating-appearance',
+        selected: true
+      }, {
+        type: 'separator'
+      });
+    }
+
     // Pixel Entry Toolbar Support
     const {
       selection
@@ -284,9 +322,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               width,
               validation
             }) => {
-              var _pluginInjectionApi$a4;
+              var _pluginInjectionApi$a5;
               const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
+              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: () => {
               const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
@@ -346,14 +384,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             };
             const openLink = () => {
               if (editorView) {
-                var _pluginInjectionApi$a5;
+                var _pluginInjectionApi$a6;
                 const {
                   state: {
                     tr
                   },
                   dispatch
                 } = editorView;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -379,8 +417,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a6;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -468,14 +506,14 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    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);
+    items = generateMediaCardFloatingToolbar(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);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;

package/dist/es2019/toolbar/utils.js

@@ -4,6 +4,7 @@ import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
+import { isVideo } from '../utils/media-single';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -91,4 +92,16 @@ export const getMaxToolbarWidth = () => {
 export const getSelectedLayoutIcon = (layoutIcons, selectedNode) => {
   const selectedLayout = selectedNode.attrs.layout;
   return layoutIcons.find(icon => icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout));
+};
+
+/**
+ * Check if 'original size' and 'inline' buttons can be shown in the toolbar for a given mediaSingle node.
+ * @param mediaSingleNode node to be checked
+ */
+export const canShowSwitchButtons = mediaSingleNode => {
+  if (mediaSingleNode) {
+    const mediaNode = mediaSingleNode.content.firstChild;
+    return mediaNode && !isVideo(mediaNode.attrs.__fileMimeType);
+  }
+  return false;
 };

package/dist/esm/toolbar/commands.js

@@ -3,7 +3,7 @@ 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } 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';
@@ -241,4 +241,38 @@ export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyt
       return true;
     };
   };
+};
+export var changeMediaSingleToMediaInline = function changeMediaSingleToMediaInline(editorAnalyticsAPI) {
+  return function (state, dispatch) {
+    var selectedNodeWithPos = getSelectedMediaSingle(state);
+    var _state$schema$nodes3 = state.schema.nodes,
+      mediaInline = _state$schema$nodes3.mediaInline,
+      paragraph = _state$schema$nodes3.paragraph;
+    if (!selectedNodeWithPos) {
+      return false;
+    }
+    var mediaSingleNode = selectedNodeWithPos.node;
+    var mediaNode = mediaSingleNode.firstChild;
+    if (!mediaNode) {
+      return false;
+    }
+    var mediaInlineNode = mediaInline.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+      type: 'image'
+      // TODO: [ED-20261] copy marks across once both border and link marks are supported for inline image
+    }));
+
+    var space = state.schema.text(' ');
+    var content = Fragment.from([mediaInlineNode, space]);
+    var node = paragraph.createChecked({}, content);
+    var from = state.selection.from;
+    var tr = state.tr;
+    tr = removeSelectedNode(tr);
+    tr = safeInsert(node, from, true)(tr);
+    // 3 accounts for  paragraph 1 + mediaInline size 1 + space 1
+    tr.setSelection(TextSelection.create(tr.doc, from + 3));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
 };

package/dist/esm/toolbar/index.js

@@ -5,9 +5,9 @@ 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 from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { alignmentIcons, buildLayoutButtons, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
 import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
-import commonMessages, { cardMessages } from '@atlaskit/editor-common/messages';
+import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -26,14 +26,14 @@ import { FullWidthDisplay, PixelEntry } from '../ui/PixelEntry';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { isVideo } from '../utils/media-single';
 import { altTextButton, getAltTextToolbar } from './alt-text';
-import { changeMediaCardToInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
 import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
 import { LayoutGroup } from './layout-group';
 import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
+import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 var mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -215,6 +215,48 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
     }
 
+    // floating and inline switcher
+    if (pluginState.allowInlineImages && selectedNode && canShowSwitchButtons(selectedNode.node)) {
+      var _pluginInjectionApi$a4;
+      var inlineSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+      var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
+
+      // This is temporary for PF release and can be removed once we have border and link support for inline images
+      // TODO: [ED-20261] remove this once both border and link marks are supported for inline image
+      var tempTooltipContent = /*#__PURE__*/React.createElement("span", null, "Display inline ", /*#__PURE__*/React.createElement("br", null), " \u26A0 This feature is being developed. The conversion process will not retain the image size, link, border, or any other data.");
+      toolbarButtons.push({
+        type: 'button',
+        id: 'editor.media.image.view.switcher.inline',
+        title: inlineSwitcherTitle,
+        tooltipContent: tempTooltipContent,
+        icon: function icon() {
+          return /*#__PURE__*/React.createElement(IconInline, {
+            size: "medium",
+            label: inlineSwitcherTitle
+          });
+        },
+        onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+        testId: 'image-inline-appearance'
+      }, {
+        type: 'button',
+        id: 'editor.media.image.view.switcher.floating',
+        title: floatingSwitcherTitle,
+        icon: function icon() {
+          return /*#__PURE__*/React.createElement(IconEmbed, {
+            size: "medium",
+            label: floatingSwitcherTitle
+          });
+        },
+        onClick: function onClick() {
+          return true;
+        },
+        testId: 'image-floating-appearance',
+        selected: true
+      }, {
+        type: 'separator'
+      });
+    }
+
     // Pixel Entry Toolbar Support
     var selection = state.selection;
     var isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
@@ -272,11 +314,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               }
             },
             onSubmit: function onSubmit(_ref2) {
-              var _pluginInjectionApi$a4;
+              var _pluginInjectionApi$a5;
               var width = _ref2.width,
                 validation = _ref2.validation;
               var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
+              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
             },
             onMigrate: function onMigrate() {
               var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
@@ -331,10 +373,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             };
             var openLink = function openLink() {
               if (editorView) {
-                var _pluginInjectionApi$a5;
+                var _pluginInjectionApi$a6;
                 var tr = editorView.state.tr,
                   dispatch = editorView.dispatch;
-                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 || _pluginInjectionApi$a5.actions.attachAnalyticsEvent({
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                   eventType: EVENT_TYPE.TRACK,
                   action: ACTION.VISITED,
                   actionSubject: ACTION_SUBJECT.MEDIA,
@@ -360,8 +402,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    var _pluginInjectionApi$a6;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -451,14 +493,14 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a7;
+    var _pluginInjectionApi$a8;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    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);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;

package/dist/esm/toolbar/utils.js

@@ -6,6 +6,7 @@ import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getMediaClient } from '@atlaskit/media-client-react';
+import { isVideo } from '../utils/media-single';
 export var getSelectedMediaContainerNodeAttrs = function getSelectedMediaContainerNodeAttrs(mediaPluginState) {
   var selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {
@@ -111,4 +112,16 @@ export var getSelectedLayoutIcon = function getSelectedLayoutIcon(layoutIcons, s
   return layoutIcons.find(function (icon) {
     return icon.value === (nonWrappedLayouts.includes(selectedLayout) ? 'center' : selectedLayout);
   });
+};
+
+/**
+ * Check if 'original size' and 'inline' buttons can be shown in the toolbar for a given mediaSingle node.
+ * @param mediaSingleNode node to be checked
+ */
+export var canShowSwitchButtons = function canShowSwitchButtons(mediaSingleNode) {
+  if (mediaSingleNode) {
+    var mediaNode = mediaSingleNode.content.firstChild;
+    return mediaNode && !isVideo(mediaNode.attrs.__fileMimeType);
+  }
+  return false;
 };

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

@@ -13,3 +13,4 @@ export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
 export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => Command;
+export declare const changeMediaSingleToMediaInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

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

@@ -12,3 +12,8 @@ export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(e
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean, isNested?: boolean) => RichMediaLayout;
 export declare const getMaxToolbarWidth: () => number;
 export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selectedNode: ProseMirrorNode) => LayoutIcon | undefined;
+/**
+ * Check if 'original size' and 'inline' buttons can be shown in the toolbar for a given mediaSingle node.
+ * @param mediaSingleNode node to be checked
+ */
+export declare const canShowSwitchButtons: (mediaSingleNode?: ProseMirrorNode) => boolean | null;

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

@@ -13,3 +13,4 @@ export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
 export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, inputMethod: EventInput, layout: RichMediaLayout) => Command;
+export declare const changeMediaSingleToMediaInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;

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

@@ -12,3 +12,8 @@ export declare const getPixelWidthOfElement: import("memoize-one").MemoizedFn<(e
 export declare const calcNewLayout: (width: number, layout: RichMediaLayout, contentWidth: number, fullWidthMode?: boolean, isNested?: boolean) => RichMediaLayout;
 export declare const getMaxToolbarWidth: () => number;
 export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selectedNode: ProseMirrorNode) => LayoutIcon | undefined;
+/**
+ * Check if 'original size' and 'inline' buttons can be shown in the toolbar for a given mediaSingle node.
+ * @param mediaSingleNode node to be checked
+ */
+export declare const canShowSwitchButtons: (mediaSingleNode?: ProseMirrorNode) => boolean | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,7 +32,7 @@
     "./types": "./src/types.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.0.0",
+    "@atlaskit/adf-schema": "^35.1.0",
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.18.0",