1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-31 10:51:44 +02:00

fix "secret" behavior of image example

This commit is contained in:
Ian Storm Taylor
2016-07-18 16:34:28 -07:00
parent 54587c3318
commit 826956c2c9
2 changed files with 31 additions and 10 deletions

View File

@@ -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}
/>
</div>
)
@@ -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 })
}
}