@atlaskit/renderer 108.18.0 → 108.20.0

package/dist/cjs/ui/MediaCard.js

@@ -5,9 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaIdentifierMap = exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardView = exports.MediaCardInternal = exports.MediaCard = void 0;
+exports.mediaIdentifierMap = exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardInternal = exports.MediaCard = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -56,32 +55,29 @@ var getListOfIdentifiersFromDoc = exports.getListOfIdentifiersFromDoc = function
     return identifierList;
   }, []);
 };
-var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(MediaCardView, _Component);
-  var _super = _createSuper(MediaCardView);
-  function MediaCardView() {
+var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MediaCardInternal, _Component);
+  var _super = _createSuper(MediaCardInternal);
+  function MediaCardInternal() {
     var _this;
-    (0, _classCallCheck2.default)(this, MediaCardView);
+    (0, _classCallCheck2.default)(this, MediaCardInternal);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveFileState", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
-        var _this$props, collectionName, mediaClient, options, fileState;
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id, mediaClientConfig) {
+        var collectionName, mediaClient, options, fileState;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _this$props = _this.props, collectionName = _this$props.collection, mediaClient = _this$props.mediaClient;
+              collectionName = _this.props.collection;
+              mediaClient = (0, _mediaClientReact.getMediaClient)(mediaClientConfig);
               options = {
                 collectionName: collectionName
               };
-              _context.prev = 2;
-              if (!mediaClient) {
-                _context.next = 8;
-                break;
-              }
+              _context.prev = 3;
               _context.next = 6;
               return mediaClient.file.getCurrentState(id, options);
             case 6:
@@ -89,19 +85,18 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
               _this.setState({
                 fileState: fileState
               });
-            case 8:
               _context.next = 12;
               break;
             case 10:
               _context.prev = 10;
-              _context.t0 = _context["catch"](2);
+              _context.t0 = _context["catch"](3);
             case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[2, 10]]);
+        }, _callee, null, [[3, 10]]);
       }));
-      return function (_x) {
+      return function (_x, _x2) {
         return _ref.apply(this, arguments);
       };
     }());
@@ -132,29 +127,40 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  (0, _createClass2.default)(MediaCardView, [{
+  (0, _createClass2.default)(MediaCardInternal, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _this$props2, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache;
+        var _this$props, rendererContext, mediaProvider, contextIdentifierProvider, id, url, collectionName, mediaProviderObject, mediaClientConfig, nodeIsInCache;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _this$props2 = this.props, rendererContext = _this$props2.rendererContext, contextIdentifierProvider = _this$props2.contextIdentifierProvider, id = _this$props2.id, url = _this$props2.url, collectionName = _this$props2.collection;
+              _this$props = this.props, rendererContext = _this$props.rendererContext, mediaProvider = _this$props.mediaProvider, contextIdentifierProvider = _this$props.contextIdentifierProvider, id = _this$props.id, url = _this$props.url, collectionName = _this$props.collection;
+              if (mediaProvider) {
+                _context2.next = 3;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
               if (!contextIdentifierProvider) {
-                _context2.next = 8;
+                _context2.next = 10;
                 break;
               }
               _context2.t0 = this;
-              _context2.next = 5;
+              _context2.next = 7;
               return contextIdentifierProvider;
-            case 5:
+            case 7:
               _context2.t1 = _context2.sent;
               _context2.t2 = {
                 contextIdentifierProvider: _context2.t1
               };
               _context2.t0.setState.call(_context2.t0, _context2.t2);
-            case 8:
+            case 10:
+              _context2.next = 12;
+              return mediaProvider;
+            case 12:
+              mediaProviderObject = _context2.sent;
+              mediaClientConfig = mediaProviderObject.viewMediaClientConfig;
               nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
               if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
                 getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
@@ -167,10 +173,13 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
                   }
                 });
               }
+              this.setState({
+                mediaClientConfig: mediaClientConfig
+              });
               if (id) {
-                this.saveFileState(id);
+                this.saveFileState(id, mediaClientConfig);
               }
-            case 11:
+            case 18:
             case "end":
               return _context2.stop();
           }
@@ -184,17 +193,18 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
+      var mediaClientConfig = this.state.mediaClientConfig;
       var newId = newProps.id;
-      if (newId && newId !== this.props.id) {
-        this.saveFileState(newId);
+      if (mediaClientConfig && newId && newId !== this.props.id) {
+        this.saveFileState(newId, mediaClientConfig);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props3 = this.props,
-        id = _this$props3.id,
-        dataURI = _this$props3.url;
+      var _this$props2 = this.props,
+        id = _this$props2.id,
+        dataURI = _this$props2.url;
       if (id) {
         mediaIdentifierMap.delete(id);
       } else if (dataURI) {
@@ -204,18 +214,18 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExternal",
     value: function renderExternal(shouldOpenMediaViewer) {
-      var _this$props$mediaClie;
-      var _this$props4 = this.props,
-        cardDimensions = _this$props4.cardDimensions,
-        resizeMode = _this$props4.resizeMode,
-        appearance = _this$props4.appearance,
-        url = _this$props4.url,
-        imageStatus = _this$props4.imageStatus,
-        disableOverlay = _this$props4.disableOverlay,
-        alt = _this$props4.alt,
-        featureFlags = _this$props4.featureFlags,
-        ssr = _this$props4.ssr,
-        rendererAppearance = _this$props4.rendererAppearance;
+      var mediaClientConfig = this.state.mediaClientConfig;
+      var _this$props3 = this.props,
+        cardDimensions = _this$props3.cardDimensions,
+        resizeMode = _this$props3.resizeMode,
+        appearance = _this$props3.appearance,
+        url = _this$props3.url,
+        imageStatus = _this$props3.imageStatus,
+        disableOverlay = _this$props3.disableOverlay,
+        alt = _this$props3.alt,
+        featureFlags = _this$props3.featureFlags,
+        ssr = _this$props3.ssr,
+        rendererAppearance = _this$props3.rendererAppearance;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -224,7 +234,6 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         name: url,
         mediaItemType: 'external-image'
       };
-      var mediaClientConfig = (_this$props$mediaClie = this.props.mediaClient) === null || _this$props$mediaClie === void 0 ? void 0 : _this$props$mediaClie.mediaClientConfig;
       return /*#__PURE__*/_react.default.createElement(_mediaCard.Card
       // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
       // context is not really used when the type is external and we want to render the component asap
@@ -246,26 +255,26 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$mediaClie2;
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
+        mediaClientConfigInState = _this$state.mediaClientConfig,
         fileState = _this$state.fileState;
-      var _this$props5 = this.props,
-        id = _this$props5.id,
-        alt = _this$props5.alt,
-        type = _this$props5.type,
-        collection = _this$props5.collection,
-        occurrenceKey = _this$props5.occurrenceKey,
-        cardDimensions = _this$props5.cardDimensions,
-        resizeMode = _this$props5.resizeMode,
-        rendererAppearance = _this$props5.rendererAppearance,
-        disableOverlay = _this$props5.disableOverlay,
-        useInlinePlayer = _this$props5.useInlinePlayer,
-        originalDimensions = _this$props5.originalDimensions,
-        forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
-        featureFlags = _this$props5.featureFlags,
-        shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
-        ssr = _this$props5.ssr;
+      var _this$props4 = this.props,
+        id = _this$props4.id,
+        alt = _this$props4.alt,
+        type = _this$props4.type,
+        collection = _this$props4.collection,
+        occurrenceKey = _this$props4.occurrenceKey,
+        cardDimensions = _this$props4.cardDimensions,
+        resizeMode = _this$props4.resizeMode,
+        rendererAppearance = _this$props4.rendererAppearance,
+        disableOverlay = _this$props4.disableOverlay,
+        useInlinePlayer = _this$props4.useInlinePlayer,
+        originalDimensions = _this$props4.originalDimensions,
+        forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
+        featureFlags = _this$props4.featureFlags,
+        shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
+        ssr = _this$props4.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -277,7 +286,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
       if (type === 'link') {
         return null;
       }
-      var mediaClientConfig = !!ssr ? ssr.config : (_this$props$mediaClie2 = this.props.mediaClient) === null || _this$props$mediaClie2 === void 0 ? void 0 : _this$props$mediaClie2.mediaClientConfig;
+      var mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
       if (!mediaClientConfig || !id) {
         return this.renderLoadingCard();
       }
@@ -321,7 +330,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-  return MediaCardView;
+  return MediaCardInternal;
 }(_react.Component);
 // Needed for copy & paste
 var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_ref2) {
@@ -356,10 +365,4 @@ var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_
     'data-alt': alt
   };
 };
-var MediaCardInternal = exports.MediaCardInternal = function MediaCardInternal(props) {
-  var mediaClient = _react.default.useContext(_mediaClientReact.MediaClientContext);
-  return /*#__PURE__*/_react.default.createElement(MediaCardView, (0, _extends2.default)({}, props, {
-    mediaClient: mediaClient
-  }));
-};
 var MediaCard = exports.MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);

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

@@ -15,6 +15,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 _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _traverse = require("@atlaskit/adf-utils/traverse");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
@@ -43,17 +44,16 @@ var _rendererContext = require("../../renderer-context");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _ErrorBoundary = require("./ErrorBoundary");
 var _RenderTracking = require("../../react/utils/performance/RenderTracking");
-var _EditorMediaClientProvider = require("../../react/utils/EditorMediaClientProvider");
 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 _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 NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.18.0";
+var packageVersion = "108.20.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -300,8 +300,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         allowColumnSorting = _this$props.allowColumnSorting,
         allowCopyToClipboard = _this$props.allowCopyToClipboard,
         allowWrapCodeBlock = _this$props.allowWrapCodeBlock,
-        allowCustomPanels = _this$props.allowCustomPanels,
-        media = _this$props.media;
+        allowCustomPanels = _this$props.allowCustomPanels;
       var featureFlags = this.featureFlags(this.props.featureFlags);
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
@@ -359,19 +358,17 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         if (onComplete) {
           onComplete(stat);
         }
-        var rendererOutput = /*#__PURE__*/_react.default.createElement(_rendererContext.RendererContextProvider, {
+        var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
           value: this.featureFlags(this.props.featureFlags)
-        }, /*#__PURE__*/_react.default.createElement(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
+        }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
-        }, /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Provider, {
+        }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
             }
           }
-        }, /*#__PURE__*/_react.default.createElement(_SmartCardStorage.Provider, null, /*#__PURE__*/_react.default.createElement(_providerFactory.ProviderFactoryProvider, {
-          value: this.providerFactory
-        }, /*#__PURE__*/_react.default.createElement(RendererWrapper, {
+        }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
@@ -383,32 +380,31 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
-          onMouseDown: this.onMouseDownEditView,
-          ssr: media === null || media === void 0 ? void 0 : media.ssr
-        }, enableSsrInlineScripts ? /*#__PURE__*/_react.default.createElement(_breakoutSsr.BreakoutSSRInlineScript, null) : null, /*#__PURE__*/_react.default.createElement(RendererActionsInternalUpdater, {
+          onMouseDown: this.onMouseDownEditView
+        }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))));
-        var rendererResult = truncated ? /*#__PURE__*/_react.default.createElement(_truncatedWrapper.TruncatedWrapper, {
+        }, result))))));
+        var rendererResult = truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
         var rendererRenderTracking = (_this$featureFlags2 = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.featureFlags) === null || _this$featureFlags2 === void 0 || (_this$featureFlags2 = _this$featureFlags2.rendererRenderTracking) === null || _this$featureFlags2 === void 0 ? void 0 : _this$featureFlags2[_analytics.ACTION_SUBJECT.RENDERER];
-        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && /*#__PURE__*/_react.default.createElement(_RenderTracking.RenderTracking, {
+        var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && (0, _react2.jsx)(_RenderTracking.RenderTracking, {
           componentProps: this.props,
           action: _analytics.ACTION.RE_RENDERED,
           actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
           handleAnalyticsEvent: this.fireAnalyticsEvent,
           useShallow: rendererRenderTracking.useShallow
         });
-        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, reRenderTracking, rendererResult);
+        return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
         var _featureFlags$feature2;
         if (onError) {
           onError(e);
         }
-        return /*#__PURE__*/_react.default.createElement(RendererWrapper, {
+        return (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
           allowWrapCodeBlock: allowWrapCodeBlock,
@@ -418,7 +414,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
           addTelepointer: this.props.addTelepointer,
           onClick: handleWrapperOnClick
-        }, /*#__PURE__*/_react.default.createElement(_ui.UnsupportedBlock, null));
+        }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
     }
   }, {
@@ -439,7 +435,7 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   return Renderer;
 }(_react.PureComponent);
 var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
+  return (0, _react2.jsx)(_analyticsNamespacedContext.FabricEditorAnalyticsContext, {
     data: {
       appearance: (0, _utils.getAnalyticsAppearance)(props.appearance),
       packageName: packageName,
@@ -447,15 +443,15 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
       componentName: 'renderer',
       editorSessionId: (0, _v.default)()
     }
-  }, /*#__PURE__*/_react.default.createElement(_ui.WithCreateAnalyticsEvent, {
+  }, (0, _react2.jsx)(_ui.WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
       // `IntlErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
-      return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+      return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, /*#__PURE__*/_react.default.createElement(_ui.IntlErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Renderer, (0, _extends2.default)({}, props, {
+      }, (0, _react2.jsx)(_ui.IntlErrorBoundary, null, (0, _react2.jsx)(Renderer, (0, _extends2.default)({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
       }))));
     }
@@ -470,8 +466,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
-    addTelepointer = props.addTelepointer,
-    ssr = props.ssr;
+    addTelepointer = props.addTelepointer;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -523,14 +518,12 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       };
     }
   }, [innerRef, addTelepointer]);
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, {
+  return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper is-".concat(appearance),
     "data-appearance": appearance
-  }, /*#__PURE__*/_react.default.createElement(_ui.BaseTheme, {
+  }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
-  }, /*#__PURE__*/_react.default.createElement(_EditorMediaClientProvider.EditorMediaClientProvider, {
-    ssr: ssr
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     ref: innerRef,
     onClick: onClick,
     onMouseDown: onMouseDown,
@@ -540,7 +533,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       allowColumnSorting: !!allowColumnSorting,
       useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
     })
-  }, children))));
+  }, children)));
 });
 function RendererActionsInternalUpdater(_ref) {
   var children = _ref.children,
@@ -567,15 +560,15 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   var localRef = _react.default.useRef(null);
   var innerRef = props.innerRef || localRef;
   if (!allowAnnotations) {
-    return /*#__PURE__*/_react.default.createElement(RendererWithAnalytics, (0, _extends2.default)({
+    return (0, _react2.jsx)(RendererWithAnalytics, (0, _extends2.default)({
       innerRef: innerRef
     }, props));
   }
-  return /*#__PURE__*/_react.default.createElement(_RendererActionsContext.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement(_annotations.AnnotationsWrapper, {
+  return (0, _react2.jsx)(_RendererActionsContext.RendererActionsContext, null, (0, _react2.jsx)(_annotations.AnnotationsWrapper, {
     rendererRef: innerRef,
     adfDocument: adfDocument,
     annotationProvider: props.annotationProvider
-  }, /*#__PURE__*/_react.default.createElement(RendererWithAnalytics, (0, _extends2.default)({
+  }, (0, _react2.jsx)(RendererWithAnalytics, (0, _extends2.default)({
     innerRef: innerRef
   }, props, {
     featureFlags: props.featureFlags

package/dist/cjs/ui/Renderer/truncated-wrapper.js

@@ -14,6 +14,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _react2 = require("react");
 var _templateObject;
+/** @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 fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
@@ -26,7 +27,7 @@ var FadeOut = function FadeOut(props) {
     height = props.height;
   var top = height - fadeHeight;
   var styles = fadeOutStyles(height, top, backgroundColor);
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _react.jsx)("div", {
     css: styles
   }, children);
 };
@@ -50,7 +51,7 @@ var TruncatedWrapper = exports.TruncatedWrapper = /*#__PURE__*/function (_Compon
         _this$props$backgroun = _this$props.backgroundColor,
         backgroundColor = _this$props$backgroun === void 0 ? "var(--ds-surface, white)" : _this$props$backgroun,
         children = _this$props.children;
-      return /*#__PURE__*/React.createElement(FadeOut, {
+      return (0, _react.jsx)(FadeOut, {
         height: height,
         fadeHeight: fadeHeight,
         backgroundColor: backgroundColor

package/dist/cjs/ui/SortingIcon.js

@@ -14,6 +14,7 @@ var _messages = require("../messages");
 var _reactIntlNext = require("react-intl-next");
 var _consts = require("../consts");
 var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
 var StatusClassNames = exports.StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
   StatusClassNames["DESC"] = "sorting-icon-svg__desc";
@@ -99,11 +100,11 @@ var SortingIcon = function SortingIcon(_ref) {
       onKeyDown(event);
     }
   };
-  return /*#__PURE__*/React.createElement(_tooltip.default, {
+  return (0, _react.jsx)(_tooltip.default, {
     delay: 0,
     content: content,
     position: "top"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react.jsx)("div", {
     css: buttonStyles,
     className: buttonClassName,
     role: "button",
@@ -112,10 +113,10 @@ var SortingIcon = function SortingIcon(_ref) {
     "aria-disabled": !isSortingAllowed,
     onClick: handleClick,
     onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react.jsx)("div", {
     css: iconWrapperStyles,
     className: getIconClassName(isSortingAllowed, sortOrdered)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react.jsx)("div", {
     css: iconStyles
   }))));
 };

package/dist/cjs/ui/annotations/draft/component.js

@@ -17,6 +17,7 @@ var _position = require("./position");
 var _dom = require("./dom");
 var _styles = require("@atlaskit/editor-common/styles");
 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; }
 var markStyles = function markStyles(props) {
@@ -25,7 +26,7 @@ var markStyles = function markStyles(props) {
 var AnnotationDraft = exports.AnnotationDraft = function AnnotationDraft(_ref) {
   var draftPosition = _ref.draftPosition,
     children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement("mark", (0, _extends2.default)({
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
     "data-renderer-mark": true
   }, (0, _dom.dataAttributes)(draftPosition), {
     css: markStyles
@@ -50,12 +51,12 @@ var applyAnnotationOnText = exports.applyAnnotationOnText = function applyAnnota
   var annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map(function (value, index) {
     if (annotateIndex === index) {
-      return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
+      return (0, _react2.jsx)(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
       }, value);
     }
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    return (0, _react2.jsx)(_react.default.Fragment, {
       key: index
     }, value);
   });
@@ -78,27 +79,27 @@ var TextWithAnnotationDraft = exports.TextWithAnnotationDraft = function TextWit
     return (0, _position.calcInsertDraftPositionOnText)(textPosition, nextDraftPosition);
   }, [nextDraftPosition, textPosition]);
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
-    return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
+    return (0, _react2.jsx)(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
   }
   var textString = (0, _text.findTextString)(children);
   if (!textString) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, textString);
   var texts = (0, _text.splitText)(textString, offsets);
   if (!texts) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
+    return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var components = applyAnnotationOnText({
     texts: texts,
     shouldApplyAnnotationAt: shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, components);
+  return (0, _react2.jsx)(_react.Fragment, null, components);
 };

package/dist/cjs/ui/annotations/element/mark.js

@@ -15,6 +15,7 @@ var _react2 = require("@emotion/react");
 var _styles = require("@atlaskit/editor-common/styles");
 var _adfSchema = require("@atlaskit/adf-schema");
 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; }
 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; }
@@ -59,7 +60,7 @@ var MarkComponent = exports.MarkComponent = function MarkComponent(_ref) {
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/_react.default.createElement("mark", (0, _extends2.default)({
+  return (0, _react2.jsx)("mark", (0, _extends2.default)({
     id: id,
     onClick: onMarkClick
   }, accessibility, overriddenData, {

package/dist/es2019/react/marks/alignment.js

@@ -1,17 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { alignmentPositionMap } from '@atlaskit/adf-schema';
 const MarkWrapper = props => {
   const styles = props['data-align'] ? css`
         text-align: ${alignmentPositionMap[props['data-align']]};
       ` : '';
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
 export default function Alignment(props) {
-  return /*#__PURE__*/React.createElement(MarkWrapper, {
+  return jsx(MarkWrapper, {
     className: "fabric-editor-block-mark fabric-editor-alignment",
     "data-align": props.align
   }, props.children);