fix: change getAsset to not return a promise (#3232)

* fix: change getAsset to not return a promise

* fix: update markdown widget per getAsset changes

* test: fix editor component image test

* docs: update getAsset docs

packages/netlify-cms-widget-file/src/FilePreview.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { List } from 'immutable';
-import { WidgetPreviewContainer, Asset } from 'netlify-cms-ui-default';
+import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 
-const FileLink = styled(({ value: href, path }) => (
+const FileLink = styled(({ href, path }) => (
   <a href={href} rel="noopener noreferrer" target="_blank">
     {path}
   </a>
@@ -12,25 +12,24 @@ const FileLink = styled(({ value: href, path }) => (
   display: block;
 `;
 
-const FileLinkAsset = ({ value, getAsset }) => {
-  return <Asset path={value} getAsset={getAsset} component={FileLink} />;
-};
-
-function FileLinkList({ values, getAsset }) {
+function FileLinkList({ values, getAsset, folder }) {
   return (
     <div>
       {values.map(value => (
-        <FileLinkAsset key={value} value={value} getAsset={getAsset} />
+        <FileLink key={value} path={value} href={getAsset(value, folder)} />
       ))}
     </div>
   );
 }
 
-function FileContent({ value, getAsset }) {
+function FileContent(props) {
+  const { value, getAsset, field } = props;
+  const folder = field.get('media_folder');
+
   if (Array.isArray(value) || List.isList(value)) {
-    return <FileLinkList values={value} getAsset={getAsset} />;
+    return <FileLinkList values={value} getAsset={getAsset} folder={folder} />;
   }
-  return <FileLinkAsset value={value} getAsset={getAsset} />;
+  return <FileLink key={value} path={value} href={getAsset(value, folder)} />;
 }
 
 const FilePreview = props => (

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -6,15 +6,7 @@ import { Map, List } from 'immutable';
 import { once } from 'lodash';
 import uuid from 'uuid/v4';
 import { oneLine } from 'common-tags';
-import {
-  lengths,
-  components,
-  buttons,
-  borders,
-  effects,
-  shadows,
-  Asset,
-} from 'netlify-cms-ui-default';
+import { lengths, components, buttons, borders, effects, shadows } from 'netlify-cms-ui-default';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -31,15 +23,13 @@ const ImageWrapper = styled.div`
   ${shadows.inset};
 `;
 
-const Image = styled(({ value: src }) => <img src={src || ''} role="presentation" />)`
+const StyledImage = styled.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
 `;
 
-const ImageAsset = ({ getAsset, value, folder }) => {
-  return <Asset folder={folder} path={value} getAsset={getAsset} component={Image} />;
-};
+const Image = props => <StyledImage role="presentation" {...props} />;
 
 const MultiImageWrapper = styled.div`
   display: flex;
@@ -118,9 +108,9 @@ export default function withFileControl({ forImage } = {}) {
 
     shouldComponentUpdate(nextProps) {
       /**
-       * Always update if the value changes.
+       * Always update if the value or getAsset changes.
        */
-      if (this.props.value !== nextProps.value) {
+      if (this.props.value !== nextProps.value || this.props.getAsset !== nextProps.getAsset) {
         return true;
       }
 
@@ -228,15 +218,17 @@ export default function withFileControl({ forImage } = {}) {
           <MultiImageWrapper>
             {value.map(val => (
               <ImageWrapper key={val}>
-                <ImageAsset getAsset={getAsset} value={val} folder={folder} />
+                <Image src={getAsset(val, folder) || ''} />
               </ImageWrapper>
             ))}
           </MultiImageWrapper>
         );
       }
+
+      const src = getAsset(value, folder);
       return (
         <ImageWrapper>
-          <ImageAsset getAsset={getAsset} value={value} folder={folder} />
+          <Image src={src || ''} />
         </ImageWrapper>
       );
     };