Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax

src/element/textWysiwyg.tsx

@@ -22,7 +22,6 @@ import {
 import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
-  getApproxLineHeight,
   getBoundTextElementId,
   getContainerCoords,
   getContainerDims,
@@ -35,6 +34,7 @@ import {
   wrapText,
   getMaxContainerHeight,
   getMaxContainerWidth,
+  computeContainerDimensionForBoundText,
 } from "./textElement";
 import {
   actionDecreaseFontSize,
@@ -160,9 +160,7 @@ export const textWysiwyg = ({
       return;
     }
     const { textAlign, verticalAlign } = updatedTextElement;
-    const approxLineHeight = getApproxLineHeight(
-      getFontString(updatedTextElement),
-    );
+
     if (updatedTextElement && isTextElement(updatedTextElement)) {
       let coordX = updatedTextElement.x;
       let coordY = updatedTextElement.y;
@@ -179,6 +177,7 @@ export const textWysiwyg = ({
             )
           : updatedTextElement.originalText,
         getFontString(updatedTextElement),
+        updatedTextElement.lineHeight,
       );
 
       let maxHeight = eMetrics.height;
@@ -217,7 +216,7 @@ export const textWysiwyg = ({
           // update height of the editor after properties updated
           const font = getFontString(updatedTextElement);
           textElementHeight =
-            getApproxLineHeight(font) *
+            updatedTextElement.lineHeight *
             wrapText(
               updatedTextElement.originalText,
               font,
@@ -250,11 +249,12 @@ export const textWysiwyg = ({
 
         // autogrow container height if text exceeds
         if (!isArrowElement(container) && textElementHeight > maxHeight) {
-          const diff = Math.min(
-            textElementHeight - maxHeight,
-            approxLineHeight,
+          const targetContainerHeight = computeContainerDimensionForBoundText(
+            textElementHeight,
+            container.type,
           );
-          mutateElement(container, { height: containerDims.height + diff });
+
+          mutateElement(container, { height: targetContainerHeight });
           return;
         } else if (
           // autoshrink container height until original container height
@@ -263,11 +263,11 @@ export const textWysiwyg = ({
           containerDims.height > originalContainerData.height &&
           textElementHeight < maxHeight
         ) {
-          const diff = Math.min(
-            maxHeight - textElementHeight,
-            approxLineHeight,
+          const targetContainerHeight = computeContainerDimensionForBoundText(
+            textElementHeight,
+            container.type,
           );
-          mutateElement(container, { height: containerDims.height - diff });
+          mutateElement(container, { height: targetContainerHeight });
         }
         // Start pushing text upward until a diff of 30px (padding)
         // is reached
@@ -305,10 +305,6 @@ export const textWysiwyg = ({
         editable.selectionEnd = editable.value.length - diff;
       }
 
-      const lines = updatedTextElement.originalText.split("\n");
-      const lineHeight = updatedTextElement.containerId
-        ? approxLineHeight
-        : eMetrics.height / lines.length;
       let transformWidth = updatedTextElement.width;
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
@@ -338,7 +334,7 @@ export const textWysiwyg = ({
       Object.assign(editable.style, {
         font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
-        lineHeight: `${lineHeight}px`,
+        lineHeight: element.lineHeight,
         width: `${Math.min(textElementWidth, maxWidth)}px`,
         height: `${textElementHeight}px`,
         left: `${viewportX}px`,
@@ -360,6 +356,7 @@ export const textWysiwyg = ({
         filter: "var(--theme-filter)",
         maxHeight: `${editorMaxHeight}px`,
       });
+      editable.scrollTop = 0;
       // For some reason updating font attribute doesn't set font family
       // hence updating font family explicitly for test environment
       if (isTestEnv()) {
@@ -447,7 +444,11 @@ export const textWysiwyg = ({
           font,
           getMaxContainerWidth(container!),
         );
-        const { width, height } = measureText(wrappedText, font);
+        const { width, height } = measureText(
+          wrappedText,
+          font,
+          updatedTextElement.lineHeight,
+        );
         editable.style.width = `${width}px`;
         editable.style.height = `${height}px`;
       }