Initial frontmatter parsing

Add parseSourceFile to help manage and sync
internal changes of the Toast UI editor and the SSE with
frontmatter's presence in markdown mode (raw) and lack
thereof in wysiwyg mode (body)

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

@@ -3,6 +3,8 @@ import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_
 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: {
@@ -32,18 +34,43 @@ 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 });
     },
   },
 };
@@ -51,7 +78,12 @@ export default {
 <template>
   <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 h-100" />
+    <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"

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

+const parseSourceFile = raw => {
+  const frontMatterRegex = /(^---$[\s\S]*?^---$)/m;
+  const preGroupedRegex = /([\s\S]*?)(^---$[\s\S]*?^---$)(\s*)([\s\S]*)/m; // preFrontMatter, frontMatter, spacing, and content
+  let initial;
+  let editable;
+
+  const hasFrontMatter = source => frontMatterRegex.test(source);
+
+  const buildPayload = (source, header, spacing, body) => {
+    return { raw: source, header, spacing, body };
+  };
+
+  const parse = source => {
+    if (hasFrontMatter(source)) {
+      const match = source.match(preGroupedRegex);
+      const [, preFrontMatter, frontMatter, spacing, content] = match;
+      const header = preFrontMatter + frontMatter;
+
+      return buildPayload(source, header, spacing, content);
+    }
+
+    return buildPayload(source, '', '', source);
+  };
+
+  const computedRaw = () => `${editable.header}${editable.spacing}${editable.body}`;
+
+  const syncBody = () => {
+    /*
+    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
+    Additionally we intentionally mutate the existing editable's key values as opposed to reassigning the object itself so consumers of the potentially reactive property stay in sync.
+    */
+    Object.assign(editable, parse(editable.raw));
+  };
+
+  const syncRaw = () => {
+    editable.raw = computedRaw();
+  };
+
+  const isModifiedRaw = () => initial.raw !== editable.raw;
+  const isModifiedBody = () => initial.raw !== computedRaw();
+
+  initial = parse(raw);
+  editable = parse(raw);
+
+  return {
+    editable,
+    isModifiedRaw,
+    isModifiedBody,
+    syncRaw,
+    syncBody,
+  };
+};
+
+export default parseSourceFile;

app/assets/javascripts/vue_shared/components/rich_content_editor/constants.js

@@ -34,6 +34,7 @@ export const EDITOR_OPTIONS = {
 };
 
 export const EDITOR_TYPES = {
+  markdown: 'markdown',
   wysiwyg: 'wysiwyg',
 };
 

app/assets/javascripts/vue_shared/components/rich_content_editor/editor_service.js

@@ -29,13 +29,13 @@ export const generateToolbarItem = config => {
   };
 };
 
-export const addCustomEventListener = (editorInstance, event, handler) => {
-  editorInstance.eventManager.addEventType(event);
-  editorInstance.eventManager.listen(event, handler);
+export const addCustomEventListener = (editorApi, event, handler) => {
+  editorApi.eventManager.addEventType(event);
+  editorApi.eventManager.listen(event, handler);
 };
 
-export const removeCustomEventListener = (editorInstance, event, handler) =>
-  editorInstance.eventManager.removeEventHandler(event, handler);
+export const removeCustomEventListener = (editorApi, event, handler) =>
+  editorApi.eventManager.removeEventHandler(event, handler);
 
 export const addImage = ({ editor }, image) => editor.exec('AddImage', image);
 

app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue

@@ -52,6 +52,12 @@ export default {
       default: EDITOR_PREVIEW_STYLE,
     },
   },
+  data() {
+    return {
+      editorApi: null,
+      previousMode: null,
+    };
+  },
   computed: {
     editorOptions() {
       return { ...EDITOR_OPTIONS, ...this.options };
@@ -60,23 +66,46 @@ export default {
       return this.$refs.editor;
     },
   },
+  watch: {
+    value(newVal) {
+      const isSameMode = this.previousMode === this.editorApi.currentMode;
+      if (!isSameMode) {
+        /*
+        The ToastUI Editor consumes its content via the `initial-value` prop and then internally
+        manages changes. If we desire the `v-model` to work as expected, we need to manually call
+        `setMarkdown`. However, if we do this in each v-model change we'll continually prevent
+        the editor from internally managing changes. Thus we use the `previousMode` flag as
+        confirmation to actually update its internals. This is initially designed so that front
+        matter is excluded from editing in wysiwyg mode, but included in markdown mode.
+        */
+        this.editorInstance.invoke('setMarkdown', newVal);
+        this.previousMode = this.editorApi.currentMode;
+      }
+    },
+  },
   beforeDestroy() {
     removeCustomEventListener(
-      this.editorInstance,
+      this.editorApi,
       CUSTOM_EVENTS.openAddImageModal,
       this.onOpenAddImageModal,
     );
+
+    this.editorApi.eventManager.removeEventHandler('changeMode', this.onChangeMode);
   },
   methods: {
     onContentChanged() {
       this.$emit('input', getMarkdown(this.editorInstance));
     },
-    onLoad(editorInstance) {
+    onLoad(editorApi) {
+      this.editorApi = editorApi;
+
       addCustomEventListener(
-        editorInstance,
+        this.editorApi,
         CUSTOM_EVENTS.openAddImageModal,
         this.onOpenAddImageModal,
       );
+
+      this.editorApi.eventManager.listen('changeMode', this.onChangeMode);
     },
     onOpenAddImageModal() {
       this.$refs.addImageModal.show();
@@ -84,6 +113,9 @@ export default {
     onAddImage(image) {
       addImage(this.editorInstance, image);
     },
+    onChangeMode(newMode) {
+      this.$emit('modeChange', newMode);
+    },
   },
 };
 </script>

changelogs/unreleased/216834-frontmatter-wysiwyg-removal.yml

+---
+title: Update Static Site Editor WYSIWYG mode to hide front matter
+merge_request: 33441
+author:
+type: added

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -7,12 +7,17 @@ import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue'
 import EditHeader from '~/static_site_editor/components/edit_header.vue';
 import UnsavedChangesConfirmDialog from '~/static_site_editor/components/unsaved_changes_confirm_dialog.vue';
 
-import { sourceContentTitle as title, sourceContent as content, returnUrl } from '../mock_data';
+import {
+  sourceContentTitle as title,
+  sourceContent as content,
+  sourceContentBody as body,
+  returnUrl,
+} from '../mock_data';
 
 describe('~/static_site_editor/components/edit_area.vue', () => {
   let wrapper;
   const savingChanges = true;
-  const newContent = `new ${content}`;
+  const newBody = `new ${body}`;
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(EditArea, {
@@ -46,7 +51,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   it('renders rich content editor', () => {
     expect(findRichContentEditor().exists()).toBe(true);
-    expect(findRichContentEditor().props('value')).toBe(content);
+    expect(findRichContentEditor().props('value')).toBe(body);
   });
 
   it('renders publish toolbar', () => {
@@ -65,7 +70,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
 
   describe('when content changes', () => {
     beforeEach(() => {
-      findRichContentEditor().vm.$emit('input', newContent);
+      findRichContentEditor().vm.$emit('input', newBody);
 
       return wrapper.vm.$nextTick();
     });
@@ -79,7 +84,7 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
     });
 
     it('sets publish toolbar as not saveable when content changes are rollback', () => {
-      findRichContentEditor().vm.$emit('input', content);
+      findRichContentEditor().vm.$emit('input', body);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findPublishToolbar().props('saveable')).toBe(false);

spec/frontend/static_site_editor/mock_data.js

-export const sourceContent = `
----
+export const sourceContentHeader = `---
 layout: handbook-page-toc
 title: Handbook
 twitter_image: '/images/tweets/handbook-gitlab.png'
----
-
-## On this page
+---`;
+export const sourceContentSpacing = `
+`;
+export const sourceContentBody = `## On this page
 {:.no_toc .hidden-md .hidden-lg}
 
 - TOC
 {:toc .hidden-md .hidden-lg}
 `;
+export const sourceContent = `${sourceContentHeader}${sourceContentSpacing}${sourceContentBody}`;
 export const sourceContentTitle = 'Handbook';
 
 export const username = 'gitlabuser';

spec/frontend/static_site_editor/services/parse_source_file_spec.js

+import {
+  sourceContent as content,
+  sourceContentHeader as header,
+  sourceContentSpacing as spacing,
+  sourceContentBody as body,
+} from '../mock_data';
+
+import parseSourceFile from '~/static_site_editor/services/parse_source_file';
+
+describe('parseSourceFile', () => {
+  const contentSimple = content;
+  const contentComplex = [content, content, content].join('');
+
+  describe('the editable shape and its expected values', () => {
+    it.each`
+      sourceContent     | sourceHeader | sourceSpacing | sourceBody                           | desc
+      ${contentSimple}  | ${header}    | ${spacing}    | ${body}                              | ${'extracts header'}
+      ${contentComplex} | ${header}    | ${spacing}    | ${[body, content, content].join('')} | ${'extracts body'}
+    `('$desc', ({ sourceContent, sourceHeader, sourceSpacing, sourceBody }) => {
+      const { editable } = parseSourceFile(sourceContent);
+
+      expect(editable).toMatchObject({
+        raw: sourceContent,
+        header: sourceHeader,
+        spacing: sourceSpacing,
+        body: sourceBody,
+      });
+    });
+
+    it('returns the same front matter regardless of front matter duplication', () => {
+      const parsedSourceSimple = parseSourceFile(contentSimple);
+      const parsedSourceComplex = parseSourceFile(contentComplex);
+
+      expect(parsedSourceSimple.editable.header).toBe(parsedSourceComplex.editable.header);
+    });
+  });
+
+  describe('editable body to raw content default and changes', () => {
+    it.each`
+      sourceContent     | desc
+      ${contentSimple}  | ${'returns false by default for both raw and body'}
+      ${contentComplex} | ${'returns false by default for both raw and body'}
+    `('$desc', ({ sourceContent }) => {
+      const parsedSource = parseSourceFile(sourceContent);
+
+      expect(parsedSource.isModifiedRaw()).toBe(false);
+      expect(parsedSource.isModifiedBody()).toBe(false);
+    });
+
+    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'}
+    `('$desc', ({ sourceContent, editableKey, syncKey, isModifiedKey }) => {
+      const parsedSource = parseSourceFile(sourceContent);
+      parsedSource.editable[editableKey] += 'Added content';
+      parsedSource[syncKey]();
+
+      expect(parsedSource[isModifiedKey]()).toBe(true);
+    });
+  });
+});

spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js

@@ -75,11 +75,11 @@ describe('Rich Content Editor', () => {
 
   describe('when editor is loaded', () => {
     it('adds the CUSTOM_EVENTS.openAddImageModal custom event listener', () => {
-      const mockInstance = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
-      findEditor().vm.$emit('load', mockInstance);
+      const mockEditorApi = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
+      findEditor().vm.$emit('load', mockEditorApi);
 
       expect(addCustomEventListener).toHaveBeenCalledWith(
-        mockInstance,
+        mockEditorApi,
         CUSTOM_EVENTS.openAddImageModal,
         wrapper.vm.onOpenAddImageModal,
       );
@@ -88,13 +88,13 @@ describe('Rich Content Editor', () => {
 
   describe('when editor is destroyed', () => {
     it('removes the CUSTOM_EVENTS.openAddImageModal custom event listener', () => {
-      const mockInstance = { eventManager: { removeEventHandler: jest.fn() } };
+      const mockEditorApi = { eventManager: { removeEventHandler: jest.fn() } };
 
-      wrapper.vm.$refs.editor = mockInstance;
+      wrapper.vm.editorApi = mockEditorApi;
       wrapper.vm.$destroy();
 
       expect(removeCustomEventListener).toHaveBeenCalledWith(
-        mockInstance,
+        mockEditorApi,
         CUSTOM_EVENTS.openAddImageModal,
         wrapper.vm.onOpenAddImageModal,
       );