diff --git a/package.json b/package.json index 3b3d3fc..9c9b665 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "draft-js-export-markdown": ">=0.3.0", "draft-js-import-html": ">=0.4.0", "draft-js-import-markdown": ">=0.3.0", - "draft-js-utils": ">=0.2.0", + "draft-js-utils": ">=1.4.0", + "draft-js-import-element": ">=1.4.0", "immutable": "^3.8.1" }, "peerDependencies": { diff --git a/src/ui/ImageSpan.js b/src/ui/ImageSpan.js index f666dc8..cecf146 100644 --- a/src/ui/ImageSpan.js +++ b/src/ui/ImageSpan.js @@ -20,8 +20,8 @@ type Props = { }; type State = { - width: number; - height: number; + width: string; + height: string; }; export default class ImageSpan extends Component { @@ -33,10 +33,7 @@ export default class ImageSpan extends Component { autobind(this); const entity = props.contentState.getEntity(props.entityKey); const {width, height} = entity.getData(); - this.state = { - width, - height, - }; + this._setSize(width, height); } componentDidMount() { @@ -48,7 +45,7 @@ export default class ImageSpan extends Component { image.onload = () => { if (width == null || height == null) { // TODO: isMounted? - this.setState({width: image.width, height: image.height}); + this._setSize({width: image.width, height: image.height}); Entity.mergeData( this.props.entityKey, { @@ -72,9 +69,9 @@ export default class ImageSpan extends Component { const imageStyle = { verticalAlign: 'bottom', backgroundImage: `url("${src}")`, - backgroundSize: `${width}px ${height}px`, - lineHeight: `${height}px`, - fontSize: `${height}px`, + backgroundSize: `${width} ${height}`, + lineHeight: `${height}`, + fontSize: `${height}`, width, height, letterSpacing: width, @@ -97,10 +94,20 @@ export default class ImageSpan extends Component { _handleResize(event: Object, data: Object) { const {width, height} = data.size; - this.setState({width, height}); + this._setSize(width, height); Entity.mergeData( this.props.entityKey, {width, height} ); } + + _setSize(width: string | number, height: string | number) { + if (isFinite(width)) { + width = `${width}px`; + } + if (isFinite(height)) { + height = `${height}px`; + } + this.setState({width, height}); + } }