diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 903861a65d1..0fb454f4eae 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -112,6 +112,31 @@ function ensureOverlayDivExists(onOverlayDivReady) {
document.body.appendChild(overlayIframe);
}
+/**
+ * Optionnaly decorate the html output with links to
+ * @param {Element} node an div that contains error trace
+ */
+function decorateErrorsWithEditorLink(node) {
+
+ var editorLinkPattern = "subl://open?url=%%f&line=%%l&column=%%c";
+ var url, m;
+ var createLink = function (url, line, column) {
+ line = line || 1;
+ column = column || 1;
+ return editorLinkPattern.replace('%%f', 'file://'+url).replace('%%l', line).replace('%%c', column);
+ };
+
+ [].forEach.call(node.childNodes, function (element) {
+ if (element.tagName === "U") {
+ url = element.innerHTML;
+ element.innerHTML = '' + url + '';
+ } else if (element.tagName === "SPAN" && element.innerHTML.match(/\d+:\d+/)) {
+ m = element.innerHTML.match(/(\d+):(\d+)/);
+ element.innerHTML = '' + element.innerHTML + '';
+ }
+ });
+}
+
function showErrorOverlay(message) {
ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
// Make it look similar to our terminal.
@@ -120,9 +145,11 @@ function showErrorOverlay(message) {
colors.red +
'">Failed to compile.
' +
ansiHTML(entities.encode(message));
+ decorateErrorsWithEditorLink(overlayDiv);
});
}
+
function destroyErrorOverlay() {
if (!overlayDiv) {
// It is not there in the first place.