From ec192c6aa8571fc9d504c10849828ff8d6f76f11 Mon Sep 17 00:00:00 2001
From: Xiaohan Zhang <xiaohan.zhang.xz@gmail.com>
Date: Sat, 18 Feb 2023 08:52:47 -0500
Subject: [PATCH] Fix width and height attribute for img (#389)

* Fix width and height attribute for img

* Bump draft-js-utils version
* Fix ImageSpan width and height type

* Fix #388: move width/height parser to higher level
---
 package.json        |  3 ++-
 src/ui/ImageSpan.js | 29 ++++++++++++++++++-----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 3b3d3fc6..9c9b665f 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..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,
           {
@@ -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});
+  }
 }