Fix SSE edit_area sync bug

Fix mode change dependency for syncing
to work (bug) and additionally refactor
the sync method names to more clearly
communicate the sync direction (rawToBody
or bodyToRaw)

app/assets/javascripts/static_site_editor/components/edit_area.vue

@@ -58,15 +58,16 @@ export default {
   methods: {
     syncSource() {
       if (this.isWysiwygMode) {
-        this.parsedSource.syncBody();
+        this.parsedSource.syncBodyToRaw();
         return;
       }
 
-      this.parsedSource.syncRaw();
+      this.parsedSource.syncRawToBody();
     },
     onModeChange(mode) {
-      this.editorMode = mode;
+      // Sequentially sync then switch modes (rich-content-editor's v-model computed source content update)
       this.syncSource();
+      this.editorMode = mode;
     },
     onSubmit() {
       this.syncSource();

app/assets/javascripts/static_site_editor/services/parse_source_file.js

@@ -24,7 +24,7 @@ const parseSourceFile = raw => {
 
   const computedRaw = () => `${editable.header}${editable.spacing}${editable.body}`;
 
-  const syncBody = () => {
+  const syncRawToBody = () => {
     /*
     We re-parse as markdown editing could have added non-body changes (preFrontMatter, frontMatter, or spacing).
     Re-parsing additionally gets us the desired body that was extracted from the mutated editable.raw
@@ -33,7 +33,7 @@ const parseSourceFile = raw => {
     Object.assign(editable, parse(editable.raw));
   };
 
-  const syncRaw = () => {
+  const syncBodyToRaw = () => {
     editable.raw = computedRaw();
   };
 
@@ -47,8 +47,8 @@ const parseSourceFile = raw => {
     editable,
     isModifiedRaw,
     isModifiedBody,
-    syncRaw,
-    syncBody,
+    syncBodyToRaw,
+    syncRawToBody,
   };
 };
 

changelogs/unreleased/34523-fix-sse-edit-area-sync-bug.yml

+---
+title: Fix static site editor raw (has front matter) <-> body (lacks front matter) content changes sync
+merge_request: 34523
+author:
+type: fixed

spec/frontend/static_site_editor/components/edit_area_spec.js

 import { shallowMount } from '@vue/test-utils';
 
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
+import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants';
 
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
@@ -91,4 +92,47 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
       });
     });
   });
+
+  describe('when the mode changes', () => {
+    const setInitialMode = mode => {
+      wrapper.setData({ editorMode: mode });
+    };
+
+    afterEach(() => {
+      setInitialMode(EDITOR_TYPES.wysiwyg);
+    });
+
+    it.each`
+      initialMode              | targetMode
+      ${EDITOR_TYPES.wysiwyg}  | ${EDITOR_TYPES.markdown}
+      ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}
+    `('sets editorMode from $initialMode to $targetMode', ({ initialMode, targetMode }) => {
+      setInitialMode(initialMode);
+      findRichContentEditor().vm.$emit('modeChange', targetMode);
+
+      expect(wrapper.vm.editorMode).toBe(targetMode);
+    });
+
+    it.each`
+      syncFnName         | initialMode              | targetMode
+      ${'syncBodyToRaw'} | ${EDITOR_TYPES.wysiwyg}  | ${EDITOR_TYPES.markdown}
+      ${'syncRawToBody'} | ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}
+    `(
+      'calls $syncFnName source before switching from $initialMode to $targetMode',
+      ({ syncFnName, initialMode, targetMode }) => {
+        setInitialMode(initialMode);
+
+        const spySyncSource = jest.spyOn(wrapper.vm, 'syncSource');
+        const spySyncParsedSource = jest.spyOn(wrapper.vm.parsedSource, syncFnName);
+
+        findRichContentEditor().vm.$emit('modeChange', targetMode);
+
+        expect(spySyncSource).toHaveBeenCalled();
+        expect(spySyncParsedSource).toHaveBeenCalled();
+
+        spySyncSource.mockReset();
+        spySyncParsedSource.mockReset();
+      },
+    );
+  });
 });

spec/frontend/static_site_editor/services/parse_source_file_spec.js

@@ -48,11 +48,11 @@ describe('parseSourceFile', () => {
     });
 
     it.each`
-      sourceContent     | editableKey | syncKey       | isModifiedKey       | desc
-      ${contentSimple}  | ${'body'}   | ${'syncRaw'}  | ${'isModifiedRaw'}  | ${'returns true after modification and sync'}
-      ${contentSimple}  | ${'raw'}    | ${'syncBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
-      ${contentComplex} | ${'body'}   | ${'syncRaw'}  | ${'isModifiedRaw'}  | ${'returns true after modification and sync'}
-      ${contentComplex} | ${'raw'}    | ${'syncBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
+      sourceContent     | editableKey | syncKey            | isModifiedKey       | desc
+      ${contentSimple}  | ${'body'}   | ${'syncBodyToRaw'} | ${'isModifiedRaw'}  | ${'returns true after modification and sync'}
+      ${contentSimple}  | ${'raw'}    | ${'syncRawToBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
+      ${contentComplex} | ${'body'}   | ${'syncBodyToRaw'} | ${'isModifiedRaw'}  | ${'returns true after modification and sync'}
+      ${contentComplex} | ${'raw'}    | ${'syncRawToBody'} | ${'isModifiedBody'} | ${'returns true after modification and sync'}
     `('$desc', ({ sourceContent, editableKey, syncKey, isModifiedKey }) => {
       const parsedSource = parseSourceFile(sourceContent);
       parsedSource.editable[editableKey] += 'Added content';