Fixes #143 Brings markdown support to object and array descriptions in schema

Author: mrin9

src/components/schema-table.js

@@ -77,7 +77,10 @@ export default class SchemaTable extends LitElement {
           </div>
         </div>
 
-        <div style='padding: 5px 0; color:var(--fg3)'> <span class='bold-text upper'> ${this.data['::type']}: </span> ${this.data['::description']}</div>
+        <div style='padding: 5px 0; color:var(--fg3)'> 
+          <span class='bold-text upper'> ${this.data['::type']}</span> 
+          <span>${unsafeHTML(marked(this.data['::description'] || ''))}</span>
+        </div>
         <div style = "border:1px solid var(--light-border-color)">
           <div style='display:flex; height:18px; background-color: var(--bg2); line-height:18px; padding:8px 2px; border-bottom:1px solid var(--light-border-color);'>
             <div class='td key' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'> Field</div>
@@ -134,7 +137,7 @@ export default class SchemaTable extends LitElement {
                 }
               </div>
               <div class='td key-type'>${prevDataType.startsWith('xxx-') ? '' : prevDataType}</div>
-              <div class='td key-descr'>${prevDescr}</div>
+              <div class='td key-descr'>${unsafeHTML(marked(prevDescr || ''))}   </div>
             </div>`
           : ''
         }

src/components/schema-tree.js

@@ -91,7 +91,7 @@ export default class SchemaTree extends LitElement {
             ${this.schemaDescriptionExpanded === 'true' ? 'Collapse Details' : 'Expand Details'}
           </div>
         </div>
-        <div style='color:var(--fg3)'> ${this.data ? this.data['::description'] : ''}</div>
+        <span style='color:var(--fg3)'> ${this.data ? unsafeHTML(marked(this.data['::description'] || '')) : ''}</span>
         ${this.data
           ? html`
             ${this.generateTree(
@@ -156,7 +156,7 @@ export default class SchemaTree extends LitElement {
                 : newPrevKey
             }${level > 0 ? ':' : ''}${openBracket}
           </div>
-          <div class='td key-descr'>${prevDescr}</div>
+          <div class='td key-descr'>${unsafeHTML(marked(prevDescr || ''))}</div>
         </div>
         <div class='inside-bracket ${data['::type']}' style='padding-left:${data['::type'] !== 'xxx-of-option' ? leftPadding : 0}px;'>
           ${Object.keys(data).map((key) => html`

src/rapidoc.js

@@ -235,7 +235,6 @@ export default class RapiDoc extends LitElement {
         .nav-bar-path.active {
           border-left:4px solid var(--nav-accent-color);
           color:var(--nav-hover-text-color);
-          background-color:var(--nav-hover-bg-color);
         }
 
         .nav-bar-info:hover,
@@ -466,7 +465,7 @@ export default class RapiDoc extends LitElement {
         ${(this.allowSearch === 'false')
           ? ''
           : html`
-            <div style="position:sticky; top:0; display:flex; flex-direction:row; align-items: stretch; padding:24px; background: var(--nav-bg-color); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);">
+            <div style="position:sticky; top:0; display:flex; flex-direction:row; align-items: stretch; padding:24px; background: var(--nav-bg-color); border-bottom: 1px solid var(--nav-hover-bg-color)">
               <div style="display:flex; flex:1">
                 <input id="nav-bar-search" 
                   style="width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)" 

src/styles/schema-styles.js

@@ -74,6 +74,7 @@ export default html`
       padding:5px 0;
       margin:0 2px;
     }
+    .toolbar-item:first-of-type { margin:0 2px 0 0;}
 
     @media only screen and (min-width: 500px) {
       .key-descr {