@atlaskit/renderer 108.17.4 → 108.19.0

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

@@ -3,40 +3,45 @@ 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-react';
+import { MediaClientContext } from '@atlaskit/media-client-react';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
+import { shouldShowInlineImage, MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
 export const RenderMediaInline = ({
   rendererAppearance,
   intl,
   clipboardAttrs,
   mediaInlineProviders,
   collection: collectionName,
-  featureFlags,
   eventHandlers,
-  identifier
+  identifier,
+  alt,
+  width,
+  height,
+  type = ''
 }) => {
   const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
-  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
   const [fileState, setFileState] = useState();
+  const mediaClient = React.useContext(MediaClientContext);
   const updateContext = async contextIdentifierProvider => {
     if (contextIdentifierProvider) {
       const resolvedContextID = await contextIdentifierProvider;
       setContextIdentifierProvider(resolvedContextID);
     }
   };
-  const updateFileState = useCallback(async (id, mediaClientConfig) => {
-    const mediaClient = getMediaClient(mediaClientConfig);
+  const updateFileState = useCallback(async id => {
     const options = {
       collectionName
     };
     try {
-      const fileState = await mediaClient.file.getCurrentState(id, options);
-      setFileState(fileState);
+      if (mediaClient) {
+        const fileState = await mediaClient.file.getCurrentState(id, options);
+        setFileState(fileState);
+      }
     } catch (error) {
       // do not set state on error
     }
-  }, [collectionName]);
+  }, [collectionName, mediaClient]);
   useEffect(() => {
     const {
       id
@@ -54,28 +59,20 @@ export const RenderMediaInline = ({
   }, [identifier, collectionName]);
   useEffect(() => {
     const {
-      mediaProvider,
       contextIdentifierProvider
     } = mediaInlineProviders;
     const {
       id
     } = clipboardAttrs;
-    updateViewMediaClientConfigState(mediaProvider);
     updateContext(contextIdentifierProvider);
-    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
-  const updateViewMediaClientConfigState = async mediaProvider => {
-    if (mediaProvider) {
-      const mediaClientConfig = await mediaProvider;
-      setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
-    }
-  };
+    id && updateFileState(id);
+  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
 
   /*
    * Only show the loading view if the media provider is not ready
    * prevents calling the media API before the provider is ready
    */
-  if (!viewMediaClientConfigState) {
+  if (!mediaClient) {
     return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
@@ -97,6 +94,15 @@ export const RenderMediaInline = ({
     id,
     collection
   } = clipboardAttrs;
+  if (shouldShowInlineImage(type)) {
+    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
+      mediaClient: mediaClient,
+      identifier: identifier,
+      alt: alt,
+      width: width,
+      height: height
+    });
+  }
   return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
     id,
     collection,
@@ -109,7 +115,7 @@ export const RenderMediaInline = ({
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: viewMediaClientConfigState,
+    mediaClientConfig: mediaClient.mediaClientConfig,
     mediaViewerItems: Array.from(mediaIdentifierMap.values())
   }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
     message: (intl || createIntl({
@@ -124,7 +130,11 @@ const MediaInline = props => {
     providers: providerFactory,
     intl,
     rendererAppearance,
-    featureFlags
+    featureFlags,
+    type: fileType,
+    alt,
+    width,
+    height
   } = props;
   const clipboardAttrs = {
     id,
@@ -147,7 +157,11 @@ const MediaInline = props => {
         intl: intl,
         mediaInlineProviders: mediaInlineProviders,
         collection: collection,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        type: fileType,
+        alt: alt,
+        width: width,
+        height: height
       });
     }
   });

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -1,4 +1,7 @@
+/** @jsx jsx */
+
 import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
@@ -150,7 +153,7 @@ const MediaSingle = props => {
       featureFlags
     });
     const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
-    return /*#__PURE__*/React.createElement(UIMediaSingle, {
+    return jsx(UIMediaSingle, {
       css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
@@ -163,9 +166,9 @@ const MediaSingle = props => {
         widthType
       },
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(Fragment, null, mediaComponent), allowCaptions && caption);
+    }, jsx(Fragment, null, mediaComponent), allowCaptions && caption);
   };
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return jsx(WidthConsumer, null, ({
     width
   }) => {
     // Note: in SSR mode the `window` object is not defined,

package/dist/es2019/react/nodes/mediaSingle/styles.js

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { css } from '@emotion/react';
 export const uiMediaSingleBaseStyles = css`
   transition: all 0.1s linear;

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

@@ -1,6 +1,7 @@
 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 TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
 import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
@@ -50,7 +51,7 @@ const PanelStyled = ({
       `;
     };
   }
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -81,7 +82,7 @@ const Panel = props => {
   const getIcon = () => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -91,19 +92,19 @@ const Panel = props => {
       return null;
     }
     const Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: `Panel ${panelType}`
     });
   };
   const icon = getIcon();
   const renderIcon = () => {
     if (icon) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return /*#__PURE__*/React.createElement(PanelStyled, {
+  return jsx(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -112,7 +113,7 @@ const Panel = props => {
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor,
     hasIcon: Boolean(icon)
-  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/es2019/react/nodes/table/sticky.js

@@ -1,6 +1,7 @@
 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 { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
@@ -73,7 +74,7 @@ export const FixedTableDiv = props => {
   const attrs = {
     mode
   };
-  return /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
+  return jsx("div", _extends({}, attrs, {
     "data-testid": "sticky-table-fixed",
     css: fixedTableCss
   }), props.children);
@@ -110,26 +111,26 @@ export const StickyTable = ({
     });
   }
   /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: styles
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+  }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth,
     rendererAppearance: rendererAppearance
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     ref: innerRef,
     className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

package/dist/es2019/react/utils/EditorMediaClientProvider.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react';
+import { MediaClientProvider } from '@atlaskit/media-client-react';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
+export const EditorMediaClientProvider = ({
+  children,
+  ssr
+}) => {
+  const [mediaClientConfig, setMediaClientConfig] = useState();
+  const mediaProvider = useProvider('mediaProvider');
+
+  // Consumers can override the mediaClient for renderer,
+  // by not providing ssr config and mediaProvider,
+  // and provide a top level mediaClient context
+  // This is useful for testing and creating examples.
+  useEffect(() => {
+    if (ssr && ssr.mode === 'server' && ssr.config) {
+      setMediaClientConfig(ssr.config);
+    } else if (mediaProvider) {
+      mediaProvider.then(provider => {
+        setMediaClientConfig(provider.viewMediaClientConfig);
+      });
+    }
+  }, [mediaProvider, ssr]);
+  return mediaClientConfig ? /*#__PURE__*/React.createElement(MediaClientProvider, {
+    clientConfig: mediaClientConfig
+  }, children) : children;
+};

package/dist/es2019/ui/Expand.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
 import React, { useRef, useCallback, useMemo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
@@ -35,7 +36,7 @@ const Container = props => {
     padding: 0;
     padding-bottom: ${paddingBottom};
   `;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -48,7 +49,7 @@ const TitleContainer = props => {
     padding: ${"var(--ds-space-100, 8px)"};
     padding-bottom: ${paddingBottom};
   `;
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return jsx("button", _extends({
     css: styles
   }, props), props.children);
 };
@@ -66,7 +67,7 @@ const ContentContainer = props => {
     padding-left: ${gridSize() * 5 - gridSize() / 2}px;
     visibility: ${visibility};
   `;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: styles
   }, props), props.children);
 };
@@ -103,16 +104,16 @@ function Expand({
   } = useRef(_uniqueId('expand-title-'));
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
-  return /*#__PURE__*/React.createElement(Container, {
+  return jsx(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/React.createElement(ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: () => setExpanded(true)
-  }) : null, /*#__PURE__*/React.createElement(TitleContainer, {
+  }) : null, jsx(TitleContainer, {
     onClick: e => {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -127,27 +128,27 @@ function Expand({
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, isMobile ? /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, isMobile ? jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  })) : /*#__PURE__*/React.createElement(Tooltip, {
+  })) : jsx(Tooltip, {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef,
     testId: 'tooltip'
-  }, /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  }))), /*#__PURE__*/React.createElement("span", {
+  }))), jsx("span", {
     css: titleStyles,
     id: id
-  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), /*#__PURE__*/React.createElement(ContentContainer, {
+  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: `${nodeType}-content-wrapper`
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, jsx(WidthProvider, null, jsx("div", {
     css: clearNextSiblingMarginTopStyle
   }), children))));
 }

package/dist/es2019/ui/MediaCard.js

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
-import { getMediaClient } from '@atlaskit/media-client-react';
+import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 export const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
@@ -32,23 +33,25 @@ export const getListOfIdentifiersFromDoc = doc => {
     return identifierList;
   }, []);
 };
-export class MediaCardInternal extends Component {
+export class MediaCardView extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {});
-    _defineProperty(this, "saveFileState", async (id, mediaClientConfig) => {
+    _defineProperty(this, "saveFileState", async id => {
       const {
-        collection: collectionName
+        collection: collectionName,
+        mediaClient
       } = this.props;
-      const mediaClient = getMediaClient(mediaClientConfig);
       const options = {
         collectionName
       };
       try {
-        const fileState = await mediaClient.file.getCurrentState(id, options);
-        this.setState({
-          fileState
-        });
+        if (mediaClient) {
+          const fileState = await mediaClient.file.getCurrentState(id, options);
+          this.setState({
+            fileState
+          });
+        }
       } catch (error) {
         // do not set state on error
       }
@@ -86,22 +89,16 @@ export class MediaCardInternal extends Component {
   async componentDidMount() {
     const {
       rendererContext,
-      mediaProvider,
       contextIdentifierProvider,
       id,
       url,
       collection: collectionName
     } = this.props;
-    if (!mediaProvider) {
-      return;
-    }
     if (contextIdentifierProvider) {
       this.setState({
         contextIdentifierProvider: await contextIdentifierProvider
       });
     }
-    const mediaProviderObject = await mediaProvider;
-    const mediaClientConfig = mediaProviderObject.viewMediaClientConfig;
     const nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
     if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
       getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(identifier => {
@@ -115,22 +112,16 @@ export class MediaCardInternal extends Component {
         }
       });
     }
-    this.setState({
-      mediaClientConfig: mediaClientConfig
-    });
     if (id) {
-      this.saveFileState(id, mediaClientConfig);
+      this.saveFileState(id);
     }
   }
   UNSAFE_componentWillReceiveProps(newProps) {
-    const {
-      mediaClientConfig
-    } = this.state;
     const {
       id: newId
     } = newProps;
-    if (mediaClientConfig && newId && newId !== this.props.id) {
-      this.saveFileState(newId, mediaClientConfig);
+    if (newId && newId !== this.props.id) {
+      this.saveFileState(newId);
     }
   }
   componentWillUnmount() {
@@ -145,9 +136,7 @@ export class MediaCardInternal extends Component {
     }
   }
   renderExternal(shouldOpenMediaViewer) {
-    const {
-      mediaClientConfig
-    } = this.state;
+    var _this$props$mediaClie;
     const {
       cardDimensions,
       resizeMode,
@@ -168,6 +157,7 @@ export class MediaCardInternal extends Component {
       name: url,
       mediaItemType: 'external-image'
     };
+    const mediaClientConfig = (_this$props$mediaClie = this.props.mediaClient) === null || _this$props$mediaClie === void 0 ? void 0 : _this$props$mediaClie.mediaClientConfig;
     return /*#__PURE__*/React.createElement(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
@@ -187,9 +177,9 @@ export class MediaCardInternal extends Component {
     });
   }
   render() {
+    var _this$props$mediaClie2;
     const {
       contextIdentifierProvider,
-      mediaClientConfig: mediaClientConfigInState,
       fileState
     } = this.state;
     const {
@@ -220,7 +210,7 @@ export class MediaCardInternal extends Component {
     if (type === 'link') {
       return null;
     }
-    const mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+    const mediaClientConfig = !!ssr ? ssr.config : (_this$props$mediaClie2 = this.props.mediaClient) === null || _this$props$mediaClie2 === void 0 ? void 0 : _this$props$mediaClie2.mediaClientConfig;
     if (!mediaClientConfig || !id) {
       return this.renderLoadingCard();
     }
@@ -298,4 +288,10 @@ export const getClipboardAttrs = ({
     'data-alt': alt
   };
 };
+export const MediaCardInternal = props => {
+  const mediaClient = React.useContext(MediaClientContext);
+  return /*#__PURE__*/React.createElement(MediaCardView, _extends({}, props, {
+    mediaClient: mediaClient
+  }));
+};
 export const MediaCard = withImageLoader(MediaCardInternal);