fix: text element should be rendered correctly when pasted to a version before measurements change

2025-09-27 11:19:53 +02:00 · 2023-03-17 16:14:46 +05:30
39 changed files with 348 additions and 1206 deletions
--- a/.env.development
+++ b/.env.development
@@ -23,11 +23,6 @@ REACT_APP_DEV_DISABLE_LIVE_RELOAD=

 FAST_REFRESH=false

-# MATOMO
-REACT_APP_MATOMO_URL=
-REACT_APP_CDN_MATOMO_TRACKER_URL=
-REACT_APP_MATOMO_SITE_ID=
-
 #Debug flags

 # To enable bounding box for text containers
--- a/.env.production
+++ b/.env.production
@@ -12,13 +12,6 @@ REACT_APP_WS_SERVER_URL=
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'

 # production-only vars
-# GOOGLE ANALYTICS
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
-# MATOMO
-REACT_APP_MATOMO_URL=https://excalidraw.matomo.cloud/
-REACT_APP_CDN_MATOMO_TRACKER_URL=//cdn.matomo.cloud/excalidraw.matomo.cloud/matomo.js
-REACT_APP_MATOMO_SITE_ID=1
-
-

 REACT_APP_PLUS_APP=https://app.excalidraw.com
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
    An open source virtual hand-drawn style whiteboard. </br>
    Collaborative and end-to-end encrypted. </br>
  <br />
-  </h2>
+  </h3>
 </div>

 <br />
--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx
@@ -1,19 +1,6 @@
 # ref
-
 <pre>
-  <a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs">
-    createRef
-  </a>{" "}
-  &#124;{" "}
-  <a href="https://reactjs.org/docs/hooks-reference.html#useref">useRef</a>{" "}
-  &#124;{" "}
-  <a href="https://reactjs.org/docs/refs-and-the-dom.html#callback-refs">
-    callbackRef
-  </a>{" "}
-  &#124; <br />
-  &#123; current: &#123; readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L460">
-    resolvablePromise
-  </a> } }
+<a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs">createRef</a> &#124; <a href="https://reactjs.org/docs/hooks-reference.html#useref">useRef</a> &#124; <a href="https://reactjs.org/docs/refs-and-the-dom.html#callback-refs">callbackRef</a> &#124; <br/>&#123; current: &#123; readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L460">resolvablePromise</a> } }
 </pre>

 You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
@@ -152,9 +139,7 @@ function App() {
  return (
    <div style={{ height: "500px" }}>
      <p style={{ fontSize: "16px" }}> Click to update the scene</p>
-      <button className="custom-button" onClick={updateScene}>
-        Update Scene
-      </button>
+      <button className="custom-button" onClick={updateScene}>Update Scene</button>
      <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
    </div>
  );
@@ -202,8 +187,7 @@ function App() {
  return (
    <div style={{ height: "500px" }}>
      <p style={{ fontSize: "16px" }}> Click to update the library items</p>
-      <button
-        className="custom-button"
+      <button className="custom-button"
        onClick={() => {
          const libraryItems = [
            {
@@ -221,8 +205,10 @@ function App() {
          ];
          excalidrawAPI.updateLibrary({
            libraryItems,
-            openLibraryMenu: true,
+            openLibraryMenu: true
+
          });
+         
        }}
      >
        Update Library
@@ -264,7 +250,7 @@ Resets the scene. If `resetLoadingState` is passed as true then it will also for

 <pre>
  () =>{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
    ExcalidrawElement[]
  </a>
 </pre>
@@ -275,7 +261,7 @@ Returns all the elements including the deleted in the scene.

 <pre>
  () => NonDeleted&#60;
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
    ExcalidrawElement
  </a>
  []&#62;
@@ -307,31 +293,18 @@ This is the history API. history.clear() will clear the history.
 ## scrollToContent

 <pre>
-  (<br />
-  {"  "}
-  target?:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
+  (target?:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
    ExcalidrawElement
  </a>{" "}
  &#124;{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
    ExcalidrawElement
  </a>
-  [],
-  <br />
-  {"  "}opts?: &#123; fitToContent?: boolean; animate?: boolean; duration?: number
-  &#125;
-  <br />) => void
+  []) => void
 </pre>

-Scroll the nearest element out of the elements supplied to the center of the viewport. Defaults to the elements on the scene.
-
-| Attribute | type | default | Description |
-| --- | --- | --- | --- |
-| target | <code>ExcalidrawElement &#124; ExcalidrawElement[]</code> | All scene elements | The element(s) to scroll to. |
-| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. |
-| opts.animate | boolean | false | Whether to animate between starting and ending position. Note that for larger scenes the animation may not be smooth due to performance issues. |
-| opts.duration | number | 500 | Duration of the animation if `opts.animate` is `true`. |
+Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene.

 ## refresh

@@ -350,7 +323,7 @@ For any other cases if the position of excalidraw is updated (example due to scr
 This API can be used to show the toast with custom message.

 ```tsx
-({ message: string, closable?:boolean,duration?:number
+({ message: string, closable?:boolean,duration?:number 
  } | null) => void
 ```

@@ -385,18 +358,15 @@ This API can be used to get the files present in the scene. It may contain files

 This API has the below signature. It sets the `tool` passed in param as the active tool.

+
 <pre>
-  (tool: <br /> &#123; type:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/shapes.tsx#L15">
-    SHAPES
-  </a>
-  [number]["value"]&#124; "eraser" &#125; &#124;
-  <br /> &#123; type: "custom"; customType: string &#125;) => void
+(tool: <br/>  &#123; type: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/shapes.tsx#L15">SHAPES</a>[number]["value"]&#124; "eraser" &#125; &#124;<br/>  &#123; type: "custom"; customType: string &#125;) => void
 </pre>

 ## setCursor

-This API can be used to customise the mouse cursor on the canvas and has the below signature. It sets the mouse cursor to the cursor passed in param.
+This API can be used to customise the mouse cursor on the canvas and has the below signature.   
+It sets the mouse cursor to the cursor passed in param.

 ```tsx
 (cursor: string) => void
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
  },
  "dependencies": {
    "@dwelle/tunnel-rat": "0.1.1",
-    "@excalidraw/roughjs": "4.5.3",
    "@sentry/browser": "6.2.5",
    "@sentry/integrations": "6.2.5",
    "@testing-library/jest-dom": "5.16.2",
--- a/public/index.html
+++ b/public/index.html
@@ -94,7 +94,7 @@
        // if its present redirect
        document.cookie.includes("excplus-autoredirect=true")
      ) {
-        // window.location.href = "https://app.excalidraw.com";
+        window.location.href = "https://app.excalidraw.com";
      }
    </script>

@@ -146,10 +146,8 @@
      // setting this so that libraries installation reuses this window tab.
      window.name = "_excalidraw";
    </script>
-    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
-
-    <!-- LEGACY GOOGLE ANALYTICS -->
-    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
+    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true' &&
+    process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
@@ -162,33 +160,6 @@
      gtag("js", new Date());
      gtag("config", "%REACT_APP_GOOGLE_ANALYTICS_ID%");
    </script>
-    <% } %>
-    <!-- end LEGACY GOOGLE ANALYTICS -->
-
-    <!-- Matomo -->
-    <% if (process.env.REACT_APP_MATOMO_URL &&
-    process.env.REACT_APP_MATOMO_SITE_ID &&
-    process.env.REACT_APP_CDN_MATOMO_TRACKER_URL) { %>
-    <script>
-      var _paq = (window._paq = window._paq || []);
-      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(["trackPageView"]);
-      _paq.push(["enableLinkTracking"]);
-      (function () {
-        var u = "%REACT_APP_MATOMO_URL%";
-        _paq.push(["setTrackerUrl", u + "matomo.php"]);
-        _paq.push(["setSiteId", "%REACT_APP_MATOMO_SITE_ID%"]);
-        var d = document,
-          g = d.createElement("script"),
-          s = d.getElementsByTagName("script")[0];
-        g.async = true;
-        g.src = "%REACT_APP_CDN_MATOMO_TRACKER_URL%";
-        s.parentNode.insertBefore(g, s);
-      })();
-    </script>
-    <% } %>
-    <!-- end Matomo analytics -->
-
    <% } %>

    <!-- FIXME: remove this when we update CRA (fix SW caching) -->
--- a/src/actions/actionBoundText.tsx
+++ b/src/actions/actionBoundText.tsx
@@ -23,7 +23,6 @@ import {
  ExcalidrawTextElement,
 } from "../element/types";
 import { getSelectedElements } from "../scene";
-import { AppState } from "../types";
 import { getFontString } from "../utils";
 import { register } from "./register";

@@ -46,7 +45,6 @@ export const actionUnbindText = register({
        const { width, height } = measureText(
          boundTextElement.originalText,
          getFontString(boundTextElement),
-          boundTextElement.lineHeight,
        );
        const originalContainerHeight = getOriginalContainerHeightFromCache(
          element.id,
@@ -186,110 +184,99 @@ export const actionCreateContainerFromText = register({
  trackEvent: { category: "element" },
  predicate: (elements, appState) => {
    const selectedElements = getSelectedElements(elements, appState);
-    const areTextElements = selectedElements.every((el) => isTextElement(el));
-    return selectedElements.length > 0 && areTextElements;
+    return selectedElements.length === 1 && isTextElement(selectedElements[0]);
  },
  perform: (elements, appState) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
    );
-    let updatedElements: readonly ExcalidrawElement[] = elements.slice();
-    const containerIds: AppState["selectedElementIds"] = {};
+    const updatedElements = elements.slice();
+    if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
+      const textElement = selectedElements[0];
+      const container = newElement({
+        type: "rectangle",
+        backgroundColor: appState.currentItemBackgroundColor,
+        boundElements: [
+          ...(textElement.boundElements || []),
+          { id: textElement.id, type: "text" },
+        ],
+        angle: textElement.angle,
+        fillStyle: appState.currentItemFillStyle,
+        strokeColor: appState.currentItemStrokeColor,
+        roughness: appState.currentItemRoughness,
+        strokeWidth: appState.currentItemStrokeWidth,
+        strokeStyle: appState.currentItemStrokeStyle,
+        roundness:
+          appState.currentItemRoundness === "round"
+            ? {
+                type: isUsingAdaptiveRadius("rectangle")
+                  ? ROUNDNESS.ADAPTIVE_RADIUS
+                  : ROUNDNESS.PROPORTIONAL_RADIUS,
+              }
+            : null,
+        opacity: 100,
+        locked: false,
+        x: textElement.x - BOUND_TEXT_PADDING,
+        y: textElement.y - BOUND_TEXT_PADDING,
+        width: computeContainerDimensionForBoundText(
+          textElement.width,
+          "rectangle",
+        ),
+        height: computeContainerDimensionForBoundText(
+          textElement.height,
+          "rectangle",
+        ),
+        groupIds: textElement.groupIds,
+      });

-    for (const textElement of selectedElements) {
-      if (isTextElement(textElement)) {
-        const container = newElement({
-          type: "rectangle",
-          backgroundColor: appState.currentItemBackgroundColor,
-          boundElements: [
-            ...(textElement.boundElements || []),
-            { id: textElement.id, type: "text" },
-          ],
-          angle: textElement.angle,
-          fillStyle: appState.currentItemFillStyle,
-          strokeColor: appState.currentItemStrokeColor,
-          roughness: appState.currentItemRoughness,
-          strokeWidth: appState.currentItemStrokeWidth,
-          strokeStyle: appState.currentItemStrokeStyle,
-          roundness:
-            appState.currentItemRoundness === "round"
-              ? {
-                  type: isUsingAdaptiveRadius("rectangle")
-                    ? ROUNDNESS.ADAPTIVE_RADIUS
-                    : ROUNDNESS.PROPORTIONAL_RADIUS,
-                }
-              : null,
-          opacity: 100,
-          locked: false,
-          x: textElement.x - BOUND_TEXT_PADDING,
-          y: textElement.y - BOUND_TEXT_PADDING,
-          width: computeContainerDimensionForBoundText(
-            textElement.width,
-            "rectangle",
-          ),
-          height: computeContainerDimensionForBoundText(
-            textElement.height,
-            "rectangle",
-          ),
-          groupIds: textElement.groupIds,
+      // update bindings
+      if (textElement.boundElements?.length) {
+        const linearElementIds = textElement.boundElements
+          .filter((ele) => ele.type === "arrow")
+          .map((el) => el.id);
+        const linearElements = updatedElements.filter((ele) =>
+          linearElementIds.includes(ele.id),
+        ) as ExcalidrawLinearElement[];
+        linearElements.forEach((ele) => {
+          let startBinding = null;
+          let endBinding = null;
+          if (ele.startBinding) {
+            startBinding = { ...ele.startBinding, elementId: container.id };
+          }
+          if (ele.endBinding) {
+            endBinding = { ...ele.endBinding, elementId: container.id };
+          }
+          mutateElement(ele, { startBinding, endBinding });
        });
+      }

-        // update bindings
-        if (textElement.boundElements?.length) {
-          const linearElementIds = textElement.boundElements
-            .filter((ele) => ele.type === "arrow")
-            .map((el) => el.id);
-          const linearElements = updatedElements.filter((ele) =>
-            linearElementIds.includes(ele.id),
-          ) as ExcalidrawLinearElement[];
-          linearElements.forEach((ele) => {
-            let startBinding = ele.startBinding;
-            let endBinding = ele.endBinding;
+      mutateElement(textElement, {
+        containerId: container.id,
+        verticalAlign: VERTICAL_ALIGN.MIDDLE,
+        boundElements: null,
+      });
+      redrawTextBoundingBox(textElement, container);

-            if (startBinding?.elementId === textElement.id) {
-              startBinding = {
-                ...startBinding,
-                elementId: container.id,
-              };
-            }
-
-            if (endBinding?.elementId === textElement.id) {
-              endBinding = { ...endBinding, elementId: container.id };
-            }
-
-            if (startBinding || endBinding) {
-              mutateElement(ele, { startBinding, endBinding }, false);
-            }
-          });
-        }
-
-        mutateElement(
-          textElement,
-          {
-            containerId: container.id,
-            verticalAlign: VERTICAL_ALIGN.MIDDLE,
-            boundElements: null,
-          },
-          false,
-        );
-        redrawTextBoundingBox(textElement, container);
-
-        updatedElements = pushContainerBelowText(
-          [...updatedElements, container],
+      return {
+        elements: pushContainerBelowText(
+          [...elements, container],
          container,
          textElement,
-        );
-        containerIds[container.id] = true;
-      }
+        ),
+        appState: {
+          ...appState,
+          selectedElementIds: {
+            [container.id]: true,
+            [textElement.id]: false,
+          },
+        },
+        commitToHistory: true,
+      };
    }
-
    return {
      elements: updatedElements,
-      appState: {
-        ...appState,
-        selectedElementIds: containerIds,
-      },
+      appState,
      commitToHistory: true,
    };
  },
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -226,7 +226,7 @@ const zoomValueToFitBoundsOnViewport = (
  return clampedZoomValueToFitElements as NormalizedZoomValue;
 };

-export const zoomToFitElements = (
+const zoomToFitElements = (
  elements: readonly ExcalidrawElement[],
  appState: Readonly<AppState>,
  zoomToSelection: boolean,
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -54,7 +54,6 @@ import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
  getBoundTextElement,
  getContainerElement,
-  getDefaultLineHeight,
 } from "../element/textElement";
 import {
  isBoundToContainer,
@@ -638,7 +637,6 @@ export const actionChangeFontFamily = register({
              oldElement,
              {
                fontFamily: value,
-                lineHeight: getDefaultLineHeight(value),
              },
            );
            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
--- a/src/actions/actionStyles.ts
+++ b/src/actions/actionStyles.ts
@@ -12,10 +12,7 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import {
-  getBoundTextElement,
-  getDefaultLineHeight,
-} from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
 import {
  hasBoundTextElement,
  canApplyRoundnessTypeToElement,
@@ -95,18 +92,12 @@ export const actionPasteStyles = register({
          });

          if (isTextElement(newElement)) {
-            const fontSize =
-              elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE;
-            const fontFamily =
-              elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY;
            newElement = newElementWith(newElement, {
-              fontSize,
-              fontFamily,
+              fontSize: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
+              fontFamily:
+                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
              textAlign:
                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
-              lineHeight:
-                elementStylesToCopyFrom.lineHeight ||
-                getDefaultLineHeight(fontFamily),
            });
            let container = null;
            if (newElement.containerId) {
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -1,30 +1,22 @@
-export const trackEvent = (
-  category: string,
-  action: string,
-  label?: string,
-  value?: number,
-) => {
-  try {
-    // Uncomment the next line to track locally
-    // console.log("Track Event", { category, action, label, value });
-
-    if (typeof window === "undefined" || process.env.JEST_WORKER_ID) {
-      return;
-    }
-
-    if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID && window.gtag) {
-      window.gtag("event", action, {
-        event_category: category,
-        event_label: label,
-        value,
-      });
-    }
-
-    // MATOMO event tracking _paq must be same as the one in index.html
-    if (window._paq) {
-      window._paq.push(["trackEvent", category, action, label, value]);
-    }
-  } catch (error) {
-    console.error("error during analytics", error);
-  }
-};
+export const trackEvent =
+  typeof process !== "undefined" &&
+  process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
+  typeof window !== "undefined" &&
+  window.gtag
+    ? (category: string, action: string, label?: string, value?: number) => {
+        try {
+          window.gtag("event", action, {
+            event_category: category,
+            event_label: label,
+            value,
+          });
+        } catch (error) {
+          console.error("error logging to ga", error);
+        }
+      }
+    : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
+    ? (category: string, action: string, label?: string, value?: number) => {}
+    : (category: string, action: string, label?: string, value?: number) => {
+        // Uncomment the next line to track locally
+        // console.log("Track Event", { category, action, label, value });
+      };
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 import { flushSync } from "react-dom";

-import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import rough from "@excalidraw/roughjs/bin/rough";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import rough from "roughjs/bin/rough";
 import clsx from "clsx";
 import { nanoid } from "nanoid";

@@ -229,7 +229,6 @@ import {
  updateActiveTool,
  getShortcutKey,
  isTransparent,
-  easeToValuesRAF,
 } from "../utils";
 import {
  ContextMenu,
@@ -261,14 +260,13 @@ import throttle from "lodash.throttle";
 import { fileOpen, FileSystemHandle } from "../data/filesystem";
 import {
  bindTextToShapeAfterDuplication,
+  getApproxLineHeight,
  getApproxMinLineHeight,
  getApproxMinLineWidth,
  getBoundTextElement,
  getContainerCenter,
  getContainerDims,
  getContainerElement,
-  getDefaultLineHeight,
-  getLineHeightInPx,
  getTextBindableContainerAtPosition,
  isMeasureTextSupported,
  isValidTextContainer,
@@ -285,10 +283,7 @@ import {
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
-import {
-  actionToggleHandTool,
-  zoomToFitElements,
-} from "../actions/actionCanvas";
+import { actionToggleHandTool } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import { actionCreateContainerFromText } from "../actions/actionBoundText";
@@ -1658,7 +1653,7 @@ class App extends React.Component<AppProps, AppState> {
    this.scene.replaceAllElements(nextElements);

    newElements.forEach((newElement) => {
-      if (isTextElement(newElement) && isBoundToContainer(newElement)) {
+      if (isTextElement(newElement)) {
        const container = getContainerElement(newElement);
        redrawTextBoundingBox(newElement, container);
      }
@@ -1736,14 +1731,12 @@ class App extends React.Component<AppProps, AppState> {
      (acc: ExcalidrawTextElement[], line, idx) => {
        const text = line.trim();

-        const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
        if (text.length) {
          const element = newTextElement({
            ...textElementProps,
            x,
            y: currentY,
            text,
-            lineHeight,
          });
          acc.push(element);
          currentY += element.height + LINE_GAP;
@@ -1752,9 +1745,14 @@ 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) {
-            currentY +=
-              getLineHeightInPx(textElementProps.fontSize, lineHeight) +
-              LINE_GAP;
+            const defaultLineHeight = getApproxLineHeight(
+              getFontString({
+                fontSize: textElementProps.fontSize,
+                fontFamily: textElementProps.fontFamily,
+              }),
+            );
+
+            currentY += defaultLineHeight + LINE_GAP;
          }
        }

@@ -1847,89 +1845,18 @@ class App extends React.Component<AppProps, AppState> {
    this.actionManager.executeAction(actionToggleHandTool);
  };

-  /**
-   * Zooms on canvas viewport center
-   */
-  zoomCanvas = (
-    /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */
-    value: number,
-  ) => {
-    this.setState({
-      ...getStateForZoom(
-        {
-          viewportX: this.state.width / 2 + this.state.offsetLeft,
-          viewportY: this.state.height / 2 + this.state.offsetTop,
-          nextZoom: getNormalizedZoom(value),
-        },
-        this.state,
-      ),
-    });
-  };
-
-  private cancelInProgresAnimation: (() => void) | null = null;
-
  scrollToContent = (
    target:
      | ExcalidrawElement
      | readonly ExcalidrawElement[] = this.scene.getNonDeletedElements(),
-    opts?: { fitToContent?: boolean; animate?: boolean; duration?: number },
  ) => {
-    this.cancelInProgresAnimation?.();
-
-    // convert provided target into ExcalidrawElement[] if necessary
-    const targets = Array.isArray(target) ? target : [target];
-
-    let zoom = this.state.zoom;
-    let scrollX = this.state.scrollX;
-    let scrollY = this.state.scrollY;
-
-    if (opts?.fitToContent) {
-      // compute an appropriate viewport location (scroll X, Y) and zoom level
-      // that fit the target elements on the scene
-      const { appState } = zoomToFitElements(targets, this.state, false);
-      zoom = appState.zoom;
-      scrollX = appState.scrollX;
-      scrollY = appState.scrollY;
-    } else {
-      // compute only the viewport location, without any zoom adjustment
-      const scroll = calculateScrollCenter(targets, this.state, this.canvas);
-      scrollX = scroll.scrollX;
-      scrollY = scroll.scrollY;
-    }
-
-    // when animating, we use RequestAnimationFrame to prevent the animation
-    // from slowing down other processes
-    if (opts?.animate) {
-      const origScrollX = this.state.scrollX;
-      const origScrollY = this.state.scrollY;
-
-      // zoom animation could become problematic on scenes with large number
-      // of elements, setting it to its final value to improve user experience.
-      //
-      // using zoomCanvas() to zoom on current viewport center
-      this.zoomCanvas(zoom.value);
-
-      const cancel = easeToValuesRAF(
-        [origScrollX, origScrollY],
-        [scrollX, scrollY],
-        (scrollX, scrollY) => this.setState({ scrollX, scrollY }),
-        { duration: opts?.duration ?? 500 },
-      );
-      this.cancelInProgresAnimation = () => {
-        cancel();
-        this.cancelInProgresAnimation = null;
-      };
-    } else {
-      this.setState({ scrollX, scrollY, zoom });
-    }
-  };
-
-  /** use when changing scrollX/scrollY/zoom based on user interaction */
-  private translateCanvas: React.Component<any, AppState>["setState"] = (
-    state,
-  ) => {
-    this.cancelInProgresAnimation?.();
-    this.setState(state);
+    this.setState({
+      ...calculateScrollCenter(
+        Array.isArray(target) ? target : [target],
+        this.state,
+        this.canvas,
+      ),
+    });
  };

  setToast = (
@@ -2130,13 +2057,9 @@ class App extends React.Component<AppProps, AppState> {
          offset = -offset;
        }
        if (event.shiftKey) {
-          this.translateCanvas((state) => ({
-            scrollX: state.scrollX + offset,
-          }));
+          this.setState((state) => ({ scrollX: state.scrollX + offset }));
        } else {
-          this.translateCanvas((state) => ({
-            scrollY: state.scrollY + offset,
-          }));
+          this.setState((state) => ({ scrollY: state.scrollY + offset }));
        }
      }

@@ -2684,13 +2607,6 @@ class App extends React.Component<AppProps, AppState> {
      existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
    }

-    const fontFamily =
-      existingTextElement?.fontFamily || this.state.currentItemFontFamily;
-
-    const lineHeight =
-      existingTextElement?.lineHeight || getDefaultLineHeight(fontFamily);
-    const fontSize = this.state.currentItemFontSize;
-
    if (
      !existingTextElement &&
      shouldBindToContainer &&
@@ -2698,14 +2614,11 @@ class App extends React.Component<AppProps, AppState> {
      !isArrowElement(container)
    ) {
      const fontString = {
-        fontSize,
-        fontFamily,
+        fontSize: this.state.currentItemFontSize,
+        fontFamily: this.state.currentItemFontFamily,
      };
-      const minWidth = getApproxMinLineWidth(
-        getFontString(fontString),
-        lineHeight,
-      );
-      const minHeight = getApproxMinLineHeight(fontSize, lineHeight);
+      const minWidth = getApproxMinLineWidth(getFontString(fontString));
+      const minHeight = getApproxMinLineHeight(getFontString(fontString));
      const containerDims = getContainerDims(container);
      const newHeight = Math.max(containerDims.height, minHeight);
      const newWidth = Math.max(containerDims.width, minWidth);
@@ -2739,8 +2652,8 @@ class App extends React.Component<AppProps, AppState> {
          opacity: this.state.currentItemOpacity,
          roundness: null,
          text: "",
-          fontSize,
-          fontFamily,
+          fontSize: this.state.currentItemFontSize,
+          fontFamily: this.state.currentItemFontFamily,
          textAlign: parentCenterPosition
            ? "center"
            : this.state.currentItemTextAlign,
@@ -2750,7 +2663,6 @@ class App extends React.Component<AppProps, AppState> {
          containerId: shouldBindToContainer ? container?.id : undefined,
          groupIds: container?.groupIds ?? [],
          locked: false,
-          lineHeight,
        });

    if (!existingTextElement && shouldBindToContainer && container) {
@@ -3017,12 +2929,12 @@ class App extends React.Component<AppProps, AppState> {
          state,
        );

-        this.translateCanvas({
+        return {
          zoom: zoomState.zoom,
          scrollX: zoomState.scrollX + deltaX / nextZoom,
          scrollY: zoomState.scrollY + deltaY / nextZoom,
          shouldCacheIgnoreZoom: true,
-        });
+        };
      });
      this.resetShouldCacheIgnoreZoomDebounced();
    } else {
@@ -3798,7 +3710,7 @@ class App extends React.Component<AppProps, AppState> {
        window.addEventListener(EVENT.POINTER_UP, enableNextPaste);
      }

-      this.translateCanvas({
+      this.setState({
        scrollX: this.state.scrollX - deltaX / this.state.zoom.value,
        scrollY: this.state.scrollY - deltaY / this.state.zoom.value,
      });
@@ -4944,7 +4856,7 @@ class App extends React.Component<AppProps, AppState> {
    if (pointerDownState.scrollbars.isOverHorizontal) {
      const x = event.clientX;
      const dx = x - pointerDownState.lastCoords.x;
-      this.translateCanvas({
+      this.setState({
        scrollX: this.state.scrollX - dx / this.state.zoom.value,
      });
      pointerDownState.lastCoords.x = x;
@@ -4954,7 +4866,7 @@ class App extends React.Component<AppProps, AppState> {
    if (pointerDownState.scrollbars.isOverVertical) {
      const y = event.clientY;
      const dy = y - pointerDownState.lastCoords.y;
-      this.translateCanvas({
+      this.setState({
        scrollY: this.state.scrollY - dy / this.state.zoom.value,
      });
      pointerDownState.lastCoords.y = y;
@@ -6383,7 +6295,7 @@ class App extends React.Component<AppProps, AppState> {
        // reduced amplification for small deltas (small movements on a trackpad)
        Math.min(1, absDelta / 20);

-      this.translateCanvas((state) => ({
+      this.setState((state) => ({
        ...getStateForZoom(
          {
            viewportX: cursorX,
@@ -6400,14 +6312,14 @@ class App extends React.Component<AppProps, AppState> {

    // scroll horizontally when shift pressed
    if (event.shiftKey) {
-      this.translateCanvas(({ zoom, scrollX }) => ({
+      this.setState(({ zoom, scrollX }) => ({
        // on Mac, shift+wheel tends to result in deltaX
        scrollX: scrollX - (deltaY || deltaX) / zoom.value,
      }));
      return;
    }

-    this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
+    this.setState(({ zoom, scrollX, scrollY }) => ({
      scrollX: scrollX - deltaX / zoom.value,
      scrollY: scrollY - deltaY / zoom.value,
    }));
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -89,9 +89,7 @@ export const exportCanvas = async (
    return await fileSave(blob, {
      description: "Export to PNG",
      name,
-      // FIXME reintroduce `excalidraw.png` when most people upgrade away
-      // from 111.0.5563.64 (arm64), see #6349
-      extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
+      extension: appState.exportEmbedScene ? "excalidraw.png" : "png",
      fileHandle,
    });
  } else if (type === "clipboard") {
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -35,7 +35,6 @@ import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import oc from "open-color";
 import { MarkOptional, Mutable } from "../utility-types";
-import { detectLineHeight, getDefaultLineHeight } from "../element/textElement";

 type RestoredAppState = Omit<
  AppState,
@@ -166,32 +165,17 @@ const restoreElement = (
        const [fontPx, _fontFamily]: [string, string] = (
          element as any
        ).font.split(" ");
-        fontSize = parseFloat(fontPx);
+        fontSize = parseInt(fontPx, 10);
        fontFamily = getFontFamilyByName(_fontFamily);
      }
-      const text = element.text ?? "";
-
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
-        text,
+        text: element.text ?? "",
        textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
        verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
        containerId: element.containerId ?? null,
-        originalText: element.originalText || text,
-        // line-height might not be specified either when creating elements
-        // programmatically, or when importing old diagrams.
-        // For the latter we want to detect the original line height which
-        // will likely differ from our per-font fixed line height we now use,
-        // to maintain backward compatibility.
-        lineHeight:
-          element.lineHeight ||
-          (element.height
-            ? // detect line-height from current element height and font-size
-              detectLineHeight(element)
-            : // no element height likely means programmatic use, so default
-              // to a fixed line height
-              getDefaultLineHeight(element.fontFamily)),
+        originalText: element.originalText || element.text,
      });

      if (refreshDimensions) {
@@ -495,9 +479,7 @@ export const restoreAppState = (
        ? {
            value: appState.zoom as NormalizedZoomValue,
          }
-        : appState.zoom?.value
-        ? appState.zoom
-        : defaultAppState.zoom,
+        : appState.zoom || defaultAppState.zoom,
    // when sidebar docked and user left it open in last session,
    // keep it open. If not docked, keep it closed irrespective of last state.
    openSidebar:
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@@ -7,8 +7,8 @@ import {
  ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
-import rough from "@excalidraw/roughjs/bin/rough";
-import { Drawable, Op } from "@excalidraw/roughjs/bin/core";
+import rough from "roughjs/bin/rough";
+import { Drawable, Op } from "roughjs/bin/core";
 import { Point } from "../types";
 import {
  getShapeForElement,
--- a/src/element/collision.ts
+++ b/src/element/collision.ts
@@ -30,7 +30,7 @@ import {

 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
 import { Point } from "../types";
-import { Drawable } from "@excalidraw/roughjs/bin/core";
+import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
 import { hasBoundTextElement, isImageElement } from "./typeChecks";
@@ -786,12 +786,7 @@ export const findFocusPointForEllipse = (
      orientation * py * Math.sqrt(Math.max(0, squares - a ** 2 * b ** 2))) /
    squares;

-  let n = (-m * px - 1) / py;
-
-  if (n === 0) {
-    // if zero {-0, 0}, fall back to a same-sign value in the similar range
-    n = (Object.is(n, -0) ? -1 : 1) * 0.01;
-  }
+  const n = (-m * px - 1) / py;

  const x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);
  return GA.point(x, (-m * x - 1) / n);
--- a/src/element/newElement.ts
+++ b/src/element/newElement.ts
@@ -29,7 +29,6 @@ import {
  normalizeText,
  wrapText,
  getMaxContainerWidth,
-  getDefaultLineHeight,
 } from "./textElement";
 import { VERTICAL_ALIGN } from "../constants";
 import { isArrowElement } from "./typeChecks";
@@ -138,12 +137,10 @@ export const newTextElement = (
    textAlign: TextAlign;
    verticalAlign: VerticalAlign;
    containerId?: ExcalidrawTextContainer["id"];
-    lineHeight?: ExcalidrawTextElement["lineHeight"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
-  const lineHeight = opts.lineHeight || getDefaultLineHeight(opts.fontFamily);
  const text = normalizeText(opts.text);
-  const metrics = measureText(text, getFontString(opts), lineHeight);
+  const metrics = measureText(text, getFontString(opts));
  const offsets = getTextElementPositionOffsets(opts, metrics);
  const textElement = newElementWith(
    {
@@ -159,7 +156,6 @@ export const newTextElement = (
      height: metrics.height,
      containerId: opts.containerId || null,
      originalText: text,
-      lineHeight,
    },
    {},
  );
@@ -180,7 +176,6 @@ const getAdjustedDimensions = (
  const { width: nextWidth, height: nextHeight } = measureText(
    nextText,
    getFontString(element),
-    element.lineHeight,
  );
  const { textAlign, verticalAlign } = element;
  let x: number;
@@ -190,11 +185,7 @@ const getAdjustedDimensions = (
    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
    !element.containerId
  ) {
-    const prevMetrics = measureText(
-      element.text,
-      getFontString(element),
-      element.lineHeight,
-    );
+    const prevMetrics = measureText(element.text, getFontString(element));
    const offsets = getTextElementPositionOffsets(element, {
      width: nextWidth - prevMetrics.width,
      height: nextHeight - prevMetrics.height,
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -39,13 +39,13 @@ import {
 import { Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
+  getApproxMinLineHeight,
  getApproxMinLineWidth,
  getBoundTextElement,
  getBoundTextElementId,
  getContainerElement,
  handleBindTextResize,
  getMaxContainerWidth,
-  getApproxMinLineHeight,
 } from "./textElement";

 export const normalizeAngle = (angle: number): number => {
@@ -360,7 +360,7 @@ export const resizeSingleElement = (
  let scaleX = atStartBoundsWidth / boundsCurrentWidth;
  let scaleY = atStartBoundsHeight / boundsCurrentHeight;

-  let boundTextFontSize: number | null = null;
+  let boundTextFont: { fontSize?: number } = {};
  const boundTextElement = getBoundTextElement(element);

  if (transformHandleDirection.includes("e")) {
@@ -410,7 +410,9 @@ export const resizeSingleElement = (
      boundTextElement.id,
    ) as typeof boundTextElement | undefined;
    if (stateOfBoundTextElementAtResize) {
-      boundTextFontSize = stateOfBoundTextElementAtResize.fontSize;
+      boundTextFont = {
+        fontSize: stateOfBoundTextElementAtResize.fontSize,
+      };
    }
    if (shouldMaintainAspectRatio) {
      const updatedElement = {
@@ -426,16 +428,12 @@ export const resizeSingleElement = (
      if (nextFontSize === null) {
        return;
      }
-      boundTextFontSize = nextFontSize;
+      boundTextFont = {
+        fontSize: nextFontSize,
+      };
    } else {
-      const minWidth = getApproxMinLineWidth(
-        getFontString(boundTextElement),
-        boundTextElement.lineHeight,
-      );
-      const minHeight = getApproxMinLineHeight(
-        boundTextElement.fontSize,
-        boundTextElement.lineHeight,
-      );
+      const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
+      const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
    }
@@ -568,10 +566,8 @@ export const resizeSingleElement = (
    });

    mutateElement(element, resizedElement);
-    if (boundTextElement && boundTextFontSize != null) {
-      mutateElement(boundTextElement, {
-        fontSize: boundTextFontSize,
-      });
+    if (boundTextElement && boundTextFont) {
+      mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
    }
    handleBindTextResize(element, transformHandleDirection);
  }
--- a/src/element/textElement.test.ts
+++ b/src/element/textElement.test.ts
@@ -1,4 +1,4 @@
-import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
+import { BOUND_TEXT_PADDING } from "../constants";
 import { API } from "../tests/helpers/api";
 import {
  computeContainerDimensionForBoundText,
@@ -6,9 +6,6 @@ import {
  getMaxContainerWidth,
  getMaxContainerHeight,
  wrapText,
-  detectLineHeight,
-  getLineHeightInPx,
-  getDefaultLineHeight,
 } from "./textElement";
 import { FontString } from "./types";

@@ -43,7 +40,9 @@ describe("Test wrapText", () => {
      {
        desc: "break all words when width of each word is less than container width",
        width: 80,
-        res: `Hello \nwhats \nup`,
+        res: `Hello 
+whats 
+up`,
      },
      {
        desc: "break all characters when width of each character is less than container width",
@@ -65,7 +64,8 @@ p`,
        desc: "break words as per the width",

        width: 140,
-        res: `Hello whats \nup`,
+        res: `Hello whats 
+up`,
      },
      {
        desc: "fit the container",
@@ -95,7 +95,9 @@ whats up`;
      {
        desc: "break all words when width of each word is less than container width",
        width: 80,
-        res: `Hello\nwhats \nup`,
+        res: `Hello
+whats 
+up`,
      },
      {
        desc: "break all characters when width of each character is less than container width",
@@ -141,7 +143,11 @@ whats up`,
      {
        desc: "fit characters of long string as per container width",
        width: 170,
-        res: `hellolongtextth\nisiswhatsupwith\nyouIamtypingggg\ngandtypinggg \nbreak it now`,
+        res: `hellolongtextth
+isiswhatsupwith
+youIamtypingggg
+gandtypinggg 
+break it now`,
      },

      {
@@ -160,7 +166,8 @@ 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 \nbreak it now`,
+        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg 
+break it now`,
      },
    ].forEach((data) => {
      it(`should ${data.desc}`, () => {
@@ -174,14 +181,8 @@ 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 \nExcalidraw`);
-  });
-
-  it("should return the text as is if max width is invalid", () => {
-    const text = "Hello Excalidraw";
-    expect(wrapText(text, font, NaN)).toEqual(text);
-    expect(wrapText(text, font, -1)).toEqual(text);
-    expect(wrapText(text, font, Infinity)).toEqual(text);
+    expect(res).toEqual(`Hello 
+Excalidraw`);
  });
 });

@@ -304,41 +305,3 @@ 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 line height using default font family for unknown font", () => {
-    const UNKNOWN_FONT = 5;
-    expect(getDefaultLineHeight(UNKNOWN_FONT)).toBe(1.25);
-  });
-
-  it("should return correct line height", () => {
-    expect(getDefaultLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
-  });
-});
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@@ -4,7 +4,6 @@ import {
  ExcalidrawTextContainer,
  ExcalidrawTextElement,
  ExcalidrawTextElementWithContainer,
-  FontFamilyValues,
  FontString,
  NonDeletedExcalidrawElement,
 } from "./types";
@@ -13,7 +12,6 @@ import {
  BOUND_TEXT_PADDING,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
-  FONT_FAMILY,
  TEXT_ALIGN,
  VERTICAL_ALIGN,
 } from "../constants";
@@ -43,15 +41,12 @@ export const normalizeText = (text: string) => {
  );
 };

-export const splitIntoLines = (text: string) => {
-  return normalizeText(text).split("\n");
-};
-
 export const redrawTextBoundingBox = (
  textElement: ExcalidrawTextElement,
  container: ExcalidrawElement | null,
 ) => {
  let maxWidth = undefined;
+
  const boundTextUpdates = {
    x: textElement.x,
    y: textElement.y,
@@ -73,7 +68,6 @@ export const redrawTextBoundingBox = (
  const metrics = measureText(
    boundTextUpdates.text,
    getFontString(textElement),
-    textElement.lineHeight,
  );

  boundTextUpdates.width = metrics.width;
@@ -191,11 +185,7 @@ export const handleBindTextResize = (
          maxWidth,
        );
      }
-      const dimensions = measureText(
-        text,
-        getFontString(textElement),
-        textElement.lineHeight,
-      );
+      const dimensions = measureText(text, getFontString(textElement));
      nextHeight = dimensions.height;
      nextWidth = dimensions.width;
    }
@@ -271,52 +261,32 @@ const computeBoundTextPosition = (

 // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js

-export const measureText = (
-  text: string,
-  font: FontString,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
+export const measureText = (text: string, font: FontString) => {
  text = text
    .split("\n")
    // replace empty lines with single space because leading/trailing empty
    // lines would be stripped from computation
    .map((x) => x || " ")
    .join("\n");
-  const fontSize = parseFloat(font);
-  const height = getTextHeight(text, fontSize, lineHeight);
+
+  const height = getTextHeight(text, font);
  const width = getTextWidth(text, font);

  return { width, height };
 };

-/**
- * To get unitless line-height (if unknown) we can calculate it by dividing
- * height-per-line by fontSize.
- */
-export const detectLineHeight = (textElement: ExcalidrawTextElement) => {
-  const lineCount = splitIntoLines(textElement.text).length;
-  return (textElement.height /
-    lineCount /
-    textElement.fontSize) as ExcalidrawTextElement["lineHeight"];
-};
+const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
+const cacheApproxLineHeight: { [key: FontString]: number } = {};

-/**
- * We calculate the line height from the font size and the unitless line height,
- * aligning with the W3C spec.
- */
-export const getLineHeightInPx = (
-  fontSize: ExcalidrawTextElement["fontSize"],
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
-  return fontSize * lineHeight;
-};
+export const getApproxLineHeight = (font: FontString) => {
+  if (cacheApproxLineHeight[font]) {
+    return cacheApproxLineHeight[font];
+  }
+  const fontSize = parseInt(font);

-// FIXME rename to getApproxMinContainerHeight
-export const getApproxMinLineHeight = (
-  fontSize: ExcalidrawTextElement["fontSize"],
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
-  return getLineHeightInPx(fontSize, lineHeight) + BOUND_TEXT_PADDING * 2;
+  // Calculate line height relative to font size
+  cacheApproxLineHeight[font] = fontSize * 1.2;
+  return cacheApproxLineHeight[font];
 };

 let canvas: HTMLCanvasElement | undefined;
@@ -339,7 +309,7 @@ const getLineWidth = (text: string, font: FontString) => {
 };

 export const getTextWidth = (text: string, font: FontString) => {
-  const lines = splitIntoLines(text);
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
  let width = 0;
  lines.forEach((line) => {
    width = Math.max(width, getLineWidth(line, font));
@@ -347,23 +317,13 @@ export const getTextWidth = (text: string, font: FontString) => {
  return width;
 };

-export const getTextHeight = (
-  text: string,
-  fontSize: number,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
-  const lineCount = splitIntoLines(text).length;
-  return getLineHeightInPx(fontSize, lineHeight) * lineCount;
+export const getTextHeight = (text: string, font: FontString) => {
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  const lineHeight = getApproxLineHeight(font);
+  return lineHeight * lines.length;
 };

 export const wrapText = (text: string, font: FontString, maxWidth: number) => {
-  // if maxWidth is not finite or NaN which can happen in case of bugs in
-  // computation, we need to make sure we don't continue as we'll end up
-  // in an infinite loop
-  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
-  }
-
  const lines: Array<string> = [];
  const originalLines = text.split("\n");
  const spaceWidth = getLineWidth(" ", font);
@@ -501,23 +461,21 @@ export const charWidth = (() => {
  };
 })();

-const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
-
-// FIXME rename to getApproxMinContainerWidth
-export const getApproxMinLineWidth = (
-  font: FontString,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-) => {
+export const getApproxMinLineWidth = (font: FontString) => {
  const maxCharWidth = getMaxCharWidth(font);
  if (maxCharWidth === 0) {
    return (
-      measureText(DUMMY_TEXT.split("").join("\n"), font, lineHeight).width +
+      measureText(DUMMY_TEXT.split("").join("\n"), font).width +
      BOUND_TEXT_PADDING * 2
    );
  }
  return maxCharWidth + BOUND_TEXT_PADDING * 2;
 };

+export const getApproxMinLineHeight = (font: FontString) => {
+  return getApproxLineHeight(font) + BOUND_TEXT_PADDING * 2;
+};
+
 export const getMinCharWidth = (font: FontString) => {
  const cache = charWidth.getCache(font);
  if (!cache) {
@@ -863,32 +821,3 @@ export const isMeasureTextSupported = () => {
  );
  return width > 0;
 };
-
-/**
- * Unitless line height
- *
- * In previous versions we used `normal` line height, which browsers interpret
- * differently, and based on font-family and font-size.
- *
- * To make line heights consistent across browsers we hardcode the values for
- * each of our fonts based on most common average line-heights.
- * See https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971
- * where the values come from.
- */
-const DEFAULT_LINE_HEIGHT = {
-  // ~1.25 is the average for Virgil in WebKit and Blink.
-  // Gecko (FF) uses ~1.28.
-  [FONT_FAMILY.Virgil]: 1.25 as ExcalidrawTextElement["lineHeight"],
-  // ~1.15 is the average for Virgil in WebKit and Blink.
-  // Gecko if all over the place.
-  [FONT_FAMILY.Helvetica]: 1.15 as ExcalidrawTextElement["lineHeight"],
-  // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too
-  [FONT_FAMILY.Cascadia]: 1.2 as ExcalidrawTextElement["lineHeight"],
-};
-
-export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
-  if (fontFamily in DEFAULT_LINE_HEIGHT) {
-    return DEFAULT_LINE_HEIGHT[fontFamily];
-  }
-  return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
-};
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@@ -526,44 +526,6 @@ describe("textWysiwyg", () => {
      ]);
    });

-    it("should compute the container height correctly and not throw error when height is updated while editing the text", async () => {
-      const diamond = API.createElement({
-        type: "diamond",
-        x: 10,
-        y: 20,
-        width: 90,
-        height: 75,
-      });
-      h.elements = [diamond];
-
-      expect(h.elements.length).toBe(1);
-      expect(h.elements[0].id).toBe(diamond.id);
-
-      API.setSelectedElements([diamond]);
-      Keyboard.keyPress(KEYS.ENTER);
-
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      await new Promise((r) => setTimeout(r, 0));
-      const value = new Array(1000).fill("1").join("\n");
-
-      // Pasting large text to simulate height increase
-      expect(() =>
-        fireEvent.input(editor, { target: { value } }),
-      ).not.toThrow();
-
-      expect(diamond.height).toBe(50020);
-
-      // Clearing text to simulate height decrease
-      expect(() =>
-        fireEvent.input(editor, { target: { value: "" } }),
-      ).not.toThrow();
-
-      expect(diamond.height).toBe(70);
-    });
-
    it("should bind text to container when double clicked on center of transparent container", async () => {
      const rectangle = API.createElement({
        type: "rectangle",
@@ -821,7 +783,7 @@ describe("textWysiwyg", () => {
        rectangle.y + h.elements[0].height / 2 - text.height / 2,
      );
      expect(text.x).toBe(25);
-      expect(text.height).toBe(50);
+      expect(text.height).toBe(48);
      expect(text.width).toBe(60);

      // Edit and text by removing second line and it should
@@ -848,7 +810,7 @@ describe("textWysiwyg", () => {

      expect(text.text).toBe("Hello");
      expect(text.originalText).toBe("Hello");
-      expect(text.height).toBe(25);
+      expect(text.height).toBe(24);
      expect(text.width).toBe(50);
      expect(text.y).toBe(
        rectangle.y + h.elements[0].height / 2 - text.height / 2,
@@ -941,7 +903,7 @@ describe("textWysiwyg", () => {
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        Array [
          85,
-          4.5,
+          5,
        ]
      `);

@@ -967,7 +929,7 @@ describe("textWysiwyg", () => {
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        Array [
          15,
-          65,
+          66,
        ]
      `);

@@ -1105,9 +1067,9 @@ describe("textWysiwyg", () => {
      mouse.moveTo(rectangle.x + 100, rectangle.y + 50);
      mouse.up(rectangle.x + 100, rectangle.y + 50);
      expect(rectangle.x).toBe(80);
-      expect(rectangle.y).toBe(-40);
+      expect(rectangle.y).toBe(-35);
      expect(text.x).toBe(85);
-      expect(text.y).toBe(-35);
+      expect(text.y).toBe(-30);

      Keyboard.withModifierKeys({ ctrl: true }, () => {
        Keyboard.keyPress(KEYS.Z);
@@ -1150,7 +1112,7 @@ describe("textWysiwyg", () => {
        target: { value: "Online whiteboard collaboration made easy" },
      });
      editor.blur();
-      expect(rectangle.height).toBe(185);
+      expect(rectangle.height).toBe(178);
      mouse.select(rectangle);
      fireEvent.contextMenu(GlobalTestState.canvas, {
        button: 2,
@@ -1219,42 +1181,9 @@ describe("textWysiwyg", () => {
      expect(
        (h.elements[1] as ExcalidrawTextElementWithContainer).fontSize,
      ).toEqual(36);
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(97);
-    });
-
-    it("should update line height when font family updated", async () => {
-      Keyboard.keyPress(KEYS.ENTER);
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
-
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
-      editor.blur();
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
-      ).toEqual(1.25);
-
-      mouse.select(rectangle);
-      Keyboard.keyPress(KEYS.ENTER);
-
-      fireEvent.click(screen.getByTitle(/code/i));
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Cascadia);
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
-      ).toEqual(1.2);
-
-      fireEvent.click(screen.getByTitle(/normal/i));
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Helvetica);
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
-      ).toEqual(1.15);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(
+        96.39999999999999,
+      );
    });

    describe("should align correctly", () => {
@@ -1316,7 +1245,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            15,
-            45,
+            45.5,
          ]
        `);
      });
@@ -1328,7 +1257,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            30,
-            45,
+            45.5,
          ]
        `);
      });
@@ -1340,7 +1269,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            45,
-            45,
+            45.5,
          ]
        `);
      });
@@ -1352,7 +1281,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            15,
-            65,
+            66,
          ]
        `);
      });
@@ -1363,7 +1292,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            30,
-            65,
+            66,
          ]
        `);
      });
@@ -1374,7 +1303,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            45,
-            65,
+            66,
          ]
        `);
      });
@@ -1404,7 +1333,7 @@ describe("textWysiwyg", () => {

      const textElement = h.elements[1] as ExcalidrawTextElement;
      expect(textElement.width).toBe(600);
-      expect(textElement.height).toBe(25);
+      expect(textElement.height).toBe(24);
      expect(textElement.textAlign).toBe(TEXT_ALIGN.LEFT);
      expect((textElement as ExcalidrawTextElement).text).toBe(
        "Excalidraw is an opensource virtual collaborative whiteboard",
@@ -1436,7 +1365,7 @@ describe("textWysiwyg", () => {
          ],
          fillStyle: "hachure",
          groupIds: [],
-          height: 35,
+          height: 34,
          isDeleted: false,
          link: null,
          locked: false,
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -22,6 +22,7 @@ import {
 import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
+  getApproxLineHeight,
  getBoundTextElementId,
  getContainerCoords,
  getContainerDims,
@@ -34,7 +35,6 @@ import {
  wrapText,
  getMaxContainerHeight,
  getMaxContainerWidth,
-  computeContainerDimensionForBoundText,
 } from "./textElement";
 import {
  actionDecreaseFontSize,
@@ -150,7 +150,9 @@ 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;
@@ -209,12 +211,11 @@ export const textWysiwyg = ({

        // autogrow container height if text exceeds
        if (!isArrowElement(container) && textElementHeight > maxHeight) {
-          const targetContainerHeight = computeContainerDimensionForBoundText(
-            textElementHeight,
-            container.type,
+          const diff = Math.min(
+            textElementHeight - maxHeight,
+            approxLineHeight,
          );
-
-          mutateElement(container, { height: targetContainerHeight });
+          mutateElement(container, { height: containerDims.height + diff });
          return;
        } else if (
          // autoshrink container height until original container height
@@ -223,11 +224,11 @@ export const textWysiwyg = ({
          containerDims.height > originalContainerData.height &&
          textElementHeight < maxHeight
        ) {
-          const targetContainerHeight = computeContainerDimensionForBoundText(
-            textElementHeight,
-            container.type,
+          const diff = Math.min(
+            maxHeight - textElementHeight,
+            approxLineHeight,
          );
-          mutateElement(container, { height: targetContainerHeight });
+          mutateElement(container, { height: containerDims.height - diff });
        }
        // Start pushing text upward until a diff of 30px (padding)
        // is reached
@@ -265,6 +266,10 @@ export const textWysiwyg = ({
        editable.selectionEnd = editable.value.length - diff;
      }

+      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);
@@ -277,7 +282,7 @@ export const textWysiwyg = ({
      Object.assign(editable.style, {
        font: getFontString(updatedTextElement),
        // must be defined *after* font ¯\_(ツ)_/¯
-        lineHeight: element.lineHeight,
+        lineHeight: `${lineHeight}px`,
        width: `${textElementWidth}px`,
        height: `${textElementHeight}px`,
        left: `${viewportX}px`,
@@ -297,7 +302,6 @@ 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()) {
@@ -384,11 +388,7 @@ export const textWysiwyg = ({
          font,
          getMaxContainerWidth(container!),
        );
-        const { width, height } = measureText(
-          wrappedText,
-          font,
-          updatedTextElement.lineHeight,
-        );
+        const { width, height } = measureText(wrappedText, font);
        editable.style.width = `${width}px`;
        editable.style.height = `${height}px`;
      }
--- a/src/element/types.ts
+++ b/src/element/types.ts
@@ -135,11 +135,6 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
    verticalAlign: VerticalAlign;
    containerId: ExcalidrawGenericElement["id"] | null;
    originalText: string;
-    /**
-     * Unitless line height (aligned to W3C). To get line height in px, multiply
-     *  with font size (using `getLineHeightInPx` helper).
-     */
-    lineHeight: number & { _brand: "unitlessLineHeight" };
  }>;

 export type ExcalidrawBindableElement =
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -18,8 +18,6 @@ interface Window {
  EXCALIDRAW_EXPORT_SOURCE: string;
  EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
  gtag: Function;
-  _paq: any[];
-  _mtm: any[];
 }

 interface CanvasRenderingContext2D {
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -15,8 +15,6 @@ Please add the latest change on the top under the correct section.

 ### Features

- [`ExcalidrawAPI.scrolToContent`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/ref#scrolltocontent) has new opts object allowing you to fit viewport to content, and animate the scrolling. [#6319](https://github.com/excalidraw/excalidraw/pull/6319)
-
 - Expose `useI18n()` hook return an object containing `t()` i18n helper and current `langCode`. You can use this in components you render as `<Excalidraw>` children to render any of our i18n locale strings. [#6224](https://github.com/excalidraw/excalidraw/pull/6224)

 - [`restoreElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils/restore#restoreelements) API now takes an optional parameter `opts` which currently supports the below attributes
--- a/src/random.ts
+++ b/src/random.ts
@@ -1,4 +1,4 @@
-import { Random } from "@excalidraw/roughjs/bin/math";
+import { Random } from "roughjs/bin/math";
 import { nanoid } from "nanoid";
 import { isTestEnv } from "./utils";

--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -21,15 +21,15 @@ import {
  getElementAbsoluteCoords,
  getArrowheadPoints,
 } from "../element/bounds";
-import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import { Drawable, Options } from "@excalidraw/roughjs/bin/core";
-import { RoughSVG } from "@excalidraw/roughjs/bin/svg";
-import { RoughGenerator } from "@excalidraw/roughjs/bin/generator";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import { Drawable, Options } from "roughjs/bin/core";
+import { RoughSVG } from "roughjs/bin/svg";
+import { RoughGenerator } from "roughjs/bin/generator";

 import { RenderConfig } from "../scene/types";
 import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
 import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
-import rough from "@excalidraw/roughjs/bin/rough";
+import rough from "roughjs/bin/rough";
 import { AppState, BinaryFiles, Zoom } from "../types";
 import { getDefaultAppState } from "../appState";
 import {
@@ -40,10 +40,10 @@ import {
 } from "../constants";
 import { getStroke, StrokeOptions } from "perfect-freehand";
 import {
+  getApproxLineHeight,
  getBoundTextElement,
  getContainerCoords,
  getContainerElement,
-  getLineHeightInPx,
  getMaxContainerHeight,
  getMaxContainerWidth,
 } from "../element/textElement";
@@ -87,66 +87,12 @@ export interface ExcalidrawElementWithCanvas {
  element: ExcalidrawElement | ExcalidrawTextElement;
  canvas: HTMLCanvasElement;
  theme: RenderConfig["theme"];
-  scale: number;
+  canvasZoom: Zoom["value"];
  canvasOffsetX: number;
  canvasOffsetY: number;
  boundTextElementVersion: number | null;
 }

-const cappedElementCanvasSize = (
-  element: NonDeletedExcalidrawElement,
-  zoom: Zoom,
-): {
-  width: number;
-  height: number;
-  scale: number;
-} => {
-  // these limits are ballpark, they depend on specific browsers and device.
-  // We've chosen lower limits to be safe. We might want to change these limits
-  // based on browser/device type, if we get reports of low quality rendering
-  // on zoom.
-  //
-  // ~ safari mobile canvas area limit
-  const AREA_LIMIT = 16777216;
-  // ~ safari width/height limit based on developer.mozilla.org.
-  const WIDTH_HEIGHT_LIMIT = 32767;
-
-  const padding = getCanvasPadding(element);
-
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const elementWidth =
-    isLinearElement(element) || isFreeDrawElement(element)
-      ? distance(x1, x2)
-      : element.width;
-  const elementHeight =
-    isLinearElement(element) || isFreeDrawElement(element)
-      ? distance(y1, y2)
-      : element.height;
-
-  let width = elementWidth * window.devicePixelRatio + padding * 2;
-  let height = elementHeight * window.devicePixelRatio + padding * 2;
-
-  let scale: number = zoom.value;
-
-  // rescale to ensure width and height is within limits
-  if (
-    width * scale > WIDTH_HEIGHT_LIMIT ||
-    height * scale > WIDTH_HEIGHT_LIMIT
-  ) {
-    scale = Math.min(WIDTH_HEIGHT_LIMIT / width, WIDTH_HEIGHT_LIMIT / height);
-  }
-
-  // rescale to ensure canvas area is within limits
-  if (width * height * scale * scale > AREA_LIMIT) {
-    scale = Math.sqrt(AREA_LIMIT / (width * height));
-  }
-
-  width = Math.floor(width * scale);
-  height = Math.floor(height * scale);
-
-  return { width, height, scale };
-};
-
 const generateElementCanvas = (
  element: NonDeletedExcalidrawElement,
  zoom: Zoom,
@@ -156,35 +102,44 @@ const generateElementCanvas = (
  const context = canvas.getContext("2d")!;
  const padding = getCanvasPadding(element);

-  const { width, height, scale } = cappedElementCanvasSize(element, zoom);
-
-  canvas.width = width;
-  canvas.height = height;
-
  let canvasOffsetX = 0;
  let canvasOffsetY = 0;

  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const [x1, y1] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+
+    canvas.width =
+      distance(x1, x2) * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
+    canvas.height =
+      distance(y1, y2) * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;

    canvasOffsetX =
      element.x > x1
-        ? distance(element.x, x1) * window.devicePixelRatio * scale
+        ? distance(element.x, x1) * window.devicePixelRatio * zoom.value
        : 0;

    canvasOffsetY =
      element.y > y1
-        ? distance(element.y, y1) * window.devicePixelRatio * scale
+        ? distance(element.y, y1) * window.devicePixelRatio * zoom.value
        : 0;

    context.translate(canvasOffsetX, canvasOffsetY);
+  } else {
+    canvas.width =
+      element.width * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
+    canvas.height =
+      element.height * window.devicePixelRatio * zoom.value +
+      padding * zoom.value * 2;
  }

  context.save();
-  context.translate(padding * scale, padding * scale);
+  context.translate(padding * zoom.value, padding * zoom.value);
  context.scale(
-    window.devicePixelRatio * scale,
-    window.devicePixelRatio * scale,
+    window.devicePixelRatio * zoom.value,
+    window.devicePixelRatio * zoom.value,
  );

  const rc = rough.canvas(canvas);
@@ -201,7 +156,7 @@ const generateElementCanvas = (
    element,
    canvas,
    theme: renderConfig.theme,
-    scale,
+    canvasZoom: zoom.value,
    canvasOffsetX,
    canvasOffsetY,
    boundTextElementVersion: getBoundTextElement(element)?.version || null,
@@ -324,7 +279,9 @@ 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))
+          : element.height / lines.length;
        const horizontalOffset =
          element.textAlign === "center"
            ? element.width / 2
@@ -333,16 +290,11 @@ const drawElementOnCanvas = (
            : 0;
        context.textBaseline = "bottom";

-        const lineHeightPx = getLineHeightInPx(
-          element.fontSize,
-          element.lineHeight,
-        );
-
        for (let index = 0; index < lines.length; index++) {
          context.fillText(
            lines[index],
            horizontalOffset,
-            (index + 1) * lineHeightPx,
+            (index + 1) * lineHeight,
          );
        }
        context.restore();
@@ -389,16 +341,6 @@ export const setShapeForElement = <T extends ExcalidrawElement>(
 export const invalidateShapeForElement = (element: ExcalidrawElement) =>
  shapeCache.delete(element);

-function adjustRoughness(size: number, roughness: number): number {
-  if (size >= 50) {
-    return roughness;
-  }
-  const factor = 2 + (50 - size) / 10;
-
-  // console.log({ ret: roughness / factor, roughness, factor, size });
-  return roughness / factor;
-}
-
 export const generateRoughOptions = (
  element: ExcalidrawElement,
  continuousPath = false,
@@ -425,10 +367,7 @@ export const generateRoughOptions = (
    // calculate them (and we don't want the fills to be modified)
    fillWeight: element.strokeWidth / 2,
    hachureGap: element.strokeWidth * 4,
-    roughness: adjustRoughness(
-      Math.min(element.width, element.height),
-      element.roughness,
-    ),
+    roughness: element.roughness,
    stroke: element.strokeColor,
    preserveVertices: continuousPath,
  };
@@ -728,7 +667,7 @@ const generateElementWithCanvas = (
  const prevElementWithCanvas = elementWithCanvasCache.get(element);
  const shouldRegenerateBecauseZoom =
    prevElementWithCanvas &&
-    prevElementWithCanvas.scale !== zoom.value &&
+    prevElementWithCanvas.canvasZoom !== zoom.value &&
    !renderConfig?.shouldCacheIgnoreZoom;
  const boundTextElementVersion = getBoundTextElement(element)?.version || null;

@@ -759,7 +698,7 @@ const drawElementFromCanvas = (
 ) => {
  const element = elementWithCanvas.element;
  const padding = getCanvasPadding(element);
-  const zoom = elementWithCanvas.scale;
+  const zoom = elementWithCanvas.canvasZoom;
  let [x1, y1, x2, y2] = getElementAbsoluteCoords(element);

  // Free draw elements will otherwise "shuffle" as the min x and y change
@@ -786,10 +725,10 @@ const drawElementFromCanvas = (
    const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
    tempCanvas.width =
      maxDim * window.devicePixelRatio * zoom +
-      padding * elementWithCanvas.scale * 10;
+      padding * elementWithCanvas.canvasZoom * 10;
    tempCanvas.height =
      maxDim * window.devicePixelRatio * zoom +
-      padding * elementWithCanvas.scale * 10;
+      padding * elementWithCanvas.canvasZoom * 10;
    const offsetX = (tempCanvas.width - elementWithCanvas.canvas!.width) / 2;
    const offsetY = (tempCanvas.height - elementWithCanvas.canvas!.height) / 2;

@@ -870,11 +809,11 @@ const drawElementFromCanvas = (
    context.drawImage(
      elementWithCanvas.canvas!,
      (x1 + renderConfig.scrollX) * window.devicePixelRatio -
-        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
+        (padding * elementWithCanvas.canvasZoom) / elementWithCanvas.canvasZoom,
      (y1 + renderConfig.scrollY) * window.devicePixelRatio -
-        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
-      elementWithCanvas.canvas!.width / elementWithCanvas.scale,
-      elementWithCanvas.canvas!.height / elementWithCanvas.scale,
+        (padding * elementWithCanvas.canvasZoom) / elementWithCanvas.canvasZoom,
+      elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
+      elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
    );

    if (
@@ -1374,10 +1313,7 @@ export const renderElementToSvg = (
          }) rotate(${degree} ${cx} ${cy})`,
        );
        const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
-        const lineHeightPx = getLineHeightInPx(
-          element.fontSize,
-          element.lineHeight,
-        );
+        const lineHeight = element.height / lines.length;
        const horizontalOffset =
          element.textAlign === "center"
            ? element.width / 2
@@ -1395,7 +1331,7 @@ export const renderElementToSvg = (
          const text = svgRoot.ownerDocument!.createElementNS(SVG_NS, "text");
          text.textContent = lines[i];
          text.setAttribute("x", `${horizontalOffset}`);
-          text.setAttribute("y", `${i * lineHeightPx}`);
+          text.setAttribute("y", `${i * lineHeight}`);
          text.setAttribute("font-family", getFontFamilyString(element));
          text.setAttribute("font-size", `${element.fontSize}px`);
          text.setAttribute("fill", element.strokeColor);
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -1,5 +1,5 @@
-import { RoughCanvas } from "@excalidraw/roughjs/bin/canvas";
-import { RoughSVG } from "@excalidraw/roughjs/bin/svg";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import { RoughSVG } from "roughjs/bin/svg";
 import oc from "open-color";

 import { AppState, BinaryFiles, Point, Zoom } from "../types";
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -1,4 +1,4 @@
-import rough from "@excalidraw/roughjs/bin/rough";
+import rough from "roughjs/bin/rough";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
--- a/src/tests/snapshots/linearElementEditor.test.tsx.snap
+++ b/src/tests/snapshots/linearElementEditor.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Test Linear Elements Test bound text element should match styles for te
  class="excalidraw-wysiwyg"
  data-type="wysiwyg"
  dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -7.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 24px; left: 35px; top: 8px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -8px; font: Emoji 20px 20px; line-height: 24px; font-family: Virgil, Segoe UI Emoji;"
  tabindex="0"
  wrap="off"
 />
--- a/src/tests/binding.test.tsx
+++ b/src/tests/binding.test.tsx
@@ -4,7 +4,6 @@ import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
 import { KEYS } from "../keys";
-import { actionCreateContainerFromText } from "../actions/actionBoundText";

 const { h } = window;

@@ -210,103 +209,4 @@ describe("element binding", () => {
    ).toBe(null);
    expect(arrow.endBinding?.elementId).toBe(text.id);
  });
-
-  it("should update binding when text containerized", async () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      id: "rectangle1",
-      width: 100,
-      height: 100,
-      boundElements: [
-        { id: "arrow1", type: "arrow" },
-        { id: "arrow2", type: "arrow" },
-      ],
-    });
-
-    const arrow1 = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      points: [
-        [0, 0],
-        [0, -87.45777932247563],
-      ],
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-      endBinding: {
-        elementId: "text1",
-        focus: 0.2,
-        gap: 7,
-      },
-    });
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      points: [
-        [0, 0],
-        [0, -87.45777932247563],
-      ],
-      startBinding: {
-        elementId: "text1",
-        focus: 0.2,
-        gap: 7,
-      },
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-      },
-    });
-
-    const text1 = API.createElement({
-      type: "text",
-      id: "text1",
-      text: "ola",
-      boundElements: [
-        { id: "arrow1", type: "arrow" },
-        { id: "arrow2", type: "arrow" },
-      ],
-    });
-
-    h.elements = [rectangle1, arrow1, arrow2, text1];
-
-    API.setSelectedElements([text1]);
-
-    expect(h.state.selectedElementIds[text1.id]).toBe(true);
-
-    h.app.actionManager.executeAction(actionCreateContainerFromText);
-
-    // new text container will be placed before the text element
-    const container = h.elements.at(-2)!;
-
-    expect(container.type).toBe("rectangle");
-    expect(container.id).not.toBe(rectangle1.id);
-
-    expect(container).toEqual(
-      expect.objectContaining({
-        boundElements: expect.arrayContaining([
-          {
-            type: "text",
-            id: text1.id,
-          },
-          {
-            type: "arrow",
-            id: arrow1.id,
-          },
-          {
-            type: "arrow",
-            id: arrow2.id,
-          },
-        ]),
-      }),
-    );
-
-    expect(arrow1.startBinding?.elementId).toBe(rectangle1.id);
-    expect(arrow1.endBinding?.elementId).toBe(container.id);
-    expect(arrow2.startBinding?.elementId).toBe(container.id);
-    expect(arrow2.endBinding?.elementId).toBe(rectangle1.id);
-  });
 });
--- a/src/tests/clipboard.test.tsx
+++ b/src/tests/clipboard.test.tsx
@@ -3,10 +3,8 @@ import { render, waitFor, GlobalTestState } from "./test-utils";
 import { Pointer, Keyboard } from "./helpers/ui";
 import ExcalidrawApp from "../excalidraw-app";
 import { KEYS } from "../keys";
-import {
-  getDefaultLineHeight,
-  getLineHeightInPx,
-} from "../element/textElement";
+import { getApproxLineHeight } from "../element/textElement";
+import { getFontString } from "../utils";
 import { getElementBounds } from "../element";
 import { NormalizedZoomValue } from "../types";

@@ -120,10 +118,12 @@ describe("paste text as single lines", () => {

  it("should space items correctly", async () => {
    const text = "hkhkjhki\njgkjhffjh\njgkjhffjh";
-    const lineHeightPx =
-      getLineHeightInPx(
-        h.app.state.currentItemFontSize,
-        getDefaultLineHeight(h.state.currentItemFontFamily),
+    const lineHeight =
+      getApproxLineHeight(
+        getFontString({
+          fontSize: h.app.state.currentItemFontSize,
+          fontFamily: h.app.state.currentItemFontFamily,
+        }),
      ) +
      10 / h.app.state.zoom.value;
    mouse.moveTo(100, 100);
@@ -135,17 +135,19 @@ describe("paste text as single lines", () => {
      for (let i = 1; i < h.elements.length; i++) {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const [fx, elY] = getElementBounds(h.elements[i]);
-        expect(elY).toEqual(firstElY + lineHeightPx * i);
+        expect(elY).toEqual(firstElY + lineHeight * i);
      }
    });
  });

  it("should leave a space for blank new lines", async () => {
    const text = "hkhkjhki\n\njgkjhffjh";
-    const lineHeightPx =
-      getLineHeightInPx(
-        h.app.state.currentItemFontSize,
-        getDefaultLineHeight(h.state.currentItemFontFamily),
+    const lineHeight =
+      getApproxLineHeight(
+        getFontString({
+          fontSize: h.app.state.currentItemFontSize,
+          fontFamily: h.app.state.currentItemFontFamily,
+        }),
      ) +
      10 / h.app.state.zoom.value;
    mouse.moveTo(100, 100);
@@ -156,7 +158,7 @@ describe("paste text as single lines", () => {
      const [fx, firstElY] = getElementBounds(h.elements[0]);
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const [lx, lastElY] = getElementBounds(h.elements[1]);
-      expect(lastElY).toEqual(firstElY + lineHeightPx * 2);
+      expect(lastElY).toEqual(firstElY + lineHeight * 2);
    });
  });
 });
@@ -222,7 +224,7 @@ describe("Paste bound text container", () => {
      await sleep(1);
      expect(h.elements.length).toEqual(2);
      const container = h.elements[0];
-      expect(container.height).toBe(368);
+      expect(container.height).toBe(354);
      expect(container.width).toBe(166);
    });
  });
@@ -245,7 +247,7 @@ describe("Paste bound text container", () => {
      await sleep(1);
      expect(h.elements.length).toEqual(2);
      const container = h.elements[0];
-      expect(container.height).toBe(770);
+      expect(container.height).toBe(740);
      expect(container.width).toBe(166);
    });
  });
--- a/src/tests/data/snapshots/restore.test.ts.snap
+++ b/src/tests/data/snapshots/restore.test.ts.snap
@@ -291,7 +291,6 @@ Object {
  "height": 100,
  "id": "id-text01",
  "isDeleted": false,
-  "lineHeight": 1.25,
  "link": null,
  "locked": false,
  "opacity": 100,
@@ -313,7 +312,7 @@ Object {
  "verticalAlign": "middle",
  "width": 100,
  "x": -20,
-  "y": -8.75,
+  "y": -8.4,
 }
 `;

@@ -330,7 +329,6 @@ Object {
  "height": 100,
  "id": "id-text01",
  "isDeleted": false,
-  "lineHeight": 1.25,
  "link": null,
  "locked": false,
  "opacity": 100,
--- a/src/tests/fitToContent.test.tsx
+++ b/src/tests/fitToContent.test.tsx
@@ -1,189 +0,0 @@
-import { render } from "./test-utils";
-import { API } from "./helpers/api";
-
-import ExcalidrawApp from "../excalidraw-app";
-
-const { h } = window;
-
-describe("fitToContent", () => {
-  it("should zoom to fit the selected element", async () => {
-    await render(<ExcalidrawApp />);
-
-    h.state.width = 10;
-    h.state.height = 10;
-
-    const rectElement = API.createElement({
-      width: 50,
-      height: 100,
-      x: 50,
-      y: 100,
-    });
-
-    expect(h.state.zoom.value).toBe(1);
-
-    h.app.scrollToContent(rectElement, { fitToContent: true });
-
-    // element is 10x taller than the viewport size,
-    // zoom should be at least 1/10
-    expect(h.state.zoom.value).toBeLessThanOrEqual(0.1);
-  });
-
-  it("should zoom to fit multiple elements", async () => {
-    await render(<ExcalidrawApp />);
-
-    const topLeft = API.createElement({
-      width: 20,
-      height: 20,
-      x: 0,
-      y: 0,
-    });
-
-    const bottomRight = API.createElement({
-      width: 20,
-      height: 20,
-      x: 80,
-      y: 80,
-    });
-
-    h.state.width = 10;
-    h.state.height = 10;
-
-    expect(h.state.zoom.value).toBe(1);
-
-    h.app.scrollToContent([topLeft, bottomRight], {
-      fitToContent: true,
-    });
-
-    // elements take 100x100, which is 10x bigger than the viewport size,
-    // zoom should be at least 1/10
-    expect(h.state.zoom.value).toBeLessThanOrEqual(0.1);
-  });
-
-  it("should scroll the viewport to the selected element", async () => {
-    await render(<ExcalidrawApp />);
-
-    h.state.width = 10;
-    h.state.height = 10;
-
-    const rectElement = API.createElement({
-      width: 100,
-      height: 100,
-      x: 100,
-      y: 100,
-    });
-
-    expect(h.state.zoom.value).toBe(1);
-    expect(h.state.scrollX).toBe(0);
-    expect(h.state.scrollY).toBe(0);
-
-    h.app.scrollToContent(rectElement);
-
-    // zoom level should stay the same
-    expect(h.state.zoom.value).toBe(1);
-
-    // state should reflect some scrolling
-    expect(h.state.scrollX).not.toBe(0);
-    expect(h.state.scrollY).not.toBe(0);
-  });
-});
-
-const waitForNextAnimationFrame = () => {
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(resolve);
-    });
-  });
-};
-
-describe("fitToContent animated", () => {
-  beforeEach(() => {
-    jest.spyOn(window, "requestAnimationFrame");
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it("should ease scroll the viewport to the selected element", async () => {
-    await render(<ExcalidrawApp />);
-
-    h.state.width = 10;
-    h.state.height = 10;
-
-    const rectElement = API.createElement({
-      width: 100,
-      height: 100,
-      x: -100,
-      y: -100,
-    });
-
-    h.app.scrollToContent(rectElement, { animate: true });
-
-    expect(window.requestAnimationFrame).toHaveBeenCalled();
-
-    // Since this is an animation, we expect values to change through time.
-    // We'll verify that the scroll values change at 50ms and 100ms
-    expect(h.state.scrollX).toBe(0);
-    expect(h.state.scrollY).toBe(0);
-
-    await waitForNextAnimationFrame();
-
-    const prevScrollX = h.state.scrollX;
-    const prevScrollY = h.state.scrollY;
-
-    expect(h.state.scrollX).not.toBe(0);
-    expect(h.state.scrollY).not.toBe(0);
-
-    await waitForNextAnimationFrame();
-
-    expect(h.state.scrollX).not.toBe(prevScrollX);
-    expect(h.state.scrollY).not.toBe(prevScrollY);
-  });
-
-  it("should animate the scroll but not the zoom", async () => {
-    await render(<ExcalidrawApp />);
-
-    h.state.width = 50;
-    h.state.height = 50;
-
-    const rectElement = API.createElement({
-      width: 100,
-      height: 100,
-      x: 100,
-      y: 100,
-    });
-
-    expect(h.state.scrollX).toBe(0);
-    expect(h.state.scrollY).toBe(0);
-
-    h.app.scrollToContent(rectElement, { animate: true, fitToContent: true });
-
-    expect(window.requestAnimationFrame).toHaveBeenCalled();
-
-    // Since this is an animation, we expect values to change through time.
-    // We'll verify that the zoom/scroll values change in each animation frame
-
-    // zoom is not animated, it should be set to its final value, which in our
-    // case zooms out to 50% so that th element is fully visible (it's 2x large
-    // as the canvas)
-    expect(h.state.zoom.value).toBeLessThanOrEqual(0.5);
-
-    // FIXME I think this should be [-100, -100] so we may have a bug in our zoom
-    // hadnling, alas
-    expect(h.state.scrollX).toBe(25);
-    expect(h.state.scrollY).toBe(25);
-
-    await waitForNextAnimationFrame();
-
-    const prevScrollX = h.state.scrollX;
-    const prevScrollY = h.state.scrollY;
-
-    expect(h.state.scrollX).not.toBe(0);
-    expect(h.state.scrollY).not.toBe(0);
-
-    await waitForNextAnimationFrame();
-
-    expect(h.state.scrollX).not.toBe(prevScrollX);
-    expect(h.state.scrollY).not.toBe(prevScrollY);
-  });
-});
--- a/src/tests/helpers/api.ts
+++ b/src/tests/helpers/api.ts
@@ -111,9 +111,6 @@ export class API {
    fileId?: T extends "image" ? string : never;
    scale?: T extends "image" ? ExcalidrawImageElement["scale"] : never;
    status?: T extends "image" ? ExcalidrawImageElement["status"] : never;
-    startBinding?: T extends "arrow"
-      ? ExcalidrawLinearElement["startBinding"]
-      : never;
    endBinding?: T extends "arrow"
      ? ExcalidrawLinearElement["endBinding"]
      : never;
@@ -181,13 +178,11 @@ export class API {
        });
        break;
      case "text":
-        const fontSize = rest.fontSize ?? appState.currentItemFontSize;
-        const fontFamily = rest.fontFamily ?? appState.currentItemFontFamily;
        element = newTextElement({
          ...base,
          text: rest.text || "test",
-          fontSize,
-          fontFamily,
+          fontSize: rest.fontSize ?? appState.currentItemFontSize,
+          fontFamily: rest.fontFamily ?? appState.currentItemFontFamily,
          textAlign: rest.textAlign ?? appState.currentItemTextAlign,
          verticalAlign: rest.verticalAlign ?? DEFAULT_VERTICAL_ALIGN,
          containerId: rest.containerId ?? undefined,
@@ -226,10 +221,6 @@ export class API {
        });
        break;
    }
-    if (element.type === "arrow") {
-      element.startBinding = rest.startBinding ?? null;
-      element.endBinding = rest.endBinding ?? null;
-    }
    if (id) {
      element.id = id;
    }
--- a/src/tests/linearElementEditor.test.tsx
+++ b/src/tests/linearElementEditor.test.tsx
@@ -1031,7 +1031,7 @@ describe("Test Linear Elements", () => {
      expect({ width: container.width, height: container.height })
        .toMatchInlineSnapshot(`
        Object {
-          "height": 130,
+          "height": 128,
          "width": 367,
        }
      `);
@@ -1040,7 +1040,7 @@ describe("Test Linear Elements", () => {
        .toMatchInlineSnapshot(`
        Object {
          "x": 272,
-          "y": 45,
+          "y": 46,
        }
      `);
      expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
@@ -1052,11 +1052,11 @@ describe("Test Linear Elements", () => {
        .toMatchInlineSnapshot(`
        Array [
          20,
-          35,
+          36,
          502,
-          95,
+          94,
          205.9061448421403,
-          52.5,
+          53,
        ]
      `);
    });
@@ -1090,7 +1090,7 @@ describe("Test Linear Elements", () => {
      expect({ width: container.width, height: container.height })
        .toMatchInlineSnapshot(`
        Object {
-          "height": 130,
+          "height": 128,
          "width": 340,
        }
      `);
@@ -1099,7 +1099,7 @@ describe("Test Linear Elements", () => {
        .toMatchInlineSnapshot(`
        Object {
          "x": 75,
-          "y": -5,
+          "y": -4,
        }
      `);
      expect(textElement.text).toMatchInlineSnapshot(`
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,7 +16,7 @@ import {
  StrokeRoundness,
 } from "./element/types";
 import { SHAPES } from "./shapes";
-import { Point as RoughPoint } from "@excalidraw/roughjs/bin/geometry";
+import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
 import { SuggestedBinding } from "./element/binding";
 import { ImportedDataState } from "./data/types";
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -181,79 +181,6 @@ export const throttleRAF = <T extends any[]>(
  return ret;
 };

-/**
- * Exponential ease-out method
- *
- * @param {number} k - The value to be tweened.
- * @returns {number} The tweened value.
- */
-function easeOut(k: number): number {
-  return 1 - Math.pow(1 - k, 4);
-}
-
-/**
- * Compute new values based on the same ease function and trigger the
- * callback through a requestAnimationFrame call
- *
- * use `opts` to define a duration and/or an easeFn
- *
- * for example:
- * ```ts
- * easeToValuesRAF([10, 20, 10], [0, 0, 0], (a, b, c) => setState(a,b, c))
- * ```
- *
- * @param fromValues The initial values, must be numeric
- * @param toValues The destination values, must also be numeric
- * @param callback The callback receiving the values
- * @param opts default to 250ms duration and the easeOut function
- */
-export const easeToValuesRAF = (
-  fromValues: number[],
-  toValues: number[],
-  callback: (...values: number[]) => void,
-  opts?: { duration?: number; easeFn?: (value: number) => number },
-) => {
-  let canceled = false;
-  let frameId = 0;
-  let startTime: number;
-
-  const duration = opts?.duration || 250; // default animation to 0.25 seconds
-  const easeFn = opts?.easeFn || easeOut; // default the easeFn to easeOut
-
-  function step(timestamp: number) {
-    if (canceled) {
-      return;
-    }
-    if (startTime === undefined) {
-      startTime = timestamp;
-    }
-
-    const elapsed = timestamp - startTime;
-
-    if (elapsed < duration) {
-      // console.log(elapsed, duration, elapsed / duration);
-      const factor = easeFn(elapsed / duration);
-      const newValues = fromValues.map(
-        (fromValue, index) =>
-          (toValues[index] - fromValue) * factor + fromValue,
-      );
-
-      callback(...newValues);
-      frameId = window.requestAnimationFrame(step);
-    } else {
-      // ensure final values are reached at the end of the transition
-      callback(...toValues);
-    }
-  }
-
-  frameId = window.requestAnimationFrame(step);
-
-  return () => {
-    canceled = true;
-    window.cancelAnimationFrame(frameId);
-  };
-};
-
 // https://github.com/lodash/lodash/blob/es/chunk.js
 export const chunk = <T extends any>(
  array: readonly T[],
@@ -689,7 +616,11 @@ export const arrayToMapWithIndex = <T extends { id: string }>(
    return acc;
  }, new Map<string, [element: T, index: number]>());

-export const isTestEnv = () => process.env.NODE_ENV === "test";
+export const isTestEnv = () =>
+  typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+
+export const isProdEnv = () =>
+  typeof process !== "undefined" && process.env?.NODE_ENV === "production";

 export const wrapEvent = <T extends Event>(name: EVENT, nativeEvent: T) => {
  return new CustomEvent(name, {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1484,15 +1484,6 @@
  resolved "https://registry.yarnpkg.com/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz#b7c061c99cee2f78b9ca470ea1fbd602683bba65"
  integrity sha512-rFIq8+A8WvkEzBsF++Rw6gzxE+hU3ZNkdg8foI+Upz2y/rOC/gUpWJaggPbCkoH3nlREVU59axQjZ1+F6ePRGg==

-"@excalidraw/roughjs@4.5.3":
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/@excalidraw/roughjs/-/roughjs-4.5.3.tgz#7d91897bfd1aaeb19a48d5272bd4776cb19f015b"
-  integrity sha512-X9HPfNjPLNHt+gN7t1LN7nN4h4o8M2EWuN/Y4YgG0ODsDZn51gRBeIPuhSo2hsDgLeTQHnkrmpPTm4XeeQVtoA==
-  dependencies:
-    path-data-parser "^0.1.0"
-    points-on-curve "^0.2.0"
-    points-on-path "^0.2.1"
-
 "@firebase/analytics-types@0.4.0":
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/@firebase/analytics-types/-/analytics-types-0.4.0.tgz#d6716f9fa36a6e340bc0ecfe68af325aa6f60508"