1 files changed, 40 insertions, 3 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 53fbb2a330d..e602f26acdf 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -2,6 +2,7 @@
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import PublishToolbar from './publish_toolbar.vue';
 import EditHeader from './edit_header.vue';
+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';
@@ -15,6 +16,7 @@ export default {
     RichContentEditor,
     PublishToolbar,
     EditHeader,
+    EditDrawer,
     UnsavedChangesConfirmDialog,
   },
   props: {
@@ -48,6 +50,8 @@ export default {
       parsedSource: parseSourceFile(this.preProcess(true, this.content)),
       editorMode: EDITOR_TYPES.wysiwyg,
       isModified: false,
+      hasMatter: false,
+      isDrawerOpen: false,
     };
   },
   imageRepository: imageRepository(),
@@ -55,10 +59,19 @@ export default {
     editableContent() {
       return this.parsedSource.content(this.isWysiwygMode);
     },
+    editableMatter() {
+      return this.isDrawerOpen ? this.parsedSource.matter() : {};
+    },
+    hasSettings() {
+      return this.hasMatter && this.isWysiwygMode;
+    },
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
   },
+  created() {
+    this.refreshEditHelpers();
+  },
   methods: {
     preProcess(isWrap, value) {
       const formattedContent = formatter(value);
@@ -67,9 +80,21 @@ export default {
         : templater.unwrap(formattedContent);
       return templatedContent;
     },
-    onInputChange(newVal) {
-      this.parsedSource.sync(newVal, this.isWysiwygMode);
+    refreshEditHelpers() {
       this.isModified = this.parsedSource.isModified();
+      this.hasMatter = this.parsedSource.hasMatter();
+    },
+    onDrawerOpen() {
+      this.isDrawerOpen = true;
+      this.refreshEditHelpers();
+    },
+    onDrawerClose() {
+      this.isDrawerOpen = false;
+      this.refreshEditHelpers();
+    },
+    onInputChange(newVal) {
+      this.parsedSource.syncContent(newVal, this.isWysiwygMode);
+      this.refreshEditHelpers();
     },
     onModeChange(mode) {
       this.editorMode = mode;
@@ -77,6 +102,9 @@ export default {
       const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent);
       this.$refs.editor.resetInitialValue(preProcessedContent);
     },
+    onUpdateSettings(settings) {
+      this.parsedSource.syncMatter(settings);
+    },
     onUploadImage({ file, imageUrl }) {
       this.$options.imageRepository.add(file, imageUrl);
     },
@@ -93,12 +121,19 @@ export default {
 <template>
   <div class="d-flex flex-grow-1 flex-column h-100">
     <edit-header class="py-2" :title="title" />
+    <edit-drawer
+      v-if="hasMatter"
+      :is-open="isDrawerOpen"
+      :settings="editableMatter"
+      @close="onDrawerClose"
+      @updateSettings="onUpdateSettings"
+    />
     <rich-content-editor
       ref="editor"
       :content="editableContent"
       :initial-edit-type="editorMode"
       :image-root="imageRoot"
-      class="mb-9 h-100"
+      class="mb-9 pb-6 h-100"
       @modeChange="onModeChange"
       @input="onInputChange"
       @uploadImage="onUploadImage"
@@ -106,9 +141,11 @@ export default {
     <unsaved-changes-confirm-dialog :modified="isModified" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
+      :has-settings="hasSettings"
       :return-url="returnUrl"
       :saveable="isModified"
       :saving-changes="savingChanges"
+      @editSettings="onDrawerOpen"
       @submit="onSubmit"
     />
   </div>