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

fix styles for void, fix tests for void rendering

This commit is contained in:
Ian Storm Taylor
2016-07-22 13:39:02 -07:00
parent 5212a47fa2
commit 1784f25caa
4 changed files with 24 additions and 15 deletions

View File

@@ -21,6 +21,10 @@ class Void extends React.Component {
style: React.PropTypes.object style: React.PropTypes.object
}; };
static defaultProps = {
style: {}
}
shouldComponentUpdate = (props) => { shouldComponentUpdate = (props) => {
return ( return (
props.node != this.props.node || props.node != this.props.node ||
@@ -34,20 +38,18 @@ class Void extends React.Component {
const Tag = node.kind == 'block' ? 'div' : 'span' const Tag = node.kind == 'block' ? 'div' : 'span'
// Make the outer wrapper relative, so the spacer can overlay it. // Make the outer wrapper relative, so the spacer can overlay it.
const relative = { const styles = {
...style,
position: 'relative' position: 'relative'
} }
return ( return (
<Tag <Tag contentEditable={false}>
contentEditable={false}
style={relative}
>
<Tag <Tag
contentEditable contentEditable
suppressContentEditableWarning suppressContentEditableWarning
className={className} className={className}
style={style} style={styles}
> >
{this.renderSpacer()} {this.renderSpacer()}
<Tag contentEditable={false}>{children}</Tag> <Tag contentEditable={false}>{children}</Tag>

View File

@@ -1,8 +1,13 @@
import { Void } from '../../../..'
import React from 'react' import React from 'react'
function Image(props) { function Image(props) {
return <img src={props.node.data.get('src')} /> return (
<Void {...props}>
<img src={props.node.data.get('src')} />
</Void>
)
} }
export function renderNode(node) { export function renderNode(node) {

View File

@@ -1,6 +1,7 @@
<div contenteditable="true"> <div contenteditable="true">
<div style="position:relative;"> <div contenteditable="false">
<div contenteditable="true" style="position:relative;">
<span style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;text-indent:-9999px;"> <span style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;text-indent:-9999px;">
<span> <span>
<br> <br>
@@ -10,4 +11,5 @@
<img src="https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484"> <img src="https://img.washingtonpost.com/wp-apps/imrs.php?src=https://img.washingtonpost.com/news/speaking-of-science/wp-content/uploads/sites/36/2015/10/as12-49-7278-1024x1024.jpg&w=1484">
</div> </div>
</div> </div>
</div>
</div> </div>

View File

@@ -54,7 +54,7 @@ function clean(html) {
$(el).removeAttr('data-offset-key') $(el).removeAttr('data-offset-key')
}) })
$('[contenteditable]').removeAttr('style') $.root().children().removeAttr('style')
return $.html() return $.html()
} }