1 files changed, 47 insertions, 4 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 921d93669c5..dff21d919a9 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -1,18 +1,61 @@
 <script>
-import { GlFormTextarea } from '@gitlab/ui';
+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';
 
 export default {
   components: {
-    GlFormTextarea,
+    RichContentEditor,
+    PublishToolbar,
+    EditHeader,
   },
   props: {
-    value: {
+    title: {
       type: String,
       required: true,
     },
+    content: {
+      type: String,
+      required: true,
+    },
+    savingChanges: {
+      type: Boolean,
+      required: true,
+    },
+    returnUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      editableContent: this.content,
+      saveable: false,
+    };
+  },
+  computed: {
+    modified() {
+      return this.content !== this.editableContent;
+    },
+  },
+  methods: {
+    onSubmit() {
+      this.$emit('submit', { content: this.editableContent });
+    },
   },
 };
 </script>
 <template>
-  <gl-form-textarea :value="value" v-on="$listeners" />
+  <div class="d-flex flex-grow-1 flex-column">
+    <edit-header class="py-2" :title="title" />
+    <rich-content-editor v-model="editableContent" class="mb-9" />
+    <publish-toolbar
+      class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
+      :return-url="returnUrl"
+      :saveable="modified"
+      :saving-changes="savingChanges"
+      @submit="onSubmit"
+    />
+  </div>
 </template>