mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-23 15:32:59 +02:00
Handle pasting image in Paste HTML
example (#1334)
* enable pasting images * fix typo
This commit is contained in:
committed by
Ian Storm Taylor
parent
e991d5d480
commit
501ca7c2fa
@@ -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.
|
// Special case for links, to grab their href.
|
||||||
deserialize(el, next) {
|
deserialize(el, next) {
|
||||||
@@ -182,7 +197,7 @@ class PasteHtml extends React.Component {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
renderNode = (props) => {
|
renderNode = (props) => {
|
||||||
const { attributes, children, node } = props
|
const { attributes, children, node, isSelected } = props
|
||||||
switch (node.type) {
|
switch (node.type) {
|
||||||
case 'quote': return <blockquote {...attributes}>{children}</blockquote>
|
case 'quote': return <blockquote {...attributes}>{children}</blockquote>
|
||||||
case 'code': return <pre><code {...attributes}>{children}</code></pre>
|
case 'code': return <pre><code {...attributes}>{children}</code></pre>
|
||||||
@@ -200,6 +215,14 @@ class PasteHtml extends React.Component {
|
|||||||
const href = data.get('href')
|
const href = data.get('href')
|
||||||
return <a href={href} {...attributes}>{children}</a>
|
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} />
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user