Merge pull request #867 from valpinkman/feat/external-link-markdown

open link from markdown into external browser

src/components/base/Markdown/index.js

@@ -0,0 +1,156 @@
+// @flow
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+import ReactMarkdown from 'react-markdown'
+import { shell } from 'electron'
+
+import Box from 'components/base/Box'
+
+export const Notes = styled(Box).attrs({
+  ff: 'Open Sans',
+  fontSize: 4,
+  color: 'smoke',
+  flow: 4,
+})`
+  ul,
+  ol {
+    padding-left: 20px;
+  }
+
+  p {
+    margin: 1em 0;
+  }
+
+  code,
+  pre {
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  }
+
+  code {
+    padding: 0.2em 0.4em;
+    font-size: 0.9em;
+    background-color: ${p => p.theme.colors.lightGrey};
+    border-radius: 3px;
+  }
+
+  pre {
+    word-wrap: normal;
+
+    code {
+      word-break: normal;
+      white-space: pre;
+      background: transparent;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: ${p => p.theme.colors.dark};
+    font-weight: bold;
+    margin-top: 24px;
+    margin-bottom: 16px;
+  }
+
+  h1 {
+    padding-bottom: 0.3em;
+    font-size: 1.33em;
+  }
+
+  h2 {
+    padding-bottom: 0.3em;
+    font-size: 1.25em;
+  }
+
+  h3 {
+    font-size: 1em;
+  }
+
+  h4 {
+    font-size: 0.875em;
+  }
+
+  h5,
+  h6 {
+    font-size: 0.85em;
+    color: #6a737d;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  hr {
+    height: 1px;
+    border: none;
+    background-color: ${p => p.theme.colors.fog};
+  }
+
+  blockquote {
+    padding: 0 1em;
+    border-left: 0.25em solid #dfe2e5;
+  }
+
+  table {
+    width: 100%;
+    overflow: auto;
+    border-collapse: collapse;
+
+    th {
+      font-weight: bold;
+    }
+
+    th,
+    td {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    tr {
+      background-color: #fff;
+      border-top: 1px solid #c6cbd1;
+    }
+
+    tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+  }
+
+  input[type='Switch'] {
+    margin-right: 0.5em;
+  }
+`
+
+type Props = {
+  children: React$Node,
+}
+
+export default class Markdown extends PureComponent<Props> {
+  componentDidMount() {
+    if (this.parent) {
+      const links: NodeList<HTMLElement> = this.parent.querySelectorAll('a')
+      links.forEach(link => {
+        link.addEventListener('click', (e: MouseEvent) => {
+          e.preventDefault()
+          // $FlowFixMe
+          const href = e.target && e.target.href
+          shell.openExternal(href)
+        })
+      })
+    }
+  }
+
+  parent: ?HTMLDivElement
+
+  render() {
+    const { children } = this.props
+    return (
+      <div ref={c => (this.parent = c)}>
+        <ReactMarkdown>{children}</ReactMarkdown>
+      </div>
+    )
+  }
+}

src/components/modals/ReleaseNotes.js

@@ -1,7 +1,6 @@
 // @flow
 import React, { PureComponent } from 'react'
 import { translate } from 'react-i18next'
-import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'
 import network from 'api/network'
 
@@ -15,6 +14,7 @@ import Text from 'components/base/Text'
 import Spinner from 'components/base/Spinner'
 import GradientBox from 'components/GradientBox'
 import TrackPage from 'analytics/TrackPage'
+import Markdow, { Notes } from 'components/base/Markdown'
 
 import type { T } from 'types/common'
 
@@ -26,124 +26,6 @@ type State = {
   markdown: ?string,
 }
 
-export const Notes = styled(Box).attrs({
-  ff: 'Open Sans',
-  fontSize: 4,
-  color: 'smoke',
-  flow: 4,
-})`
-  ul,
-  ol {
-    padding-left: 20px;
-  }
-
-  p {
-    margin: 1em 0;
-  }
-
-  code,
-  pre {
-    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  }
-
-  code {
-    padding: 0.2em 0.4em;
-    font-size: 0.9em;
-    background-color: ${p => p.theme.colors.lightGrey};
-    border-radius: 3px;
-  }
-
-  pre {
-    word-wrap: normal;
-
-    code {
-      word-break: normal;
-      white-space: pre;
-      background: transparent;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: ${p => p.theme.colors.dark};
-    font-weight: bold;
-    margin-top: 24px;
-    margin-bottom: 16px;
-  }
-
-  h1 {
-    padding-bottom: 0.3em;
-    font-size: 1.33em;
-  }
-
-  h2 {
-    padding-bottom: 0.3em;
-    font-size: 1.25em;
-  }
-
-  h3 {
-    font-size: 1em;
-  }
-
-  h4 {
-    font-size: 0.875em;
-  }
-
-  h5,
-  h6 {
-    font-size: 0.85em;
-    color: #6a737d;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  hr {
-    height: 1px;
-    border: none;
-    background-color: ${p => p.theme.colors.fog};
-  }
-
-  blockquote {
-    padding: 0 1em;
-    border-left: 0.25em solid #dfe2e5;
-  }
-
-  table {
-    width: 100%;
-    overflow: auto;
-    border-collapse: collapse;
-
-    th {
-      font-weight: bold;
-    }
-
-    th,
-    td {
-      padding: 6px 13px;
-      border: 1px solid #dfe2e5;
-    }
-
-    tr {
-      background-color: #fff;
-      border-top: 1px solid #c6cbd1;
-    }
-
-    tr:nth-child(2n) {
-      background-color: #f6f8fa;
-    }
-  }
-
-  input[type='Switch'] {
-    margin-right: 0.5em;
-  }
-`
-
 const Title = styled(Text).attrs({
   ff: 'Museo Sans',
   fontSize: 5,
@@ -214,7 +96,7 @@ class ReleaseNotes extends PureComponent<Props, State> {
         content = (
           <Notes>
             <Title>{t('app:releaseNotes.version', { versionNb: version })}</Title>
-            <ReactMarkdown>{markdown}</ReactMarkdown>
+            <Markdow>{markdown}</Markdow>
           </Notes>
         )
       }

src/components/modals/UpdateFirmware/Disclaimer.js

@@ -3,7 +3,6 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import { translate, Trans } from 'react-i18next'
-import ReactMarkdown from 'react-markdown'
 
 import type { T } from 'types/common'
 
@@ -12,7 +11,7 @@ import Text from 'components/base/Text'
 import Button from 'components/base/Button'
 import GrowScroll from 'components/base/GrowScroll'
 import GradientBox from 'components/GradientBox'
-import { Notes } from 'components/modals/ReleaseNotes'
+import Markdown, { Notes } from 'components/base/Markdown'
 import TrackPage from 'analytics/TrackPage'
 
 import type { ModalStatus } from 'components/ManagerPage/FirmwareUpdate'
@@ -63,7 +62,7 @@ class DisclaimerModal extends PureComponent<Props, State> {
               <ModalContent relative pb={0} style={{ height: 250, width: '100%' }}>
                 <GrowScroll pb={5}>
                   <Notes>
-                    <ReactMarkdown>{firmware.notes}</ReactMarkdown>
+                    <Markdown>{firmware.notes}</Markdown>
                   </Notes>
                 </GrowScroll>
                 <GradientBox />