fix: update height correctly when updating text properties in binded text (#4459)

* fix: update height correctly when updating text properties in binded text

* read height from editor style so its accurate

* fix

src/element/textWysiwyg.tsx

@@ -109,16 +109,19 @@ export const textWysiwyg = ({
 
       let maxHeight = updatedElement.height;
       let width = updatedElement.width;
-      const height =
+      // Set to element height by default since thats
-        editable.scrollHeight === 0
+      // what is going to be used for unbounded text
-          ? updatedElement.height
+      let height = updatedElement.height;
-          : editable.scrollHeight;
       if (container && updatedElement.containerId) {
         const propertiesUpdated = textPropertiesUpdated(
           updatedElement,
           editable,
         );
-
+        // using editor.style.height to get the accurate height of text editor
+        const editorHeight = Number(editable.style.height.slice(0, -2));
+        if (editorHeight > 0) {
+          height = editorHeight;
+        }
         if (propertiesUpdated) {
           const currentContainer = Scene.getScene(updatedElement)?.getElement(
             updatedElement.containerId,
@@ -132,7 +135,8 @@ export const textWysiwyg = ({
             mutateElement(container, { height: nextHeight });
             container = { ...container, height: nextHeight };
           }
-          editable.style.height = `${updatedElement.height}px`;
+          // update height of the editor after properties updated
+          height = updatedElement.height;
         }
         if (!originalContainerHeight) {
           originalContainerHeight = container.height;
@@ -143,36 +147,28 @@ export const textWysiwyg = ({
         // The coordinates of text box set a distance of
         // 30px to preserve padding
         coordX = container.x + PADDING;
-
         // autogrow container height if text exceeds
-        if (editable.scrollHeight > maxHeight) {
+        if (height > maxHeight) {
-          const diff = Math.min(
+          const diff = Math.min(height - maxHeight, approxLineHeight);
-            editable.scrollHeight - maxHeight,
-            approxLineHeight,
-          );
           mutateElement(container, { height: container.height + diff });
           return;
         } else if (
           // autoshrink container height until original container height
           // is reached when text is removed
           container.height > originalContainerHeight &&
-          editable.scrollHeight < maxHeight
+          height < maxHeight
         ) {
-          const diff = Math.min(
+          const diff = Math.min(maxHeight - height, approxLineHeight);
-            maxHeight - editable.scrollHeight,
-            approxLineHeight,
-          );
           mutateElement(container, { height: container.height - diff });
         }
         // Start pushing text upward until a diff of 30px (padding)
         // is reached
         else {
-          const lines = editable.scrollHeight / approxLineHeight;
+          const lines = height / approxLineHeight;
 
           if (lines > 1 || propertiesUpdated) {
             // vertically center align the text
-            coordY =
+            coordY = container.y + container.height / 2 - height / 2;
-              container.y + container.height / 2 - editable.scrollHeight / 2;
           }
         }
       }