From 60deddb0e2a4d2ce2966d8662aef861df02c68da Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Mon, 27 Feb 2023 14:19:56 +0530
Subject: [PATCH] fix: use canvas height when editing bound text

---
 src/element/textElement.ts  |  8 +++++++-
 src/element/textWysiwyg.tsx | 41 +++++++++++++------------------------
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/element/textElement.ts b/src/element/textElement.ts
index 4d9fa5eb5..a83837483 100644
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@@ -226,7 +226,7 @@ export const handleBindTextResize = (
   }
 };
 
-const computeBoundTextPosition = (
+export const computeBoundTextPosition = (
   container: ExcalidrawElement,
   boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
@@ -236,6 +236,12 @@ const computeBoundTextPosition = (
 
   let x;
   let y;
+  if (isArrowElement(container)) {
+    return LinearElementEditor.getBoundTextElementPosition(
+      container,
+      boundTextElement,
+    );
+  }
   if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
     y = containerCoords.y;
   } else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index f44bab891..c1d29024b 100644
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isFirefox, isSafari, VERTICAL_ALIGN } from "../constants";
+import { CLASSES, isFirefox, isSafari } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -24,7 +24,6 @@ import { mutateElement } from "./mutateElement";
 import {
   getApproxLineHeight,
   getBoundTextElementId,
-  getContainerCoords,
   getContainerDims,
   getContainerElement,
   getTextElementAngle,
@@ -35,6 +34,8 @@ import {
   wrapText,
   getMaxContainerHeight,
   getMaxContainerWidth,
+  computeBoundTextPosition,
+  getTextHeight,
 } from "./textElement";
 import {
   actionDecreaseFontSize,
@@ -180,15 +181,11 @@ export const textWysiwyg = ({
           editable,
         );
         const containerDims = getContainerDims(container);
-        // using editor.style.height to get the accurate height of text editor
-        const editorHeight = Number(editable.style.height.slice(0, -2));
-        if (editorHeight > 0) {
-          textElementHeight = editorHeight;
-        }
-        if (propertiesUpdated) {
-          // update height of the editor after properties updated
-          textElementHeight = updatedTextElement.height;
-        }
+
+        textElementHeight = getTextHeight(
+          updatedTextElement.text,
+          getFontString(updatedTextElement),
+        );
 
         let originalContainerData;
         if (propertiesUpdated) {
@@ -229,22 +226,12 @@ export const textWysiwyg = ({
             approxLineHeight,
           );
           mutateElement(container, { height: containerDims.height - diff });
-        }
-        // Start pushing text upward until a diff of 30px (padding)
-        // is reached
-        else {
-          const containerCoords = getContainerCoords(container);
-
-          // vertically center align the text
-          if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
-            if (!isArrowElement(container)) {
-              coordY =
-                containerCoords.y + maxHeight / 2 - textElementHeight / 2;
-            }
-          }
-          if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-            coordY = containerCoords.y + (maxHeight - textElementHeight);
-          }
+        } else {
+          const { y } = computeBoundTextPosition(
+            container,
+            updatedTextElement as ExcalidrawTextElementWithContainer,
+          );
+          coordY = y;
         }
       }
       const [viewportX, viewportY] = getViewportCoords(coordX, coordY);