feat: add line height attribute to text element (#6360)

* feat: add line height attribute to text element

* lint

* update line height when redrawing text bounding box

* fix tests

* retain line height when pasting styles

* fix test

* create a util for calculating ling height using old algo

* update line height when resizing multiple text elements

* make line height backward compatible

* udpate line height for older element when font size updated

* remove logs

* Add specs

* lint

* review fixes

* simplify by changing `lineHeight` from px to unitless

* make param non-optional

* update comment

* fix: jumping text due to font size being calculated incorrectly

* update line height when font family is updated

* lint

* Add spec

* more specs

* rename to getDefaultLineHeight

* fix getting lineHeight for potentially undefined fontFamily

* reduce duplication

* fix fallback

* refactor and comment tweaks

* fix

---------

Co-authored-by: dwelle <luzar.david@gmail.com>

src/element/textElement.test.ts

@@ -1,4 +1,4 @@
-import { BOUND_TEXT_PADDING } from "../constants";
+import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
 import { API } from "../tests/helpers/api";
 import {
   computeContainerDimensionForBoundText,
@@ -6,6 +6,9 @@ import {
   getMaxContainerWidth,
   getMaxContainerHeight,
   wrapText,
+  detectLineHeight,
+  getLineHeightInPx,
+  getDefaultLineHeight,
 } from "./textElement";
 import { FontString } from "./types";
 
@@ -40,9 +43,7 @@ describe("Test wrapText", () => {
       {
         desc: "break all words when width of each word is less than container width",
         width: 80,
-        res: `Hello 
-whats 
-up`,
+        res: `Hello \nwhats \nup`,
       },
       {
         desc: "break all characters when width of each character is less than container width",
@@ -64,8 +65,7 @@ p`,
         desc: "break words as per the width",
 
         width: 140,
-        res: `Hello whats 
-up`,
+        res: `Hello whats \nup`,
       },
       {
         desc: "fit the container",
@@ -95,9 +95,7 @@ whats up`;
       {
         desc: "break all words when width of each word is less than container width",
         width: 80,
-        res: `Hello
-whats 
-up`,
+        res: `Hello\nwhats \nup`,
       },
       {
         desc: "break all characters when width of each character is less than container width",
@@ -143,11 +141,7 @@ whats up`,
       {
         desc: "fit characters of long string as per container width",
         width: 170,
-        res: `hellolongtextth
-isiswhatsupwith
-youIamtypingggg
-gandtypinggg 
-break it now`,
+        res: `hellolongtextth\nisiswhatsupwith\nyouIamtypingggg\ngandtypinggg \nbreak it now`,
       },
 
       {
@@ -166,8 +160,7 @@ now`,
         desc: "fit the long text when container width is greater than text length and move the rest to next line",
 
         width: 600,
-        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg 
-break it now`,
+        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg \nbreak it now`,
       },
     ].forEach((data) => {
       it(`should ${data.desc}`, () => {
@@ -181,8 +174,7 @@ break it now`,
     const text = "Hello Excalidraw";
     // Length of "Excalidraw" is 100 and exacty equal to max width
     const res = wrapText(text, font, 100);
-    expect(res).toEqual(`Hello 
-Excalidraw`);
+    expect(res).toEqual(`Hello \nExcalidraw`);
   });
 
   it("should return the text as is if max width is invalid", () => {
@@ -312,3 +304,35 @@ describe("Test measureText", () => {
     });
   });
 });
+
+const textElement = API.createElement({
+  type: "text",
+  text: "Excalidraw is a\nvirtual \nopensource \nwhiteboard for \nsketching \nhand-drawn like\ndiagrams",
+  fontSize: 20,
+  fontFamily: 1,
+  height: 175,
+});
+
+describe("Test detectLineHeight", () => {
+  it("should return correct line height", () => {
+    expect(detectLineHeight(textElement)).toBe(1.25);
+  });
+});
+
+describe("Test getLineHeightInPx", () => {
+  it("should return correct line height", () => {
+    expect(
+      getLineHeightInPx(textElement.fontSize, textElement.lineHeight),
+    ).toBe(25);
+  });
+});
+
+describe("Test getDefaultLineHeight", () => {
+  it("should return line height using default font family when not passed", () => {
+    //@ts-ignore
+    expect(getDefaultLineHeight()).toBe(1.25);
+  });
+  it("should return correct line height", () => {
+    expect(getDefaultLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
+  });
+});