2 files changed, 67 insertions, 5 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 dff21d919a9..e9efef40632 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -2,12 +2,16 @@
 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 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';
 
 export default {
   components: {
     RichContentEditor,
     PublishToolbar,
     EditHeader,
+    UnsavedChangesConfirmDialog,
   },
   props: {
     title: {
@@ -30,26 +34,57 @@ export default {
   },
   data() {
     return {
-      editableContent: this.content,
       saveable: false,
+      parsedSource: parseSourceFile(this.content),
+      editorMode: EDITOR_TYPES.wysiwyg,
     };
   },
   computed: {
+    editableContent() {
+      return this.parsedSource.editable;
+    },
+    editableKey() {
+      return this.isWysiwygMode ? 'body' : 'raw';
+    },
+    isWysiwygMode() {
+      return this.editorMode === EDITOR_TYPES.wysiwyg;
+    },
     modified() {
-      return this.content !== this.editableContent;
+      return this.isWysiwygMode
+        ? this.parsedSource.isModifiedBody()
+        : this.parsedSource.isModifiedRaw();
     },
   },
   methods: {
+    syncSource() {
+      if (this.isWysiwygMode) {
+        this.parsedSource.syncBody();
+        return;
+      }
+
+      this.parsedSource.syncRaw();
+    },
+    onModeChange(mode) {
+      this.editorMode = mode;
+      this.syncSource();
+    },
     onSubmit() {
-      this.$emit('submit', { content: this.editableContent });
+      this.syncSource();
+      this.$emit('submit', { content: this.editableContent.raw });
     },
   },
 };
 </script>
 <template>
-  <div class="d-flex flex-grow-1 flex-column">
+  <div class="d-flex flex-grow-1 flex-column h-100">
     <edit-header class="py-2" :title="title" />
-    <rich-content-editor v-model="editableContent" class="mb-9" />
+    <rich-content-editor
+      v-model="editableContent[editableKey]"
+      :initial-edit-type="editorMode"
+      class="mb-9 h-100"
+      @modeChange="onModeChange"
+    />
+    <unsaved-changes-confirm-dialog :modified="modified" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
       :return-url="returnUrl"
diff --git a/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue b/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue
new file mode 100644
index 00000000000..255f029bd27
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/unsaved_changes_confirm_dialog.vue
@@ -0,0 +1,27 @@
+<script>
+export default {
+  props: {
+    modified: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  created() {
+    window.addEventListener('beforeunload', this.requestConfirmation);
+  },
+  destroyed() {
+    window.removeEventListener('beforeunload', this.requestConfirmation);
+  },
+  methods: {
+    requestConfirmation(e) {
+      if (this.modified) {
+        e.preventDefault();
+        // eslint-disable-next-line no-param-reassign
+        e.returnValue = '';
+      }
+    },
+  },
+  render: () => null,
+};
+</script>