Merge pull request draft-js-plugins#175 from adrianmc/master

nikgraf · nikgraf · commit 140d01394809 · 2016-04-03T13:39:45.000-07:00
Adding ability to set prefix and target for Linkify plugin
diff --git a/docs/client/components/pages/Linkify/CustomLinkifyEditor/index.js b/docs/client/components/pages/Linkify/CustomLinkifyEditor/index.js
@@ -4,7 +4,7 @@ import Editor from 'draft-js-plugins-editor';
 import createLinkifyPlugin from 'draft-js-linkify-plugin';
 import editorStyles from './editorStyles.css';
 
-const linkifyPlugin = createLinkifyPlugin();
+const linkifyPlugin = createLinkifyPlugin({ target: '_blank' });
 const plugins = [linkifyPlugin];
 
 export default class CustomMentionEditor extends Component {
diff --git a/docs/client/components/pages/Linkify/index.js b/docs/client/components/pages/Linkify/index.js
@@ -71,6 +71,10 @@ export default class App extends Component {
               <div className={ styles.subParam }><span className={ styles.subParamName }>link:</span> CSS class to be applied to link text</div>
             </div>
           </div>
+          <div className={ styles.param }>
+            <span className={ styles.paramName }>target</span>
+            <span>String value for the target attribute. (Default value is _self)</span>
+          </div>
       </Container>
         <Container>
           <Heading level={ 2 }>Simple Example</Heading>
diff --git a/draft-js-linkify-plugin/CHANGELOG.md b/draft-js-linkify-plugin/CHANGELOG.md
@@ -9,6 +9,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - Move to a flat configuration. Instead of plugin properties (decorators & hooks) being stored within pluginProps they now moved to the root object. See the changes here [#150](https://github.com/draft-js-plugins/draft-js-plugins/pull/150/files) as well as the initial discussion here [#143](https://github.com/draft-js-plugins/draft-js-plugins/issues/143)
 
+- Added the ability to set a target attribute through `config.target`. The default value is `_self`.
+
+- Added the ability to utilize the [linkify-it](https://github.com/markdown-it/linkify-it) library to generate smart href values for the resulting component.
+
 ## 0.0.3 - 2016-03-25
 ### Released the first working of DraftJS Linkify Plugin
 
diff --git a/draft-js-linkify-plugin/README.md b/draft-js-linkify-plugin/README.md
@@ -12,6 +12,14 @@ import createLinkifyPlugin from 'draft-js-linkify-plugin';
 const linkifyPlugin = createLinkifyPlugin();
 ```
 
+You may also optionally set the target value for the resulting `<a>` tag:
+
+```js
+const linkifyPlugin = createLinkifyPlugin({
+  target: '_blank'  // default is '_self'
+});
+```
+
 ## Importing the default styles
 
 The plugin ships with a default styling available at this location in the installed package:
diff --git a/draft-js-linkify-plugin/src/Link/__test__/index.js b/draft-js-linkify-plugin/src/Link/__test__/index.js
@@ -32,4 +32,34 @@ describe('Link', () => {
     const result = shallow(<Link decoratedText="https://www.draft-js-plugins.com/" />);
     expect(result).to.have.prop('href').to.contain('https://www.draft-js-plugins.com/');
   });
+
+  it('applies http prefix when none is supplied', () => {
+    const result = shallow(<Link decoratedText="draft-js-plugins.com/" />);
+    expect(result).to.have.prop('href').to.contain('http://draft-js-plugins.com/');
+  });
+
+  it('does not apply a prefix when one is already supplied', () => {
+    const result = shallow(<Link decoratedText="ftp://draft-js-plugins.com/" />);
+    expect(result).to.have.prop('href').to.contain('ftp://draft-js-plugins.com/');
+  });
+
+  it('generates correct href to localhost with port', () => {
+    const result = shallow(<Link decoratedText="http://localhost:8000" />);
+    expect(result).to.have.prop('href').to.contain('http://localhost:8000');
+  });
+
+  it('generates mailto href when supplied with email', () => {
+    const result = shallow(<Link decoratedText="name@example.com" />);
+    expect(result).to.have.prop('href').to.contain('mailto:name@example.com');
+  });
+
+  it('uses _self as the default target value', () => {
+    const result = shallow(<Link />);
+    expect(result).to.have.prop('target').to.contain('_self');
+  });
+
+  it('applies custom target value', () => {
+    const result = shallow(<Link target="_blank" />);
+    expect(result).to.have.prop('target').to.contain('_blank');
+  });
 });
diff --git a/draft-js-linkify-plugin/src/Link/index.js b/draft-js-linkify-plugin/src/Link/index.js
@@ -1,17 +1,33 @@
 import React, { Component } from 'react';
 import unionClassNames from 'union-class-names';
 import { Map } from 'immutable';
+import linkifyIt from 'linkify-it';
+import tlds from 'tlds';
+
+const linkify = linkifyIt();
+linkify.tlds(tlds);
 
 // The component we render when we encounter a hyperlink in the text
 export default class Link extends Component {
   render() {
-    const { theme = Map(), className, ...props } = this.props; // eslint-disable-line no-use-before-define
+    /* eslint-disable no-use-before-define */
+    const {
+      decoratedText = '',
+      theme = Map(),
+      target = '_self',
+      className,
+      ...props,
+      } = this.props;
+    /* eslint-enable */
     const combinedClassName = unionClassNames(theme.get('link'), className);
+    const links = linkify.match(decoratedText);
+    const href = links && links[0] ? links[0].url : '';
     return (
       <a
         { ...props }
-        href={ this.props.decoratedText }
+        href={ href }
         className={ combinedClassName }
+        target={ target }
       />
     );
   }
diff --git a/draft-js-linkify-plugin/src/index.js b/draft-js-linkify-plugin/src/index.js
@@ -16,11 +16,12 @@ const linkPlugin = (config = {}) => {
   // errors when upgrading as basically every styling change would become a major
   // breaking change. 1px of an increased padding can break a whole layout.
   const theme = config.theme ? config.theme : defaultTheme;
+  const target = config.target ? config.target : '_self';
   return {
     decorators: [
       {
         strategy: linkStrategy,
-        component: decorateComponentWithProps(Link, { theme }),
+        component: decorateComponentWithProps(Link, { theme, target }),
       },
     ],
   };
