Markdown Conversion Option One (#205)

* error coming from package?

* issue identified

* error persists

* remove extra spacing

* removing from main package.json

Author: MidnightCoder06

packages/dev/docs/package.json

@@ -20,6 +20,7 @@
     "globals-docs": "^2.4.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-lowlight": "^2.0.0"
+    "react-lowlight": "^2.0.0",
+    "markdown-to-jsx": "^6.11.0"
   }
 }

packages/dev/docs/src/types.js

@@ -1,6 +1,7 @@
 import Asterisk from '@spectrum-icons/workflow/Asterisk';
 import {getDoc} from 'globals-docs';
 import Lowlight from 'react-lowlight';
+import Markdown from 'markdown-to-jsx';
 import React, {useContext} from 'react';
 import styles from './docs.css';
 import tableStyles from '@adobe/spectrum-css-temp/components/table/vars.css';
@@ -190,6 +191,14 @@ function LinkType({id}) {
   return <a href={'#' + id} data-link={id} className={`${styles.colorLink} token hljs-name`}>{value.name}</a>;
 }
 
+function renderHTMLfromMarkdown(description) {
+  if (description) {
+    return <Markdown>{description}</Markdown>;
+  } else {
+    return '';
+  }
+}
+
 export function InterfaceType({properties, showRequired, showDefault}) {
   return (
     <table className={`${tableStyles['spectrum-Table']} ${tableStyles['spectrum-Table--quiet']} ${styles.propTable}`}>
@@ -209,7 +218,7 @@ export function InterfaceType({properties, showRequired, showDefault}) {
                 <span className="token hljs-attr">{prop.name}</span>
               </code>
               {!prop.optional && showRequired
-                ? <Asterisk size="XXS" UNSAFE_className={styles.requiredIcon} alt="Required" /> 
+                ? <Asterisk size="XXS" UNSAFE_className={styles.requiredIcon} alt="Required" />
                 : null
               }
             </td>
@@ -226,7 +235,7 @@ export function InterfaceType({properties, showRequired, showDefault}) {
                 }
               </td>
             }
-            <td className={tableStyles['spectrum-Table-cell']}>{prop.description}</td>
+            <td className={tableStyles['spectrum-Table-cell']}>{renderHTMLfromMarkdown(prop.description)}</td>
           </tr>
         ))}
       </tbody>

yarn.lock

@@ -13306,6 +13306,14 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+markdown-to-jsx@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.11.0.tgz#a2e3f2bc781c3402d8bb0f8e0a12a186474623b0"
+  integrity sha512-RH7LCJQ4RFmPqVeZEesKaO1biRzB/k4utoofmTCp3Eiw6D7qfvK8fzZq/2bjEJAtVkfPrM5SMt5APGf2rnaKMg==
+  dependencies:
+    prop-types "^15.6.2"
+    unquote "^1.1.0"
+
 markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.10.3.tgz#7f0946684acd321125ff2de7fd258a9b9c7c40b7"