feat(media): add external media library support, Uploadcare integration (#1602)

packages/netlify-cms-widget-image/package.json

@@ -30,6 +30,7 @@
     "webpack-cli": "^3.1.0"
   },
   "peerDependencies": {
+    "immutable": "^3.7.6",
     "netlify-cms-ui-default": "^2.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.4.1",

packages/netlify-cms-widget-image/src/ImagePreview.js

@@ -1,18 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'react-emotion';
+import { List } from 'immutable';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-const Image = styled.img`
+const StyledImage = styled(({ getAsset, value }) => (
+  <img src={getAsset(value)} role="presentation" />
+))`
+  display: block;
   max-width: 100%;
   height: auto;
 `;
 
-const ImagePreview = ({ value, getAsset }) => (
-  <WidgetPreviewContainer>
-    {value ? <Image src={getAsset(value)} role="presentation" /> : null}
-  </WidgetPreviewContainer>
-);
+const ImagePreviewContent = props => {
+  const { value, getAsset } = props;
+  if (Array.isArray(value) || List.isList(value)) {
+    return value.map(val => <StyledImage key={val} value={val} getAsset={getAsset} />);
+  }
+  return <StyledImage {...props} />;
+};
+
+const ImagePreview = props => {
+  return (
+    <WidgetPreviewContainer>
+      {props.value ? <ImagePreviewContent {...props} /> : null}
+    </WidgetPreviewContainer>
+  );
+};
 
 ImagePreview.propTypes = {
   getAsset: PropTypes.func.isRequired,