diff --git a/examples/links/index.js b/examples/links/index.js index ae15aae07..ed07601b9 100644 --- a/examples/links/index.js +++ b/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} /> ) @@ -152,16 +189,6 @@ class Links extends React.Component { return NODES[node.type] } - /** - * On change. - * - * @param {State} state - */ - - onChange = (state) => { - this.setState({ state }) - } - } /** diff --git a/package.json b/package.json index 8215d50e3..ea4cec132 100644 --- a/package.json +++ b/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",