Fix raw GitHub URL being output to content (#2147)

* fix thumbnail quality

* Revert "fix(git-gateway): fix previews for GitHub images not in Large Media (#2125)"

This reverts commit d17f896f479292db06d3a4b39f2e51b6c41101bd.

* wip

* Stop using thunks to load media display URLs

* Revert changes to dev-test

* Revert changes to large media docs

* fix lint error

* Update docs to point to the upcoming version with non-broken media

packages/netlify-cms-backend-git-gateway/src/implementation.js

@@ -214,16 +214,19 @@ export default class GitGateway {
         if (!largeMediaClient.enabled) {
           return mediaFiles;
         }
-        const largeMediaURLThunks = await this.getLargeMedia(mediaFiles);
-        return mediaFiles.map(({ id, url, urlIsPublicPath, getDisplayURL, ...rest }) => ({
-          ...rest,
-          id,
-          url,
-          urlIsPublicPath: largeMediaURLThunks[id] ? false : urlIsPublicPath,
-          getDisplayURL: largeMediaURLThunks[id]
-            ? largeMediaURLThunks[id]
-            : getDisplayURL || (url && (() => Promise.resolve(url))),
-        }));
+        const largeMediaDisplayURLs = await this.getLargeMediaDisplayURLs(mediaFiles);
+        return mediaFiles.map(({ id, displayURL, path, ...rest }) => {
+          return {
+            ...rest,
+            id,
+            path,
+            displayURL: {
+              path,
+              original: displayURL,
+              largeMedia: largeMediaDisplayURLs[id],
+            },
+          };
+        });
       },
     );
   }
@@ -270,13 +273,13 @@ export default class GitGateway {
             ['backend', 'use_large_media_transforms_in_media_library'],
             true,
           )
-            ? { nf_resize: 'fit', w: 280, h: 160 }
+            ? { nf_resize: 'fit', w: 560, h: 320 }
             : false,
         });
       },
     );
   }
-  getLargeMedia(mediaFiles) {
+  getLargeMediaDisplayURLs(mediaFiles) {
     return this.getLargeMediaClient().then(client => {
       const largeMediaItems = mediaFiles
         .filter(({ path }) => client.matchPath(path))
@@ -296,16 +299,35 @@ export default class GitGateway {
           }),
         )
         .then(unzip)
-        .then(async ([idMaps, files]) => [
-          idMaps,
-          await client.getResourceDownloadURLThunks(files).then(fromPairs),
-        ])
+        .then(([idMaps, files]) =>
+          Promise.all([idMaps, client.getResourceDownloadURLArgs(files).then(fromPairs)]),
+        )
         .then(([idMaps, resourceMap]) =>
           idMaps.map(({ pointerId, resourceId }) => [pointerId, resourceMap[resourceId]]),
         )
         .then(fromPairs);
     });
   }
+
+  getMediaDisplayURL(displayURL) {
+    const { path, original, largeMedia: largeMediaDisplayURL } = displayURL;
+    return this.getLargeMediaClient().then(client => {
+      if (client.enabled && client.matchPath(path)) {
+        return client.getDownloadURL(largeMediaDisplayURL);
+      }
+      if (this.backend.getMediaDisplayURL) {
+        return this.backend.getMediaDisplayURL(original);
+      }
+      const err = new Error(
+        `getMediaDisplayURL is not implemented by the ${
+          this.backendType
+        } backend, but the backend returned a displayURL which was not a string!`,
+      );
+      err.displayURL = displayURL;
+      return Promise.reject(err);
+    });
+  }
+
   persistEntry(entry, mediaFiles, options) {
     return this.backend.persistEntry(entry, mediaFiles, options);
   }
@@ -332,11 +354,7 @@ export default class GitGateway {
           raw: pointerFileString,
           value,
         };
-        const persistedMediaFile = await this.backend.persistMedia(persistMediaArgument, options);
-        return {
-          ...persistedMediaFile,
-          urlIsPublicPath: false,
-        };
+        return this.backend.persistMedia(persistMediaArgument, options);
       });
     });
   }

packages/netlify-cms-backend-git-gateway/src/netlify-lfs-client.js

@@ -99,10 +99,7 @@ const resourceExists = async ({ rootURL, makeAuthorizedRequest }, { sha, size })
   // to fit
 };
 
-const getDownloadURLThunkFromSha = (
-  { rootURL, makeAuthorizedRequest, transformImages: t },
-  sha,
-) => () =>
+const getDownloadURL = ({ rootURL, transformImages: t, makeAuthorizedRequest }, { sha }) =>
   makeAuthorizedRequest(
     `${rootURL}/origin/${sha}${
       t && Object.keys(t).length > 0 ? `?nf_resize=${t.nf_resize}&w=${t.w}&h=${t.h}` : ''
@@ -113,17 +110,13 @@ const getDownloadURLThunkFromSha = (
     .then(blob => URL.createObjectURL(blob))
     .catch(err => console.error(err) || Promise.resolve(''));
 
-// We allow users to get thunks which load the blobs instead of fully
-// resolved blob URLs so that media clients can download the blobs
-// lazily.  This behaves more similarly to the behavior of string
-// URLs, which only trigger an image download when the DOM element for
-// that image is created.
-const getResourceDownloadURLThunks = (clientConfig, objects) =>
-  Promise.resolve(objects.map(({ sha }) => [sha, getDownloadURLThunkFromSha(clientConfig, sha)]));
+const getResourceDownloadURLArgs = (clientConfig, objects) => {
+  return Promise.resolve(objects.map(({ sha }) => [sha, { sha }]));
+};
 
 const getResourceDownloadURLs = (clientConfig, objects) =>
-  getResourceDownloadURLThunks(clientConfig, objects)
-    .then(map(([sha, thunk]) => Promise.all([sha, thunk()])))
+  getResourceDownloadURLArgs(clientConfig, objects)
+    .then(map(downloadURLArg => getDownloadURL(downloadURLArg)))
     .then(Promise.all.bind(Promise));
 
 const uploadOperation = objects => ({
@@ -171,7 +164,8 @@ const clientFns = {
   resourceExists,
   getResourceUploadURLs,
   getResourceDownloadURLs,
-  getResourceDownloadURLThunks,
+  getResourceDownloadURLArgs,
+  getDownloadURL,
   uploadResource,
   matchPath,
 };