rename to getLineHeight and use the same line height for regular text elements

src/components/App.tsx

@@ -259,7 +259,7 @@ import throttle from "lodash.throttle";
 import { fileOpen, FileSystemHandle } from "../data/filesystem";
 import {
   bindTextToShapeAfterDuplication,
-  getApproxLineHeight,
+  getLineHeight,
   getApproxMinLineHeight,
   getApproxMinLineWidth,
   getBoundTextElement,
@@ -1734,7 +1734,7 @@ class App extends React.Component<AppProps, AppState> {
           // add paragraph only if previous line was not empty, IOW don't add
           // more than one empty line
           if (prevLine) {
-            const defaultLineHeight = getApproxLineHeight(
+            const defaultLineHeight = getLineHeight(
               getFontString({
                 fontSize: textElementProps.fontSize,
                 fontFamily: textElementProps.fontFamily,

src/element/textElement.ts

@@ -275,17 +275,17 @@ export const measureText = (text: string, font: FontString) => {
 };
 
 const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
-const cacheApproxLineHeight: { [key: FontString]: number } = {};
+const cacheLineHeight: { [key: FontString]: number } = {};
 
-export const getApproxLineHeight = (font: FontString) => {
+export const getLineHeight = (font: FontString) => {
-  if (cacheApproxLineHeight[font]) {
+  if (cacheLineHeight[font]) {
-    return cacheApproxLineHeight[font];
+    return cacheLineHeight[font];
   }
   const fontSize = parseInt(font);
 
   // Calculate line height relative to font size
-  cacheApproxLineHeight[font] = fontSize * 1.2;
+  cacheLineHeight[font] = fontSize * 1.2;
-  return cacheApproxLineHeight[font];
+  return cacheLineHeight[font];
 };
 
 let canvas: HTMLCanvasElement | undefined;
@@ -318,7 +318,7 @@ export const getTextWidth = (text: string, font: FontString) => {
 
 export const getTextHeight = (text: string, font: FontString) => {
   const lines = text.replace(/\r\n?/g, "\n").split("\n");
-  const lineHeight = getApproxLineHeight(font);
+  const lineHeight = getLineHeight(font);
   return lineHeight * lines.length;
 };
 
@@ -473,7 +473,7 @@ export const getApproxMinLineWidth = (font: FontString) => {
 };
 
 export const getApproxMinLineHeight = (font: FontString) => {
-  return getApproxLineHeight(font) + BOUND_TEXT_PADDING * 2;
+  return getLineHeight(font) + BOUND_TEXT_PADDING * 2;
 };
 
 export const getMinCharWidth = (font: FontString) => {

src/element/textWysiwyg.tsx

@@ -22,7 +22,7 @@ import {
 import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
-  getApproxLineHeight,
+  getLineHeight,
   getBoundTextElementId,
   getContainerDims,
   getContainerElement,
@@ -151,9 +151,8 @@ export const textWysiwyg = ({
       return;
     }
     const { textAlign, verticalAlign } = updatedTextElement;
-    const approxLineHeight = getApproxLineHeight(
+    const lineHeight = getLineHeight(getFontString(updatedTextElement));
-      getFontString(updatedTextElement),
+
-    );
     if (updatedTextElement && isTextElement(updatedTextElement)) {
       let coordX = updatedTextElement.x;
       let coordY = updatedTextElement.y;
@@ -211,10 +210,7 @@ export const textWysiwyg = ({
 
         // autogrow container height if text exceeds
         if (!isArrowElement(container) && textElementHeight > maxHeight) {
-          const diff = Math.min(
+          const diff = Math.min(textElementHeight - maxHeight, lineHeight);
-            textElementHeight - maxHeight,
-            approxLineHeight,
-          );
           mutateElement(container, { height: containerDims.height + diff });
           return;
         } else if (
@@ -224,10 +220,7 @@ export const textWysiwyg = ({
           containerDims.height > originalContainerData.height &&
           textElementHeight < maxHeight
         ) {
-          const diff = Math.min(
+          const diff = Math.min(maxHeight - textElementHeight, lineHeight);
-            maxHeight - textElementHeight,
-            approxLineHeight,
-          );
           mutateElement(container, { height: containerDims.height - diff });
         } else {
           const { y } = computeBoundTextPosition(
@@ -257,9 +250,7 @@ export const textWysiwyg = ({
       }
 
       const lines = updatedTextElement.originalText.split("\n");
-      const lineHeight = updatedTextElement.containerId
+
-        ? approxLineHeight
-        : updatedTextElement.height / lines.length;
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
         textElementWidth = Math.min(textElementWidth, maxWidth);

src/renderer/renderElement.ts

@@ -39,7 +39,7 @@ import {
 } from "../constants";
 import { getStroke, StrokeOptions } from "perfect-freehand";
 import {
-  getApproxLineHeight,
+  getLineHeight,
   getBoundTextElement,
   getContainerElement,
 } from "../element/textElement";
@@ -276,7 +276,7 @@ const drawElementOnCanvas = (
         // Canvas does not support multiline text by default
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const lineHeight = element.containerId
-          ? getApproxLineHeight(getFontString(element))
+          ? getLineHeight(getFontString(element))
           : element.height / lines.length;
         const horizontalOffset =
           element.textAlign === "center"

src/tests/clipboard.test.tsx

@@ -3,7 +3,7 @@ import { render, waitFor, GlobalTestState } from "./test-utils";
 import { Pointer, Keyboard } from "./helpers/ui";
 import ExcalidrawApp from "../excalidraw-app";
 import { KEYS } from "../keys";
-import { getApproxLineHeight } from "../element/textElement";
+import { getLineHeight } from "../element/textElement";
 import { getFontString } from "../utils";
 import { getElementBounds } from "../element";
 import { NormalizedZoomValue } from "../types";
@@ -119,7 +119,7 @@ describe("paste text as single lines", () => {
   it("should space items correctly", async () => {
     const text = "hkhkjhki\njgkjhffjh\njgkjhffjh";
     const lineHeight =
-      getApproxLineHeight(
+      getLineHeight(
         getFontString({
           fontSize: h.app.state.currentItemFontSize,
           fontFamily: h.app.state.currentItemFontFamily,
@@ -143,7 +143,7 @@ describe("paste text as single lines", () => {
   it("should leave a space for blank new lines", async () => {
     const text = "hkhkjhki\n\njgkjhffjh";
     const lineHeight =
-      getApproxLineHeight(
+      getLineHeight(
         getFontString({
           fontSize: h.app.state.currentItemFontSize,
           fontFamily: h.app.state.currentItemFontFamily,