Add latest changes from gitlab-org/gitlab@master

3 files changed, 43 insertions, 0 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 5b2d0207e98..e559babf39c 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -10,6 +10,7 @@ import { DEFAULT_IMAGE_UPLOAD_PATH } from '../constants';
 import imageRepository from '../image_repository';
 import formatter from '../services/formatter';
 import templater from '../services/templater';
+import renderImage from '../services/renderers/render_image';
 
 export default {
   components: {
@@ -41,6 +42,10 @@ export default {
       type: Array,
       required: true,
     },
+    project: {
+      type: String,
+      required: true,
+    },
     imageRoot: {
       type: String,
       required: false,
@@ -72,6 +77,12 @@ export default {
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
+    customRenderers() {
+      const imageRenderer = renderImage.build(this.mounts, this.project);
+      return {
+        image: [imageRenderer],
+      };
+    },
   },
   created() {
     this.refreshEditHelpers();
@@ -140,6 +151,7 @@ export default {
       :content="editableContent"
       :initial-edit-type="editorMode"
       :image-root="imageRoot"
+      :options="{ customRenderers }"
       class="mb-9 pb-6 h-100"
       @modeChange="onModeChange"
       @input="onInputChange"
diff --git a/app/assets/javascripts/static_site_editor/pages/home.vue b/app/assets/javascripts/static_site_editor/pages/home.vue
index d7e52ef9c45..a315e3d8f49 100644
--- a/app/assets/javascripts/static_site_editor/pages/home.vue
+++ b/app/assets/javascripts/static_site_editor/pages/home.vue
@@ -139,6 +139,7 @@ export default {
         :saving-changes="isSavingChanges"
         :return-url="appData.returnUrl"
         :mounts="appData.mounts"
+        :project="appData.project"
         @submit="onPrepareSubmit"
       />
       <edit-meta-modal
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
new file mode 100644
index 00000000000..38304a1c57f
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/services/renderers/render_image.js
@@ -0,0 +1,30 @@
+const canRender = ({ type }) => type === 'image';
+
+// NOTE: the `metadata` is not used yet, but will be used in a follow-up iteration
+// To be removed with the next iteration of https://gitlab.com/gitlab-org/gitlab/-/issues/218531
+// eslint-disable-next-line no-unused-vars
+let metadata;
+
+const render = (node, { skipChildren }) => {
+  skipChildren();
+
+  // To be removed with the next iteration of https://gitlab.com/gitlab-org/gitlab/-/issues/218531
+  // TODO resolve relative paths
+
+  return {
+    type: 'openTag',
+    tagName: 'img',
+    selfClose: true,
+    attributes: {
+      src: node.destination,
+      alt: node.firstChild.literal,
+    },
+  };
+};
+
+const build = (mounts, project) => {
+  metadata = { mounts, project };
+  return { canRender, render };
+};
+
+export default { build };