Merge branch '240998-front-matter-read-write' into 'master'

Resolve "Add front matter read/write API to parse_source_file.js"

Closes #240998

See merge request gitlab-org/gitlab!40411

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

@@ -30,7 +30,7 @@ const parseSourceFile = raw => {
     editable = parse(editable.raw);
   };
 
-  const syncBodyToRaw = () => {
+  const refreshEditableRaw = () => {
     editable.raw = `${editable.header}${editable.spacing}${editable.body}`;
   };
 
@@ -39,12 +39,19 @@ const parseSourceFile = raw => {
     editable[editableKey] = newVal;
 
     if (isBodyToRaw) {
-      syncBodyToRaw();
+      refreshEditableRaw();
     }
 
     syncEditable();
   };
 
+  const frontMatter = () => editable.header;
+
+  const setFrontMatter = val => {
+    editable.header = val;
+    refreshEditableRaw();
+  };
+
   const content = (isBody = false) => {
     const editableKey = isBody ? 'body' : 'raw';
     return editable[editableKey];
@@ -56,6 +63,8 @@ const parseSourceFile = raw => {
   editable = parse(raw);
 
   return {
+    frontMatter,
+    setFrontMatter,
     content,
     isModified,
     sync,

spec/frontend/static_site_editor/services/parse_source_file_spec.js

-import { sourceContent as content, sourceContentBody as body } from '../mock_data';
+import {
+  sourceContent as content,
+  sourceContentHeader as frontMatter,
+  sourceContentBody as body,
+} from '../mock_data';
 
 import parseSourceFile from '~/static_site_editor/services/parse_source_file';
 
@@ -9,6 +13,16 @@ describe('parseSourceFile', () => {
   const newContent = `${content} ${edit}`;
   const newContentComplex = `${contentComplex} ${edit}`;
 
+  describe('unmodified front matter', () => {
+    it.each`
+      parsedSource
+      ${parseSourceFile(content)}
+      ${parseSourceFile(contentComplex)}
+    `('returns the correct front matter when queried', ({ parsedSource }) => {
+      expect(parsedSource.frontMatter()).toBe(frontMatter);
+    });
+  });
+
   describe('unmodified content', () => {
     it.each`
       parsedSource
@@ -34,6 +48,28 @@ describe('parseSourceFile', () => {
     );
   });
 
+  describe('modified front matter', () => {
+    const newFrontMatter = '---\nnewKey: newVal\n---';
+    const contentWithNewFrontMatter = content.replace(frontMatter, newFrontMatter);
+    const contentComplexWithNewFrontMatter = contentComplex.replace(frontMatter, newFrontMatter);
+
+    it.each`
+      parsedSource                       | targetContent
+      ${parseSourceFile(content)}        | ${contentWithNewFrontMatter}
+      ${parseSourceFile(contentComplex)} | ${contentComplexWithNewFrontMatter}
+    `(
+      'returns the correct front matter and modified content',
+      ({ parsedSource, targetContent }) => {
+        expect(parsedSource.frontMatter()).toBe(frontMatter);
+
+        parsedSource.setFrontMatter(newFrontMatter);
+
+        expect(parsedSource.frontMatter()).toBe(newFrontMatter);
+        expect(parsedSource.content()).toBe(targetContent);
+      },
+    );
+  });
+
   describe('modified content', () => {
     const newBody = `${body} ${edit}`;
     const newComplexBody = `${complexBody} ${edit}`;