Remove softbreaks for inline formatting nodes

This commit detects softbreaks inside inline
formatting nodes like _ and ** and removes them.
The purpose of this change is preventing a bug
that breaks formatting nodes when the content
inside those nodes contain a softbreak

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/renderers/render_softbreak.js

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

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