diff --git a/examples/images/index.js b/examples/images/index.js index a62ef5019..d07af2e63 100644 --- a/examples/images/index.js +++ b/examples/images/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 isImage from 'is-image-url' import { Map } from 'immutable' /** @@ -83,6 +84,7 @@ class Images extends React.Component { state={this.state.state} renderNode={this.renderNode} onChange={this.onChange} + onPaste={this.onPaste} /> ) @@ -119,18 +121,35 @@ class Images extends React.Component { e.preventDefault() const src = window.prompt('Enter the URL of the image:') if (!src) return - this.insertImage(src) + let { state } = this.state + state = this.insertImage(state, src) + this.onChange(state) + } + + /** + * On paste, if the pasted content is an image URL, insert it. + * + * @param {Event} e + * @param {Object} paste + * @param {State} state + * @return {State} + */ + + onPaste = (e, paste, state) => { + if (paste.type != 'text') return + if (!isImage(paste.text)) return + return this.insertImage(state, paste.text) } /** * Insert an image with `src` at the current selection. * + * @param {State} state * @param {String} src + * @return {State} */ - insertImage = (src) => { - let { state } = this.state - + insertImage = (state, src) => { if (state.isExpanded) { state = state .transform() @@ -141,10 +160,13 @@ class Images extends React.Component { const { anchorBlock, selection } = state let transform = state.transform() - if (anchorBlock.text != '') { + if (anchorBlock.type == 'image') { + transform = transform.splitBlock() + } + + else if (anchorBlock.text != '') { if (selection.isAtEndOf(anchorBlock)) { - transform = transform - .splitBlock() + transform = transform.splitBlock() } else if (selection.isAtStartOf(anchorBlock)) { @@ -161,15 +183,13 @@ class Images extends React.Component { } } - state = transform + return transform .setBlock({ type: 'image', isVoid: true, data: { src } }) .apply() - - this.setState({ state }) } } diff --git a/package.json b/package.json index ea4cec132..17631b9d8 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "detect-browser": "^1.3.3", "esrever": "^0.2.0", "immutable": "^3.8.1", + "is-image-url": "^1.1.8", "keycode": "^2.1.2", "lodash": "^4.13.1", "react-portal": "^2.2.0",