From 3eec660085041febf809b2c1e71fabf8f5884776 Mon Sep 17 00:00:00 2001
From: Mat Brown <mat@genius.com>
Date: Mon, 12 Mar 2018 19:55:54 -0400
Subject: [PATCH] Links from instructions open in a new window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Runs instructions markdown through `remark-external-links`, which by
default adds a `target="_blank"` and `rel="noopener noreferrer"` to
anchor tags.

At this point this is hard-coded into the `toReact` method used here,
with no option to disable it—could always make it optional in the
future, but it’s hard to imagine a situation in which we wouldn’t want
links from processed Markdown to open in a new window.
---
 package.json         |  1 +
 src/util/markdown.js | 15 +++++++++------
 yarn.lock            | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 26d22f71a2..65b12c499a 100644
--- a/package.json
+++ b/package.json
@@ -200,6 +200,7 @@
     "redux-saga": "^0.16.0",
     "redux-saga-debounce-effect": "^0.2.2",
     "remark": "^9.0.0",
+    "remark-external-links": "^1.0.1",
     "remark-react": "^4.0.0",
     "remark-react-lowlight": "^0.7.0",
     "reselect": "^3.0.1",
diff --git a/src/util/markdown.js b/src/util/markdown.js
index 9d5233c03d..d0a4e90ab8 100644
--- a/src/util/markdown.js
+++ b/src/util/markdown.js
@@ -1,6 +1,7 @@
 import memoize from 'lodash/memoize';
 import remark from 'remark';
 import remarkReact from 'remark-react';
+import externalLinks from 'remark-external-links';
 import remarkLowlight from 'remark-react-lowlight';
 import css from 'highlight.js/lib/languages/css';
 import xml from 'highlight.js/lib/languages/xml';
@@ -17,12 +18,14 @@ const remarkWithHighlighting = memoize(() => {
     }),
   });
 
-  return remark().use(remarkReact, {
-    sanitize: schema,
-    remarkReactComponents: {
-      code: remarkLowlight({css, js, xml}),
-    },
-  });
+  return remark().
+    use(externalLinks).
+    use(remarkReact, {
+      sanitize: schema,
+      remarkReactComponents: {
+        code: remarkLowlight({css, js, xml}),
+      },
+    });
 });
 
 export function toReact(markdown) {
diff --git a/yarn.lock b/yarn.lock
index 255952c393..6993d10e67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2795,6 +2795,10 @@ css-select@~1.3.0-rc0:
     domutils "1.5.1"
     nth-check "^1.0.1"
 
+css-selector-parser@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb"
+
 css-tree@1.0.0-alpha.27:
   version "1.0.0-alpha.27"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.27.tgz#f211526909c7dc940843d83b9376ed98ddb8de47"
@@ -8874,6 +8878,12 @@ relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
 
+remark-external-links@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/remark-external-links/-/remark-external-links-1.0.1.tgz#6140251948eb408bae596d96e3ec2f79678f177e"
+  dependencies:
+    unist-util-select "~1.5.0"
+
 remark-parse@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-1.1.0.tgz#c3ca10f9a8da04615c28f09aa4e304510526ec21"
@@ -10813,6 +10823,14 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-select@~1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-1.5.0.tgz#a93c2be8c0f653827803b81331adec2aa24cd933"
+  dependencies:
+    css-selector-parser "^1.1.0"
+    debug "^2.2.0"
+    nth-check "^1.0.1"
+
 unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.1.tgz#3ccbdc53679eed6ecf3777dd7f5e3229c1b6aa3c"