Commit 4ffda71a authored by Derek Knox's avatar Derek Knox Committed by Nicolò Maria Mezzopera

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
parent 53eebcfb
......@@ -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(),
});
},
......
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;
---
title: Remove extraneous `<br>` tags from the source file when using the Static Site Editor
merge_request: 37223
author:
type: changed
......@@ -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);
buildResetInitialValue();
const resetInitialValue = jest.fn();
findRichContentEditor().setMethods({ resetInitialValue });
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);
});
});
});
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);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment