@atlaskit/editor-plugin-media 0.4.9 → 0.4.10

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-media
 
+## 0.4.10
+
+### Patch Changes
+
+- [#58567](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58567) [`5c0892098c84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c0892098c84) - add media inline image floating toolbar under FF
+- Updated dependencies
+
 ## 0.4.9
 
 ### Patch Changes

package/dist/cjs/toolbar/index.js

@@ -38,6 +38,7 @@ var _imageBorder = require("./imageBorder");
 var _layoutGroup = require("./layout-group");
 var _linking3 = require("./linking");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
+var _mediaInline = require("./mediaInline");
 var _utils2 = 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; }
@@ -129,79 +130,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }];
   return items;
 };
-var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
-  var mediaInline = state.schema.nodes.mediaInline;
-  var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(_mediaUi.messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(_messages.cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: _download.default,
-    onClick: function onClick() {
-      (0, _utils2.downloadMedia)(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(_mediaUi.messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: _commands.removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
-  return items;
-};
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
   var _pluginInjectionApi$d;
   var mediaSingle = state.schema.nodes.mediaSingle;
@@ -534,7 +462,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.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 = (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);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/cjs/toolbar/mediaInline.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMediaInlineImageToolbar = exports.generateMediaInlineFloatingToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
+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 _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 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);
+  }
+  var items = [{
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(_mediaUi.messages.changeView),
+    options: [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(_messages.cardMessages.inline),
+      selected: true,
+      disabled: false,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(_mediaUi.messages.displayThumbnail),
+      selected: false,
+      disabled: false,
+      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI),
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: function render() {
+      return /*#__PURE__*/_react.default.createElement(_filePreviewItem.FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState,
+        intl: intl
+      });
+    }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: _download.default,
+    onClick: function onClick() {
+      (0, _utils.downloadMedia)(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(_mediaUi.messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    type: 'copy-button',
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: _remove.default,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: _commands.removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+var getMediaInlineImageToolbar = exports.getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+  var mediaInline = state.schema.nodes.mediaInline;
+  // if type is image, return inline image floating toolbar items
+  var inlineImageItems = [
+  // TODO: border marks, media single switcher, link, alt text, etc
+  {
+    type: 'copy-button',
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: _remove.default,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: _commands.removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return inlineImageItems;
+};

package/dist/es2019/toolbar/index.js

@@ -22,12 +22,13 @@ 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 { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { changeMediaCardToInline, 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';
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -117,81 +118,6 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
   }];
   return items;
 };
-const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
-  const {
-    mediaInline
-  } = state.schema.nodes;
-  const items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: () => {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: () => {
-      return /*#__PURE__*/React.createElement(FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: DownloadIcon,
-    onClick: () => {
-      downloadMedia(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    items: [{
-      state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
-  return items;
-};
 const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) => {
   var _pluginInjectionApi$d;
   const {

package/dist/es2019/toolbar/mediaInline.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import { shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
+import commonMessages, { cardMessages } 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 { FilePreviewItem } from './filePreviewItem';
+import { downloadMedia } from './utils';
+export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
+  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);
+  }
+  const items = [{
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(messages.changeView),
+    options: [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inline),
+      selected: true,
+      disabled: false,
+      onClick: () => {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: false,
+      disabled: false,
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: () => {
+      return /*#__PURE__*/React.createElement(FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState,
+        intl: intl
+      });
+    }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: DownloadIcon,
+    onClick: () => {
+      downloadMedia(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    type: 'copy-button',
+    items: [{
+      state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(commonMessages.remove),
+    onClick: removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+export const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) => {
+  const {
+    mediaInline
+  } = state.schema.nodes;
+  // if type is image, return inline image floating toolbar items
+  const inlineImageItems = [
+  // TODO: border marks, media single switcher, link, alt text, etc
+  {
+    type: 'copy-button',
+    items: [{
+      state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(commonMessages.remove),
+    onClick: removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return inlineImageItems;
+};

package/dist/esm/toolbar/index.js

@@ -26,12 +26,13 @@ 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 { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { changeMediaCardToInline, 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';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
@@ -119,79 +120,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }];
   return items;
 };
-var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
-  var mediaInline = state.schema.nodes.mediaInline;
-  var items = [{
-    id: 'editor.media.view.switcher',
-    type: 'dropdown',
-    title: intl.formatMessage(messages.changeView),
-    options: [{
-      id: 'editor.media.view.switcher.inline',
-      title: intl.formatMessage(cardMessages.inline),
-      selected: true,
-      disabled: false,
-      onClick: function onClick() {
-        return true;
-      },
-      testId: 'inline-appearance'
-    }, {
-      id: 'editor.media.view.switcher.thumbnail',
-      title: intl.formatMessage(messages.displayThumbnail),
-      selected: false,
-      disabled: false,
-      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
-      testId: 'thumbnail-appearance'
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    type: 'custom',
-    fallback: [],
-    render: function render() {
-      return /*#__PURE__*/React.createElement(FilePreviewItem, {
-        key: "editor.media.card.preview",
-        mediaPluginState: mediaPluginState,
-        intl: intl
-      });
-    }
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.card.download',
-    type: 'button',
-    icon: DownloadIcon,
-    onClick: function onClick() {
-      downloadMedia(mediaPluginState);
-      return true;
-    },
-    title: intl.formatMessage(messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }, {
-      type: 'separator'
-    }]
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
-  return items;
-};
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
   var _pluginInjectionApi$d;
   var mediaSingle = state.schema.nodes.mediaSingle;

package/dist/esm/toolbar/mediaInline.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
+import commonMessages, { cardMessages } 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 { FilePreviewItem } from './filePreviewItem';
+import { downloadMedia } from './utils';
+export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+  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);
+  }
+  var items = [{
+    id: 'editor.media.view.switcher',
+    type: 'dropdown',
+    title: intl.formatMessage(messages.changeView),
+    options: [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inline),
+      selected: true,
+      disabled: false,
+      onClick: function onClick() {
+        return true;
+      },
+      testId: 'inline-appearance'
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(messages.displayThumbnail),
+      selected: false,
+      disabled: false,
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI),
+      testId: 'thumbnail-appearance'
+    }]
+  }, {
+    type: 'separator'
+  }, {
+    type: 'custom',
+    fallback: [],
+    render: function render() {
+      return /*#__PURE__*/React.createElement(FilePreviewItem, {
+        key: "editor.media.card.preview",
+        mediaPluginState: mediaPluginState,
+        intl: intl
+      });
+    }
+  }, {
+    type: 'separator'
+  }, {
+    id: 'editor.media.card.download',
+    type: 'button',
+    icon: DownloadIcon,
+    onClick: function onClick() {
+      downloadMedia(mediaPluginState);
+      return true;
+    },
+    title: intl.formatMessage(messages.download)
+  }, {
+    type: 'separator'
+  }, {
+    type: 'copy-button',
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(commonMessages.remove),
+    onClick: removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return items;
+};
+export var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
+  var mediaInline = state.schema.nodes.mediaInline;
+  // if type is image, return inline image floating toolbar items
+  var inlineImageItems = [
+  // TODO: border marks, media single switcher, link, alt text, etc
+  {
+    type: 'copy-button',
+    items: [{
+      state: state,
+      formatMessage: intl.formatMessage,
+      nodeType: mediaInline
+    }, {
+      type: 'separator'
+    }]
+  }, {
+    id: 'editor.media.delete',
+    type: 'button',
+    appearance: 'danger',
+    focusEditoronEnter: true,
+    icon: RemoveIcon,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+    title: intl.formatMessage(commonMessages.remove),
+    onClick: removeInlineCard,
+    testId: 'media-toolbar-remove-button'
+  }];
+  return inlineImageItems;
+};

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

@@ -0,0 +1,8 @@
+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 { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+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>[];

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

@@ -0,0 +1,8 @@
+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 { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+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>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.17.0",
-    "@atlaskit/editor-common": "^76.24.0",
+    "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",