mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-18 05:01:17 +02:00
fix styles for void, fix tests for void rendering
This commit is contained in:
@@ -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>
|
||||||
|
@@ -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) {
|
||||||
|
@@ -1,13 +1,15 @@
|
|||||||
|
|
||||||
<div contenteditable="true">
|
<div contenteditable="true">
|
||||||
<div style="position:relative;">
|
<div contenteditable="false">
|
||||||
<span style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;text-indent:-9999px;">
|
<div contenteditable="true" style="position:relative;">
|
||||||
<span>
|
<span style="position:absolute;top:0px;right:0px;bottom:0px;left:0px;text-indent:-9999px;">
|
||||||
<br>
|
<span>
|
||||||
|
<br>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
<div contenteditable="false">
|
||||||
<div contenteditable="false">
|
<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>
|
||||||
|
@@ -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()
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user