From d093b54e75d48ba35a55ecc03dcaec5ef4afec94 Mon Sep 17 00:00:00 2001 From: Xiaohan Zhang Date: Mon, 9 Nov 2020 09:57:25 -0500 Subject: [PATCH 1/3] Fix width and height attribute for img * Bump draft-js-utils version * Fix ImageSpan width and height type --- package.json | 3 ++- src/ui/ImageSpan.js | 19 +++++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 100749b6..4a236554 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 f666dc8f..c9d4b2fb 100644 --- a/src/ui/ImageSpan.js +++ b/src/ui/ImageSpan.js @@ -63,7 +63,7 @@ export default class ImageSpan extends Component { } render() { - const {width, height} = this.state; + const {width, height} = this._getSize(); let {className} = this.props; const entity = this.props.contentState.getEntity(this.props.entityKey); const {src} = entity.getData(); @@ -72,9 +72,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, @@ -103,4 +103,15 @@ export default class ImageSpan extends Component { {width, height} ); } + + _getSize() { + let {width, height} = this.state; + if (!isNaN(width)) { + width = `${width}px`; + } + if (!isNaN(height)) { + height = `${height}px`; + } + return {width, height}; + } } From e250a261c045066c368cbcce02c4a4fb9cbce52f Mon Sep 17 00:00:00 2001 From: Xiaohan Zhang Date: Mon, 3 May 2021 17:09:36 -0400 Subject: [PATCH 2/3] Fix #388: move width/height parser to higher level --- src/ui/ImageSpan.js | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/ui/ImageSpan.js b/src/ui/ImageSpan.js index c9d4b2fb..cecf146f 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, { @@ -63,7 +60,7 @@ export default class ImageSpan extends Component { } render() { - const {width, height} = this._getSize(); + const {width, height} = this.state; let {className} = this.props; const entity = this.props.contentState.getEntity(this.props.entityKey); const {src} = entity.getData(); @@ -97,21 +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} ); } - _getSize() { - let {width, height} = this.state; - if (!isNaN(width)) { + _setSize(width: string | number, height: string | number) { + if (isFinite(width)) { width = `${width}px`; } - if (!isNaN(height)) { + if (isFinite(height)) { height = `${height}px`; } - return {width, height}; + this.setState({width, height}); } } From cdf9fa8547d05a8523acc1f2af982ba673cfaa00 Mon Sep 17 00:00:00 2001 From: Xiaohan Zhang Date: Tue, 25 Apr 2023 18:13:01 -0400 Subject: [PATCH 3/3] Fix undefined state error --- src/ui/ImageSpan.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ui/ImageSpan.js b/src/ui/ImageSpan.js index cecf146f..cadc0cff 100644 --- a/src/ui/ImageSpan.js +++ b/src/ui/ImageSpan.js @@ -33,7 +33,7 @@ export default class ImageSpan extends Component { autobind(this); const entity = props.contentState.getEntity(props.entityKey); const {width, height} = entity.getData(); - this._setSize(width, height); + this.state = this._getSize(width, height); } componentDidMount() { @@ -45,7 +45,7 @@ export default class ImageSpan extends Component { image.onload = () => { if (width == null || height == null) { // TODO: isMounted? - this._setSize({width: image.width, height: image.height}); + this.setState(this._getSize(image.width, image.height)); Entity.mergeData( this.props.entityKey, { @@ -94,20 +94,20 @@ export default class ImageSpan extends Component { _handleResize(event: Object, data: Object) { const {width, height} = data.size; - this._setSize(width, height); + this.setState(this._getSize(width, height)); Entity.mergeData( this.props.entityKey, {width, height} ); } - _setSize(width: string | number, height: string | number) { + _getSize(width: string | number, height: string | number) { if (isFinite(width)) { width = `${width}px`; } if (isFinite(height)) { height = `${height}px`; } - this.setState({width, height}); + return {width, height}; } }