Add latest changes from gitlab-org/gitlab@13-2-stable-ee

1 files changed, 29 insertions, 22 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 e9efef40632..84a16f327d9 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -5,6 +5,8 @@ import EditHeader from './edit_header.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';
 
 export default {
   components: {
@@ -31,46 +33,47 @@ export default {
       required: false,
       default: '',
     },
+    imageRoot: {
+      type: String,
+      required: false,
+      default: DEFAULT_IMAGE_UPLOAD_PATH,
+      validator: prop => prop.endsWith('/'),
+    },
   },
   data() {
     return {
       saveable: false,
       parsedSource: parseSourceFile(this.content),
       editorMode: EDITOR_TYPES.wysiwyg,
+      isModified: false,
     };
   },
+  imageRepository: imageRepository(),
   computed: {
     editableContent() {
-      return this.parsedSource.editable;
-    },
-    editableKey() {
-      return this.isWysiwygMode ? 'body' : 'raw';
+      return this.parsedSource.content(this.isWysiwygMode);
     },
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
-    modified() {
-      return this.isWysiwygMode
-        ? this.parsedSource.isModifiedBody()
-        : this.parsedSource.isModifiedRaw();
-    },
   },
   methods: {
-    syncSource() {
-      if (this.isWysiwygMode) {
-        this.parsedSource.syncBody();
-        return;
-      }
-
-      this.parsedSource.syncRaw();
+    onInputChange(newVal) {
+      this.parsedSource.sync(newVal, this.isWysiwygMode);
+      this.isModified = this.parsedSource.isModified();
     },
     onModeChange(mode) {
       this.editorMode = mode;
-      this.syncSource();
+      this.$refs.editor.resetInitialValue(this.editableContent);
+    },
+    onUploadImage({ file, imageUrl }) {
+      this.$options.imageRepository.add(file, imageUrl);
     },
     onSubmit() {
-      this.syncSource();
-      this.$emit('submit', { content: this.editableContent.raw });
+      this.$emit('submit', {
+        content: this.parsedSource.content(),
+        images: this.$options.imageRepository.getAll(),
+      });
     },
   },
 };
@@ -79,16 +82,20 @@ export default {
   <div class="d-flex flex-grow-1 flex-column h-100">
     <edit-header class="py-2" :title="title" />
     <rich-content-editor
-      v-model="editableContent[editableKey]"
+      ref="editor"
+      :content="editableContent"
       :initial-edit-type="editorMode"
+      :image-root="imageRoot"
       class="mb-9 h-100"
       @modeChange="onModeChange"
+      @input="onInputChange"
+      @uploadImage="onUploadImage"
     />
-    <unsaved-changes-confirm-dialog :modified="modified" />
+    <unsaved-changes-confirm-dialog :modified="isModified" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
       :return-url="returnUrl"
-      :saveable="modified"
+      :saveable="isModified"
       :saving-changes="savingChanges"
       @submit="onSubmit"
     />