1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-04-24 23:33:41 +02:00

Handle pasting image in Paste HTML example (#1334)

* enable pasting images

* fix typo
This commit is contained in:
Yifeng Wang 2017-10-29 16:30:53 -05:00 committed by Ian Storm Taylor
parent e991d5d480
commit 501ca7c2fa

View File

@ -86,6 +86,21 @@ const RULES = [
}
}
},
{
// Special case for images, to grab their src.
deserialize(el, next) {
if (el.tagName.toLowerCase() != 'img') return
return {
kind: 'block',
type: 'image',
isVoid: true,
nodes: next(el.childNodes),
data: {
src: el.getAttribute('src')
}
}
}
},
{
// Special case for links, to grab their href.
deserialize(el, next) {
@ -182,7 +197,7 @@ class PasteHtml extends React.Component {
*/
renderNode = (props) => {
const { attributes, children, node } = props
const { attributes, children, node, isSelected } = props
switch (node.type) {
case 'quote': return <blockquote {...attributes}>{children}</blockquote>
case 'code': return <pre><code {...attributes}>{children}</code></pre>
@ -200,6 +215,14 @@ class PasteHtml extends React.Component {
const href = data.get('href')
return <a href={href} {...attributes}>{children}</a>
}
case 'image': {
const src = node.data.get('src')
const className = isSelected ? 'active' : null
const style = { display: 'block' }
return (
<img src={src} className={className} style={style} {...attributes} />
)
}
}
}