@atlaskit/editor-plugin-card 0.14.9 → 0.14.11

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-card
 
+## 0.14.11
+
+### 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).
+- [#58969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58969) [`297598de20d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/297598de20d6) - ED-20809: removes web driver project reference
+- Updated dependencies
+
+## 0.14.10
+
+### Patch Changes
+
+- [#58193](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58193) [`4bf69e3255f8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4bf69e3255f8) - NO-ISSUE Added the capability to override the default card type of inline when inserting links, so we can have Loom links convert to embed cards
+- Updated dependencies
+
 ## 0.14.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/datasource.js

@@ -13,6 +13,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 = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _styles = require("@atlaskit/editor-common/styles");
@@ -24,7 +25,7 @@ var _EditorAnalyticsContext = require("../ui/EditorAnalyticsContext");
 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 */
 var getPosSafely = function getPosSafely(pos) {
   if (!pos || typeof pos === 'boolean') {
     return;
@@ -149,11 +150,11 @@ var DatasourceComponent = exports.DatasourceComponent = /*#__PURE__*/function (_
 
         // [WS-2307]: we only render card wrapped into a Provider when the value is ready
         if (cardContext && cardContext.value) {
-          return /*#__PURE__*/_react.default.createElement(_EditorAnalyticsContext.EditorAnalyticsContext, {
+          return (0, _react2.jsx)(_EditorAnalyticsContext.EditorAnalyticsContext, {
             editorView: this.props.view
-          }, /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+          }, (0, _react2.jsx)(cardContext.Provider, {
             value: cardContext.value
-          }, /*#__PURE__*/_react.default.createElement(_linkDatasource.DatasourceTableView, {
+          }, (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
             datasourceId: datasource.id,
             parameters: datasource.parameters,
             visibleColumnKeys: visibleColumnKeys,
@@ -203,16 +204,16 @@ var Datasource = exports.Datasource = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var attrs = this.node.attrs;
-      return /*#__PURE__*/_react.default.createElement(_datasourceErrorBoundary.DatasourceErrorBoundary, {
+      return (0, _react2.jsx)(_datasourceErrorBoundary.DatasourceErrorBoundary, {
         unsupportedComponent: _ui.UnsupportedInline,
         view: this.view,
         url: attrs.url
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         className: _styles.DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
           minWidth: (0, _utils.calcBreakoutWidth)(attrs.layout, this.tableWidth)
         }
-      }, /*#__PURE__*/_react.default.createElement(DatasourceComponent, {
+      }, (0, _react2.jsx)(DatasourceComponent, {
         node: this.node,
         view: this.view,
         getPos: this.getPos

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -18,6 +18,8 @@ var _pulse = require("../common/pulse");
 var _actions = require("../pm-plugins/actions");
 var _InlineCardOverlay = _interopRequireDefault(require("../ui/InlineCardOverlay"));
 var _utils = require("../utils");
+/** @jsx jsx */
+
 // editor adds a standard line-height that is bigger than an inline smart link
 // due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
 var loaderWrapperStyles = (0, _react2.css)({
@@ -120,7 +122,7 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var innerCard = (0, _react.useMemo)(function () {
-    return /*#__PURE__*/React.createElement(_smartCard.Card, {
+    return (0, _react2.jsx)(_smartCard.Card, {
       key: url,
       url: url,
       data: data,
@@ -136,7 +138,7 @@ var InlineCard = function InlineCard(_ref) {
 
   // BEGIN: Awareness (To be revisited in EDM-8508)
   var cardWithOverlay = (0, _react.useMemo)(function () {
-    return shouldShowLinkOverlay ? /*#__PURE__*/React.createElement(_InlineCardOverlay.default, {
+    return shouldShowLinkOverlay ? (0, _react2.jsx)(_InlineCardOverlay.default, {
       isSelected: isSelected,
       isVisible: isInserted || isHovered || isSelected,
       onMouseEnter: function onMouseEnter() {
@@ -150,14 +152,14 @@ var InlineCard = function InlineCard(_ref) {
   }, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
   var card = (0, _react.useMemo)(function () {
     var _cardContext$value;
-    return /*#__PURE__*/React.createElement("span", {
+    return (0, _react2.jsx)("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles,
       className: "card"
-    }, shouldShowLinkPulse ? /*#__PURE__*/React.createElement(_analyticsNext.AnalyticsContext, {
+    }, shouldShowLinkPulse ? (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: {
         attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
-    }, /*#__PURE__*/React.createElement(_pulse.DiscoveryPulse, {
+    }, (0, _react2.jsx)(_pulse.DiscoveryPulse, {
       localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: _localStorage.ONE_DAY_IN_MILLISECONDS,
       discoveryMode: "start"
@@ -167,7 +169,7 @@ var InlineCard = function InlineCard(_ref) {
 
   // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
   // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+  return cardContext && cardContext.value ? (0, _react2.jsx)(cardContext.Provider, {
     value: cardContext.value
   }, card) : data ? card : null;
 };

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

@@ -151,6 +151,7 @@ var handleFallbackWithAnalytics = exports.handleFallbackWithAnalytics = function
 var queueCardsFromChangedTr = exports.queueCardsFromChangedTr = function queueCardsFromChangedTr(state, tr, source, analyticsAction) {
   var normalizeLinkText = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
   var sourceEvent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
+  var appearance = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'inline';
   var schema = state.schema;
   var link = schema.marks.link;
   var requests = [];
@@ -168,7 +169,7 @@ var queueCardsFromChangedTr = exports.queueCardsFromChangedTr = function queueCa
       requests.push({
         url: linkMark.attrs.href,
         pos: pos,
-        appearance: 'inline',
+        appearance: appearance,
         compareLinkText: normalizeLinkText,
         source: source,
         analyticsAction: analyticsAction,

package/dist/cjs/ui/EditDatasourceButton.js

@@ -12,6 +12,8 @@ var _primitives = require("@atlaskit/primitives");
 var _actions = require("../pm-plugins/actions");
 var _CardContextProvider = require("./CardContextProvider");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
+/** @jsx jsx */
+
 var buttonStyles = (0, _react.css)({
   pointerEvents: 'auto'
 });
@@ -47,16 +49,16 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return /*#__PURE__*/React.createElement(_primitives.Flex, null, /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, {
+  return (0, _react.jsx)(_primitives.Flex, null, (0, _react.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
-    icon: /*#__PURE__*/React.createElement(_ui.SmallerEditIcon, null),
+    icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),
     selected: false,
     onClick: function onClick() {
       return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     },
     testId: 'card-edit-datasource-button'
-  }), /*#__PURE__*/React.createElement(_ui.FloatingToolbarSeparator, null));
+  }), (0, _react.jsx)(_ui.FloatingToolbarSeparator, null));
 };
 var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourceButton(_ref2) {
   var intl = _ref2.intl,
@@ -64,9 +66,9 @@ var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourc
     url = _ref2.url,
     editorView = _ref2.editorView,
     editorState = _ref2.editorState;
-  return /*#__PURE__*/React.createElement(_CardContextProvider.CardContextProvider, null, function (_ref3) {
+  return (0, _react.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
     var cardContext = _ref3.cardContext;
-    return /*#__PURE__*/React.createElement(EditDatasourceButtonWithCardContext, {
+    return (0, _react.jsx)(EditDatasourceButtonWithCardContext, {
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

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

@@ -24,7 +24,7 @@ var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
 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; }
 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 _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; } /** @jsx jsx */
 var DEBOUNCE_IN_MS = 5;
 var ESTIMATED_MIN_WIDTH_IN_PX = 16;
 var PADDING_IN_PX = 2;
@@ -231,20 +231,20 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var label = intl.formatMessage(_messages.messages.inlineOverlay);
   var icon = (0, _react.useMemo)(function () {
     var IconComponent = isSelected ? _chevronUp.default : _chevronDown.default;
-    return /*#__PURE__*/_react.default.createElement(IconComponent, {
+    return (0, _react2.jsx)(IconComponent, {
       label: label,
       size: "small",
       testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
     });
   }, [isSelected, label, testId]);
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
     css: containerStyles,
     ref: containerRef
-  }), children, isVisible && showOverlay && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  }), children, isVisible && showOverlay && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     "aria-hidden": "true",
     className: OVERLAY_MARKER_CLASSNAME,
     css: markerStyles
-  }, _utils.ZERO_WIDTH_JOINER), /*#__PURE__*/_react.default.createElement("a", {
+  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
     className: OVERLAY_CLASSNAME,
     css: [overlayStyles, _utils.browser.safari && safariOverlayStyles],
     style: {
@@ -256,11 +256,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       return e.preventDefault();
     },
     tabIndex: -1
-  }, showLabel && /*#__PURE__*/_react.default.createElement("span", {
+  }, showLabel && (0, _react2.jsx)("span", {
     className: OVERLAY_LABEL_CLASSNAME,
     css: textStyles,
     "data-testid": "".concat(testId, "-label")
-  }, label), /*#__PURE__*/_react.default.createElement("span", {
+  }, label), (0, _react2.jsx)("span", {
     css: iconStyles
   }, icon))));
 };

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

@@ -19,7 +19,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _actions = require("../../pm-plugins/actions");
 var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; } /** @jsx jsx */
 var toolbarButtonWrapperStyles = (0, _react2.css)({
   background: "".concat("var(--ds-background-neutral, ".concat(_colors.N20A, ")")),
   color: "".concat("var(--ds-icon, ".concat(_colors.N300, ")")),
@@ -48,7 +48,7 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
   if (!targetElement) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(_ui.Popup, {
+  return (0, _react2.jsx)(_ui.Popup, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
@@ -58,14 +58,14 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
     forcePlacement: true,
     stick: true,
     ariaLabel: title
-  }, /*#__PURE__*/React.createElement(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
     testId: testId,
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(_collapse.default, {
+    iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_collapse.default, {
       label: title
-    }) : /*#__PURE__*/React.createElement(_expand.default, {
+    }) : (0, _react2.jsx)(_expand.default, {
       label: title
     })
   }));
@@ -103,7 +103,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
   if (!isDatasource) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(LayoutButton, {
+  return (0, _react2.jsx)(LayoutButton, {
     mountPoint: mountPoint,
     scrollableElement: scrollableElement,
     boundariesElement: boundariesElement,

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -14,6 +14,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 = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
@@ -22,7 +23,7 @@ var _smartCard = require("@atlaskit/smart-card");
 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 ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableEmbedCard, _React$Component);
@@ -311,7 +312,7 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
           paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ").concat(_smartCard.embedHeaderHeight, "px)")
         };
       }
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _react2.jsx)("span", {
         "data-testid": 'resizable-embed-card-height-definer',
         style: _objectSpread({
           display: 'block',
@@ -357,17 +358,17 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
       };
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
         css: _styles.embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         css: (0, _ui.wrapperStyle)({
           layout: layout,
           isResized: !!pctWidth,
           containerWidth: containerWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
           fullWidthMode: fullWidthMode
         })
-      }, /*#__PURE__*/_react.default.createElement(_ui.Resizer, (0, _extends2.default)({}, this.props, {
+      }, (0, _react2.jsx)(_ui.Resizer, (0, _extends2.default)({}, this.props, {
         width: initialWidth // Starting or initial width of embed <iframe> itself.
         ,
         enable: enable,

package/dist/cjs/ui/useFetchDatasourceInfo.js

@@ -9,6 +9,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+/** @jsx jsx */
+
 var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   var isRegularCardNode = _ref.isRegularCardNode,
     url = _ref.url,

package/dist/es2019/nodeviews/datasource.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -121,11 +123,11 @@ export class DatasourceComponent extends React.PureComponent {
 
       // [WS-2307]: we only render card wrapped into a Provider when the value is ready
       if (cardContext && cardContext.value) {
-        return /*#__PURE__*/React.createElement(EditorAnalyticsContext, {
+        return jsx(EditorAnalyticsContext, {
           editorView: this.props.view
-        }, /*#__PURE__*/React.createElement(cardContext.Provider, {
+        }, jsx(cardContext.Provider, {
           value: cardContext.value
-        }, /*#__PURE__*/React.createElement(DatasourceTableView, {
+        }, jsx(DatasourceTableView, {
           datasourceId: datasource.id,
           parameters: datasource.parameters,
           visibleColumnKeys: visibleColumnKeys,
@@ -168,16 +170,16 @@ export class Datasource extends ReactNodeView {
     const {
       attrs
     } = this.node;
-    return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
+    return jsx(DatasourceErrorBoundary, {
       unsupportedComponent: UnsupportedInline,
       view: this.view,
       url: attrs.url
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
       style: {
         minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
       }
-    }, /*#__PURE__*/React.createElement(DatasourceComponent, {
+    }, jsx(DatasourceComponent, {
       node: this.node,
       view: this.view,
       getPos: this.getPos

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import { memo, useCallback, useMemo, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
@@ -107,7 +108,7 @@ const InlineCard = ({
       url
     });
   }, [onResolve]);
-  const innerCard = useMemo(() => /*#__PURE__*/React.createElement(SmartCard, {
+  const innerCard = useMemo(() => jsx(SmartCard, {
     key: url,
     url: url,
     data: data,
@@ -121,7 +122,7 @@ const InlineCard = ({
   }), [data, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
 
   // BEGIN: Awareness (To be revisited in EDM-8508)
-  const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? /*#__PURE__*/React.createElement(InlineCardOverlay, {
+  const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
     isSelected: isSelected,
     isVisible: isInserted || isHovered || isSelected,
     onMouseEnter: () => setIsHovered(true),
@@ -130,14 +131,14 @@ const InlineCard = ({
   }, innerCard) : innerCard, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
   const card = useMemo(() => {
     var _cardContext$value;
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles,
       className: "card"
-    }, shouldShowLinkPulse ? /*#__PURE__*/React.createElement(AnalyticsContext, {
+    }, shouldShowLinkPulse ? jsx(AnalyticsContext, {
       data: {
         attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
-    }, /*#__PURE__*/React.createElement(DiscoveryPulse, {
+    }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
       discoveryMode: "start"
@@ -147,7 +148,7 @@ const InlineCard = ({
 
   // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
   // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+  return cardContext && cardContext.value ? jsx(cardContext.Provider, {
     value: cardContext.value
   }, card) : data ? card : null;
 };

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

@@ -127,7 +127,7 @@ export const handleFallbackWithAnalytics = (request, editorAnalyticsApi) => (sta
   }
   return true;
 };
-export const queueCardsFromChangedTr = (state, tr, source, analyticsAction, normalizeLinkText = true, sourceEvent = undefined) => {
+export const queueCardsFromChangedTr = (state, tr, source, analyticsAction, normalizeLinkText = true, sourceEvent = undefined, appearance = 'inline') => {
   const {
     schema
   } = state;
@@ -147,7 +147,7 @@ export const queueCardsFromChangedTr = (state, tr, source, analyticsAction, norm
       requests.push({
         url: linkMark.attrs.href,
         pos,
-        appearance: 'inline',
+        appearance,
         compareLinkText: normalizeLinkText,
         source,
         analyticsAction,

package/dist/es2019/ui/EditDatasourceButton.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
@@ -43,14 +44,14 @@ const EditDatasourceButtonWithCardContext = ({
       editorView.focus();
     }
   };
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
-    icon: /*#__PURE__*/React.createElement(SmallerEditIcon, null),
+    icon: jsx(SmallerEditIcon, null),
     selected: false,
     onClick: () => dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi)),
     testId: 'card-edit-datasource-button'
-  }), /*#__PURE__*/React.createElement(Separator, null));
+  }), jsx(Separator, null));
 };
 export const EditDatasourceButton = ({
   intl,
@@ -59,9 +60,9 @@ export const EditDatasourceButton = ({
   editorView,
   editorState
 }) => {
-  return /*#__PURE__*/React.createElement(CardContextProvider, null, ({
+  return jsx(CardContextProvider, null, ({
     cardContext
-  }) => /*#__PURE__*/React.createElement(EditDatasourceButtonWithCardContext, {
+  }) => jsx(EditDatasourceButtonWithCardContext, {
     url: url,
     intl: intl,
     editorAnalyticsApi: editorAnalyticsApi,

package/dist/es2019/ui/InlineCardOverlay/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
@@ -215,20 +217,20 @@ const InlineCardOverlay = ({
   const label = intl.formatMessage(messages.inlineOverlay);
   const icon = useMemo(() => {
     const IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
-    return /*#__PURE__*/React.createElement(IconComponent, {
+    return jsx(IconComponent, {
       label: label,
       size: "small",
       testId: `${testId}-${isSelected ? 'open' : 'close'}`
     });
   }, [isSelected, label, testId]);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return jsx("span", _extends({}, props, {
     css: containerStyles,
     ref: containerRef
-  }), children, isVisible && showOverlay && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+  }), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
     "aria-hidden": "true",
     className: OVERLAY_MARKER_CLASSNAME,
     css: markerStyles
-  }, ZERO_WIDTH_JOINER), /*#__PURE__*/React.createElement("a", {
+  }, ZERO_WIDTH_JOINER), jsx("a", {
     className: OVERLAY_CLASSNAME,
     css: [overlayStyles, browser.safari && safariOverlayStyles],
     style: {
@@ -238,11 +240,11 @@ const InlineCardOverlay = ({
     href: url,
     onClick: e => e.preventDefault(),
     tabIndex: -1
-  }, showLabel && /*#__PURE__*/React.createElement("span", {
+  }, showLabel && jsx("span", {
     className: OVERLAY_LABEL_CLASSNAME,
     css: textStyles,
     "data-testid": `${testId}-label`
-  }, label), /*#__PURE__*/React.createElement("span", {
+  }, label), jsx("span", {
     css: iconStyles
   }, icon))));
 };

package/dist/es2019/ui/LayoutButton/index.js

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import { useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -39,7 +40,7 @@ export const LayoutButton = ({
   if (!targetElement) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
@@ -49,14 +50,14 @@ export const LayoutButton = ({
     forcePlacement: true,
     stick: true,
     ariaLabel: title
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     testId: testId,
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
       label: title
-    }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+    }) : jsx(ExpandIcon, {
       label: title
     })
   }));
@@ -100,7 +101,7 @@ const LayoutButtonWrapper = ({
   if (!isDatasource) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(LayoutButton, {
+  return jsx(LayoutButton, {
     mountPoint: mountPoint,
     scrollableElement: scrollableElement,
     boundariesElement: boundariesElement,

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -285,7 +287,7 @@ export default class ResizableEmbedCard extends React.Component {
         paddingBottom: `calc(${(1 / aspectRatio * 100).toFixed(3)}% + ${embedHeaderHeight}px)`
       };
     }
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       "data-testid": 'resizable-embed-card-height-definer',
       style: {
         display: 'block',
@@ -330,17 +332,17 @@ export default class ResizableEmbedCard extends React.Component {
     };
 
     /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: embedSpacingStyles,
       "data-testid": "resizable-embed-card-spacing"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: wrapperStyle({
         layout,
         isResized: !!pctWidth,
         containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
         fullWidthMode
       })
-    }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+    }, jsx(Resizer, _extends({}, this.props, {
       width: initialWidth // Starting or initial width of embed <iframe> itself.
       ,
       enable: enable,

package/dist/es2019/ui/useFetchDatasourceInfo.js

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { useEffect, useState } from 'react';
 export const useFetchDatasourceInfo = ({
   isRegularCardNode,

package/dist/esm/nodeviews/datasource.js

@@ -9,7 +9,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -142,11 +144,11 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
 
         // [WS-2307]: we only render card wrapped into a Provider when the value is ready
         if (cardContext && cardContext.value) {
-          return /*#__PURE__*/React.createElement(EditorAnalyticsContext, {
+          return jsx(EditorAnalyticsContext, {
             editorView: this.props.view
-          }, /*#__PURE__*/React.createElement(cardContext.Provider, {
+          }, jsx(cardContext.Provider, {
             value: cardContext.value
-          }, /*#__PURE__*/React.createElement(DatasourceTableView, {
+          }, jsx(DatasourceTableView, {
             datasourceId: datasource.id,
             parameters: datasource.parameters,
             visibleColumnKeys: visibleColumnKeys,
@@ -196,16 +198,16 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var attrs = this.node.attrs;
-      return /*#__PURE__*/React.createElement(DatasourceErrorBoundary, {
+      return jsx(DatasourceErrorBoundary, {
         unsupportedComponent: UnsupportedInline,
         view: this.view,
         url: attrs.url
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
           minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
         }
-      }, /*#__PURE__*/React.createElement(DatasourceComponent, {
+      }, jsx(DatasourceComponent, {
         node: this.node,
         view: this.view,
         getPos: this.getPos

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
 import { memo, useCallback, useMemo, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
@@ -113,7 +114,7 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var innerCard = useMemo(function () {
-    return /*#__PURE__*/React.createElement(SmartCard, {
+    return jsx(SmartCard, {
       key: url,
       url: url,
       data: data,
@@ -129,7 +130,7 @@ var InlineCard = function InlineCard(_ref) {
 
   // BEGIN: Awareness (To be revisited in EDM-8508)
   var cardWithOverlay = useMemo(function () {
-    return shouldShowLinkOverlay ? /*#__PURE__*/React.createElement(InlineCardOverlay, {
+    return shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
       isSelected: isSelected,
       isVisible: isInserted || isHovered || isSelected,
       onMouseEnter: function onMouseEnter() {
@@ -143,14 +144,14 @@ var InlineCard = function InlineCard(_ref) {
   }, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
   var card = useMemo(function () {
     var _cardContext$value;
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles,
       className: "card"
-    }, shouldShowLinkPulse ? /*#__PURE__*/React.createElement(AnalyticsContext, {
+    }, shouldShowLinkPulse ? jsx(AnalyticsContext, {
       data: {
         attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
-    }, /*#__PURE__*/React.createElement(DiscoveryPulse, {
+    }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
       discoveryMode: "start"
@@ -160,7 +161,7 @@ var InlineCard = function InlineCard(_ref) {
 
   // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
   // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+  return cardContext && cardContext.value ? jsx(cardContext.Provider, {
     value: cardContext.value
   }, card) : data ? card : null;
 };

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

@@ -144,6 +144,7 @@ export var handleFallbackWithAnalytics = function handleFallbackWithAnalytics(re
 export var queueCardsFromChangedTr = function queueCardsFromChangedTr(state, tr, source, analyticsAction) {
   var normalizeLinkText = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
   var sourceEvent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : undefined;
+  var appearance = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'inline';
   var schema = state.schema;
   var link = schema.marks.link;
   var requests = [];
@@ -161,7 +162,7 @@ export var queueCardsFromChangedTr = function queueCardsFromChangedTr(state, tr,
       requests.push({
         url: linkMark.attrs.href,
         pos: pos,
-        appearance: 'inline',
+        appearance: appearance,
         compareLinkText: normalizeLinkText,
         source: source,
         analyticsAction: analyticsAction,

package/dist/esm/ui/EditDatasourceButton.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
@@ -41,16 +42,16 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
-    icon: /*#__PURE__*/React.createElement(SmallerEditIcon, null),
+    icon: jsx(SmallerEditIcon, null),
     selected: false,
     onClick: function onClick() {
       return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     },
     testId: 'card-edit-datasource-button'
-  }), /*#__PURE__*/React.createElement(Separator, null));
+  }), jsx(Separator, null));
 };
 export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
   var intl = _ref2.intl,
@@ -58,9 +59,9 @@ export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
     url = _ref2.url,
     editorView = _ref2.editorView,
     editorState = _ref2.editorState;
-  return /*#__PURE__*/React.createElement(CardContextProvider, null, function (_ref3) {
+  return jsx(CardContextProvider, null, function (_ref3) {
     var cardContext = _ref3.cardContext;
-    return /*#__PURE__*/React.createElement(EditDatasourceButtonWithCardContext, {
+    return jsx(EditDatasourceButtonWithCardContext, {
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

package/dist/esm/ui/InlineCardOverlay/index.js

@@ -5,8 +5,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
@@ -221,20 +223,20 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var label = intl.formatMessage(messages.inlineOverlay);
   var icon = useMemo(function () {
     var IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
-    return /*#__PURE__*/React.createElement(IconComponent, {
+    return jsx(IconComponent, {
       label: label,
       size: "small",
       testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
     });
   }, [isSelected, label, testId]);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  return jsx("span", _extends({}, props, {
     css: containerStyles,
     ref: containerRef
-  }), children, isVisible && showOverlay && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+  }), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
     "aria-hidden": "true",
     className: OVERLAY_MARKER_CLASSNAME,
     css: markerStyles
-  }, ZERO_WIDTH_JOINER), /*#__PURE__*/React.createElement("a", {
+  }, ZERO_WIDTH_JOINER), jsx("a", {
     className: OVERLAY_CLASSNAME,
     css: [overlayStyles, browser.safari && safariOverlayStyles],
     style: {
@@ -246,11 +248,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       return e.preventDefault();
     },
     tabIndex: -1
-  }, showLabel && /*#__PURE__*/React.createElement("span", {
+  }, showLabel && jsx("span", {
     className: OVERLAY_LABEL_CLASSNAME,
     css: textStyles,
     "data-testid": "".concat(testId, "-label")
-  }, label), /*#__PURE__*/React.createElement("span", {
+  }, label), jsx("span", {
     css: iconStyles
   }, icon))));
 };

package/dist/esm/ui/LayoutButton/index.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
 import { useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -41,7 +42,7 @@ export var LayoutButton = function LayoutButton(_ref) {
   if (!targetElement) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Popup, {
+  return jsx(Popup, {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
@@ -51,14 +52,14 @@ export var LayoutButton = function LayoutButton(_ref) {
     forcePlacement: true,
     stick: true,
     ariaLabel: title
-  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+  }, jsx(ToolbarButton, {
     testId: testId,
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? /*#__PURE__*/React.createElement(CollapseIcon, {
+    iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
       label: title
-    }) : /*#__PURE__*/React.createElement(ExpandIcon, {
+    }) : jsx(ExpandIcon, {
       label: title
     })
   }));
@@ -96,7 +97,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
   if (!isDatasource) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(LayoutButton, {
+  return jsx(LayoutButton, {
     mountPoint: mountPoint,
     scrollableElement: scrollableElement,
     boundariesElement: boundariesElement,

package/dist/esm/ui/ResizableEmbedCard.js

@@ -10,7 +10,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -304,7 +306,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ").concat(embedHeaderHeight, "px)")
         };
       }
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
         "data-testid": 'resizable-embed-card-height-definer',
         style: _objectSpread({
           display: 'block',
@@ -350,17 +352,17 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       };
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         css: embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: wrapperStyle({
           layout: layout,
           isResized: !!pctWidth,
           containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
           fullWidthMode: fullWidthMode
         })
-      }, /*#__PURE__*/React.createElement(Resizer, _extends({}, this.props, {
+      }, jsx(Resizer, _extends({}, this.props, {
         width: initialWidth // Starting or initial width of embed <iframe> itself.
         ,
         enable: enable,

package/dist/esm/ui/useFetchDatasourceInfo.js

@@ -1,6 +1,7 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
 import { useEffect, useState } from 'react';
 export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   var isRegularCardNode = _ref.isRegularCardNode,

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

@@ -11,7 +11,7 @@ import type { InlineCardAdf } from '@atlaskit/smart-card';
 import type { Request } from '../types';
 export declare const replaceQueuedUrlWithCard: (url: string, cardData: CardAdf | DatasourceAdf, analyticsAction?: ACTION, editorAnalyticsApi?: EditorAnalyticsAPI, createAnalyticsEvent?: CreateUIAnalyticsEvent) => Command;
 export declare const handleFallbackWithAnalytics: (request: Request, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
-export declare const queueCardsFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined) => Transaction;
+export declare const queueCardsFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined, appearance?: CardAppearance) => Transaction;
 export declare const queueCardFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined, previousAppearance?: CardAppearance | 'url') => Transaction;
 export declare const convertHyperlinkToSmartCard: (state: EditorState, source: CardReplacementInputMethod, appearance: CardAppearance, normalizeLinkText?: boolean) => Transaction;
 export declare const changeSelectedCardToLink: (text?: string, href?: string, sendAnalytics?: boolean, node?: Node, pos?: number, editorAnalyticsApi?: EditorAnalyticsAPI) => Command;

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

@@ -11,7 +11,7 @@ import type { InlineCardAdf } from '@atlaskit/smart-card';
 import type { Request } from '../types';
 export declare const replaceQueuedUrlWithCard: (url: string, cardData: CardAdf | DatasourceAdf, analyticsAction?: ACTION, editorAnalyticsApi?: EditorAnalyticsAPI, createAnalyticsEvent?: CreateUIAnalyticsEvent) => Command;
 export declare const handleFallbackWithAnalytics: (request: Request, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
-export declare const queueCardsFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined) => Transaction;
+export declare const queueCardsFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined, appearance?: CardAppearance) => Transaction;
 export declare const queueCardFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined, previousAppearance?: CardAppearance | 'url') => Transaction;
 export declare const convertHyperlinkToSmartCard: (state: EditorState, source: CardReplacementInputMethod, appearance: CardAppearance, normalizeLinkText?: boolean) => Transaction;
 export declare const changeSelectedCardToLink: (text?: string, href?: string, sendAnalytics?: boolean, node?: Node, pos?: number, editorAnalyticsApi?: EditorAnalyticsAPI) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.14.9",
+  "version": "0.14.11",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,8 +33,8 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.0.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/custom-steps": "^0.0.6",
-    "@atlaskit/editor-common": "^76.24.0",
+    "@atlaskit/custom-steps": "^0.0.7",
+    "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",