@atlaskit/editor-plugin-media 0.4.8 → 0.4.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- [#58763](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58763) [`0fdbd64522bf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0fdbd64522bf) - update ADF schema
+
 ## 0.4.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -18,7 +18,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
@@ -44,7 +43,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MediaSingleNode, _Component);
@@ -419,23 +418,23 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         }
       }
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
-      var MediaChildren = (0, _react2.jsx)("figure", {
+      var MediaChildren = /*#__PURE__*/_react.default.createElement("figure", {
         ref: this.mediaSingleWrapperRef,
         css: [_styles.figureWrapper],
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, (0, _react2.jsx)("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
+      }), shouldShowPlaceholder && /*#__PURE__*/_react.default.createElement(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? /*#__PURE__*/_react.default.createElement(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
-      }), MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         lineLength: contentWidthForLegacyExperience,
         pctWidth: mediaSingleWidthAttribute
-      }), MediaChildren) : (0, _react2.jsx)(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
+      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
         pctWidth: mediaSingleWidthAttribute
       }), MediaChildren);
     }
@@ -462,7 +461,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState;
-  return (0, _react2.jsx)(MediaSingleNode, {
+  return /*#__PURE__*/_react.default.createElement(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
     node: node,
@@ -592,13 +591,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
 
       // getPos is a boolean for marks, since this is a node we know it must be a function
       var getPos = this.getPos;
-      return (0, _react2.jsx)(_providerFactory.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref6) {
           var mediaProvider = _ref6.mediaProvider,
             contextIdentifierProvider = _ref6.contextIdentifierProvider;
-          return (0, _react2.jsx)(MediaSingleNodeWrapper, {
+          return /*#__PURE__*/_react.default.createElement(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,
             contextIdentifierProvider: contextIdentifierProvider,

package/dist/cjs/nodeviews/styles.js

@@ -10,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _templateObject, _templateObject2, _templateObject3;
-/** @jsx jsx */
 var MediaInlineNodeSelector = exports.MediaInlineNodeSelector = 'media-inline-node';
 var MediaSingleNodeSelector = exports.MediaSingleNodeSelector = 'media-single-node';
 var figureWrapper = exports.figureWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
@@ -24,7 +23,7 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
     borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth,
     onContextMenu = _ref.onContextMenu;
   var calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "media-card-wrapper",
     style: {
       borderColor: "var(--custom-palette-color)",
@@ -32,15 +31,15 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }
-  }, (0, _react2.jsx)("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
     onContextMenuCapture: onContextMenu
-  }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+  }, borderWidth > 0 && /*#__PURE__*/_react.default.createElement(_ui.MediaBorderGapFiller, {
     borderColor: "var(--custom-palette-color)"
-  }), (0, _react2.jsx)("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     css: absoluteDiv
   }, children)));
 };

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

@@ -27,7 +27,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _commands = require("../commands");
 var _messages = require("../messages");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-/** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var CONTAINER_WIDTH_IN_PX = exports.CONTAINER_WIDTH_IN_PX = _ui.RECENT_SEARCH_WIDTH_IN_PX;
@@ -146,31 +145,31 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
       var formatMessage = this.props.intl.formatMessage;
       var showClearTextButton = this.state.showClearTextButton;
       var backButtonMessage = formatMessage(_messages.messages.back);
-      var backButtonMessageComponent = (0, _react2.jsx)(_keymaps.ToolTipContent, {
+      var backButtonMessageComponent = /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
         description: backButtonMessage,
         keymap: _keymaps.escape,
         shortcutOverride: "Esc"
       });
       var errorsList = (this.state.validationErrors || []).map(function (error, index) {
-        return (0, _react2.jsx)(_ui.ErrorMessage, {
+        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
           key: index
         }, error);
       });
       var hasErrors = !!errorsList.length;
-      return (0, _react2.jsx)("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         css: container
-      }, (0, _react2.jsx)("section", {
+      }, /*#__PURE__*/_react.default.createElement("section", {
         css: inputWrapper
-      }, (0, _react2.jsx)("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
         css: buttonWrapper
-      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
         title: formatMessage(_messages.messages.back),
-        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
+        icon: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
           label: formatMessage(_messages.messages.back)
         }),
         tooltipContent: backButtonMessageComponent,
         onClick: this.closeMediaAltTextMenu
-      })), (0, _react2.jsx)(_ui.PanelTextInput, {
+      })), /*#__PURE__*/_react.default.createElement(_ui.PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(_messages.messages.placeholder),
         describedById: "".concat(hasErrors ? 'errors-list' : '', " support-text"),
@@ -184,24 +183,24 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         ariaRequired: true,
         ariaInvalid: hasErrors,
         autoFocus: true
-      }), showClearTextButton && (0, _react2.jsx)("div", {
+      }), showClearTextButton && /*#__PURE__*/_react.default.createElement("div", {
         css: buttonWrapper
-      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
         testId: "alt-text-clear-button",
         title: formatMessage(_messages.messages.clear),
-        icon: (0, _react2.jsx)("span", {
+        icon: /*#__PURE__*/_react.default.createElement("span", {
           css: clearText
-        }, (0, _react2.jsx)(_crossCircle.default, {
+        }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
           label: formatMessage(_messages.messages.clear)
         })),
         tooltipContent: formatMessage(_messages.messages.clear),
         onClick: this.handleClearText
-      }))), hasErrors && (0, _react2.jsx)("section", {
+      }))), hasErrors && /*#__PURE__*/_react.default.createElement("section", {
         id: "errors-list",
         ref: this.errorsListRef,
         "aria-live": "assertive",
         css: validationWrapper
-      }, errorsList), (0, _react2.jsx)("p", {
+      }, errorsList), /*#__PURE__*/_react.default.createElement("p", {
         css: supportText,
         id: "support-text"
       }, formatMessage(_messages.messages.supportText)));

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/layout-group.js

@@ -7,8 +7,6 @@ exports.LayoutGroup = void 0;
 var _react = require("@emotion/react");
 var _button = require("@atlaskit/button");
 var _ui = require("@atlaskit/editor-common/ui");
-/** @jsx jsx */
-
 var containerStyles = (0, _react.css)({
   marginLeft: "var(--ds-space-100, 8px)"
 });
@@ -16,19 +14,19 @@ var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
   var layoutButtons = _ref.layoutButtons,
     dispatchCommand = _ref.dispatchCommand,
     hide = _ref.hide;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: containerStyles
-  }, (0, _react.jsx)(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
+  }, /*#__PURE__*/React.createElement(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
     switch (item.type) {
       case 'separator':
-        return (0, _react.jsx)(_ui.FloatingToolbarSeparator, {
+        return /*#__PURE__*/React.createElement(_ui.FloatingToolbarSeparator, {
           key: idx
         });
       case 'button':
         var ButtonIcon = item.icon;
-        return (0, _react.jsx)(_ui.FloatingToolbarButton, {
+        return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
           key: idx,
-          icon: item.icon ? (0, _react.jsx)(ButtonIcon, {
+          icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
             label: item.title
           }) : undefined,
           title: item.title,

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -20,7 +20,6 @@ var _pluginKey = require("../pm-plugins/plugin-key");
 var _checkMediaType = require("../utils/check-media-type");
 var _currentMediaNode = require("../utils/current-media-node");
 var _templateObject;
-/** @jsx jsx */
 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; }
 // need this wrapper, need to have 4px between items.
@@ -59,42 +58,42 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     var isValidUrl = (0, _adfSchema.isSafeUrl)(mediaLinkingState.link);
     var title = intl.formatMessage(_messages.linkToolbarMessages.editLink);
     var linkTitle = intl.formatMessage(isValidUrl ? _messages.linkMessages.openLink : _messages.linkToolbarMessages.unableToOpenLink);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       css: wrapper
-    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
       onClick: onEditLink,
       title: title,
-      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+      tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
         description: title,
         keymap: _keymaps.addLink
       }),
       testId: "edit-link-button"
-    }, title)), (0, _react2.jsx)("div", {
+    }, title)), /*#__PURE__*/_react.default.createElement("div", {
       css: wrapper
-    }, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null)), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: (0, _react2.jsx)(_shortcut.default, {
+      icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
         label: linkTitle
       }),
       className: "hyperlink-open-link"
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+    }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
   } else {
     var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: _title,
-      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
+      tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
         description: _title,
         keymap: _keymaps.addLink
       }),
-      icon: (0, _react2.jsx)(_link.default, {
+      icon: /*#__PURE__*/_react.default.createElement(_link.default, {
         label: _title
       })
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+    }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
   }
 };

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/cjs/ui/CaptionPlaceholder/index.js

@@ -13,15 +13,14 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("./messages");
 var _templateObject;
-/** @jsx jsx */
 var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: ", " !important;\n  display: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
 var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
-  return (0, _react2.jsx)("span", {
+  return /*#__PURE__*/_react.default.createElement("span", {
     ref: ref,
     css: placeholder,
     onClick: onClick,
     "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
     "data-testid": "caption-placeholder"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.placeholder));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.placeholder));
 });