feat(markdownToHTML): adds full markdown support (#2715)

* feat(markdownToHTML): add full markdown syntax support

Author: kennylam

.yarn/offline-mirror/dompurify-2.0.11.tgz

@@ -166,7 +166,14 @@ const LocaleModalCountries = ({
  * @type {{regionList: Array, availabilityText: string, unavailabilityText: string, placeHolderText: string, labelText: string}}
  */
 LocaleModalCountries.propTypes = {
+  /**
+   * Array of regions, countries, and languages.
+   */
   regionList: PropTypes.array,
+
+  /**
+   * Func to clear search input.
+   */
   setClearResults: PropTypes.func,
 };
 

.yarn/offline-mirror/marked-1.1.0.tgz

@@ -61,7 +61,7 @@ export default {
           ),
           copy: text(
             'copy',
-            'Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.\n      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales\n      nulla quis, *consequat* libero. Here are\n      some common categories:\n\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.\n\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
+            'Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.\n      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales\n      nulla quis, *consequat* libero. Here are\n      some common categories:',
             groupId
           ),
         };

packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

@@ -122,9 +122,7 @@ Default.story = {
         const defaultItems = [
           {
             heading: 'Lorem ipsum dolor sit amet.',
-            copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
+            copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
             cta: {
               type: 'local',
               copy: 'Lorem Ipsum dolor sit',
@@ -134,9 +132,7 @@ Default.story = {
           {
             heading: 'Lorem ipsum dolor sit amet.',
             image,
-            copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
+            copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
             cta: {
               type: 'local',
               copy: 'Lorem Ipsum dolor sit',
@@ -189,14 +185,14 @@ WithAsideElements.story = {
             heading: 'Lorem ipsum dolor sit amet.',
             copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
 
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
           },
           {
             heading: 'Lorem ipsum dolor sit amet.',
             image,
             copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
 
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
           },
         ];
 

packages/react/src/components/LocaleModal/LocaleModalCountries.js

@@ -59,9 +59,14 @@ const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean
   nulla quis, *consequat* libero. Here are
   some common categories:
 
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+
+  - [list item](https://www.ibm.com)
+    1. list item 1a
+  1. list item 2
+    - list item 2a
 `;
 
 /**

packages/react/src/patterns/blocks/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js

@@ -11,6 +11,21 @@
  * type {{}}
  */
 
+const copyWithList = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
+Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
+nulla quis, *consequat* libero. Here are
+some common categories:
+
+Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
+
+- [list item link](https://www.ibm.com)
+  1. list item 1a
+  2. list item 2a
+    - list item 2a.a
+1. list item 2
+  - list item 2a
+`;
+
 const ContentGroupSimpleKnobs = {
   heading: 'Lorem ipsum dolor sit amet',
   copy:
@@ -52,7 +67,11 @@ const ContentGroupSimpleKnobs = {
     {
       heading: 'Lorem ipsum dolor sit amet.',
       copy:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
+        'Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
+    },
+    {
+      heading: 'Lorem ipsum dolor sit amet.',
+      copy: copyWithList,
     },
     {
       heading: 'Lorem ipsum dolor sit amet.',

packages/react/src/patterns/blocks/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js

@@ -15,10 +15,8 @@ const types = ['local', 'external', 'default'];
 const contentItemsProps = [
   {
     heading: 'Get connected',
-    copy: `
-          IBM DevOps partners have a wide range of expertise.
-          Find one to build the right solution for you.
-          `,
+    copy:
+      'IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.',
     cta: {
       copy: 'Find a partner',
       type: types[0],

packages/react/src/patterns/blocks/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import '../../globals/imports';
+@import '../../temp-carbon-expressive/temp-carbon-expressive';
+@import 'carbon-components/scss/components/list/list';
+
+@mixin list {
+  .#{$prefix}--list--ordered,
+  .#{$prefix}--list--unordered {
+    @include carbon--type-style('body-long-02');
+  }
+
+  .#{$prefix}--list--ordered {
+    margin-left: 1rem;
+
+    &:not(.#{$prefix}--list--nested) {
+      > .#{$prefix}--list__item {
+        &::before {
+          left: -1rem;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--list--unordered {
+    margin-left: 1rem;
+
+    .#{$prefix}--list__item {
+      &::before {
+        left: -1rem;
+      }
+    }
+  }
+
+  .#{$prefix}--list__item {
+    margin-top: 0.25rem;
+  }
+}
+
+@include exports('list') {
+  @include list;
+}

packages/react/src/patterns/blocks/ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs.js

@@ -7,6 +7,7 @@
 
 @import '../../globals/imports';
 @import '../../globals/utils/content-width';
+@import '../../components/list/list';
 
 @mixin content-item {
   .#{$prefix}--content-item--inverse {

packages/react/src/patterns/sections/CTASection/__stories__/CTASection.stories.js

@@ -61,11 +61,13 @@
     "cli-table": "^0.3.0",
     "core-js": "^3.1.3",
     "cross-env": "^5.2.0",
+    "dompurify": "2.0.11",
     "fetch-mock": "^7.3.6",
     "gzip-size": "^5.0.0",
     "jest": "24.0.0",
     "jest-circus": "24.0.0",
     "jsdoc": "^3.6.2",
+    "marked": "^1.1.0",
     "object-assign": "^4.1.1",
     "promise": "^8.0.1",
     "rimraf": "^2.6.3",

packages/styles/scss/components/list/_list.scss

@@ -6,48 +6,46 @@
  */
 
 import { markdownToHtml } from '../';
-import { settings } from 'carbon-components';
+import settings from 'carbon-components/es/globals/js/settings';
 
 const { prefix } = settings;
 
 describe('Markdown converter utility', () => {
   const str =
     'This <p>is</p> <input value="something" /> _italic_ and **bold**.';
-
-  const strNewLine =
-    'This paragraph is created when two new lines are detected.';
+  const link = '[This](https://www.ibm.com) is an anchor link.';
+  const ol = `
+1. list item 1
+2. list item 2
+3. list item 3
+  `;
+  const ul = `
+- list item 1
+- list item 2
+- list item 3
+  `;
 
   it('returns the converted string with italic and bold', () => {
     const output = markdownToHtml(str);
-    const expected = `<p>This is <em class="${prefix}--type-light">italic</em> and <strong class="${prefix}--type-semibold">bold</strong>.</p>`;
-    expect(output).toBe(expected);
-  });
-
-  it('returns the converted string with italic', () => {
-    const output = markdownToHtml(str, { bold: false });
-    const expected = `<p>This is <em class="${prefix}--type-light">italic</em> and **bold**.</p>`;
-    expect(output).toBe(expected);
+    const expected = `<p>This is <em>italic</em> and <strong>bold</strong>.</p>`;
+    expect(output.trim()).toBe(expected);
   });
 
-  it('returns the converted string with bold', () => {
-    const output = markdownToHtml(str, { italic: false });
-    const expected = `<p>This is _italic_ and <strong class="${prefix}--type-semibold">bold</strong>.</p>`;
-    expect(output).toBe(expected);
+  it('returns the converted string with link', () => {
+    const output = markdownToHtml(link);
+    const expected = `<p><a href="https://www.ibm.com" class="${prefix}--link">This</a> is an anchor link.</p>`;
+    expect(output.trim()).toBe(expected);
   });
 
-  it('returns the converted string in paragraphs', () => {
-    const output = markdownToHtml(strNewLine, { bold: false, italic: false });
-    const expected = `<p>This paragraph is created when two new lines are detected.</p>`;
+  it('returns the converted string with an ordered list', () => {
+    const output = markdownToHtml(ol);
+    const expected = `<ol class="${prefix}--list--ordered"><li class="${prefix}--list__item">list item 1</li><li class="${prefix}--list__item">list item 2</li><li class="${prefix}--list__item">list item 3</li></ol>`;
     expect(output).toBe(expected);
   });
 
-  it('returns the converted string without carbon classes and allowing html', () => {
-    const output = markdownToHtml(str, {
-      allowHtml: true,
-      useCarbonClasses: false,
-    });
-    const expected =
-      '<p>This <p>is</p> <input value="something" /> <em>italic</em> and <strong>bold</strong>.</p>';
+  it('returns the converted string with an unordered list', () => {
+    const output = markdownToHtml(ul);
+    const expected = `<ul class="${prefix}--list--unordered"><li class="${prefix}--list__item">list item 1</li><li class="${prefix}--list__item">list item 2</li><li class="${prefix}--list__item">list item 3</li></ul>`;
     expect(output).toBe(expected);
   });
 });

packages/styles/scss/internal/content-item/_content-item.scss

@@ -5,14 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import DOMPurify from 'dompurify';
+import marked from 'marked';
 import settings from 'carbon-components/es/globals/js/settings';
 const { prefix } = settings;
 
 const _htmlTagRegex = /<.*?>/g;
 const _cleanStringRegex = /\n|\s{2,}|&([a-zA-Z]+);/g;
-const _italicRegex = /[_*](.*?)[_*]/g;
-const _boldRegex = /[_*]{2}(.*?)[_*]{2}/g;
-const _paraRegex = /\n\n/g;
 
 /**
  * Removes any html tags from a string and keeps inner text if any
@@ -34,75 +33,47 @@ const _removeHtmlTags = str => str.replace(_htmlTagRegex, '');
 const _cleanString = str => str.replace(_cleanStringRegex, ' ');
 
 /**
- * Converts some markdown syntaxes into html
- * It's not a full markdown-to-html converter
- * It currently supports three syntaxes: <strong>Bold</strong>, <em>Italic</em>, and <p>Paragraph</p>
- *
- * Bold: Double asterisk (**) or double underscore (__)
- * Bold examples: **Lorem ipsum** __dolor__
- * Italic: Single asterisk (*) or single underscore (_)
- * Italic examples: _Lorem ipsum_ *dolor*
- * Paragraph: Double new line per paragraph
- * Paragraph examples: This is paragraph one.\n\nThis is paragraph two.
+ * Converts markdown syntaxes into html
  *
  * @param {string} str String to convert to html
  * @param {object} [options={}] Object with options for the conversion
- * @param {boolean} [options.italic=true] Defines if should convert italic
- * @param {boolean} [options.bold=true] Defines if should convert bold
- * @param {boolean} [options.useCarbonClasses=true] Defines if should use carbon typography classes
  * @param {boolean} [options.allowHtml=false] Defines if should allow or remove html tags
- * @param {boolean} [options.cleanString=false] Defines if string should be cleaned of multiple spaces, html entities, or single new lines
- * @param {boolean} [options.createParagraphs=true] Defines if paragraphs should be rendered wrapped in <p> tags
  * @returns {string} String converted to html
  * @example
  * import { markdownToHtml } from '@carbon/ibmdotcom-utilities';
  *
  * markdownToHtml('Lorem *ipsum* dolor __sit__.')
  * // 'Lorem <em class="bx--type-light">ipsum</em> dolor <strong class="bx--type-semibold">sit</strong>.'
  */
-function markdownToHtml(
-  str,
-  {
-    italic = true,
-    bold = true,
-    useCarbonClasses = true,
-    allowHtml = false,
-    cleanString = false,
-    createParagraphs = true,
-  } = {}
-) {
-  let paraList = '';
+function markdownToHtml(str, { allowHtml = false } = {}) {
   let converted = allowHtml ? str : _removeHtmlTags(str);
-  converted = cleanString ? _cleanString(converted) : converted;
-  const paras = converted.split(_paraRegex);
 
-  paras.map(para => {
-    if (italic) {
-      para = _cleanString(para).replace(_italicRegex, (match, p1) => {
-        if (!p1.length) {
-          return match;
-        }
-        return useCarbonClasses
-          ? `<em class="${prefix}--type-light">${p1}</em>`
-          : `<em>${p1}</em>`;
-      });
-    }
+  /**
+   * Custom rendering options to add Carbon styles
+   *
+   */
+  const renderer = {
+    link(href, title, text) {
+      const linkTitle = title ? `title="${title}"` : null;
+      return `<a class="${prefix}--link" href="${href}" ${linkTitle}>${text}</a>`;
+    },
+    list(body, ordered) {
+      const listType = ordered ? 'ol' : 'ul';
+      const listClass = ordered
+        ? `${prefix}--list--ordered`
+        : `${prefix}--list--unordered`;
 
-    if (bold) {
-      para = _cleanString(para).replace(_boldRegex, (match, p1) => {
-        if (!p1.length) {
-          return match;
-        }
-        return useCarbonClasses
-          ? `<strong class="${prefix}--type-semibold">${p1}</strong>`
-          : `<strong>${p1}</strong>`;
-      });
-    }
+      return `<${listType} class="${listClass}">${body}</${listType}>`;
+    },
+    listitem(text) {
+      return `<li class="${prefix}--list__item">${text}</li>`;
+    },
+  };
 
-    paraList += createParagraphs ? `<p>${para}</p>` : para;
-  });
+  marked.use({ renderer });
+  const convertedMarkdown = DOMPurify.sanitize(marked(converted));
 
-  return paraList;
+  return _cleanString(convertedMarkdown);
 }
 
 export default markdownToHtml;