1 files changed, 40 insertions, 10 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 e602f26acdf..69eabfe5339 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -6,10 +6,10 @@ import EditDrawer from './edit_drawer.vue';
 import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue';
 import parseSourceFile from '~/static_site_editor/services/parse_source_file';
 import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants';
-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: {
@@ -37,21 +37,35 @@ export default {
       required: false,
       default: '',
     },
+    branch: {
+      type: String,
+      required: true,
+    },
+    baseUrl: {
+      type: String,
+      required: true,
+    },
+    mounts: {
+      type: Array,
+      required: true,
+    },
+    project: {
+      type: String,
+      required: true,
+    },
     imageRoot: {
       type: String,
-      required: false,
-      default: DEFAULT_IMAGE_UPLOAD_PATH,
-      validator: prop => prop.endsWith('/'),
+      required: true,
     },
   },
   data() {
     return {
-      saveable: false,
       parsedSource: parseSourceFile(this.preProcess(true, this.content)),
       editorMode: EDITOR_TYPES.wysiwyg,
-      isModified: false,
       hasMatter: false,
       isDrawerOpen: false,
+      isModified: false,
+      isSaveable: false,
     };
   },
   imageRepository: imageRepository(),
@@ -68,6 +82,18 @@ export default {
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
+    customRenderers() {
+      const imageRenderer = renderImage.build(
+        this.mounts,
+        this.project,
+        this.branch,
+        this.baseUrl,
+        this.$options.imageRepository,
+      );
+      return {
+        image: [imageRenderer],
+      };
+    },
   },
   created() {
     this.refreshEditHelpers();
@@ -81,8 +107,11 @@ export default {
       return templatedContent;
     },
     refreshEditHelpers() {
-      this.isModified = this.parsedSource.isModified();
-      this.hasMatter = this.parsedSource.hasMatter();
+      const { isModified, hasMatter, isMatterValid } = this.parsedSource;
+      this.isModified = isModified();
+      this.hasMatter = hasMatter();
+      const hasValidMatter = this.hasMatter ? isMatterValid() : true;
+      this.isSaveable = this.isModified && hasValidMatter;
     },
     onDrawerOpen() {
       this.isDrawerOpen = true;
@@ -133,17 +162,18 @@ export default {
       :content="editableContent"
       :initial-edit-type="editorMode"
       :image-root="imageRoot"
+      :options="{ customRenderers }"
       class="mb-9 pb-6 h-100"
       @modeChange="onModeChange"
       @input="onInputChange"
       @uploadImage="onUploadImage"
     />
-    <unsaved-changes-confirm-dialog :modified="isModified" />
+    <unsaved-changes-confirm-dialog :modified="isSaveable" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
       :has-settings="hasSettings"
       :return-url="returnUrl"
-      :saveable="isModified"
+      :saveable="isSaveable"
       :saving-changes="savingChanges"
       @editSettings="onDrawerOpen"
       @submit="onSubmit"