Add custom renderer for images

Added a custom renderer for images

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"

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

app/assets/javascripts/static_site_editor/services/renderers/render_image.js

+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 };

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -16,6 +16,7 @@ import {
   sourceContentBody as body,
   returnUrl,
   mounts,
+  project,
 } from '../mock_data';
 
 jest.mock('~/static_site_editor/services/formatter', () => jest.fn(str => `${str} format-pass`));
@@ -33,6 +34,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
         content,
         returnUrl,
         mounts,
+        project,
         savingChanges,
         ...propsData,
       },

spec/frontend/static_site_editor/mock_data.js

@@ -27,6 +27,7 @@ export const sourceContentTitle = 'Handbook';
 
 export const username = 'gitlabuser';
 export const projectId = '123456';
+export const project = 'user1/project1';
 export const returnUrl = 'https://www.gitlab.com';
 export const sourcePath = 'foobar.md.html';
 export const mergeRequestMeta = {

spec/frontend/static_site_editor/services/renderers/render_image_spec.js

+import imageRenderer from '~/static_site_editor/services/renderers/render_image';
+import { mounts, project } from '../../mock_data';
+
+describe('rich_content_editor/renderers/render_image', () => {
+  let renderer;
+
+  beforeEach(() => {
+    renderer = imageRenderer.build(mounts, project);
+  });
+
+  describe('build', () => {
+    it('builds a renderer object containing `canRender` and `render` functions', () => {
+      expect(renderer).toHaveProperty('canRender', expect.any(Function));
+      expect(renderer).toHaveProperty('render', expect.any(Function));
+    });
+  });
+
+  describe('canRender', () => {
+    it.each`
+      input                    | result
+      ${{ type: 'image' }}     | ${true}
+      ${{ type: 'text' }}      | ${false}
+      ${{ type: 'htmlBlock' }} | ${false}
+    `('returns $result when input is $input', ({ input, result }) => {
+      expect(renderer.canRender(input)).toBe(result);
+    });
+  });
+
+  describe('render', () => {
+    let context;
+    let result;
+    const skipChildren = jest.fn();
+
+    beforeEach(() => {
+      const node = {
+        destination: '/some/path/image.png',
+        firstChild: {
+          type: 'img',
+          literal: 'Some Image',
+        },
+      };
+
+      context = { skipChildren };
+      result = renderer.render(node, context);
+    });
+
+    it('invokes `skipChildren`', () => {
+      expect(skipChildren).toHaveBeenCalled();
+    });
+
+    it('returns an image', () => {
+      expect(result).toEqual({
+        type: 'openTag',
+        tagName: 'img',
+        selfClose: true,
+        attributes: {
+          src: '/some/path/image.png',
+          alt: 'Some Image',
+        },
+      });
+    });
+  });
+});