Add latest changes from gitlab-org/gitlab@master

3 files changed, 23 insertions, 7 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue
index 09bc176c399..69eabfe5339 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -83,7 +83,13 @@ export default {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
     customRenderers() {
-      const imageRenderer = renderImage.build(this.mounts, this.project, this.branch, this.baseUrl);
+      const imageRenderer = renderImage.build(
+        this.mounts,
+        this.project,
+        this.branch,
+        this.baseUrl,
+        this.$options.imageRepository,
+      );
       return {
         image: [imageRenderer],
       };
diff --git a/app/assets/javascripts/static_site_editor/image_repository.js b/app/assets/javascripts/static_site_editor/image_repository.js
index 02285ccdba3..b5ff4385d3c 100644
--- a/app/assets/javascripts/static_site_editor/image_repository.js
+++ b/app/assets/javascripts/static_site_editor/image_repository.js
@@ -12,9 +12,11 @@ const imageRepository = () => {
       .catch(() => flash(__('Something went wrong while inserting your image. Please try again.')));
   };
 
+  const get = path => images.get(path);
+
   const getAll = () => images;
 
-  return { add, getAll };
+  return { add, get, getAll };
 };
 
 export default imageRepository;
diff --git a/app/assets/javascripts/static_site_editor/services/renderers/render_image.js b/app/assets/javascripts/static_site_editor/services/renderers/render_image.js
index 5e5e5d1c860..b0d863bdb5a 100644
--- a/app/assets/javascripts/static_site_editor/services/renderers/render_image.js
+++ b/app/assets/javascripts/static_site_editor/services/renderers/render_image.js
@@ -4,6 +4,8 @@ const canRender = ({ type }) => type === 'image';
 
 let metadata;
 
+const getCachedContent = basePath => metadata.imageRepository.get(basePath);
+
 const isRelativeToCurrentDirectory = basePath => !basePath.startsWith('/');
 
 const extractSourceDirectory = url => {
@@ -46,7 +48,11 @@ const generateSourceDirectory = basePath => {
   return sourceDir || defaultSourceDir;
 };
 
-const resolveFullPath = originalSrc => {
+const resolveFullPath = (originalSrc, cachedContent) => {
+  if (cachedContent) {
+    return `data:image;base64,${cachedContent}`;
+  }
+
   if (isAbsolute(originalSrc)) {
     return originalSrc;
   }
@@ -61,20 +67,22 @@ const resolveFullPath = originalSrc => {
 const render = ({ destination: originalSrc, firstChild }, { skipChildren }) => {
   skipChildren();
 
+  const cachedContent = getCachedContent(originalSrc);
+
   return {
     type: 'openTag',
     tagName: 'img',
     selfClose: true,
     attributes: {
-      'data-original-src': !isAbsolute(originalSrc) ? originalSrc : '',
-      src: resolveFullPath(originalSrc),
+      'data-original-src': !isAbsolute(originalSrc) || cachedContent ? originalSrc : '',
+      src: resolveFullPath(originalSrc, cachedContent),
       alt: firstChild.literal,
     },
   };
 };
 
-const build = (mounts = [], project, branch, baseUrl) => {
-  metadata = { mounts, project, branch, baseUrl };
+const build = (mounts = [], project, branch, baseUrl, imageRepository) => {
+  metadata = { mounts, project, branch, baseUrl, imageRepository };
   return { canRender, render };
 };