feat(markdown-converter): add carbon classes option + fixes

Author: emerson-pereira

package.json

@@ -43,6 +43,7 @@
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.2",
     "browserslist-config-carbon": "^10.3.0",
+    "carbon-components": "^10.7.4",
     "cross-env": "^5.2.0",
     "doctoc": "^1.4.0",
     "enzyme-to-json": "^3.3.5",

packages/utilities/src/utilities/index.js

@@ -10,6 +10,6 @@ export * from './escaperegexp';
 export * from './featureflag';
 export * from './geolocation';
 export * from './ipcinfoCookie';
+export * from './markdownToHtml';
 export * from './serialize';
-export * from './markdownconverter';
 export * from './settings';

packages/utilities/src/utilities/markdownconverter/__tests__/markdownconverter.test.js packages/utilities/src/utilities/markdownToHtml/__tests__/markdownToHtml.js

@@ -1,25 +1,25 @@
-import { markdownConverter } from '../';
+import { markdownToHtml } from '../';
 
 describe('Markdown converter utility', () => {
   const str =
     'This <p>is</p> <input value="something" /> _italic_ and *italic*. <span>This</span> is **bold** and __bold__.';
 
   it('return the converted string with italic and bold', () => {
-    const output = markdownConverter(str);
+    const output = markdownToHtml(str);
     const expected =
       'This is <em>italic</em> and <em>italic</em>. This is <strong>bold</strong> and <strong>bold</strong>.';
     expect(output).toBe(expected);
   });
 
   it('return the converted string with italic', () => {
-    const output = markdownConverter(str, { italic: true });
+    const output = markdownToHtml(str, { italic: true });
     const expected =
       'This is <em>italic</em> and <em>italic</em>. This is **bold** and __bold__.';
     expect(output).toBe(expected);
   });
 
   it('return the converted string with bold', () => {
-    const output = markdownConverter(str, { bold: true });
+    const output = markdownToHtml(str, { bold: true });
     const expected =
       'This is _italic_ and *italic*. This is <strong>bold</strong> and <strong>bold</strong>.';
     expect(output).toBe(expected);

packages/utilities/src/utilities/markdownconverter/index.js packages/utilities/src/utilities/markdownToHtml/index.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as markdownConverter } from './markdownconverter';
+export { default as markdownToHtml } from './markdownToHtml';

packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js

@@ -0,0 +1,71 @@
+import { settings } from 'carbon-components';
+const { prefix } = settings;
+
+const _htmlTagRegex = /<.*?>/g;
+const _doubleSpaceRegex = /\s{2,}/g;
+const _italicRegex = /[_*](.*?)[_*]/g;
+const _boldRegex = /[_*]{2}(.*?)[_*]{2}/g;
+
+/**
+ * Removes any html tags from a string and keeps inner text if any
+ *
+ * @param {string} str String to be checked for html tags
+ * @returns {string} String with html tags stripped out
+ */
+const _removeHtmlTags = str => str.replace(_htmlTagRegex, '');
+
+/**
+ * Checks for double spaces between words in a string and replaces for single spaces
+ *
+ * @param {string} str String to be checked for double spaces
+ * @returns {string} String with html double spaces fixed
+ */
+const _fixDoubleSpaces = str => str.replace(_doubleSpaceRegex, ' ');
+
+/**
+ * Converts some markdown syntaxes into html
+ * It's not a full markdown-to-html converter
+ * It currently supports two syntaxes: Bold and Italic
+ * Bold: Double asterisk (**) or double underscore (__).
+ * Bold examples: **Lorem ipsum** __dolor__
+ * Italic: Single asterisk (*) or single underscore (_)
+ * Italic examples: _Lorem ipsum_ *dolor*
+ *
+ * @param {string} str String to convert to html
+ * @param {object} options Object with options for the conversion
+ * @param {boolean} options.italic Defines if should convert italic
+ * @param {boolean} options.bold Defines if should convert bold
+ * @param {boolean} options.useCarbonClasses If true uses carbon type classes otherwise uses sematic html tags.
+ * @returns {string} String converted to html
+ * @example
+ * import { markdownToHtml } from '@carbon/ibmdotcom-utilities';
+ *
+ * markdownToHtml('Lorem _ipsum_ __dolor__ *sit* **amet**.')
+ * // 'Lorem <em>ipsum</em> <strong>dolor</strong> <em>sit</em> <strong>amet</strong>.'
+ */
+function markdownToHtml(str, { italic, bold, useCarbonClasses } = {}) {
+  const isAllStyles = !italic && !bold;
+  let converted = _removeHtmlTags(str);
+
+  if (italic || isAllStyles) {
+    converted = converted.replace(_italicRegex, (match, p1) => {
+      if (!p1.length) {
+        return match;
+      }
+      return useCarbonClasses
+        ? `<span class="${prefix}--type-light">${p1}</span>`
+        : `<em>${p1}</em>`;
+    });
+  }
+  if (bold || isAllStyles) {
+    converted = converted.replace(_boldRegex, (match, p1) => {
+      return useCarbonClasses
+        ? `<span class="${prefix}--type-semibold">${p1}</span>`
+        : `<strong>${p1}</strong>`;
+    });
+  }
+
+  return _fixDoubleSpaces(converted);
+}
+
+export default markdownToHtml;