Merge pull request #128 from timberio/fix/markdown-html-parsing

Fix/markdown html parsing

Author: Zach Sherman

package.json

@@ -76,6 +76,7 @@
 		"history": "^4.7.2",
 		"html-minifier": "^3.5.16",
 		"js-search": "^1.4.2",
+		"markdown-to-jsx": "^6.6.5",
 		"markdown-toc": "^1.2.0",
 		"minimist": "^1.2.0",
 		"ncp": "^2.0.0",
@@ -90,7 +91,6 @@
 		"react-feather": "^1.1.0",
 		"react-helmet": "^5.2.0",
 		"react-highlight-words": "^0.11.0",
-		"react-markdown": "^3.3.2",
 		"react-router-dom": "^4.2.2",
 		"react-syntax-highlighter": "^7.0.4",
 		"serve-static": "^1.13.2",

themes/default/markdown/index.js

@@ -1,22 +1,52 @@
 import React from 'react'
-import Markdown from 'react-markdown'
+// import Markdown from 'react-markdown'
+import Markdown from 'markdown-to-jsx'
 import { Wrapper } from './styles'
 import Code from './overrides/Code'
 import Header from './overrides/Header'
 import Link from './overrides/Link'
 
 export default function (props) {
   const options = {
-    renderers: {
-      code: p => <Code {...props} {...p} />,
-      link: Link,
-      heading: Header,
-    },
+    overrides: {
+      code: {
+        component: Code,
+        props: {
+          renderer: props.renderer,
+          lineNumbers: props.lineNumbers
+        }
+      },
+      h1: {
+        component: Header,
+        props: { level: 1 },
+      },
+      h2: {
+        component: Header,
+        props: { level: 2 },
+      },
+      h3: {
+        component: Header,
+        props: { level: 3 },
+      },
+      h4: {
+        component: Header,
+        props: { level: 4 },
+      },
+      h5: {
+        component: Header,
+        props: { level: 5 },
+      },
+      h6: {
+        component: Header,
+        props: { level: 6 },
+      },
+      a: Link,
+    }
   }
 
   return (
     <Wrapper>
-      <Markdown {...options}>
+      <Markdown options={options}>
         {props.source}
       </Markdown>
     </Wrapper>

themes/default/markdown/overrides/Code.js

@@ -4,8 +4,11 @@ import Prism from 'react-syntax-highlighter/prism-light'
 import { theme, languages } from '@codegen/loadSyntax' // eslint-disable-line
 
 export default function (props) {
-  let { language } = props
-  const { value, renderer } = props
+  const { children, renderer, className, lineNumbers } = props
+
+  if (!className) return <code>{children}</code>
+
+  let language = className.split('-')[1]
 
   if (language) {
     language = language // language name aliases
@@ -27,11 +30,11 @@ export default function (props) {
     <Syntax
       style={theme}
       language={language}
-      showLineNumbers={props.lineNumbers}
+      showLineNumbers={lineNumbers}
       lineNumberStyle={{ opacity: 0.3 }}
       useInlineStyles
     >
-      {value}
+      {children}
     </Syntax>
   )
 }

themes/default/markdown/styles.js

@@ -42,16 +42,23 @@ export const Wrapper = styled('div')`
   pre {
     overflow-x: scroll;
     background: #FAFAFD !important;
+    border-radius: 4px;
+    border-radius: 3px;
+    line-height: 19px;
+    padding: .25rem;
   }
 
+  // We need this since react-syntax-highlighter adds a pre
+  pre pre { margin: 0; }
+
   pre, code {
     // -webkit-font-smoothing: initial;
   }
 
   code {
     border-radius: 4px;
-    padding: .15rem .25rem;
-    display: inline;
+    padding: 0 .15rem;
+    display: inline-block;
     word-break: break-all;
     background: #EEEAFE;
     color: #5742CA;
@@ -61,18 +68,11 @@ export const Wrapper = styled('div')`
     border: none;
     word-break: break-all;
     white-space: pre-wrap;
-    display: inline-block !important;
+    display: block;
     background: inherit;
     color: #485672;
   }
 
-  pre {
-    border-radius: 4px;
-    // font-family: Roboto Mono, monospace;
-    border-radius: 3px;
-    line-height: 19px;
-  }
-
   table {
     display: block;
     width: 100%;

themes/default/search/index.js

@@ -77,6 +77,7 @@ class Search extends Component {
     }, async () => {
       const results = await this.fetchResults(value)
       this.setState({ results, loading: false })
+      this.results.scrollTop = 0
     })
   }
 
@@ -186,7 +187,7 @@ class Search extends Component {
         onClick={this.clearSearch}
       >
         <Link to={r.url}>
-          <h4>{this.renderBreadCrumb(r)}</h4>
+          <h5>{this.renderBreadCrumb(r)}</h5>
           <p>
             <Highlight
               highlightClassName="highlight"

themes/default/search/styles.js

@@ -23,24 +23,25 @@ export const Input = styled('input')`
 export const Results = styled('div')`
   position: absolute;
   width: 100%;
-  top: 70px;
+  top: 65px;
   height: 50vh;
+  max-width: 700px;
   max-height: 700px;
   overflow: scroll;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,.07), 0 7px 17px 0 rgba(0,0,0,.1);
+  border: 1px solid rgba(0,0,0,.1);
+  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
   background: #FFF;
   z-index: 99;
 `
 
 export const Result = styled('div')`
-  padding: 1rem;
-  background: ${props => props.selected ? '#f6f5fb' : '#FFF'};
+  padding: .5rem 1rem;
+  background: ${props => props.selected ? '#f7f7fb' : '#FFF'};
   a { text-decoration: none }
   &:hover {
-    background: #f6f5fb;
-    h4 { color: #6457DC; text-decoration: underline; }
+    h5 { color: #6457DC; text-decoration: underline; }
   }
-  h4 {
+  h5 {
     font-weight: bold;
     text-decoration: none;
     margin: 0;
@@ -51,11 +52,18 @@ export const Result = styled('div')`
     color: rgba(0,0,0,0.75);
     text-decoration: none;
     margin: 0;
-    font-size: 1rem;
+    font-size: .9rem;
+  }
+  p .highlight {
+    // text-decoration: underline;
+    // text-decoration-color: #d1ccec
+    border-bottom: 2px solid #b1a9da;
+    display: inline-block;
+    background: transparent;
   }
-  p .highlight { background: #d1ccec }
   .url {
     font-size: 12px;
+    color: #5343a2;
   }
 `