Remove extraneous br tags via formatter

Added an optional formatter to the
rich_content_editor so that SSE and
other users can define additional
formatting options

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

@@ -7,6 +7,7 @@ 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';
 export default {
   components: {
@@ -64,14 +65,16 @@ export default {
     },
     onModeChange(mode) {
       this.editorMode = mode;
-      this.$refs.editor.resetInitialValue(this.editableContent);
+      const formattedContent = formatter(this.editableContent);
+      this.$refs.editor.resetInitialValue(formattedContent);
     },
     onUploadImage({ file, imageUrl }) {
       this.$options.imageRepository.add(file, imageUrl);
     },
     onSubmit() {
+      const formattedContent = formatter(this.parsedSource.content());
       this.$emit('submit', {
-        content: this.parsedSource.content(),
+        content: formattedContent,
         images: this.$options.imageRepository.getAll(),
       });
     },

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

+const removeOrphanedBrTags = source => {
+  /* Until the underlying Squire editor of Toast UI Editor resolves duplicate `<br>` tags, this
+    `replace` solution will clear out orphaned `<br>` tags that it generates. Additionally,
+    it cleans up orphaned `<br>` tags in the source markdown document that should be new lines.
+    https://gitlab.com/gitlab-org/gitlab/-/issues/227602#note_380765330
+  */
+  return source.replace(/\n^<br>$/gm, '');
+};
+
+const format = source => {
+  return removeOrphanedBrTags(source);
+};
+
+export default format;

changelogs/unreleased/37223-remove-extraneous-br-tags-from-sse.yml

+---
+title: Remove extraneous `<br>` tags from the source file when using the Static Site Editor
+merge_request: 37223
+author:
+type: changed

spec/frontend/static_site_editor/components/edit_area_spec.js

@@ -15,8 +15,11 @@ import {
   returnUrl,
 } from '../mock_data';
+jest.mock('~/static_site_editor/services/formatter', () => jest.fn(str => `${str} formatted`));
+
 describe('~/static_site_editor/components/edit_area.vue', () => {
   let wrapper;
+  const formattedContent = `${content} formatted`;
   const savingChanges = true;
   const newBody = `new ${body}`;
@@ -103,31 +106,53 @@ describe('~/static_site_editor/components/edit_area.vue', () => {
   });
   describe('when the mode changes', () => {
+    let resetInitialValue;
+
     const setInitialMode = mode => {
       wrapper.setData({ editorMode: mode });
     };
+    const buildResetInitialValue = () => {
+      resetInitialValue = jest.fn();
+      findRichContentEditor().setMethods({ resetInitialValue });
+    };
+
     afterEach(() => {
       setInitialMode(EDITOR_TYPES.wysiwyg);
+      resetInitialValue = null;
     });
     it.each`
       initialMode              | targetMode               | resetValue
-      ${EDITOR_TYPES.wysiwyg}  | ${EDITOR_TYPES.markdown} | ${content}
-      ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}  | ${body}
+      ${EDITOR_TYPES.wysiwyg}  | ${EDITOR_TYPES.markdown} | ${formattedContent}
+      ${EDITOR_TYPES.markdown} | ${EDITOR_TYPES.wysiwyg}  | ${`${body} formatted`}
     `(
       'sets editorMode from $initialMode to $targetMode',
       ({ initialMode, targetMode, resetValue }) => {
         setInitialMode(initialMode);
-        const resetInitialValue = jest.fn();
-
-        findRichContentEditor().setMethods({ resetInitialValue });
+        buildResetInitialValue();
         findRichContentEditor().vm.$emit('modeChange', targetMode);
         expect(resetInitialValue).toHaveBeenCalledWith(resetValue);
         expect(wrapper.vm.editorMode).toBe(targetMode);
       },
     );
+
+    it('should format the content', () => {
+      buildResetInitialValue();
+
+      findRichContentEditor().vm.$emit('modeChange', EDITOR_TYPES.markdown);
+
+      expect(resetInitialValue).toHaveBeenCalledWith(formattedContent);
+    });
+  });
+
+  describe('when content is submitted', () => {
+    it('should format the content', () => {
+      findPublishToolbar().vm.$emit('submit', content);
+
+      expect(wrapper.emitted('submit')[0][0].content).toBe(formattedContent);
+    });
   });
 });

spec/frontend/static_site_editor/services/formatter_spec.js

+import formatter from '~/static_site_editor/services/formatter';
+
+describe('formatter', () => {
+  const source = `Some text
+<br>
+
+And some more text
+
+
+<br>
+
+
+And even more text`;
+  const sourceWithoutBrTags = `Some text
+
+And some more text
+
+
+
+
+And even more text`;
+
+  it('removes extraneous <br> tags', () => {
+    expect(formatter(source)).toMatch(sourceWithoutBrTags);
+  });
+});