Commit 673efa75 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch 'fix-ordered-lists-single-marker-bug' into 'master'

Fix formatting bugs in Static Site Editor

See merge request gitlab-org/gitlab!37964
parents d7400d4e 33a3e932
......@@ -5,12 +5,14 @@ import renderIdentifierInstanceText from './renderers/render_identifier_instance
import renderIdentifierParagraph from './renderers/render_identifier_paragraph';
import renderEmbeddedRubyText from './renderers/render_embedded_ruby_text';
import renderFontAwesomeHtmlInline from './renderers/render_font_awesome_html_inline';
import renderSoftbreak from './renderers/render_softbreak';
const htmlInlineRenderers = [renderFontAwesomeHtmlInline];
const htmlBlockRenderers = [renderBlockHtml];
const listRenderers = [renderKramdownList];
const paragraphRenderers = [renderIdentifierParagraph];
const textRenderers = [renderKramdownText, renderEmbeddedRubyText, renderIdentifierInstanceText];
const softbreakRenderers = [renderSoftbreak];
const executeRenderer = (renderers, node, context) => {
const availableRenderer = renderers.find(renderer => renderer.canRender(node, context));
......@@ -29,7 +31,14 @@ const buildCustomRendererFunctions = (customRenderers, defaults) => {
};
const buildCustomHTMLRenderer = (
customRenderers = { htmlBlock: [], htmlInline: [], list: [], paragraph: [], text: [] },
customRenderers = {
htmlBlock: [],
htmlInline: [],
list: [],
paragraph: [],
text: [],
softbreak: [],
},
) => {
const defaults = {
htmlBlock(node, context) {
......@@ -57,6 +66,11 @@ const buildCustomHTMLRenderer = (
return executeRenderer(allTextRenderers, node, context);
},
softbreak(node, context) {
const allSoftbreakRenderers = [...customRenderers.softbreak, ...softbreakRenderers];
return executeRenderer(allSoftbreakRenderers, node, context);
},
};
return {
......
......@@ -69,7 +69,7 @@ const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) =>
[orderedListItemNode](node, subContent) {
const baseResult = baseRenderer.convert(node, subContent);
return incrementListMarker ? baseResult : baseResult.replace(/^(\s*)\d\./, '$11.');
return incrementListMarker ? baseResult : baseResult.replace(/^(\s*)\d+?\./, '$11.');
},
[emphasisNode](node, subContent) {
const result = baseRenderer.convert(node, subContent);
......
const canRender = node => ['emph', 'strong'].includes(node.parent?.type);
const render = () => ({
type: 'text',
content: ' ',
});
export default { canRender, render };
---
title: 'Static Site Editor: Fix ordered list formatting bug and rendering bug in strong
and emphasis nodes with softbreaks'
merge_request: 37964
author:
type: fixed
import Editor from '@toast-ui/editor';
import { registerHTMLToMarkdownRenderer } from '~/vue_shared/components/rich_content_editor/services/editor_service';
import buildMarkdownToHTMLRenderer from '~/vue_shared/components/rich_content_editor/services/build_custom_renderer';
describe('vue_shared/components/rich_content_editor', () => {
let editor;
......@@ -7,6 +8,7 @@ describe('vue_shared/components/rich_content_editor', () => {
const buildEditor = () => {
editor = new Editor({
el: document.body,
customHTMLRenderer: buildMarkdownToHTMLRenderer(),
});
registerHTMLToMarkdownRenderer(editor);
......@@ -49,4 +51,19 @@ describe('vue_shared/components/rich_content_editor', () => {
expect(markdown).toBe('**strong text**_emphasis text_');
});
});
describe('Markdown to HTML', () => {
it.each`
input | output
${'markdown with _emphasized\ntext_'} | ${'<p>markdown with <em>emphasized text</em></p>\n'}
${'markdown with **strong\ntext**'} | ${'<p>markdown with <strong>strong text</strong></p>\n'}
`(
'does not transform softbreaks inside (_) and strong (**) nodes into <br/> tags',
({ input, output }) => {
editor.setMarkdown(input);
expect(editor.getHtml()).toBe(output);
},
);
});
});
......@@ -70,10 +70,11 @@ describe('HTMLToMarkdownRenderer', () => {
describe('OL LI visitor', () => {
it.each`
listItem | result | incrementListMarker | action
${'2. list item'} | ${'1. list item'} | ${false} | ${'increments'}
${' 3. list item'} | ${' 1. list item'} | ${false} | ${'increments'}
${'3. list item'} | ${'3. list item'} | ${true} | ${'does not increment'}
listItem | result | incrementListMarker | action
${'2. list item'} | ${'1. list item'} | ${false} | ${'increments'}
${' 3. list item'} | ${' 1. list item'} | ${false} | ${'increments'}
${' 123. list item'} | ${' 1. list item'} | ${false} | ${'increments'}
${'3. list item'} | ${'3. list item'} | ${true} | ${'does not increment'}
`(
'$action a list item counter when incrementListMaker is $incrementListMarker',
({ listItem, result, incrementListMarker }) => {
......
import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_softbreak';
describe('Render softbreak renderer', () => {
describe('canRender', () => {
it.each`
node | parentType | result
${{ parent: { type: 'emph' } }} | ${'emph'} | ${true}
${{ parent: { type: 'strong' } }} | ${'strong'} | ${true}
${{ parent: { type: 'paragraph' } }} | ${'paragraph'} | ${false}
`('returns $result when node parent type is $parentType ', ({ node, result }) => {
expect(renderer.canRender(node)).toBe(result);
});
});
describe('render', () => {
it('returns text node with a break line', () => {
expect(renderer.render()).toEqual({
type: 'text',
content: ' ',
});
});
});
});
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