@atlaskit/editor-plugin-media 0.4.10 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 0.5.1
+
+### Patch Changes
+
+- [#59047](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59047) [`a792bec68ae3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a792bec68ae3) - [ED-21288] Populate width and height ADF attributes on insertion for mediaInline node of image type.
+
+## 0.5.0
+
+### Minor Changes
+
+- [#58884](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58884) [`a149612dc46d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a149612dc46d) - [ux] Added support for Media Inline Image Card in Editor and Renderer
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+- [#56822](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56822) [`77f4fbf44e93`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77f4fbf44e93) - ECA11Y-78: Added announce for the selected file
+
 ## 0.4.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaInline.js

@@ -18,9 +18,11 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _mediaCard = require("@atlaskit/media-card");
+var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _styles = require("./styles");
@@ -157,7 +159,11 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
   }();
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
-    collection = _props$node$attrs.collection;
+    collection = _props$node$attrs.collection,
+    type = _props$node$attrs.type,
+    alt = _props$node$attrs.alt,
+    width = _props$node$attrs.width,
+    height = _props$node$attrs.height;
   var identifier = {
     id: id,
     mediaItemType: 'file',
@@ -177,6 +183,16 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
       isSelected: false
     });
   }
+  if ((0, _mediaInline.shouldShowInlineImage)(type)) {
+    return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
+      mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfig),
+      identifier: identifier,
+      isSelected: props.isSelected,
+      alt: alt,
+      width: width,
+      height: height
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,

package/dist/cjs/nodeviews/mediaSingle.js

@@ -18,6 +18,7 @@ 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");
@@ -43,7 +44,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; } }
+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 */
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MediaSingleNode, _Component);
@@ -418,23 +419,23 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         }
       }
       var shouldShowPlaceholder = mediaOptions.allowCaptions && node.childCount !== 2 && isSelected && state.selection instanceof _state.NodeSelection;
-      var MediaChildren = /*#__PURE__*/_react.default.createElement("figure", {
+      var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
         css: [_styles.figureWrapper],
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && /*#__PURE__*/_react.default.createElement(_CaptionPlaceholder.default, {
+      }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? /*#__PURE__*/_react.default.createElement(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
-      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
+      }), MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         lineLength: contentWidthForLegacyExperience,
         pctWidth: mediaSingleWidthAttribute
-      }), MediaChildren) : /*#__PURE__*/_react.default.createElement(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
+      }), MediaChildren) : (0, _react2.jsx)(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
         pctWidth: mediaSingleWidthAttribute
       }), MediaChildren);
     }
@@ -461,7 +462,7 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState;
-  return /*#__PURE__*/_react.default.createElement(MediaSingleNode, {
+  return (0, _react2.jsx)(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
     node: node,
@@ -591,13 +592,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 /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
         renderNode: function renderNode(_ref6) {
           var mediaProvider = _ref6.mediaProvider,
             contextIdentifierProvider = _ref6.contextIdentifierProvider;
-          return /*#__PURE__*/_react.default.createElement(MediaSingleNodeWrapper, {
+          return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             mediaProvider: mediaProvider,
             contextIdentifierProvider: contextIdentifierProvider,

package/dist/cjs/nodeviews/styles.js

@@ -10,6 +10,7 @@ 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"])));
@@ -23,7 +24,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 /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": "media-card-wrapper",
     style: {
       borderColor: "var(--custom-palette-color)",
@@ -31,15 +32,15 @@ var MediaCardWrapper = exports.MediaCardWrapper = function MediaCardWrapper(_ref
       borderStyle: 'solid',
       borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     css: forcedDimensions,
     style: {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
     onContextMenuCapture: onContextMenu
-  }, borderWidth > 0 && /*#__PURE__*/_react.default.createElement(_ui.MediaBorderGapFiller, {
+  }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
     borderColor: "var(--custom-palette-color)"
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), (0, _react2.jsx)("div", {
     css: absoluteDiv
   }, children)));
 };

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

@@ -27,6 +27,7 @@ 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;
@@ -145,31 +146,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 = /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      var backButtonMessageComponent = (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: backButtonMessage,
         keymap: _keymaps.escape,
         shortcutOverride: "Esc"
       });
       var errorsList = (this.state.validationErrors || []).map(function (error, index) {
-        return /*#__PURE__*/_react.default.createElement(_ui.ErrorMessage, {
+        return (0, _react2.jsx)(_ui.ErrorMessage, {
           key: index
         }, error);
       });
       var hasErrors = !!errorsList.length;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         css: container
-      }, /*#__PURE__*/_react.default.createElement("section", {
+      }, (0, _react2.jsx)("section", {
         css: inputWrapper
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         title: formatMessage(_messages.messages.back),
-        icon: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
+        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
           label: formatMessage(_messages.messages.back)
         }),
         tooltipContent: backButtonMessageComponent,
         onClick: this.closeMediaAltTextMenu
-      })), /*#__PURE__*/_react.default.createElement(_ui.PanelTextInput, {
+      })), (0, _react2.jsx)(_ui.PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(_messages.messages.placeholder),
         describedById: "".concat(hasErrors ? 'errors-list' : '', " support-text"),
@@ -183,24 +184,24 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         ariaRequired: true,
         ariaInvalid: hasErrors,
         autoFocus: true
-      }), showClearTextButton && /*#__PURE__*/_react.default.createElement("div", {
+      }), showClearTextButton && (0, _react2.jsx)("div", {
         css: buttonWrapper
-      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+      }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         testId: "alt-text-clear-button",
         title: formatMessage(_messages.messages.clear),
-        icon: /*#__PURE__*/_react.default.createElement("span", {
+        icon: (0, _react2.jsx)("span", {
           css: clearText
-        }, /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+        }, (0, _react2.jsx)(_crossCircle.default, {
           label: formatMessage(_messages.messages.clear)
         })),
         tooltipContent: formatMessage(_messages.messages.clear),
         onClick: this.handleClearText
-      }))), hasErrors && /*#__PURE__*/_react.default.createElement("section", {
+      }))), hasErrors && (0, _react2.jsx)("section", {
         id: "errors-list",
         ref: this.errorsListRef,
         "aria-live": "assertive",
         css: validationWrapper
-      }, errorsList), /*#__PURE__*/_react.default.createElement("p", {
+      }, errorsList), (0, _react2.jsx)("p", {
         css: supportText,
         id: "support-text"
       }, formatMessage(_messages.messages.supportText)));

package/dist/cjs/toolbar/index.js

@@ -44,6 +44,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 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; }
+var mediaTypeMessages = {
+  image: _mediaUi.messages.file_image_is_selected,
+  video: _mediaUi.messages.file_video_is_selected,
+  audio: _mediaUi.messages.file_audio_is_selected,
+  doc: _mediaUi.messages.file_doc_is_selected,
+  archive: _mediaUi.messages.file_archive_is_selected,
+  unknown: _mediaUi.messages.file_unknown_is_selected
+};
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch((0, _utils.removeSelectedNode)(state.tr));
@@ -393,6 +401,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   }, removeButton]);
   return items;
 };
+var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
+  var mediaType = Object.keys(mediaTypeMessages).find(function (key) {
+    return selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(key);
+  });
+  return mediaType ? mediaTypeMessages[mediaType] : _mediaUi.messages.file_unknown_is_selected;
+};
 var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state, intl) {
   var _pluginInjectionApi$d2;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -471,9 +485,22 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags);
   }
+  var assistiveMessage = '';
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-media_er96o')) {
+    var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+    if (selectedMediaSingleNode) {
+      var selectedMediaNode = selectedMediaSingleNode === null || selectedMediaSingleNode === void 0 ? void 0 : selectedMediaSingleNode.node.content.firstChild;
+      var selectedNodeTypeSingle = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.__fileMimeType;
+      var selectedMediaAlt = selectedMediaNode === null || selectedMediaNode === void 0 ? void 0 : selectedMediaNode.attrs.alt;
+      assistiveMessage = intl === null || intl === void 0 ? void 0 : intl.formatMessage(getMediaTypeMessage(selectedNodeTypeSingle), {
+        name: selectedMediaAlt
+      });
+    }
+  }
   var toolbarConfig = _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,
-    scrollable: true
+    scrollable: true,
+    mediaAssistiveMessage: assistiveMessage
   });
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && allowResizing) {
     return _objectSpread(_objectSpread({}, toolbarConfig), {}, {

package/dist/cjs/toolbar/layout-group.js

@@ -7,6 +7,8 @@ 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)"
 });
@@ -14,19 +16,19 @@ var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
   var layoutButtons = _ref.layoutButtons,
     dispatchCommand = _ref.dispatchCommand,
     hide = _ref.hide;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: containerStyles
-  }, /*#__PURE__*/React.createElement(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
+  }, (0, _react.jsx)(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
     switch (item.type) {
       case 'separator':
-        return /*#__PURE__*/React.createElement(_ui.FloatingToolbarSeparator, {
+        return (0, _react.jsx)(_ui.FloatingToolbarSeparator, {
           key: idx
         });
       case 'button':
         var ButtonIcon = item.icon;
-        return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
+        return (0, _react.jsx)(_ui.FloatingToolbarButton, {
           key: idx,
-          icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+          icon: item.icon ? (0, _react.jsx)(ButtonIcon, {
             label: item.title
           }) : undefined,
           title: item.title,

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

@@ -20,6 +20,7 @@ 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.
@@ -58,42 +59,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 /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
       css: wrapper
-    }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       onClick: onEditLink,
       title: title,
-      tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: title,
         keymap: _keymaps.addLink
       }),
       testId: "edit-link-button"
-    }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    }, title)), (0, _react2.jsx)("div", {
       css: wrapper
-    }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null)), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    }, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+      icon: (0, _react2.jsx)(_shortcut.default, {
         label: linkTitle
       }),
       className: "hyperlink-open-link"
-    }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   } else {
     var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       testId: "add-link-button",
       onClick: onAddLink,
       title: _title,
-      tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      tooltipContent: (0, _react2.jsx)(_keymaps.ToolTipContent, {
         description: _title,
         keymap: _keymaps.addLink
       }),
-      icon: /*#__PURE__*/_react.default.createElement(_link.default, {
+      icon: (0, _react2.jsx)(_link.default, {
         label: _title
       })
-    }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   }
 };

package/dist/cjs/ui/CaptionPlaceholder/index.js

@@ -13,14 +13,15 @@ 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 /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _react2.jsx)("span", {
     ref: ref,
     css: placeholder,
     onClick: onClick,
     "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
     "data-testid": "caption-placeholder"
-  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.placeholder));
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.placeholder));
 });

package/dist/cjs/ui/ImageBorder/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _react2 = require("@emotion/react");
 var _icons = require("@atlaskit/editor-common/icons");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -17,6 +18,8 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = require("./messages");
 var _styles2 = require("./styles");
+/** @jsx jsx */
+
 var ImageBorder = function ImageBorder(_ref) {
   var formatMessage = _ref.intl.formatMessage,
     toggleBorder = _ref.toggleBorder,
@@ -62,14 +65,14 @@ var ImageBorder = function ImageBorder(_ref) {
     value: {
       name: 'color'
     },
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: (0, _react2.jsx)("div", {
       className: _styles.DropdownMenuSharedCssClassName.SUBMENU
-    }, /*#__PURE__*/React.createElement("div", {
+    }, (0, _react2.jsx)("div", {
       css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
-    }), isColorSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+    }), isColorSubmenuOpen && (0, _react2.jsx)("div", {
       css: (0, _styles2.contextualSubMenu)(0),
       ref: handleSubMenuRef
-    }, /*#__PURE__*/React.createElement(_uiColor.ColorPalette, {
+    }, (0, _react2.jsx)(_uiColor.ColorPalette, {
       onClick: function onClick(color) {
         setBorder({
           color: color
@@ -88,22 +91,22 @@ var ImageBorder = function ImageBorder(_ref) {
     value: {
       name: 'size'
     },
-    elemAfter: /*#__PURE__*/React.createElement("div", {
+    elemAfter: (0, _react2.jsx)("div", {
       className: _styles.DropdownMenuSharedCssClassName.SUBMENU
-    }, /*#__PURE__*/React.createElement("div", {
+    }, (0, _react2.jsx)("div", {
       css: _styles2.contextualMenuArrow
-    }), isSizeSubmenuOpen && /*#__PURE__*/React.createElement("div", {
+    }), isSizeSubmenuOpen && (0, _react2.jsx)("div", {
       css: (0, _styles2.contextualSubMenu)(1),
       ref: handleSubMenuRef
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
         value = _ref2.value;
-      return /*#__PURE__*/React.createElement(_tooltip.default, {
+      return (0, _react2.jsx)(_tooltip.default, {
         key: idx,
         content: name
-      }, /*#__PURE__*/React.createElement("span", {
+      }, (0, _react2.jsx)("span", {
         css: _styles2.buttonWrapperStyle
-      }, /*#__PURE__*/React.createElement("button", {
+      }, (0, _react2.jsx)("button", {
         css: (0, _styles2.buttonStyle)(value === size),
         "aria-label": name,
         role: "radio",
@@ -117,7 +120,7 @@ var ImageBorder = function ImageBorder(_ref) {
         onMouseDown: function onMouseDown(e) {
           e.preventDefault();
         }
-      }, /*#__PURE__*/React.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: (0, _styles2.line)(value, value === size),
         role: "presentation"
       }))));
@@ -131,47 +134,47 @@ var ImageBorder = function ImageBorder(_ref) {
   var fitTolerance = 10;
   var fitWidth = _styles2.menuItemDimensions.width;
   var fitHeight = items.length * (_styles2.menuItemDimensions.height + _styles2.itemSpacing);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  return (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
     css: (0, _styles2.toolbarButtonWrapper)({
       enabled: enabled,
       isOpen: isOpen
     })
-  }, /*#__PURE__*/React.createElement(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     className: "image-border-toolbar-btn",
     selected: enabled,
     onClick: toggleBorder,
     spacing: "compact",
     "aria-label": enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder),
-    iconBefore: /*#__PURE__*/React.createElement(_icons.BorderIcon, {
+    iconBefore: (0, _react2.jsx)(_icons.BorderIcon, {
       label: ""
     }),
     title: enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), (0, _react2.jsx)("div", {
     ref: popupTarget
-  }, /*#__PURE__*/React.createElement(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     className: "image-border-toolbar-dropdown",
     selected: enabled || isOpen,
     "aria-label": formatMessage(_messages.messages.borderOptions),
     title: formatMessage(_messages.messages.borderOptions),
     spacing: "compact",
-    iconBefore: /*#__PURE__*/React.createElement(_chevronDown.default, {
+    iconBefore: (0, _react2.jsx)(_chevronDown.default, {
       label: ""
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);
     }
-  }))), /*#__PURE__*/React.createElement(_ui.Popup, {
+  }))), (0, _react2.jsx)(_ui.Popup, {
     target: popupTarget.current ? popupTarget.current : undefined,
     fitWidth: fitWidth + fitTolerance,
     fitHeight: fitHeight + fitTolerance,
     forcePlacement: true,
     stick: true
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     onMouseLeave: function onMouseLeave() {
       setIsColorSubmenuOpen(false);
       setIsSizeSubmenuOpen(false);
     }
-  }, /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu
+  }, (0, _react2.jsx)(_uiMenu.DropdownMenu
   //This needs be removed when the a11y is completely handled
   //Disabling key navigation now as it works only partially
   //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

package/dist/cjs/ui/Media/DropPlaceholder.js

@@ -15,14 +15,15 @@ var _constants = require("@atlaskit/theme/constants");
 var _media = require("../../nodeviews/mediaNodeView/media");
 var _dropPlaceholderMessages = require("./drop-placeholder-messages");
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 var iconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  background: ", ";\n  border-radius: ", "px;\n  margin: 5px 3px 25px;\n  width: ", "px;\n  min-height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"), "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"), (0, _constants.borderRadius)(), _media.FILE_WIDTH, _media.MEDIA_HEIGHT);
 var dropLine = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  margin: ", " 0;\n  width: 100%;\n  height: 2px;\n"])), "var(--ds-border-focused, ".concat(_colors.B200, ")"), (0, _constants.borderRadius)(), "var(--ds-space-025, 2px)");
 var IconWrapperComponent = function IconWrapperComponent(props) {
   var intl = props.intl;
   var dropPlaceholderLabel = _dropPlaceholderMessages.dropPlaceholderMessages.dropPlaceholderLabel;
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: iconWrapper
-  }, /*#__PURE__*/React.createElement(_documentFilled.default, {
+  }, (0, _react.jsx)(_documentFilled.default, {
     label: intl.formatMessage(dropPlaceholderLabel),
     size: "medium"
   }));
@@ -31,7 +32,7 @@ var IntlIconWrapper = (0, _reactIntlNext.injectIntl)(IconWrapperComponent);
 var _default = exports.default = function _default(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'group' : _ref$type;
-  return type === 'single' ? /*#__PURE__*/React.createElement("div", {
+  return type === 'single' ? (0, _react.jsx)("div", {
     css: dropLine
-  }) : /*#__PURE__*/React.createElement(IntlIconWrapper, null);
+  }) : (0, _react.jsx)(IntlIconWrapper, null);
 };