@atlaskit/renderer 108.1.1 → 108.1.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 108.1.3
+
+### Patch Changes
+
+- [`077e086c53f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/077e086c53f) - [ux] ED-17971 Changes the color token used for table borders and background of table controls and numbered column.
+- [`65ff31a2ad4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/65ff31a2ad4) - use onError prop on smart card to handle errors
+- Updated dependencies
+
+## 108.1.2
+
+### Patch Changes
+
+- [`f0b51f8f06c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0b51f8f06c) - Fix copy paste file state for Inline Files
+- Updated dependencies
+
 ## 108.1.1
 
 ### Patch Changes

package/dist/cjs/react/nodes/blockCard.js

@@ -42,6 +42,12 @@ function BlockCard(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
+  var onError = function onError(_ref2) {
+    var err = _ref2.err;
+    if (err) {
+      throw err;
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: analyticsData
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -56,5 +62,7 @@ function BlockCard(props) {
     showActions: rendererAppearance !== 'mobile',
     platform: platform,
     showServerActions: showServerActions
-  }, cardProps)))));
+  }, cardProps, {
+    onError: onError
+  })))));
 }

package/dist/cjs/react/nodes/embedCard.js

@@ -115,6 +115,12 @@ function EmbedCard(props) {
     }
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    var onError = function onError(_ref3) {
+      var err = _ref3.err;
+      if (err) {
+        throw err;
+      }
+    };
     return (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
       unsupportedComponent: _ui.UnsupportedBlock
     }, cardProps), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
@@ -146,7 +152,8 @@ function EmbedCard(props) {
     }, cardProps, {
       onResolve: onResolve,
       inheritDimensions: true,
-      embedIframeRef: embedIframeRef
+      embedIframeRef: embedIframeRef,
+      onError: onError
     })))))));
   }));
 }

package/dist/cjs/react/nodes/inlineCard.js

@@ -50,6 +50,12 @@ var InlineCard = function InlineCard(props) {
       showServerActions: showServerActions
     }));
   }
+  var onError = function onError(_ref2) {
+    var err = _ref2.err;
+    if (err) {
+      throw err;
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: analyticsData
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -69,7 +75,8 @@ var InlineCard = function InlineCard(props) {
         return;
       }
       props.smartCardStorage.set(data.url, data.title);
-    }
+    },
+    onError: onError
   })))));
 };
 var _default = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);

package/dist/cjs/react/nodes/mediaInline.js

@@ -14,43 +14,119 @@ var _react = _interopRequireWildcard(require("react"));
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaUi = require("@atlaskit/media-ui");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _mediaClient = require("@atlaskit/media-client");
 var _MediaCard = require("../../ui/MediaCard");
 var _reactIntlNext = require("react-intl-next");
 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 RenderMediaInline = function RenderMediaInline(props) {
-  var mediaProvider = props.mediaProvider,
-    rendererAppearance = props.rendererAppearance;
+var RenderMediaInline = function RenderMediaInline(_ref) {
+  var rendererAppearance = _ref.rendererAppearance,
+    intl = _ref.intl,
+    clipboardAttrs = _ref.clipboardAttrs,
+    mediaInlineProviders = _ref.mediaInlineProviders,
+    collectionName = _ref.collection,
+    featureFlags = _ref.featureFlags,
+    eventHandlers = _ref.eventHandlers,
+    identifier = _ref.identifier;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    viewMediaClientConfigState = _useState2[0],
-    setViewMediaClientConfigState = _useState2[1];
+    contextIdentifierProvider = _useState2[0],
+    setContextIdentifierProvider = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    viewMediaClientConfigState = _useState4[0],
+    setViewMediaClientConfigState = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    fileState = _useState6[0],
+    setFileState = _useState6[1];
+  var updateContext = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(contextIdentifierProvider) {
+      var resolvedContextID;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!contextIdentifierProvider) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 3;
+            return contextIdentifierProvider;
+          case 3:
+            resolvedContextID = _context.sent;
+            setContextIdentifierProvider(resolvedContextID);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function updateContext(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var updateFileState = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, mediaClientConfig) {
+      var mediaClient, options, _fileState;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            mediaClient = (0, _mediaClient.getMediaClient)(mediaClientConfig, featureFlags);
+            options = {
+              collectionName: collectionName
+            };
+            _context2.prev = 2;
+            _context2.next = 5;
+            return mediaClient.file.getCurrentState(id, options);
+          case 5:
+            _fileState = _context2.sent;
+            setFileState(_fileState);
+            _context2.next = 11;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](2);
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 9]]);
+    }));
+    return function (_x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [collectionName, featureFlags]);
   (0, _react.useEffect)(function () {
+    var mediaProvider = mediaInlineProviders.mediaProvider,
+      contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
+    var id = clipboardAttrs.id;
     updateViewMediaClientConfigState(mediaProvider);
-  }, [mediaProvider]);
+    updateContext(contextIdentifierProvider);
+    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
+  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
   var updateViewMediaClientConfigState = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mediaProvider) {
       var mediaClientConfig;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             if (!mediaProvider) {
-              _context.next = 5;
+              _context3.next = 5;
               break;
             }
-            _context.next = 3;
+            _context3.next = 3;
             return mediaProvider;
           case 3:
-            mediaClientConfig = _context.sent;
+            mediaClientConfig = _context3.sent;
             setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
           case 5:
           case "end":
-            return _context.stop();
+            return _context3.stop();
         }
-      }, _callee);
+      }, _callee3);
     }));
-    return function updateViewMediaClientConfigState(_x) {
-      return _ref.apply(this, arguments);
+    return function updateViewMediaClientConfigState(_x4) {
+      return _ref4.apply(this, arguments);
     };
   }();
 
@@ -65,60 +141,69 @@ var RenderMediaInline = function RenderMediaInline(props) {
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
-    var _props$eventHandlers, _props$eventHandlers$;
-    if ((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && (_props$eventHandlers$ = _props$eventHandlers.media) !== null && _props$eventHandlers$ !== void 0 && _props$eventHandlers$.onClick) {
-      var _props$eventHandlers2, _props$eventHandlers3;
-      (_props$eventHandlers2 = props.eventHandlers) === null || _props$eventHandlers2 === void 0 ? void 0 : (_props$eventHandlers3 = _props$eventHandlers2.media) === null || _props$eventHandlers3 === void 0 ? void 0 : _props$eventHandlers3.onClick(result);
+    var _eventHandlers$media;
+    if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
+      var _eventHandlers$media2;
+      eventHandlers === null || eventHandlers === void 0 ? void 0 : (_eventHandlers$media2 = eventHandlers.media) === null || _eventHandlers$media2 === void 0 ? void 0 : _eventHandlers$media2.onClick(result);
     }
   };
   var shouldOpenMediaViewer = rendererAppearance !== 'mobile';
   var shouldDisplayToolTip = rendererAppearance !== 'mobile';
-  return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
-    identifier: props.identifier,
+  var mediaProvider = mediaInlineProviders.mediaProvider;
+  var id = clipboardAttrs.id,
+    collection = clipboardAttrs.collection;
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
+    id: id,
+    collection: collection,
+    contextIdentifierProvider: contextIdentifierProvider,
+    fileState: fileState
+  }), {
+    "data-node-type": "mediaInline"
+  }), mediaProvider ? /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+    identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
     mediaClientConfig: viewMediaClientConfigState
-  });
+  }) : /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
+    message: (intl || (0, _reactIntlNext.createIntl)({
+      locale: 'en'
+    })).formatMessage(_mediaUi.messages.couldnt_load_file)
+  }));
 };
 exports.RenderMediaInline = RenderMediaInline;
 var MediaInline = function MediaInline(props) {
   var collection = props.collection,
     id = props.id,
-    providers = props.providers,
+    providerFactory = props.providers,
     intl = props.intl,
-    rendererAppearance = props.rendererAppearance;
+    rendererAppearance = props.rendererAppearance,
+    featureFlags = props.featureFlags;
+  var clipboardAttrs = {
+    id: id,
+    collection: collection
+  };
   var identifier = {
     id: id,
     mediaItemType: 'file',
     collectionName: collection
   };
-  var defaultIntl = (0, _reactIntlNext.createIntl)({
-    locale: 'en'
-  });
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
-    id: id,
-    collection: collection
-  }), {
-    "data-node-type": "mediaInline"
-  }), /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
-    providers: ['mediaProvider'],
-    providerFactory: providers,
-    renderNode: function renderNode(providers) {
-      var mediaProvider = providers.mediaProvider;
-      if (!mediaProvider) {
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
-          message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file)
-        });
-      }
+  return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+    providers: ['mediaProvider', 'contextIdentifierProvider'],
+    providerFactory: providerFactory,
+    renderNode: function renderNode(mediaInlineProviders) {
       return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
         identifier: identifier,
-        mediaProvider: mediaProvider,
+        clipboardAttrs: clipboardAttrs,
         eventHandlers: props.eventHandlers,
-        rendererAppearance: rendererAppearance
+        rendererAppearance: rendererAppearance,
+        intl: intl,
+        mediaInlineProviders: mediaInlineProviders,
+        collection: collection,
+        featureFlags: featureFlags
       });
     }
-  }));
+  });
 };
 var _default = (0, _reactIntlNext.injectIntl)(MediaInline);
 exports.default = _default;

package/dist/cjs/ui/MediaCard.js

@@ -329,8 +329,9 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
     }
   }]);
   return MediaCardInternal;
-}(_react.Component); // Needed for copy & paste
+}(_react.Component);
 exports.MediaCardInternal = MediaCardInternal;
+// Needed for copy & paste
 var getClipboardAttrs = function getClipboardAttrs(_ref2) {
   var id = _ref2.id,
     alt = _ref2.alt,

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.1.1";
+var packageVersion = "108.1.3";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -114,29 +114,29 @@ var rendererStyles = function rendererStyles(wrapperProps) {
       light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), _editorSharedStyles.akEditorTableNumberColumnWidth, (0, _components.themed)({
       light: "var(--ds-text-subtlest, ".concat(colors.N200, ")"),
       dark: "var(--ds-text-subtlest, ".concat(colors.DN400, ")")
     })(themeProps), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), _editorSharedStyles.akEditorStickyHeaderZIndex, (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorderDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({
-      light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
-      dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
+      light: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
+      dark: "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), "var(--ds-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "108.1.1",
+	"version": "108.1.3",
 	"sideEffects": false
 }

package/dist/es2019/react/nodes/blockCard.js

@@ -33,6 +33,13 @@ export default function BlockCard(props) {
     // Below is added for the future implementation of Linking Platform namespaced analytic context
     location: 'renderer'
   };
+  const onError = ({
+    err
+  }) => {
+    if (err) {
+      throw err;
+    }
+  };
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: analyticsData
   }, /*#__PURE__*/React.createElement("div", {
@@ -47,5 +54,7 @@ export default function BlockCard(props) {
     showActions: rendererAppearance !== 'mobile',
     platform: platform,
     showServerActions: showServerActions
-  }, cardProps)))));
+  }, cardProps, {
+    onError: onError
+  })))));
 }

package/dist/es2019/react/nodes/embedCard.js

@@ -114,6 +114,13 @@ export default function EmbedCard(props) {
     }
     const lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
     const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    const onError = ({
+      err
+    }) => {
+      if (err) {
+        throw err;
+      }
+    };
     return jsx(CardErrorBoundary, _extends({
       unsupportedComponent: UnsupportedBlock
     }, cardProps), jsx(EmbedResizeMessageListener, {
@@ -145,7 +152,8 @@ export default function EmbedCard(props) {
     }, cardProps, {
       onResolve: onResolve,
       inheritDimensions: true,
-      embedIframeRef: embedIframeRef
+      embedIframeRef: embedIframeRef,
+      onError: onError
     })))))));
   }));
 }

package/dist/es2019/react/nodes/inlineCard.js

@@ -46,6 +46,13 @@ const InlineCard = props => {
       showServerActions: showServerActions
     }));
   }
+  const onError = ({
+    err
+  }) => {
+    if (err) {
+      throw err;
+    }
+  };
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: analyticsData
   }, /*#__PURE__*/React.createElement("span", {
@@ -65,7 +72,8 @@ const InlineCard = props => {
         return;
       }
       props.smartCardStorage.set(data.url, data.title);
-    }
+    },
+    onError: onError
   })))));
 };
 export default withSmartCardStorage(InlineCard);

package/dist/es2019/react/nodes/mediaInline.js

@@ -1,19 +1,54 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { getMediaClient } from '@atlaskit/media-client';
 import { getClipboardAttrs } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
-export const RenderMediaInline = props => {
-  const {
-    mediaProvider,
-    rendererAppearance
-  } = props;
+export const RenderMediaInline = ({
+  rendererAppearance,
+  intl,
+  clipboardAttrs,
+  mediaInlineProviders,
+  collection: collectionName,
+  featureFlags,
+  eventHandlers,
+  identifier
+}) => {
+  const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
   const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
+  const [fileState, setFileState] = useState();
+  const updateContext = async contextIdentifierProvider => {
+    if (contextIdentifierProvider) {
+      const resolvedContextID = await contextIdentifierProvider;
+      setContextIdentifierProvider(resolvedContextID);
+    }
+  };
+  const updateFileState = useCallback(async (id, mediaClientConfig) => {
+    const mediaClient = getMediaClient(mediaClientConfig, featureFlags);
+    const options = {
+      collectionName
+    };
+    try {
+      const fileState = await mediaClient.file.getCurrentState(id, options);
+      setFileState(fileState);
+    } catch (error) {
+      // do not set state on error
+    }
+  }, [collectionName, featureFlags]);
   useEffect(() => {
+    const {
+      mediaProvider,
+      contextIdentifierProvider
+    } = mediaInlineProviders;
+    const {
+      id
+    } = clipboardAttrs;
     updateViewMediaClientConfigState(mediaProvider);
-  }, [mediaProvider]);
+    updateContext(contextIdentifierProvider);
+    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
+  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
   const updateViewMediaClientConfigState = async mediaProvider => {
     if (mediaProvider) {
       const mediaClientConfig = await mediaProvider;
@@ -32,62 +67,73 @@ export const RenderMediaInline = props => {
     });
   }
   const handleMediaInlineClick = result => {
-    var _props$eventHandlers, _props$eventHandlers$;
-    if ((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && (_props$eventHandlers$ = _props$eventHandlers.media) !== null && _props$eventHandlers$ !== void 0 && _props$eventHandlers$.onClick) {
-      var _props$eventHandlers2, _props$eventHandlers3;
-      (_props$eventHandlers2 = props.eventHandlers) === null || _props$eventHandlers2 === void 0 ? void 0 : (_props$eventHandlers3 = _props$eventHandlers2.media) === null || _props$eventHandlers3 === void 0 ? void 0 : _props$eventHandlers3.onClick(result);
+    var _eventHandlers$media;
+    if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
+      var _eventHandlers$media2;
+      eventHandlers === null || eventHandlers === void 0 ? void 0 : (_eventHandlers$media2 = eventHandlers.media) === null || _eventHandlers$media2 === void 0 ? void 0 : _eventHandlers$media2.onClick(result);
     }
   };
   const shouldOpenMediaViewer = rendererAppearance !== 'mobile';
   const shouldDisplayToolTip = rendererAppearance !== 'mobile';
-  return /*#__PURE__*/React.createElement(MediaInlineCard, {
-    identifier: props.identifier,
+  const {
+    mediaProvider
+  } = mediaInlineProviders;
+  const {
+    id,
+    collection
+  } = clipboardAttrs;
+  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
+    id,
+    collection,
+    contextIdentifierProvider,
+    fileState
+  }), {
+    "data-node-type": "mediaInline"
+  }), mediaProvider ? /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: identifier,
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
     mediaClientConfig: viewMediaClientConfigState
-  });
+  }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
+    message: (intl || createIntl({
+      locale: 'en'
+    })).formatMessage(messages.couldnt_load_file)
+  }));
 };
 const MediaInline = props => {
   const {
     collection,
     id,
-    providers,
+    providers: providerFactory,
     intl,
-    rendererAppearance
+    rendererAppearance,
+    featureFlags
   } = props;
+  const clipboardAttrs = {
+    id,
+    collection
+  };
   const identifier = {
     id,
     mediaItemType: 'file',
     collectionName: collection
   };
-  const defaultIntl = createIntl({
-    locale: 'en'
-  });
-  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
-    id,
-    collection
-  }), {
-    "data-node-type": "mediaInline"
-  }), /*#__PURE__*/React.createElement(WithProviders, {
-    providers: ['mediaProvider'],
-    providerFactory: providers,
-    renderNode: providers => {
-      const {
-        mediaProvider
-      } = providers;
-      if (!mediaProvider) {
-        return /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-          message: (intl || defaultIntl).formatMessage(messages.couldnt_load_file)
-        });
-      }
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mediaProvider', 'contextIdentifierProvider'],
+    providerFactory: providerFactory,
+    renderNode: mediaInlineProviders => {
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
-        mediaProvider: mediaProvider,
+        clipboardAttrs: clipboardAttrs,
         eventHandlers: props.eventHandlers,
-        rendererAppearance: rendererAppearance
+        rendererAppearance: rendererAppearance,
+        intl: intl,
+        mediaInlineProviders: mediaInlineProviders,
+        collection: collection,
+        featureFlags: featureFlags
       });
     }
-  }));
+  });
 };
 export default injectIntl(MediaInline);

package/dist/es2019/ui/MediaCard.js

@@ -262,7 +262,6 @@ export class MediaCardInternal extends Component {
     }));
   }
 }
-
 // Needed for copy & paste
 export const getClipboardAttrs = ({
   id,