Make emphasis and strong syntax configurable

Allow to configure which syntax is used in the
Static Site Editor to make text bold or emphasized

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

@@ -4,6 +4,8 @@ import { defaults, repeat } from 'lodash';
 const DEFAULTS = {
   subListIndentSpaces: 4,
   unorderedListBulletChar: '-',
+  strong: '*',
+  emphasis: '_',
 };
 
 const countIndentSpaces = text => {
@@ -13,12 +15,14 @@ const countIndentSpaces = text => {
 };
 
 const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) => {
-  const { subListIndentSpaces, unorderedListBulletChar } = defaults(
+  const { subListIndentSpaces, unorderedListBulletChar, strong, emphasis } = defaults(
     formattingPreferences,
     DEFAULTS,
   );
   const sublistNode = 'LI OL, LI UL';
   const unorderedListItemNode = 'UL LI';
+  const emphasisNode = 'EM, I';
+  const strongNode = 'STRONG, B';
 
   return {
     TEXT_NODE(node) {
@@ -57,6 +61,17 @@ const buildHTMLToMarkdownRender = (baseRenderer, formattingPreferences = {}) =>
 
       return baseResult.replace(/^(\s*)([*|-])/, `$1${unorderedListBulletChar}`);
     },
+    [emphasisNode](node, subContent) {
+      const result = baseRenderer.convert(node, subContent);
+
+      return result.replace(/(^[*_]{1}|[*_]{1}$)/g, emphasis);
+    },
+    [strongNode](node, subContent) {
+      const result = baseRenderer.convert(node, subContent);
+      const strongSyntax = repeat(strong, 2);
+
+      return result.replace(/^[*_]{2}/, strongSyntax).replace(/[*_]{2}$/, strongSyntax);
+    },
   };
 };
 

changelogs/unreleased/227856-configure-emphasis-syntax.yml

+---
+title: Use _ character for emphasis and * for strong in Static Site Editor markdown syntax
+merge_request: 36965
+author:
+type: added

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

@@ -67,4 +67,44 @@ describe('HTMLToMarkdownRenderer', () => {
       },
     );
   });
+
+  describe('STRONG, B visitor', () => {
+    it.each`
+      input                | strongCharacter | result
+      ${'**strong text**'} | ${'_'}          | ${'__strong text__'}
+      ${'__strong text__'} | ${'*'}          | ${'**strong text**'}
+    `(
+      'converts $input to $result when strong character is $strongCharacter',
+      ({ input, strongCharacter, result }) => {
+        htmlToMarkdownRenderer = buildHTMLToMarkdownRenderer(baseRenderer, {
+          strong: strongCharacter,
+        });
+
+        baseRenderer.convert.mockReturnValueOnce(input);
+
+        expect(htmlToMarkdownRenderer['STRONG, B'](NODE, input)).toBe(result);
+        expect(baseRenderer.convert).toHaveBeenCalledWith(NODE, input);
+      },
+    );
+  });
+
+  describe('EM, I visitor', () => {
+    it.each`
+      input              | emphasisCharacter | result
+      ${'*strong text*'} | ${'_'}            | ${'_strong text_'}
+      ${'_strong text_'} | ${'*'}            | ${'*strong text*'}
+    `(
+      'converts $input to $result when emphasis character is $emphasisCharacter',
+      ({ input, emphasisCharacter, result }) => {
+        htmlToMarkdownRenderer = buildHTMLToMarkdownRenderer(baseRenderer, {
+          emphasis: emphasisCharacter,
+        });
+
+        baseRenderer.convert.mockReturnValueOnce(input);
+
+        expect(htmlToMarkdownRenderer['EM, I'](NODE, input)).toBe(result);
+        expect(baseRenderer.convert).toHaveBeenCalledWith(NODE, input);
+      },
+    );
+  });
 });