add paste linkifying to link example

examples/links/index.js

@@ -3,6 +3,7 @@ import { Editor, Mark, Raw } from '../..'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import initialState from './state.json'
+import isUrl from 'is-url'
 import { Map } from 'immutable'
 
 /**
@@ -49,6 +50,16 @@ class Links extends React.Component {
     return state.inlines.some(inline => inline.type == 'link')
   }
 
+  /**
+   * On change.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
   /**
    * When clicking a link, if the selection has a link in it, remove the link.
    * Otherwise, add a new link with an href and text.
@@ -91,6 +102,31 @@ class Links extends React.Component {
     this.setState({ state })
   }
 
+  /**
+   * On paste, if the text is a link, wrap the selection in a link.
+   *
+   * @param {Event} e
+   * @param {Object} paste
+   * @param {State} state
+   */
+
+  onPaste = (e, paste, state) => {
+    if (state.isCollapsed) return
+    if (paste.type != 'text' && paste.type != 'html') return
+    if (!isUrl(paste.text)) return
+
+    let transform = state.transform()
+
+    if (this.hasLinks()) {
+      transform = transform.unwrapInline('link')
+    }
+
+    return transform
+      .wrapInline('link', { href: paste.text })
+      .collapseToEnd()
+      .apply()
+  }
+
   /**
    * Render the app.
    *
@@ -136,6 +172,7 @@ class Links extends React.Component {
           state={this.state.state}
           renderNode={this.renderNode}
           onChange={this.onChange}
+          onPaste={this.onPaste}
         />
       </div>
     )
@@ -152,16 +189,6 @@ class Links extends React.Component {
     return NODES[node.type]
   }
 
-  /**
-   * On change.
-   *
-   * @param {State} state
-   */
-
-  onChange = (state) => {
-    this.setState({ state })
-  }
-
 }
 
 /**

package.json

@@ -41,6 +41,7 @@
     "exorcist": "^0.4.0",
     "gh-pages": "^0.11.0",
     "http-server": "^0.9.0",
+    "is-url": "^1.2.2",
     "mocha": "^2.5.3",
     "prismjs": "^1.5.1",
     "react": "^15.2.0",