Add linkify prop and make linkify false by default (#20)

Author: gnestor

package.json

@@ -23,6 +23,7 @@
   "babel": {
     "presets": [
       "es2015",
+      "stage-3",
       "react"
     ]
   },
@@ -40,6 +41,7 @@
     "babel-core": "^6.8.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-3": "^6.22.0",
     "chai": "^3.5.0",
     "enzyme": "^2.2.0",
     "mkdirp": "0.5.1",

src/index.js

@@ -37,42 +37,54 @@ function ansiToInlineStyle(text) {
   return ansiToJSON(text).map(ansiJSONtoStyleBundle);
 }
 
+function linkifyBundle(bundle) {
+  return {
+    ...bundle,
+    content: bundle.content.split(' ').reduce(
+      (result, word) => {
+        // If word is a URL
+        if (/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(word)) {
+          return [
+            ...result, 
+            ' ',
+            React.createElement('a', { 
+              href: word ,
+              target: '_blank'
+            }, `${word}`) 
+          ];
+        }
+        const lastWord = result.pop();
+        if (lastWord) {
+          // If lastWord is a `<a>` element
+          if (lastWord.type) return [...result, lastWord, ' ', word];
+          // If not, combine lastWord and word into single string
+          return [...result, [lastWord, word].join(' ')];
+        }
+        // If there is no lastWord because word is the first
+        return [...result, word];
+      }, 
+      []
+    )
+  }
+}
+
 function inlineBundleToReact(bundle, key) {
-  const children = bundle.content.split(' ').reduce(
-    (result, word) => {
-      // If word is a URL
-      if (/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/.test(word)) {
-        return [
-          ...result, 
-          React.createElement('a', { 
-            href: word ,
-            target: '_blank'
-          }, `${word} `) 
-        ];
-      }
-      const lastWord = result.pop();
-      if (lastWord) {
-        // If lastWord is a `<a>` element
-        if (lastWord.type) return [...result, lastWord, word];
-        // If not, combine lastWord and word into single string
-        return [...result, [lastWord, word].join(' ')];
-      }
-      // If there is no lastWord because word is the first
-      return [...result, word];
-    }, 
-    []
-  );
   return React.createElement('span', {
     style: bundle.style,
     key,
-  }, children);
+  }, bundle.content);
 }
 
 function Ansi(props) {
   return React.createElement(
     'code',
     {},
-    ansiToInlineStyle(props.children).map(inlineBundleToReact));
+    props.linkify 
+      ? ansiToInlineStyle(props.children)
+        .map(linkifyBundle)
+        .map(inlineBundleToReact)
+      : ansiToInlineStyle(props.children).map(inlineBundleToReact)
+  );
 }
 
 Ansi.propTypes = {

test/index-spec.js

@@ -33,4 +33,11 @@ describe('Ansi', () => {
     expect(el).to.not.be.null;
     expect(el.text()).to.equal('that sentence\nwill make you pause');
   });
+  
+  it('can linkify', () => {
+    const el = enzyme.shallow(React.createElement(Ansi, {linkify: true}, 'this is a link: https://nteract.io/'));
+    expect(el).to.not.be.null;
+    expect(el.text()).to.equal('this is a link: https://nteract.io/');
+    expect(el.html()).to.equal('<code><span>this is a link: <a href="https://nteract.io/" target="_blank">https://nteract.io/</a></span></code>');
+  });
 });