Whatsapp markdown #SER-2297 (#2516)

<!-- _Set as [Draft
PR](https://github.blog/2019-02-14-introducing-draft-pull-requests/) if
it's not ready to be merged_.

[PR best practices
Reference](https://blog.codeminer42.com/on-writing-a-great-pull-request-37c60ce6f31d/)
-->

## Description
- add a function to apply whatsapp markdown
- use this function within the multichannel to apply the default
markdown in case the provider is WhatsApp
<!--
- Must be clear and concise (2-3 lines).
- Don't make reviewers think. The description should explain what has
been implemented or what it's used for. If a pull request is not
descriptive, people will be lazy or not willing to spend much time on
it.
- Be explicit with the names (don't abbreviate and don't use acronyms
that can lead to misleading understanding).
- If you consider it appropriate, include the steps to try the new
features.
-->

## Context

<!--
- What problem is trying to solve this pull request?
- What are the reasons or business goals of this implementation?
- Can I provide visual resources or links to understand better the
situation?
-->

## Approach taken / Explain the design
This function will apply bold when text is placed between `**text**` or
`__text__`
This function will apply italics when text is enclosed in `*text*` or
`_text_`
This function will apply bold and italics when text is placed between
`**_text_**`
For the option `__*text*__` I first normalise to `**_text_**` 
<!--
- Explain what the code does.
- If it's a complex solution, try to provide a sketch.
-->

## To document / Usage example

<!--
- How this is used?
- If possible, provide a snippet of code with a usage example.
-->

## Testing

The pull request...

- has unit tests
- has integration tests
- doesn't need tests because... **[provide a description]**

packages/botonic-react/src/components/multichannel/multichannel-carousel.jsx

@@ -47,7 +47,7 @@ export const MultichannelCarousel = props => {
 
         let header = ''
         if (props.showTitle && title) {
-          header += `${title ? `*${title}*` : ''}`
+          header += `${title ? `**${title}**` : ''}`
           if (title && subtitle) {
             header += ' '
           }

packages/botonic-react/src/components/multichannel/multichannel-text.jsx

@@ -19,6 +19,7 @@ import {
   MULTICHANNEL_WHATSAPP_PROPS,
   WHATSAPP_MAX_BUTTONS,
 } from './multichannel-utils'
+import { whatsappMarkdown } from './whatsapp/markdown'
 
 export const MultichannelText = props => {
   const requestContext = useContext(RequestContext)
@@ -108,7 +109,8 @@ export const MultichannelText = props => {
     const { postbackButtons, urlButtons, webviewButtons } = getWhatsappButtons()
 
     const textElements = texts.map(text => {
-      return (props.newline || '') + text
+      const textWithMarkdown = whatsappMarkdown(text)
+      return (props.newline || '') + textWithMarkdown
     })
 
     const webviewButtonElements = webviewButtons.map(

packages/botonic-react/src/components/multichannel/multichannel.jsx

@@ -17,7 +17,6 @@ import {
 
 export const Multichannel = props => {
   const requestContext = useContext(RequestContext)
-
   if (!isWhatsapp(requestContext) && !isFacebook(requestContext)) {
     return props.children
   }

packages/botonic-react/src/components/multichannel/whatsapp/markdown.ts

@@ -0,0 +1,88 @@
+const MARKDOWN_BOLD_OPTION_1 = '**'
+const MARKDOWN_BOLD_OPTION_2 = '__'
+const MARKDOWN_WHATSAPP_BOLD = '*'
+
+const MARKDOWN_ITALIC_OPTION_1 = '*'
+const MARKDOWN_WHATSAPP_ITALIC = '_'
+
+const MARKDOWN_BOLD_OR_ITALIC_REGEX = /(\*\*|__)(.*?)\1|(\*|_)(.*?)\3/g
+
+const MARKDOWN_NORMALIZED_BOLD_ITALIC_OPEN = '**_'
+const MARKDOWN_NORMALIZED_BOLD_ITALIC_CLOSE = '_**'
+
+const MARKDOWN_BOLD_AND_ITALIC_OPTION1 = /(_\*\*)(.*?)(\*\*_)/g
+const MARKDOWN_BOLD_AND_ITALIC_OPTION2 = /(\*__)(.*?)(__\*)/g
+const MARKDOWN_BOLD_AND_ITALIC_OPTION3 = /(__\*)(.*?)(\*__)/g
+
+export function whatsappMarkdown(text: string) {
+  const textNormalized = normalizeMarkdown(text)
+  const matches = textNormalized.match(MARKDOWN_BOLD_OR_ITALIC_REGEX)
+  if (matches) {
+    const matchesResult = matches.map(match => {
+      if (match.startsWith(MARKDOWN_BOLD_OPTION_1)) {
+        return replaceAllOccurrences(
+          match,
+          MARKDOWN_BOLD_OPTION_1,
+          MARKDOWN_WHATSAPP_BOLD
+        )
+      }
+      if (match.startsWith(MARKDOWN_BOLD_OPTION_2)) {
+        return replaceAllOccurrences(
+          match,
+          MARKDOWN_BOLD_OPTION_2,
+          MARKDOWN_WHATSAPP_BOLD
+        )
+      }
+      if (match.startsWith(MARKDOWN_ITALIC_OPTION_1)) {
+        return replaceAllOccurrences(
+          match,
+          MARKDOWN_ITALIC_OPTION_1,
+          MARKDOWN_WHATSAPP_ITALIC
+        )
+      }
+      return match
+    })
+    let textWhatsapp = textNormalized
+    for (let i = 0; i < matches.length; i++) {
+      textWhatsapp = replaceAllOccurrences(
+        textWhatsapp,
+        matches[i],
+        matchesResult[i]
+      )
+    }
+    return textWhatsapp
+  }
+  return text
+}
+
+function normalizeMarkdown(text: string) {
+  text = replaceBoldItalic(text, MARKDOWN_BOLD_AND_ITALIC_OPTION1)
+  text = replaceBoldItalic(text, MARKDOWN_BOLD_AND_ITALIC_OPTION2)
+  text = replaceBoldItalic(text, MARKDOWN_BOLD_AND_ITALIC_OPTION3)
+  return text
+}
+
+function replaceBoldItalic(text: string, regex: RegExp) {
+  return text.replace(
+    regex,
+    (
+      match: string,
+      markdownOpen: string,
+      textInsideMarkdown: string,
+      markdownClose: string
+    ) => {
+      if (match.startsWith(markdownOpen) && match.endsWith(markdownClose)) {
+        return `${MARKDOWN_NORMALIZED_BOLD_ITALIC_OPEN}${textInsideMarkdown}${MARKDOWN_NORMALIZED_BOLD_ITALIC_CLOSE}`
+      }
+      return match
+    }
+  )
+}
+
+function replaceAllOccurrences(
+  text: string,
+  searchValue: string,
+  replaceValue: string
+) {
+  return text.split(searchValue).join(replaceValue)
+}

packages/botonic-react/tsconfig.esm.json

@@ -5,7 +5,7 @@
     "baseUrl": ".",
     "outDir": "./lib/esm",
     "target": "ES2017",
-    "module": "ES2020",
+    "module": "ES2022",
     "skipLibCheck": true
   }
 }

packages/botonic-react/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "moduleResolution": "nodenext",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "lib": ["ES2021.String"]
   }
 }