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

Fix formatting bugs in Static Site Editor

See merge request gitlab-org/gitlab!37964

app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js

@@ -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 {

app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer.js

@@ -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);

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_softbreak.js

+const canRender = node => ['emph', 'strong'].includes(node.parent?.type);
+const render = () => ({
+  type: 'text',
+  content: ' ',
+});
+
+export default { canRender, render };

changelogs/unreleased/fix-ordered-lists-single-marker-bug.yml

+---
+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

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

 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);
+      },
+    );
+  });
 });

spec/frontend/vue_shared/components/rich_content_editor/services/build_html_to_markdown_renderer_spec.js

@@ -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 }) => {

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_softbreak_spec.js

+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: ' ',
+      });
+    });
+  });
+});