1 files changed, 15 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 84a16f327d9..53fbb2a330d 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -7,6 +7,8 @@ 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';
 
 export default {
   components: {
@@ -43,7 +45,7 @@ export default {
   data() {
     return {
       saveable: false,
-      parsedSource: parseSourceFile(this.content),
+      parsedSource: parseSourceFile(this.preProcess(true, this.content)),
       editorMode: EDITOR_TYPES.wysiwyg,
       isModified: false,
     };
@@ -58,20 +60,30 @@ export default {
     },
   },
   methods: {
+    preProcess(isWrap, value) {
+      const formattedContent = formatter(value);
+      const templatedContent = isWrap
+        ? templater.wrap(formattedContent)
+        : templater.unwrap(formattedContent);
+      return templatedContent;
+    },
     onInputChange(newVal) {
       this.parsedSource.sync(newVal, this.isWysiwygMode);
       this.isModified = this.parsedSource.isModified();
     },
     onModeChange(mode) {
       this.editorMode = mode;
-      this.$refs.editor.resetInitialValue(this.editableContent);
+
+      const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent);
+      this.$refs.editor.resetInitialValue(preProcessedContent);
     },
     onUploadImage({ file, imageUrl }) {
       this.$options.imageRepository.add(file, imageUrl);
     },
     onSubmit() {
+      const preProcessedContent = this.preProcess(false, this.parsedSource.content());
       this.$emit('submit', {
-        content: this.parsedSource.content(),
+        content: preProcessedContent,
         images: this.$options.imageRepository.getAll(),
       });
     },