wip: adaptive roughness

feat: remove notch for non-0 roughness ellipse
docs: fix closing tag in readme (#6424
2023-04-09 19:52:18 +02:00 · 2023-04-09 18:52:36 +02:00 · 2023-04-07 17:43:50 +02:00 · 2023-04-07 15:30:44 +00:00 · 2023-04-07 13:50:36 +00:00 · 2023-04-05 12:17:18 +05:30
142 changed files with 2870 additions and 1163 deletions
@@ -22,3 +22,13 @@ REACT_APP_DEV_ENABLE_SW=
 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
+REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=
@@ -12,6 +12,13 @@ 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
@@ -25,3 +25,4 @@ src/packages/excalidraw/types
 src/packages/excalidraw/example/public/bundle.js
 src/packages/excalidraw/example/public/excalidraw-assets-dev
 src/packages/excalidraw/example/public/excalidraw.development.js
+coverage
@@ -17,7 +17,7 @@
    An open source virtual hand-drawn style whiteboard. </br>
    Collaborative and end-to-end encrypted. </br>
  <br />
-  </h3>
+  </h2>
 </div>

 <br />
@@ -70,7 +70,7 @@ The Excalidraw editor (npm package) supports:

 ## Excalidraw.com

-The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/maielo/new-readme/src/excalidraw-app) is part of this repository as well, and the app features:
+The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/src/excalidraw-app) is part of this repository as well, and the app features:

 - 📡&nbsp;PWA support (works offline).
 - 🤼&nbsp;Real-time collaboration.
@@ -1,6 +1,19 @@
 # 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:
@@ -139,7 +152,9 @@ 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>
  );
@@ -187,7 +202,8 @@ 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 = [
            {
@@ -205,10 +221,8 @@ function App() {
          ];
          excalidrawAPI.updateLibrary({
            libraryItems,
-            openLibraryMenu: true
-
+            openLibraryMenu: true,
          });
-         
        }}
      >
        Update Library
@@ -250,7 +264,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#L114">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
    ExcalidrawElement[]
  </a>
 </pre>
@@ -261,7 +275,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#L114">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115">
    ExcalidrawElement
  </a>
  []&#62;
@@ -293,18 +307,31 @@ This is the history API. history.clear() will clear the history.
 ## scrollToContent

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

-Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene.
+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`. |

 ## refresh

@@ -323,7 +350,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
 ```

@@ -358,15 +385,18 @@ 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
@@ -4,6 +4,34 @@

 No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.

+### Turning off Aggressive Anti-Fingerprinting in Brave browser
+
+When *Aggressive Anti-Fingerprinting* is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
+
+We strongly recommend turning it off. You can follow the steps below on how to do so.
+
+
+1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button
+![Shield button](../../assets/brave-shield.png)
+
+<div style={{width:'30rem'}}>
+
+2. Once opened, look for **Aggressively Block Fingerprinting**
+
+![Aggresive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+
+3. Switch to **Block Fingerprinting**
+
+![Block filtering](../../assets/block-fingerprint.png)
+
+4. Thats all. All text elements should be fixed now 🎉
+
+</div>
+
+If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
+
+
+
 ## Need help?

 Check out the existing [Q&A](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw). If you have any queries or need help, ask us [here](https://github.com/excalidraw/excalidraw/discussions?discussions_q=label%3Apackage%3Aexcalidraw).
@@ -1785,9 +1785,9 @@
    "@hapi/hoek" "^9.0.0"

 "@sideway/formula@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
-  integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
+  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==

 "@sideway/pinpoint@^2.0.0":
  version "2.0.0"
@@ -4376,9 +4376,9 @@ htmlparser2@^8.0.1:
    entities "^4.3.0"

 http-cache-semantics@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
-  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
+  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==

 http-deceiver@^1.2.7:
  version "1.2.7"
@@ -7542,9 +7542,9 @@ webpack-sources@^3.2.2, webpack-sources@^3.2.3:
  integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==

 webpack@^5.73.0:
-  version "5.74.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
-  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
+  version "5.76.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.1.tgz#7773de017e988bccb0f13c7d75ec245f377d295c"
+  integrity sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==
  dependencies:
    "@types/eslint-scope" "^3.7.3"
    "@types/estree" "^0.0.51"
@@ -20,16 +20,12 @@
  },
  "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",
    "@testing-library/react": "12.1.5",
    "@tldraw/vec": "1.7.1",
-    "@types/jest": "27.4.0",
-    "@types/pica": "5.1.3",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
-    "@types/socket.io-client": "1.4.36",
    "browser-fs-access": "0.29.1",
    "clsx": "1.1.1",
    "cross-env": "7.0.3",
@@ -57,7 +53,6 @@
    "sass": "1.51.0",
    "socket.io-client": "2.3.1",
    "tunnel-rat": "0.1.0",
-    "typescript": "4.9.4",
    "workbox-background-sync": "^6.5.4",
    "workbox-broadcast-update": "^6.5.4",
    "workbox-cacheable-response": "^6.5.4",
@@ -75,9 +70,14 @@
    "@excalidraw/eslint-config": "1.0.0",
    "@excalidraw/prettier-config": "1.0.2",
    "@types/chai": "4.3.0",
+    "@types/jest": "27.4.0",
    "@types/lodash.throttle": "4.1.7",
    "@types/pako": "1.0.3",
+    "@types/pica": "5.1.3",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
    "@types/resize-observer-browser": "0.1.7",
+    "@types/socket.io-client": "1.4.36",
    "chai": "4.3.6",
    "dotenv": "16.0.1",
    "eslint-config-prettier": "8.5.0",
@@ -88,7 +88,8 @@
    "lint-staged": "12.3.7",
    "pepjs": "0.5.3",
    "prettier": "2.6.2",
-    "rewire": "6.0.0"
+    "rewire": "6.0.0",
+    "typescript": "4.9.4"
  },
  "engines": {
    "node": ">=14.0.0"
@@ -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,8 +146,10 @@
      // setting this so that libraries installation reuses this window tab.
      window.name = "_excalidraw";
    </script>
-    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true' &&
-    process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
+    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true') { %>
+
+    <!-- LEGACY GOOGLE ANALYTICS -->
+    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"
@@ -160,6 +162,33 @@
      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) -->
@@ -2,6 +2,9 @@ const fs = require("fs");

 const THRESSHOLD = 85;

+// we're using BCP 47 language tags as keys
+// e.g. https://gist.github.com/typpo/b2b828a35e683b9bf8db91b5404f1bd1
+
 const crowdinMap = {
  "ar-SA": "en-ar",
  "bg-BG": "en-bg",
@@ -52,6 +55,7 @@ const crowdinMap = {
  "kk-KZ": "en-kk",
  "vi-VN": "en-vi",
  "mr-IN": "en-mr",
+  "th-TH": "en-th",
 };

 const flags = {
@@ -104,6 +108,7 @@ const flags = {
  "eu-ES": "🇪🇦",
  "vi-VN": "🇻🇳",
  "mr-IN": "🇮🇳",
+  "th-TH": "🇹🇭",
 };

 const languages = {
@@ -156,6 +161,7 @@ const languages = {
  "zh-TW": "繁體中文",
  "vi-VN": "Tiếng Việt",
  "mr-IN": "मराठी",
+  "th-TH": "ภาษาไทย",
 };

 const percentages = fs.readFileSync(
@@ -1,7 +1,8 @@
-import { VERTICAL_ALIGN } from "../constants";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { BOUND_TEXT_PADDING, ROUNDNESS, VERTICAL_ALIGN } from "../constants";
+import { getNonDeletedElements, isTextElement, newElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import {
+  computeContainerDimensionForBoundText,
  getBoundTextElement,
  measureText,
  redrawTextBoundingBox,
@@ -13,12 +14,16 @@ import {
 import {
  hasBoundTextElement,
  isTextBindableContainer,
+  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
 import {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
  ExcalidrawTextContainer,
  ExcalidrawTextElement,
 } from "../element/types";
 import { getSelectedElements } from "../scene";
+import { AppState } from "../types";
 import { getFontString } from "../utils";
 import { register } from "./register";

@@ -38,9 +43,10 @@ export const actionUnbindText = register({
    selectedElements.forEach((element) => {
      const boundTextElement = getBoundTextElement(element);
      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
+        const { width, height } = measureText(
          boundTextElement.originalText,
          getFontString(boundTextElement),
+          boundTextElement.lineHeight,
        );
        const originalContainerHeight = getOriginalContainerHeightFromCache(
          element.id,
@@ -51,7 +57,6 @@ export const actionUnbindText = register({
          containerId: null,
          width,
          height,
-          baseline,
          text: boundTextElement.originalText,
        });
        mutateElement(element, {
@@ -130,19 +135,162 @@ export const actionBindText = register({
      }),
    });
    redrawTextBoundingBox(textElement, container);
-    const updatedElements = elements.slice();
-    const textElementIndex = updatedElements.findIndex(
-      (ele) => ele.id === textElement.id,
-    );
-    updatedElements.splice(textElementIndex, 1);
-    const containerIndex = updatedElements.findIndex(
-      (ele) => ele.id === container.id,
-    );
-    updatedElements.splice(containerIndex + 1, 0, textElement);
+
    return {
-      elements: updatedElements,
+      elements: pushTextAboveContainer(elements, container, textElement),
      appState: { ...appState, selectedElementIds: { [container.id]: true } },
      commitToHistory: true,
    };
  },
 });
+
+const pushTextAboveContainer = (
+  elements: readonly ExcalidrawElement[],
+  container: ExcalidrawElement,
+  textElement: ExcalidrawTextElement,
+) => {
+  const updatedElements = elements.slice();
+  const textElementIndex = updatedElements.findIndex(
+    (ele) => ele.id === textElement.id,
+  );
+  updatedElements.splice(textElementIndex, 1);
+
+  const containerIndex = updatedElements.findIndex(
+    (ele) => ele.id === container.id,
+  );
+  updatedElements.splice(containerIndex + 1, 0, textElement);
+  return updatedElements;
+};
+
+const pushContainerBelowText = (
+  elements: readonly ExcalidrawElement[],
+  container: ExcalidrawElement,
+  textElement: ExcalidrawTextElement,
+) => {
+  const updatedElements = elements.slice();
+  const containerIndex = updatedElements.findIndex(
+    (ele) => ele.id === container.id,
+  );
+  updatedElements.splice(containerIndex, 1);
+
+  const textElementIndex = updatedElements.findIndex(
+    (ele) => ele.id === textElement.id,
+  );
+  updatedElements.splice(textElementIndex, 0, container);
+  return updatedElements;
+};
+
+export const actionCreateContainerFromText = register({
+  name: "createContainerFromText",
+  contextItemLabel: "labels.createContainerFromText",
+  trackEvent: { category: "element" },
+  predicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    const areTextElements = selectedElements.every((el) => isTextElement(el));
+    return selectedElements.length > 0 && areTextElements;
+  },
+  perform: (elements, appState) => {
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+    let updatedElements: readonly ExcalidrawElement[] = elements.slice();
+    const containerIds: AppState["selectedElementIds"] = {};
+
+    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 = ele.startBinding;
+            let endBinding = ele.endBinding;
+
+            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],
+          container,
+          textElement,
+        );
+        containerIds[container.id] = true;
+      }
+    }
+
+    return {
+      elements: updatedElements,
+      appState: {
+        ...appState,
+        selectedElementIds: containerIds,
+      },
+      commitToHistory: true,
+    };
+  },
+});
@@ -226,7 +226,7 @@ const zoomValueToFitBoundsOnViewport = (
  return clampedZoomValueToFitElements as NormalizedZoomValue;
 };

-const zoomToFitElements = (
+export const zoomToFitElements = (
  elements: readonly ExcalidrawElement[],
  appState: Readonly<AppState>,
  zoomToSelection: boolean,
@@ -54,6 +54,7 @@ import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
  getBoundTextElement,
  getContainerElement,
+  getDefaultLineHeight,
 } from "../element/textElement";
 import {
  isBoundToContainer,
@@ -637,6 +638,7 @@ export const actionChangeFontFamily = register({
              oldElement,
              {
                fontFamily: value,
+                lineHeight: getDefaultLineHeight(value),
              },
            );
            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
@@ -745,16 +747,19 @@ export const actionChangeTextAlign = register({
              value: "left",
              text: t("labels.left"),
              icon: TextAlignLeftIcon,
+              testId: "align-left",
            },
            {
              value: "center",
              text: t("labels.center"),
              icon: TextAlignCenterIcon,
+              testId: "align-horizontal-center",
            },
            {
              value: "right",
              text: t("labels.right"),
              icon: TextAlignRightIcon,
+              testId: "align-right",
            },
          ]}
          value={getFormValue(
@@ -12,7 +12,10 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getBoundTextElement } from "../element/textElement";
+import {
+  getBoundTextElement,
+  getDefaultLineHeight,
+} from "../element/textElement";
 import {
  hasBoundTextElement,
  canApplyRoundnessTypeToElement,
@@ -92,12 +95,18 @@ 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: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily:
-                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
+              fontSize,
+              fontFamily,
              textAlign:
                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
+              lineHeight:
+                elementStylesToCopyFrom.lineHeight ||
+                getDefaultLineHeight(fontFamily),
            });
            let container = null;
            if (newElement.containerId) {
@@ -1,5 +1,6 @@
 import { isDarwin } from "../constants";
 import { t } from "../i18n";
+import { SubtypeOf } from "../utility-types";
 import { getShortcutKey } from "../utils";
 import { ActionName } from "./types";

@@ -6,6 +6,7 @@ import {
  ExcalidrawProps,
  BinaryFiles,
 } from "../types";
+import { MarkOptional } from "../utility-types";

 export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";

@@ -113,7 +114,8 @@ export type ActionName =
  | "toggleLock"
  | "toggleLinearEditor"
  | "toggleEraserTool"
-  | "toggleHandTool";
+  | "toggleHandTool"
+  | "createContainerFromText";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -1,22 +1,30 @@
-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 });
-      };
+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);
+  }
+};
@@ -30,7 +30,10 @@ import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import "./Actions.scss";
 import { Tooltip } from "./Tooltip";
-import { shouldAllowVerticalAlign } from "../element/textElement";
+import {
+  shouldAllowVerticalAlign,
+  suppportsHorizontalAlign,
+} from "../element/textElement";

 export const SelectedShapeActions = ({
  appState,
@@ -122,7 +125,8 @@ export const SelectedShapeActions = ({

          {renderAction("changeFontFamily")}

-          {renderAction("changeTextAlign")}
+          {suppportsHorizontalAlign(targetElements) &&
+            renderAction("changeTextAlign")}
        </>
      )}

@@ -1,6 +1,7 @@
 import { atom, useAtom } from "jotai";
 import { actionClearCanvas } from "../actions";
 import { t } from "../i18n";
+import { jotaiScope } from "../jotai";
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";

@@ -9,6 +10,7 @@ export const activeConfirmDialogAtom = atom<"clearCanvas" | null>(null);
 export const ActiveConfirmDialog = () => {
  const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(
    activeConfirmDialogAtom,
+    jotaiScope,
  );
  const actionManager = useExcalidrawActionManager();

@@ -0,0 +1,45 @@
+import ReactDOM from "react-dom";
+import * as Renderer from "../renderer/renderScene";
+import { reseed } from "../random";
+import { render, queryByTestId } from "../tests/test-utils";
+
+import ExcalidrawApp from "../excalidraw-app";
+
+const renderScene = jest.spyOn(Renderer, "renderScene");
+
+describe("Test <App/>", () => {
+  beforeEach(async () => {
+    // Unmount ReactDOM from root
+    ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+    localStorage.clear();
+    renderScene.mockClear();
+    reseed(7);
+  });
+
+  it("should show error modal when using brave and measureText API is not working", async () => {
+    (global.navigator as any).brave = {
+      isBrave: {
+        name: "isBrave",
+      },
+    };
+
+    const originalContext = global.HTMLCanvasElement.prototype.getContext("2d");
+    //@ts-ignore
+    global.HTMLCanvasElement.prototype.getContext = (contextId) => {
+      return {
+        ...originalContext,
+        measureText: () => ({
+          width: 0,
+        }),
+      };
+    };
+
+    await render(<ExcalidrawApp />);
+    expect(
+      queryByTestId(
+        document.querySelector(".excalidraw-modal-container")!,
+        "brave-measure-text-error",
+      ),
+    ).toMatchSnapshot();
+  });
+});
@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 import { flushSync } from "react-dom";

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

@@ -62,6 +62,7 @@ import {
  GRID_SIZE,
  IMAGE_RENDER_TIMEOUT,
  isAndroid,
+  isBrave,
  LINE_CONFIRM_THRESHOLD,
  MAX_ALLOWED_FILE_BYTES,
  MIME_TYPES,
@@ -108,6 +109,7 @@ import {
  textWysiwyg,
  transformElements,
  updateTextElement,
+  redrawTextBoundingBox,
 } from "../element";
 import {
  bindOrUnbindLinearElement,
@@ -227,6 +229,7 @@ import {
  updateActiveTool,
  getShortcutKey,
  isTransparent,
+  easeToValuesRAF,
 } from "../utils";
 import {
  ContextMenu,
@@ -258,13 +261,16 @@ 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,
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
@@ -279,9 +285,14 @@ import {
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
-import { actionToggleHandTool } from "../actions/actionCanvas";
+import {
+  actionToggleHandTool,
+  zoomToFitElements,
+} from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
+import { actionCreateContainerFromText } from "../actions/actionBoundText";
+import BraveMeasureTextError from "./BraveMeasureTextError";

 const deviceContextInitialValue = {
  isSmScreen: false,
@@ -426,7 +437,6 @@ class App extends React.Component<AppProps, AppState> {
    };

    this.id = nanoid();
-
    this.library = new Library(this);
    if (excalidrawRef) {
      const readyPromise =
@@ -708,6 +718,8 @@ class App extends React.Component<AppProps, AppState> {
        const theme =
          actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
        let name = actionResult?.appState?.name ?? this.state.name;
+        const errorMessage =
+          actionResult?.appState?.errorMessage ?? this.state.errorMessage;
        if (typeof this.props.viewModeEnabled !== "undefined") {
          viewModeEnabled = this.props.viewModeEnabled;
        }
@@ -723,7 +735,6 @@ class App extends React.Component<AppProps, AppState> {
        if (typeof this.props.name !== "undefined") {
          name = this.props.name;
        }
-
        this.setState(
          (state) => {
            // using Object.assign instead of spread to fool TS 4.2.2+ into
@@ -741,6 +752,7 @@ class App extends React.Component<AppProps, AppState> {
              gridSize,
              theme,
              name,
+              errorMessage,
            });
          },
          () => {
@@ -869,7 +881,6 @@ class App extends React.Component<AppProps, AppState> {
        ),
      };
    }
-
    // FontFaceSet loadingdone event we listen on may not always fire
    // (looking at you Safari), so on init we manually load fonts for current
    // text elements on canvas, and rerender them once done. This also
@@ -997,6 +1008,13 @@ class App extends React.Component<AppProps, AppState> {
    } else {
      this.updateDOMRect(this.initializeScene);
    }
+
+    // note that this check seems to always pass in localhost
+    if (isBrave() && !isMeasureTextSupported()) {
+      this.setState({
+        errorMessage: <BraveMeasureTextError />,
+      });
+    }
  }

  public componentWillUnmount() {
@@ -1625,6 +1643,7 @@ class App extends React.Component<AppProps, AppState> {
      oldIdToDuplicatedId.set(element.id, newElement.id);
      return newElement;
    });
+
    bindTextToShapeAfterDuplication(newElements, elements, oldIdToDuplicatedId);
    const nextElements = [
      ...this.scene.getElementsIncludingDeleted(),
@@ -1637,6 +1656,14 @@ class App extends React.Component<AppProps, AppState> {
    }

    this.scene.replaceAllElements(nextElements);
+
+    newElements.forEach((newElement) => {
+      if (isTextElement(newElement) && isBoundToContainer(newElement)) {
+        const container = getContainerElement(newElement);
+        redrawTextBoundingBox(newElement, container);
+      }
+    });
+
    this.history.resumeRecording();

    this.setState(
@@ -1709,12 +1736,14 @@ 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;
@@ -1723,14 +1752,9 @@ class App extends React.Component<AppProps, AppState> {
          // add paragraph only if previous line was not empty, IOW don't add
          // more than one empty line
          if (prevLine) {
-            const defaultLineHeight = getApproxLineHeight(
-              getFontString({
-                fontSize: textElementProps.fontSize,
-                fontFamily: textElementProps.fontFamily,
-              }),
-            );
-
-            currentY += defaultLineHeight + LINE_GAP;
+            currentY +=
+              getLineHeightInPx(textElementProps.fontSize, lineHeight) +
+              LINE_GAP;
          }
        }

@@ -1823,18 +1847,89 @@ 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.setState({
-      ...calculateScrollCenter(
-        Array.isArray(target) ? target : [target],
-        this.state,
-        this.canvas,
-      ),
-    });
+    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);
  };

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

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

    if (!existingTextElement && shouldBindToContainer && container) {
@@ -2663,14 +2773,6 @@ class App extends React.Component<AppProps, AppState> {
          element,
        ]);
      }
-
-      // case: creating new text not centered to parent element → offset Y
-      // so that the text is centered to cursor position
-      if (!parentCenterPosition) {
-        mutateElement(element, {
-          y: element.y - element.baseline / 2,
-        });
-      }
    }

    this.setState({
@@ -2764,7 +2866,6 @@ class App extends React.Component<AppProps, AppState> {
      );
      if (container) {
        if (
-          isArrowElement(container) ||
          hasBoundTextElement(container) ||
          !isTransparent(container.backgroundColor) ||
          isHittingElementNotConsideringBoundingBox(container, this.state, [
@@ -2916,12 +3017,12 @@ class App extends React.Component<AppProps, AppState> {
          state,
        );

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

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

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

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

-    this.setState(({ zoom, scrollX, scrollY }) => ({
+    this.translateCanvas(({ zoom, scrollX, scrollY }) => ({
      scrollX: scrollX - deltaX / zoom.value,
      scrollY: scrollY - deltaY / zoom.value,
    }));
@@ -0,0 +1,42 @@
+import { t } from "../i18n";
+const BraveMeasureTextError = () => {
+  return (
+    <div data-testid="brave-measure-text-error">
+      <p>
+        {t("errors.brave_measure_text_error.start")} &nbsp;
+        <span style={{ fontWeight: 600 }}>
+          {t("errors.brave_measure_text_error.aggressive_block_fingerprint")}
+        </span>{" "}
+        {t("errors.brave_measure_text_error.setting_enabled")}.
+        <br />
+        <br />
+        {t("errors.brave_measure_text_error.break")}{" "}
+        <span style={{ fontWeight: 600 }}>
+          {t("errors.brave_measure_text_error.text_elements")}
+        </span>{" "}
+        {t("errors.brave_measure_text_error.in_your_drawings")}.
+      </p>
+      <p>
+        {t("errors.brave_measure_text_error.strongly_recommend")}{" "}
+        <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
+          {" "}
+          {t("errors.brave_measure_text_error.steps")}
+        </a>{" "}
+        {t("errors.brave_measure_text_error.how")}.
+      </p>
+      <p>
+        {t("errors.brave_measure_text_error.disable_setting")}{" "}
+        <a href="https://github.com/excalidraw/excalidraw/issues/new">
+          {t("errors.brave_measure_text_error.issue")}
+        </a>{" "}
+        {t("errors.brave_measure_text_error.write")}{" "}
+        <a href="https://discord.gg/UexuTaE">
+          {t("errors.brave_measure_text_error.discord")}
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
+
+export default BraveMeasureTextError;
@@ -6,6 +6,7 @@ import DialogActionButton from "./DialogActionButton";
 import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 import { useExcalidrawSetAppState } from "./App";
+import { jotaiScope } from "../jotai";

 interface Props extends Omit<DialogProps, "onCloseRequest"> {
  onConfirm: () => void;
@@ -24,7 +25,7 @@ const ConfirmDialog = (props: Props) => {
    ...rest
  } = props;
  const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);

  return (
    <Dialog
@@ -16,6 +16,7 @@ import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
 import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
+import { jotaiScope } from "../jotai";

 export interface DialogProps {
  children: React.ReactNode;
@@ -72,7 +73,7 @@ export const Dialog = (props: DialogProps) => {
  }, [islandNode, props.autofocus]);

  const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);

  const onClose = () => {
    setAppState({ openMenu: null });
@@ -5,13 +5,13 @@ import { Dialog } from "./Dialog";
 import { useExcalidrawContainer } from "./App";

 export const ErrorDialog = ({
-  message,
+  children,
  onClose,
 }: {
-  message: string;
+  children?: React.ReactNode;
  onClose?: () => void;
 }) => {
-  const [modalIsShown, setModalIsShown] = useState(!!message);
+  const [modalIsShown, setModalIsShown] = useState(!!children);
  const { container: excalidrawContainer } = useExcalidrawContainer();

  const handleClose = React.useCallback(() => {
@@ -32,7 +32,7 @@ export const ErrorDialog = ({
          onCloseRequest={handleClose}
          title={t("errorDialog.title")}
        >
-          <div style={{ whiteSpace: "pre-wrap" }}>{message}</div>
+          <div style={{ whiteSpace: "pre-wrap" }}>{children}</div>
        </Dialog>
      )}
    </>
@@ -9,6 +9,10 @@
    text-align: center;
    padding: var(--preview-padding);
    margin-bottom: calc(var(--space-factor) * 3);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
  }

  .ExportDialog__preview canvas {
@@ -1,7 +1,7 @@
+import { t } from "../i18n";
 import { HelpIcon } from "./icons";

 type HelpButtonProps = {
-  title?: string;
  name?: string;
  id?: string;
  onClick?(): void;
@@ -12,8 +12,8 @@ export const HelpButton = (props: HelpButtonProps) => (
    className="help-icon"
    onClick={props.onClick}
    type="button"
-    title={`${props.title} — ?`}
-    aria-label={props.title}
+    title={`${t("helpDialog.title")} — ?`}
+    aria-label={t("helpDialog.title")}
  >
    {HelpIcon}
  </button>
@@ -364,10 +364,9 @@ const LayerUI = ({

      {appState.isLoading && <LoadingMessage delay={250} />}
      {appState.errorMessage && (
-        <ErrorDialog
-          message={appState.errorMessage}
-          onClose={() => setAppState({ errorMessage: null })}
-        />
+        <ErrorDialog onClose={() => setAppState({ errorMessage: null })}>
+          {appState.errorMessage}
+        </ErrorDialog>
      )}
      {appState.openDialog === "help" && (
        <HelpDialog
@@ -48,6 +48,7 @@ export const LibraryMenuHeader: React.FC<{
  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
  const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
    isLibraryMenuOpenAtom,
+    jotaiScope,
  );
  const renderRemoveLibAlert = useCallback(() => {
    const content = selectedItems.length
@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test <App/> should show error modal when using brave and measureText API is not working 1`] = `
+<div
+  data-testid="brave-measure-text-error"
+>
+  <p>
+    Looks like you are using Brave browser with the
+      
+    <span
+      style="font-weight: 600;"
+    >
+      Aggressively Block Fingerprinting
+    </span>
+     
+    setting enabled
+    .
+    <br />
+    <br />
+    This could result in breaking the
+     
+    <span
+      style="font-weight: 600;"
+    >
+      Text Elements
+    </span>
+     
+    in your drawings
+    .
+  </p>
+  <p>
+    We strongly recommend disabling this setting. You can follow
+     
+    <a
+      href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser"
+    >
+       
+      these steps
+    </a>
+     
+    on how to do so
+    .
+  </p>
+  <p>
+     If disabling this setting doesn't fix the display of text elements, please open an
+     
+    <a
+      href="https://github.com/excalidraw/excalidraw/issues/new"
+    >
+      issue
+    </a>
+     
+    on our GitHub, or write us on
+     
+    <a
+      href="https://discord.gg/UexuTaE"
+    >
+      Discord
+    </a>
+    .
+  </p>
+</div>
+`;
@@ -1,5 +1,5 @@
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { t } from "../../i18n";
+import { useI18n } from "../../i18n";
 import {
  useExcalidrawAppState,
  useExcalidrawSetAppState,
@@ -31,11 +31,10 @@ import "./DefaultItems.scss";
 import clsx from "clsx";
 import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
+import { jotaiScope } from "../../jotai";

 export const LoadScene = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
+  const { t } = useI18n();
  const actionManager = useExcalidrawActionManager();

  if (!actionManager.isActionEnabled(actionLoadScene)) {
@@ -57,9 +56,7 @@ export const LoadScene = () => {
 LoadScene.displayName = "LoadScene";

 export const SaveToActiveFile = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
+  const { t } = useI18n();
  const actionManager = useExcalidrawActionManager();

  if (!actionManager.isActionEnabled(actionSaveToActiveFile)) {
@@ -80,9 +77,7 @@ SaveToActiveFile.displayName = "SaveToActiveFile";

 export const SaveAsImage = () => {
  const setAppState = useExcalidrawSetAppState();
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
+  const { t } = useI18n();
  return (
    <DropdownMenuItem
      icon={ExportImageIcon}
@@ -98,9 +93,7 @@ export const SaveAsImage = () => {
 SaveAsImage.displayName = "SaveAsImage";

 export const Help = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
+  const { t } = useI18n();

  const actionManager = useExcalidrawActionManager();

@@ -119,10 +112,12 @@ export const Help = () => {
 Help.displayName = "Help";

 export const ClearCanvas = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  const setActiveConfirmDialog = useSetAtom(activeConfirmDialogAtom);
+  const { t } = useI18n();
+
+  const setActiveConfirmDialog = useSetAtom(
+    activeConfirmDialogAtom,
+    jotaiScope,
+  );
  const actionManager = useExcalidrawActionManager();

  if (!actionManager.isActionEnabled(actionClearCanvas)) {
@@ -143,6 +138,7 @@ export const ClearCanvas = () => {
 ClearCanvas.displayName = "ClearCanvas";

 export const ToggleTheme = () => {
+  const { t } = useI18n();
  const appState = useExcalidrawAppState();
  const actionManager = useExcalidrawActionManager();

@@ -175,6 +171,7 @@ export const ToggleTheme = () => {
 ToggleTheme.displayName = "ToggleTheme";

 export const ChangeCanvasBackground = () => {
+  const { t } = useI18n();
  const appState = useExcalidrawAppState();
  const actionManager = useExcalidrawActionManager();

@@ -195,9 +192,7 @@ export const ChangeCanvasBackground = () => {
 ChangeCanvasBackground.displayName = "ChangeCanvasBackground";

 export const Export = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
+  const { t } = useI18n();
  const setAppState = useExcalidrawSetAppState();
  return (
    <DropdownMenuItem
@@ -248,9 +243,7 @@ export const LiveCollaborationTrigger = ({
  onSelect: () => void;
  isCollaborating: boolean;
 }) => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
+  const { t } = useI18n();
  return (
    <DropdownMenuItem
      data-testid="collab-button"
@@ -1,6 +1,6 @@
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { t } from "../../i18n";
+import { t, useI18n } from "../../i18n";
 import {
  useDevice,
  useExcalidrawActionManager,
@@ -172,10 +172,7 @@ const MenuItemLiveCollaborationTrigger = ({
 }: {
  onSelect: () => any;
 }) => {
-  // FIXME when we tie t() to lang state
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const appState = useExcalidrawAppState();
-
+  const { t } = useI18n();
  return (
    <WelcomeScreenMenuItem shortcut={null} onSelect={onSelect} icon={usersIcon}>
      {t("labels.liveCollaboration")}
@@ -9,6 +9,12 @@ export const isFirefox =
  "netscape" in window &&
  navigator.userAgent.indexOf("rv:") > 1 &&
  navigator.userAgent.indexOf("Gecko") > 1;
+export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
+export const isSafari =
+  !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
+// keeping function so it can be mocked in test
+export const isBrave = () =>
+  (navigator as any).brave?.isBrave?.name === "isBrave";

 export const APP_NAME = "Excalidraw";

@@ -530,6 +530,7 @@
  // (doesn't work in Firefox)
  ::-webkit-scrollbar {
    width: 3px;
+    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
@@ -567,8 +568,8 @@
  }

  .App-toolbar--mobile {
-    overflow-x: hidden;
-    max-width: 100vw;
+    overflow-x: auto;
+    max-width: 90vw;

    .ToolIcon__keybinding {
      display: none;
@@ -7,6 +7,7 @@ import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL, LibraryItem } from "../types";
+import { ValueOf } from "../utility-types";
 import { bytesToHexString } from "../utils";
 import { FileSystemHandle, nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
@@ -156,7 +157,7 @@ export const loadSceneOrLibraryFromBlob = async (
          },
          localAppState,
          localElements,
-          { repairBindings: true },
+          { repairBindings: true, refreshDimensions: true },
        ),
      };
    } else if (isValidLibrary(data)) {
@@ -89,7 +89,9 @@ export const exportCanvas = async (
    return await fileSave(blob, {
      description: "Export to PNG",
      name,
-      extension: appState.exportEmbedScene ? "excalidraw.png" : "png",
+      // FIXME reintroduce `excalidraw.png` when most people upgrade away
+      // from 111.0.5563.64 (arm64), see #6349
+      extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
      fileHandle,
    });
  } else if (type === "clipboard") {
@@ -34,6 +34,8 @@ import { bumpVersion } from "../element/mutateElement";
 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,
@@ -164,18 +166,32 @@ const restoreElement = (
        const [fontPx, _fontFamily]: [string, string] = (
          element as any
        ).font.split(" ");
-        fontSize = parseInt(fontPx, 10);
+        fontSize = parseFloat(fontPx);
        fontFamily = getFontFamilyByName(_fontFamily);
      }
+      const text = element.text ?? "";
+
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
-        text: element.text ?? "",
-        baseline: element.baseline,
+        text,
        textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
        verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
        containerId: element.containerId ?? null,
-        originalText: element.originalText || element.text,
+        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)),
      });

      if (refreshDimensions) {
@@ -479,7 +495,9 @@ export const restoreAppState = (
        ? {
            value: appState.zoom as NormalizedZoomValue,
          }
-        : appState.zoom || defaultAppState.zoom,
+        : appState.zoom?.value
+        ? 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:
@@ -7,8 +7,8 @@ import {
  ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
-import rough from "roughjs/bin/rough";
-import { Drawable, Op } from "roughjs/bin/core";
+import rough from "@excalidraw/roughjs/bin/rough";
+import { Drawable, Op } from "@excalidraw/roughjs/bin/core";
 import { Point } from "../types";
 import {
  getShapeForElement,
@@ -23,6 +23,7 @@ import {
 import { rescalePoints } from "../points";
 import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
+import { Mutable } from "../utility-types";

 // x and y position of top left corner, x and y position of bottom right corner
 export type Bounds = readonly [number, number, number, number];
@@ -30,7 +30,7 @@ import {

 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
 import { Point } from "../types";
-import { Drawable } from "roughjs/bin/core";
+import { Drawable } from "@excalidraw/roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
 import { hasBoundTextElement, isImageElement } from "./typeChecks";
@@ -38,6 +38,7 @@ import { isTextElement } from ".";
 import { isTransparent } from "../utils";
 import { shouldShowBoundingBox } from "./transformHandles";
 import { getBoundTextElement } from "./textElement";
+import { Mutable } from "../utility-types";

 const isElementDraggableFromInside = (
  element: NonDeletedExcalidrawElement,
@@ -785,7 +786,12 @@ export const findFocusPointForEllipse = (
      orientation * py * Math.sqrt(Math.max(0, squares - a ** 2 * b ** 2))) /
    squares;

-  const n = (-m * px - 1) / py;
+  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 x = -(a ** 2 * m) / (n ** 2 * b ** 2 + m ** 2 * a ** 2);
  return GA.point(x, (-m * x - 1) / n);
@@ -41,6 +41,7 @@ import { shouldRotateWithDiscreteAngle } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import { getShapeForElement } from "../renderer/renderElement";
 import { DRAGGING_THRESHOLD } from "../constants";
+import { Mutable } from "../utility-types";

 const editorMidPointsCache: {
  version: number | null;
@@ -5,6 +5,7 @@ import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
 import { Point } from "../types";
 import { getUpdatedTimestamp } from "../utils";
+import { Mutable } from "../utility-types";

 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
  Partial<TElement>,
@@ -22,16 +22,18 @@ import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
-  getBoundTextElement,
  getBoundTextElementOffset,
  getContainerDims,
  getContainerElement,
  measureText,
  normalizeText,
  wrapText,
+  getMaxContainerWidth,
+  getDefaultLineHeight,
 } from "./textElement";
-import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+import { VERTICAL_ALIGN } from "../constants";
 import { isArrowElement } from "./typeChecks";
+import { MarkOptional, Merge, Mutable } from "../utility-types";

 type ElementConstructorOpts = MarkOptional<
  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -136,10 +138,12 @@ 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));
+  const metrics = measureText(text, getFontString(opts), lineHeight);
  const offsets = getTextElementPositionOffsets(opts, metrics);
  const textElement = newElementWith(
    {
@@ -153,9 +157,9 @@ export const newTextElement = (
      y: opts.y - offsets.y,
      width: metrics.width,
      height: metrics.height,
-      baseline: metrics.baseline,
      containerId: opts.containerId || null,
      originalText: text,
+      lineHeight,
    },
    {},
  );
@@ -170,18 +174,14 @@ const getAdjustedDimensions = (
  y: number;
  width: number;
  height: number;
-  baseline: number;
 } => {
-  let maxWidth = null;
  const container = getContainerElement(element);
-  if (container) {
-    maxWidth = getMaxContainerWidth(container);
-  }
-  const {
-    width: nextWidth,
-    height: nextHeight,
-    baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element), maxWidth);
+
+  const { width: nextWidth, height: nextHeight } = measureText(
+    nextText,
+    getFontString(element),
+    element.lineHeight,
+  );
  const { textAlign, verticalAlign } = element;
  let x: number;
  let y: number;
@@ -193,7 +193,7 @@ const getAdjustedDimensions = (
    const prevMetrics = measureText(
      element.text,
      getFontString(element),
-      maxWidth,
+      element.lineHeight,
    );
    const offsets = getTextElementPositionOffsets(element, {
      width: nextWidth - prevMetrics.width,
@@ -258,7 +258,6 @@ const getAdjustedDimensions = (
    height: nextHeight,
    x: Number.isFinite(x) ? x : element.x,
    y: Number.isFinite(y) ? y : element.y,
-    baseline: nextBaseline,
  };
 };

@@ -278,38 +277,6 @@ export const refreshTextDimensions = (
  return { text, ...dimensions };
 };

-export const getMaxContainerWidth = (container: ExcalidrawElement) => {
-  const width = getContainerDims(container).width;
-  if (isArrowElement(container)) {
-    const containerWidth = width - BOUND_TEXT_PADDING * 8 * 2;
-    if (containerWidth <= 0) {
-      const boundText = getBoundTextElement(container);
-      if (boundText) {
-        return boundText.width;
-      }
-      return BOUND_TEXT_PADDING * 8 * 2;
-    }
-    return containerWidth;
-  }
-  return width - BOUND_TEXT_PADDING * 2;
-};
-
-export const getMaxContainerHeight = (container: ExcalidrawElement) => {
-  const height = getContainerDims(container).height;
-  if (isArrowElement(container)) {
-    const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
-    if (containerHeight <= 0) {
-      const boundText = getBoundTextElement(container);
-      if (boundText) {
-        return boundText.height;
-      }
-      return BOUND_TEXT_PADDING * 8 * 2;
-    }
-    return height;
-  }
-  return height - BOUND_TEXT_PADDING * 2;
-};
-
 export const updateTextElement = (
  textElement: ExcalidrawTextElement,
  {
@@ -39,16 +39,14 @@ import {
 import { Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
-  getApproxMinLineHeight,
  getApproxMinLineWidth,
  getBoundTextElement,
  getBoundTextElementId,
-  getBoundTextElementOffset,
  getContainerElement,
  handleBindTextResize,
-  measureText,
+  getMaxContainerWidth,
+  getApproxMinLineHeight,
 } from "./textElement";
-import { getMaxContainerWidth } from "./newElement";

 export const normalizeAngle = (angle: number): number => {
  if (angle >= 2 * Math.PI) {
@@ -192,11 +190,10 @@ const rescalePointsInElement = (

 const MIN_FONT_SIZE = 1;

-const measureFontSizeFromWH = (
+const measureFontSizeFromWidth = (
  element: NonDeleted<ExcalidrawTextElement>,
  nextWidth: number,
-  nextHeight: number,
-): { size: number; baseline: number } | null => {
+): number | null => {
  // We only use width to scale font on resize
  let width = element.width;

@@ -211,15 +208,8 @@ const measureFontSizeFromWH = (
  if (nextFontSize < MIN_FONT_SIZE) {
    return null;
  }
-  const metrics = measureText(
-    element.text,
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.containerId ? width : null,
-  );
-  return {
-    size: nextFontSize,
-    baseline: metrics.baseline + (nextHeight - metrics.height),
-  };
+
+  return nextFontSize;
 };

 const getSidesForTransformHandle = (
@@ -290,8 +280,8 @@ const resizeSingleTextElement = (
  if (scale > 0) {
    const nextWidth = element.width * scale;
    const nextHeight = element.height * scale;
-    const nextFont = measureFontSizeFromWH(element, nextWidth, nextHeight);
-    if (nextFont === null) {
+    const nextFontSize = measureFontSizeFromWidth(element, nextWidth);
+    if (nextFontSize === null) {
      return;
    }
    const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords(
@@ -315,10 +305,9 @@ const resizeSingleTextElement = (
      deltaY2,
    );
    mutateElement(element, {
-      fontSize: nextFont.size,
+      fontSize: nextFontSize,
      width: nextWidth,
      height: nextHeight,
-      baseline: nextFont.baseline,
      x: nextElementX,
      y: nextElementY,
    });
@@ -371,7 +360,7 @@ export const resizeSingleElement = (
  let scaleX = atStartBoundsWidth / boundsCurrentWidth;
  let scaleY = atStartBoundsHeight / boundsCurrentHeight;

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

  if (transformHandleDirection.includes("e")) {
@@ -421,29 +410,32 @@ export const resizeSingleElement = (
      boundTextElement.id,
    ) as typeof boundTextElement | undefined;
    if (stateOfBoundTextElementAtResize) {
-      boundTextFont = {
-        fontSize: stateOfBoundTextElementAtResize.fontSize,
-        baseline: stateOfBoundTextElementAtResize.baseline,
-      };
+      boundTextFontSize = stateOfBoundTextElementAtResize.fontSize;
    }
    if (shouldMaintainAspectRatio) {
-      const boundTextElementPadding =
-        getBoundTextElementOffset(boundTextElement);
-      const nextFont = measureFontSizeFromWH(
+      const updatedElement = {
+        ...element,
+        width: eleNewWidth,
+        height: eleNewHeight,
+      };
+
+      const nextFontSize = measureFontSizeFromWidth(
        boundTextElement,
-        eleNewWidth - boundTextElementPadding * 2,
-        eleNewHeight - boundTextElementPadding * 2,
+        getMaxContainerWidth(updatedElement),
      );
-      if (nextFont === null) {
+      if (nextFontSize === null) {
        return;
      }
-      boundTextFont = {
-        fontSize: nextFont.size,
-        baseline: nextFont.baseline,
-      };
+      boundTextFontSize = nextFontSize;
    } else {
-      const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
-      const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
+      const minWidth = getApproxMinLineWidth(
+        getFontString(boundTextElement),
+        boundTextElement.lineHeight,
+      );
+      const minHeight = getApproxMinLineHeight(
+        boundTextElement.fontSize,
+        boundTextElement.lineHeight,
+      );
      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
    }
@@ -576,8 +568,10 @@ export const resizeSingleElement = (
    });

    mutateElement(element, resizedElement);
-    if (boundTextElement && boundTextFont) {
-      mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
+    if (boundTextElement && boundTextFontSize != null) {
+      mutateElement(boundTextElement, {
+        fontSize: boundTextFontSize,
+      });
    }
    handleBindTextResize(element, transformHandleDirection);
  }
@@ -683,7 +677,6 @@ const resizeMultipleElements = (
      y: number;
      points?: Point[];
      fontSize?: number;
-      baseline?: number;
    } = {
      width,
      height,
@@ -692,31 +685,34 @@ const resizeMultipleElements = (
      ...rescaledPoints,
    };

-    let boundTextUpdates: { fontSize: number; baseline: number } | null = null;
+    let boundTextUpdates: { fontSize: number } | null = null;

    const boundTextElement = getBoundTextElement(element.latest);

    if (boundTextElement || isTextElement(element.orig)) {
-      const optionalPadding = getBoundTextElementOffset(boundTextElement) * 2;
-      const textMeasurements = measureFontSizeFromWH(
+      const updatedElement = {
+        ...element.latest,
+        width,
+        height,
+      };
+      const fontSize = measureFontSizeFromWidth(
        boundTextElement ?? (element.orig as ExcalidrawTextElement),
-        width - optionalPadding,
-        height - optionalPadding,
+        boundTextElement
+          ? getMaxContainerWidth(updatedElement)
+          : updatedElement.width,
      );

-      if (!textMeasurements) {
+      if (!fontSize) {
        return;
      }

      if (isTextElement(element.orig)) {
-        update.fontSize = textMeasurements.size;
-        update.baseline = textMeasurements.baseline;
+        update.fontSize = fontSize;
      }

      if (boundTextElement) {
        boundTextUpdates = {
-          fontSize: textMeasurements.size,
-          baseline: textMeasurements.baseline,
+          fontSize,
        };
      }
    }
@@ -1,5 +1,15 @@
-import { BOUND_TEXT_PADDING } from "../constants";
-import { measureText, wrapText } from "./textElement";
+import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
+import { API } from "../tests/helpers/api";
+import {
+  computeContainerDimensionForBoundText,
+  getContainerCoords,
+  getMaxContainerWidth,
+  getMaxContainerHeight,
+  wrapText,
+  detectLineHeight,
+  getLineHeightInPx,
+  getDefaultLineHeight,
+} from "./textElement";
 import { FontString } from "./types";

 describe("Test wrapText", () => {
@@ -9,7 +19,7 @@ describe("Test wrapText", () => {
    const text = "Hello whats up     ";
    const maxWidth = 200 - BOUND_TEXT_PADDING * 2;
    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello whats up    ");
+    expect(res).toBe(text);
  });

  it("should work with emojis", () => {
@@ -19,7 +29,7 @@ describe("Test wrapText", () => {
    expect(res).toBe("😀");
  });

-  it("should show the text correctly when min width reached", () => {
+  it("should show the text correctly when max width reached", () => {
    const text = "Hello😀";
    const maxWidth = 10;
    const res = wrapText(text, font, maxWidth);
@@ -28,13 +38,12 @@ describe("Test wrapText", () => {

  describe("When text doesn't contain new lines", () => {
    const text = "Hello whats up";
+
    [
      {
        desc: "break all words when width of each word is less than container width",
-        width: 90,
-        res: `Hello 
-whats 
-up`,
+        width: 80,
+        res: `Hello \nwhats \nup`,
      },
      {
        desc: "break all characters when width of each character is less than container width",
@@ -55,9 +64,8 @@ p`,
      {
        desc: "break words as per the width",

-        width: 150,
-        res: `Hello whats 
-up`,
+        width: 140,
+        res: `Hello whats \nup`,
      },
      {
        desc: "fit the container",
@@ -65,6 +73,13 @@ up`,
        width: 250,
        res: "Hello whats up",
      },
+      {
+        desc: "should push the word if its equal to max width",
+        width: 60,
+        res: `Hello
+whats
+up`,
+      },
    ].forEach((data) => {
      it(`should ${data.desc}`, () => {
        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
@@ -72,16 +87,15 @@ up`,
      });
    });
  });
+
  describe("When text contain new lines", () => {
    const text = `Hello
 whats up`;
    [
      {
        desc: "break all words when width of each word is less than container width",
-        width: 90,
-        res: `Hello
-whats 
-up`,
+        width: 80,
+        res: `Hello\nwhats \nup`,
      },
      {
        desc: "break all characters when width of each character is less than container width",
@@ -120,17 +134,14 @@ whats up`,
      });
    });
  });
+
  describe("When text is long", () => {
    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
    [
      {
        desc: "fit characters of long string as per container width",
        width: 170,
-        res: `hellolongtextth
-isiswhatsupwith
-youIamtypingggg
-gandtypinggg 
-break it now`,
+        res: `hellolongtextth\nisiswhatsupwith\nyouIamtypingggg\ngandtypinggg \nbreak it now`,
      },

      {
@@ -149,8 +160,7 @@ now`,
        desc: "fit the long text when container width is greater than text length and move the rest to next line",

        width: 600,
-        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg 
-break it now`,
+        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg \nbreak it now`,
      },
    ].forEach((data) => {
      it(`should ${data.desc}`, () => {
@@ -159,38 +169,176 @@ break it now`,
      });
    });
  });
+
+  it("should wrap the text correctly when word length is exactly equal to max width", () => {
+    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);
+  });
 });

 describe("Test measureText", () => {
-  const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
-  const text = "Hello World";
+  describe("Test getContainerCoords", () => {
+    const params = { width: 200, height: 100, x: 10, y: 20 };

-  it("should add correct attributes when maxWidth is passed", () => {
-    const maxWidth = 200 - BOUND_TEXT_PADDING * 2;
-    const res = measureText(text, font, maxWidth);
+    it("should compute coords correctly when ellipse", () => {
+      const element = API.createElement({
+        type: "ellipse",
+        ...params,
+      });
+      expect(getContainerCoords(element)).toEqual({
+        x: 44.2893218813452455,
+        y: 39.64466094067262,
+      });
+    });

-    expect(res.container).toMatchInlineSnapshot(`
-      <div
-        style="position: absolute; white-space: pre-wrap; font: Emoji 20px 20px; min-height: 1em; max-width: 191px; overflow: hidden; word-break: break-word; line-height: 0px;"
-      >
-        <span
-          style="display: inline-block; overflow: hidden; width: 1px; height: 1px;"
-        />
-      </div>
-    `);
+    it("should compute coords correctly when rectangle", () => {
+      const element = API.createElement({
+        type: "rectangle",
+        ...params,
+      });
+      expect(getContainerCoords(element)).toEqual({
+        x: 15,
+        y: 25,
+      });
+    });
+
+    it("should compute coords correctly when diamond", () => {
+      const element = API.createElement({
+        type: "diamond",
+        ...params,
+      });
+      expect(getContainerCoords(element)).toEqual({
+        x: 65,
+        y: 50,
+      });
+    });
  });

-  it("should add correct attributes when maxWidth is not passed", () => {
-    const res = measureText(text, font);
+  describe("Test computeContainerDimensionForBoundText", () => {
+    const params = {
+      width: 178,
+      height: 194,
+    };

-    expect(res.container).toMatchInlineSnapshot(`
-      <div
-        style="position: absolute; white-space: pre; font: Emoji 20px 20px; min-height: 1em;"
-      >
-        <span
-          style="display: inline-block; overflow: hidden; width: 1px; height: 1px;"
-        />
-      </div>
-    `);
+    it("should compute container height correctly for rectangle", () => {
+      const element = API.createElement({
+        type: "rectangle",
+        ...params,
+      });
+      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
+        160,
+      );
+    });
+
+    it("should compute container height correctly for ellipse", () => {
+      const element = API.createElement({
+        type: "ellipse",
+        ...params,
+      });
+      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
+        226,
+      );
+    });
+
+    it("should compute container height correctly for diamond", () => {
+      const element = API.createElement({
+        type: "diamond",
+        ...params,
+      });
+      expect(computeContainerDimensionForBoundText(150, element.type)).toEqual(
+        320,
+      );
+    });
+  });
+
+  describe("Test getMaxContainerWidth", () => {
+    const params = {
+      width: 178,
+      height: 194,
+    };
+
+    it("should return max width when container is rectangle", () => {
+      const container = API.createElement({ type: "rectangle", ...params });
+      expect(getMaxContainerWidth(container)).toBe(168);
+    });
+
+    it("should return max width when container is ellipse", () => {
+      const container = API.createElement({ type: "ellipse", ...params });
+      expect(getMaxContainerWidth(container)).toBe(116);
+    });
+
+    it("should return max width when container is diamond", () => {
+      const container = API.createElement({ type: "diamond", ...params });
+      expect(getMaxContainerWidth(container)).toBe(79);
+    });
+  });
+
+  describe("Test getMaxContainerHeight", () => {
+    const params = {
+      width: 178,
+      height: 194,
+    };
+
+    it("should return max height when container is rectangle", () => {
+      const container = API.createElement({ type: "rectangle", ...params });
+      expect(getMaxContainerHeight(container)).toBe(184);
+    });
+
+    it("should return max height when container is ellipse", () => {
+      const container = API.createElement({ type: "ellipse", ...params });
+      expect(getMaxContainerHeight(container)).toBe(127);
+    });
+
+    it("should return max height when container is diamond", () => {
+      const container = API.createElement({ type: "diamond", ...params });
+      expect(getMaxContainerHeight(container)).toBe(87);
+    });
+  });
+});
+
+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);
  });
 });
@@ -4,20 +4,23 @@ import {
  ExcalidrawTextContainer,
  ExcalidrawTextElement,
  ExcalidrawTextElementWithContainer,
+  FontFamilyValues,
  FontString,
  NonDeletedExcalidrawElement,
 } from "./types";
 import { mutateElement } from "./mutateElement";
-import { BOUND_TEXT_PADDING, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
+import {
+  BOUND_TEXT_PADDING,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  FONT_FAMILY,
+  TEXT_ALIGN,
+  VERTICAL_ALIGN,
+} from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
 import { isTextElement } from ".";
-import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
-import {
-  isBoundToContainer,
-  isImageElement,
-  isArrowElement,
-} from "./typeChecks";
+import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
 import { AppState } from "../types";
 import { isTextBindableContainer } from "./typeChecks";
@@ -28,6 +31,7 @@ import {
  resetOriginalContainerCache,
  updateOriginalContainerCache,
 } from "./textWysiwyg";
+import { ExtractSetType } from "../utility-types";

 export const normalizeText = (text: string) => {
  return (
@@ -39,73 +43,75 @@ 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;
-  let text = textElement.text;
+  const boundTextUpdates = {
+    x: textElement.x,
+    y: textElement.y,
+    text: textElement.text,
+    width: textElement.width,
+    height: textElement.height,
+  };
+
+  boundTextUpdates.text = textElement.text;
+
  if (container) {
    maxWidth = getMaxContainerWidth(container);
-    text = wrapText(
+    boundTextUpdates.text = wrapText(
      textElement.originalText,
      getFontString(textElement),
      maxWidth,
    );
  }
-  const metrics = measureText(text, getFontString(textElement), maxWidth);
-  let coordY = textElement.y;
-  let coordX = textElement.x;
-  // Resize container and vertically center align the text
+  const metrics = measureText(
+    boundTextUpdates.text,
+    getFontString(textElement),
+    textElement.lineHeight,
+  );
+
+  boundTextUpdates.width = metrics.width;
+  boundTextUpdates.height = metrics.height;
+
  if (container) {
-    if (!isArrowElement(container)) {
-      const containerDims = getContainerDims(container);
-      let nextHeight = containerDims.height;
-      if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
-        coordY = container.y;
-      } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-        coordY =
-          container.y +
-          containerDims.height -
-          metrics.height -
-          BOUND_TEXT_PADDING;
-      } else {
-        coordY = container.y + containerDims.height / 2 - metrics.height / 2;
-        if (metrics.height > getMaxContainerHeight(container)) {
-          nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
-          coordY = container.y + nextHeight / 2 - metrics.height / 2;
-        }
-      }
-      if (textElement.textAlign === TEXT_ALIGN.LEFT) {
-        coordX = container.x + BOUND_TEXT_PADDING;
-      } else if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
-        coordX =
-          container.x +
-          containerDims.width -
-          metrics.width -
-          BOUND_TEXT_PADDING;
-      } else {
-        coordX = container.x + containerDims.width / 2 - metrics.width / 2;
-      }
-      updateOriginalContainerCache(container.id, nextHeight);
-      mutateElement(container, { height: nextHeight });
-    } else {
+    if (isArrowElement(container)) {
      const centerX = textElement.x + textElement.width / 2;
      const centerY = textElement.y + textElement.height / 2;
      const diffWidth = metrics.width - textElement.width;
      const diffHeight = metrics.height - textElement.height;
-      coordY = centerY - (textElement.height + diffHeight) / 2;
-      coordX = centerX - (textElement.width + diffWidth) / 2;
+      boundTextUpdates.x = centerY - (textElement.height + diffHeight) / 2;
+      boundTextUpdates.y = centerX - (textElement.width + diffWidth) / 2;
+    } else {
+      const containerDims = getContainerDims(container);
+      let maxContainerHeight = getMaxContainerHeight(container);
+
+      let nextHeight = containerDims.height;
+      if (metrics.height > maxContainerHeight) {
+        nextHeight = computeContainerDimensionForBoundText(
+          metrics.height,
+          container.type,
+        );
+        mutateElement(container, { height: nextHeight });
+        maxContainerHeight = getMaxContainerHeight(container);
+        updateOriginalContainerCache(container.id, nextHeight);
+      }
+      const updatedTextElement = {
+        ...textElement,
+        ...boundTextUpdates,
+      } as ExcalidrawTextElementWithContainer;
+      const { x, y } = computeBoundTextPosition(container, updatedTextElement);
+      boundTextUpdates.x = x;
+      boundTextUpdates.y = y;
    }
  }
-  mutateElement(textElement, {
-    width: metrics.width,
-    height: metrics.height,
-    baseline: metrics.baseline,
-    y: coordY,
-    x: coordX,
-    text,
-  });
+
+  mutateElement(textElement, boundTextUpdates);
 };

 export const bindTextToShapeAfterDuplication = (
@@ -177,7 +183,6 @@ export const handleBindTextResize = (
    const maxWidth = getMaxContainerWidth(container);
    const maxHeight = getMaxContainerHeight(container);
    let containerHeight = containerDims.height;
-    let nextBaseLine = textElement.baseline;
    if (transformHandleType !== "n" && transformHandleType !== "s") {
      if (text) {
        text = wrapText(
@@ -189,15 +194,18 @@ export const handleBindTextResize = (
      const dimensions = measureText(
        text,
        getFontString(textElement),
-        maxWidth,
+        textElement.lineHeight,
      );
      nextHeight = dimensions.height;
      nextWidth = dimensions.width;
-      nextBaseLine = dimensions.baseline;
    }
    // increase height in case text element height exceeds
    if (nextHeight > maxHeight) {
-      containerHeight = nextHeight + getBoundTextElementOffset(textElement) * 2;
+      containerHeight = computeContainerDimensionForBoundText(
+        nextHeight,
+        container.type,
+      );
+
      const diff = containerHeight - containerDims.height;
      // fix the y coord when resizing from ne/nw/n
      const updatedY =
@@ -217,53 +225,56 @@ export const handleBindTextResize = (
      text,
      width: nextWidth,
      height: nextHeight,
-
-      baseline: nextBaseLine,
    });
+
    if (!isArrowElement(container)) {
-      updateBoundTextPosition(
-        container,
-        textElement as ExcalidrawTextElementWithContainer,
+      mutateElement(
+        textElement,
+        computeBoundTextPosition(
+          container,
+          textElement as ExcalidrawTextElementWithContainer,
+        ),
      );
    }
  }
 };

-const updateBoundTextPosition = (
+const computeBoundTextPosition = (
  container: ExcalidrawElement,
  boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
-  const containerDims = getContainerDims(container);
-  const boundTextElementPadding = getBoundTextElementOffset(boundTextElement);
+  const containerCoords = getContainerCoords(container);
+  const maxContainerHeight = getMaxContainerHeight(container);
+  const maxContainerWidth = getMaxContainerWidth(container);
+
+  let x;
  let y;
  if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
-    y = container.y + boundTextElementPadding;
+    y = containerCoords.y;
  } else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-    y =
-      container.y +
-      containerDims.height -
-      boundTextElement.height -
-      boundTextElementPadding;
+    y = containerCoords.y + (maxContainerHeight - boundTextElement.height);
  } else {
-    y = container.y + containerDims.height / 2 - boundTextElement.height / 2;
+    y =
+      containerCoords.y +
+      (maxContainerHeight / 2 - boundTextElement.height / 2);
  }
-  const x =
-    boundTextElement.textAlign === TEXT_ALIGN.LEFT
-      ? container.x + boundTextElementPadding
-      : boundTextElement.textAlign === TEXT_ALIGN.RIGHT
-      ? container.x +
-        containerDims.width -
-        boundTextElement.width -
-        boundTextElementPadding
-      : container.x + containerDims.width / 2 - boundTextElement.width / 2;
-
-  mutateElement(boundTextElement, { x, y });
+  if (boundTextElement.textAlign === TEXT_ALIGN.LEFT) {
+    x = containerCoords.x;
+  } else if (boundTextElement.textAlign === TEXT_ALIGN.RIGHT) {
+    x = containerCoords.x + (maxContainerWidth - boundTextElement.width);
+  } else {
+    x =
+      containerCoords.x + (maxContainerWidth / 2 - boundTextElement.width / 2);
+  }
+  return { x, y };
 };
+
 // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
+
 export const measureText = (
  text: string,
  font: FontString,
-  maxWidth?: number | null,
+  lineHeight: ExcalidrawTextElement["lineHeight"],
 ) => {
  text = text
    .split("\n")
@@ -271,114 +282,137 @@ export const measureText = (
    // lines would be stripped from computation
    .map((x) => x || " ")
    .join("\n");
-  const container = document.createElement("div");
-  container.style.position = "absolute";
-  container.style.whiteSpace = "pre";
-  container.style.font = font;
-  container.style.minHeight = "1em";
+  const fontSize = parseFloat(font);
+  const height = getTextHeight(text, fontSize, lineHeight);
+  const width = getTextWidth(text, font);

-  if (maxWidth) {
-    const lineHeight = getApproxLineHeight(font);
-    // since we are adding a span of width 1px later
-    container.style.maxWidth = `${maxWidth + 1}px`;
-    container.style.overflow = "hidden";
-    container.style.wordBreak = "break-word";
-    container.style.lineHeight = `${String(lineHeight)}px`;
-    container.style.whiteSpace = "pre-wrap";
-  }
-  document.body.appendChild(container);
-  container.innerText = text;
-
-  const span = document.createElement("span");
-  span.style.display = "inline-block";
-  span.style.overflow = "hidden";
-  span.style.width = "1px";
-  span.style.height = "1px";
-  container.appendChild(span);
-  // Baseline is important for positioning text on canvas
-  const baseline = span.offsetTop + span.offsetHeight;
-  // since we are adding a span of width 1px
-  const width = container.offsetWidth + 1;
-  const height = container.offsetHeight;
-  document.body.removeChild(container);
-  if (isTestEnv()) {
-    return { width, height, baseline, container };
-  }
-  return { width, height, baseline };
+  return { width, height };
 };

-const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
-const cacheApproxLineHeight: { [key: FontString]: number } = {};
+/**
+ * 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"];
+};

-export const getApproxLineHeight = (font: FontString) => {
-  if (cacheApproxLineHeight[font]) {
-    return cacheApproxLineHeight[font];
-  }
-  cacheApproxLineHeight[font] = measureText(DUMMY_TEXT, font, null).height;
-  return cacheApproxLineHeight[font];
+/**
+ * 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;
+};
+
+// FIXME rename to getApproxMinContainerHeight
+export const getApproxMinLineHeight = (
+  fontSize: ExcalidrawTextElement["fontSize"],
+  lineHeight: ExcalidrawTextElement["lineHeight"],
+) => {
+  return getLineHeightInPx(fontSize, lineHeight) + BOUND_TEXT_PADDING * 2;
 };

 let canvas: HTMLCanvasElement | undefined;
+
 const getLineWidth = (text: string, font: FontString) => {
  if (!canvas) {
    canvas = document.createElement("canvas");
  }
  const canvas2dContext = canvas.getContext("2d")!;
  canvas2dContext.font = font;
+  const width = canvas2dContext.measureText(text).width;

-  const metrics = canvas2dContext.measureText(text);
  // since in test env the canvas measureText algo
  // doesn't measure text and instead just returns number of
  // characters hence we assume that each letteris 10px
  if (isTestEnv()) {
-    return metrics.width * 10;
+    return width * 10;
  }
-  // Since measureText behaves differently in different browsers
-  // OS so considering a adjustment factor of 0.2
-  const adjustmentFactor = 0.2;
-
-  return metrics.width + adjustmentFactor;
+  return width;
 };

 export const getTextWidth = (text: string, font: FontString) => {
-  const lines = text.split("\n");
+  const lines = splitIntoLines(text);
  let width = 0;
  lines.forEach((line) => {
    width = Math.max(width, getLineWidth(line, font));
  });
  return width;
 };
+
+export const getTextHeight = (
+  text: string,
+  fontSize: number,
+  lineHeight: ExcalidrawTextElement["lineHeight"],
+) => {
+  const lineCount = splitIntoLines(text).length;
+  return getLineHeightInPx(fontSize, lineHeight) * lineCount;
+};
+
 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);

+  let currentLine = "";
+  let currentLineWidthTillNow = 0;
+
  const push = (str: string) => {
    if (str.trim()) {
      lines.push(str);
    }
  };
+
+  const resetParams = () => {
+    currentLine = "";
+    currentLineWidthTillNow = 0;
+  };
+
  originalLines.forEach((originalLine) => {
-    const words = originalLine.split(" ");
-    // This means its newline so push it
-    if (words.length === 1 && words[0] === "") {
-      lines.push(words[0]);
+    const currentLineWidth = getTextWidth(originalLine, font);
+
+    //Push the line if its <= maxWidth
+    if (currentLineWidth <= maxWidth) {
+      lines.push(originalLine);
      return; // continue
    }
-    let currentLine = "";
-    let currentLineWidthTillNow = 0;
+    const words = originalLine.split(" ");
+
+    resetParams();

    let index = 0;
+
    while (index < words.length) {
      const currentWordWidth = getLineWidth(words[index], font);

+      // This will only happen when single word takes entire width
+      if (currentWordWidth === maxWidth) {
+        push(words[index]);
+        index++;
+      }
+
      // Start breaking longer words exceeding max width
-      if (currentWordWidth >= maxWidth) {
+      else if (currentWordWidth > maxWidth) {
        // push current line since the current word exceeds the max width
        // so will be appended in next line
        push(currentLine);
-        currentLine = "";
-        currentLineWidthTillNow = 0;
+
+        resetParams();
+
        while (words[index].length > 0) {
          const currentChar = String.fromCodePoint(
            words[index].codePointAt(0)!,
@@ -388,10 +422,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
          words[index] = words[index].slice(currentChar.length);

          if (currentLineWidthTillNow >= maxWidth) {
-            // only remove last trailing space which we have added when joining words
-            if (currentLine.slice(-1) === " ") {
-              currentLine = currentLine.slice(0, -1);
-            }
            push(currentLine);
            currentLine = currentChar;
            currentLineWidthTillNow = width;
@@ -399,11 +429,11 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
            currentLine += currentChar;
          }
        }
+
        // push current line if appending space exceeds max width
        if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
          push(currentLine);
-          currentLine = "";
-          currentLineWidthTillNow = 0;
+          resetParams();
        } else {
          // space needs to be appended before next word
          // as currentLine contains chars which couldn't be appended
@@ -411,7 +441,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
          currentLine += " ";
          currentLineWidthTillNow += spaceWidth;
        }
-
        index++;
      } else {
        // Start appending words in a line till max width reached
@@ -419,10 +448,9 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
          const word = words[index];
          currentLineWidthTillNow = getLineWidth(currentLine + word, font);

-          if (currentLineWidthTillNow >= maxWidth) {
+          if (currentLineWidthTillNow > maxWidth) {
            push(currentLine);
-            currentLineWidthTillNow = 0;
-            currentLine = "";
+            resetParams();

            break;
          }
@@ -433,22 +461,15 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
            const word = currentLine.slice(0, -1);
            push(word);
-            currentLine = "";
-            currentLineWidthTillNow = 0;
+            resetParams();
            break;
          }
        }
-        if (currentLineWidthTillNow === maxWidth) {
-          currentLine = "";
-          currentLineWidthTillNow = 0;
-        }
      }
    }
-    if (currentLine) {
+    if (currentLine.slice(-1) === " ") {
      // only remove last trailing space which we have added when joining words
-      if (currentLine.slice(-1) === " ") {
-        currentLine = currentLine.slice(0, -1);
-      }
+      currentLine = currentLine.slice(0, -1);
      push(currentLine);
    }
  });
@@ -479,22 +500,24 @@ export const charWidth = (() => {
    getCache,
  };
 })();
-export const getApproxMinLineWidth = (font: FontString) => {
-  const maxCharWidth = getMaxCharWidth(font);

+const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
+
+// FIXME rename to getApproxMinContainerWidth
+export const getApproxMinLineWidth = (
+  font: FontString,
+  lineHeight: ExcalidrawTextElement["lineHeight"],
+) => {
+  const maxCharWidth = getMaxCharWidth(font);
  if (maxCharWidth === 0) {
    return (
-      measureText(DUMMY_TEXT.split("").join("\n"), font).width +
+      measureText(DUMMY_TEXT.split("").join("\n"), font, lineHeight).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) {
@@ -621,6 +644,26 @@ export const getContainerCenter = (
  return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
 };

+export const getContainerCoords = (container: NonDeletedExcalidrawElement) => {
+  let offsetX = BOUND_TEXT_PADDING;
+  let offsetY = BOUND_TEXT_PADDING;
+
+  if (container.type === "ellipse") {
+    // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6172
+    offsetX += (container.width / 2) * (1 - Math.sqrt(2) / 2);
+    offsetY += (container.height / 2) * (1 - Math.sqrt(2) / 2);
+  }
+  // The derivation of coordinates is explained in https://github.com/excalidraw/excalidraw/pull/6265
+  if (container.type === "diamond") {
+    offsetX += container.width / 4;
+    offsetY += container.height / 4;
+  }
+  return {
+    x: container.x + offsetX,
+    y: container.y + offsetY,
+  };
+};
+
 export const getTextElementAngle = (textElement: ExcalidrawTextElement) => {
  const container = getContainerElement(textElement);
  if (!container || isArrowElement(container)) {
@@ -633,12 +676,13 @@ export const getBoundTextElementOffset = (
  boundTextElement: ExcalidrawTextElement | null,
 ) => {
  const container = getContainerElement(boundTextElement);
-  if (!container) {
+  if (!container || !boundTextElement) {
    return 0;
  }
  if (isArrowElement(container)) {
    return BOUND_TEXT_PADDING * 8;
  }
+
  return BOUND_TEXT_PADDING;
 };

@@ -666,14 +710,24 @@ export const shouldAllowVerticalAlign = (
      }
      return true;
    }
-    const boundTextElement = getBoundTextElement(element);
-    if (boundTextElement) {
-      if (isArrowElement(element)) {
+    return false;
+  });
+};
+
+export const suppportsHorizontalAlign = (
+  selectedElements: NonDeletedExcalidrawElement[],
+) => {
+  return selectedElements.some((element) => {
+    const hasBoundContainer = isBoundToContainer(element);
+    if (hasBoundContainer) {
+      const container = getContainerElement(element);
+      if (isTextElement(element) && isArrowElement(container)) {
        return false;
      }
      return true;
    }
-    return false;
+
+    return isTextElement(element);
  });
 };

@@ -714,12 +768,127 @@ export const getTextBindableContainerAtPosition = (
  return isTextBindableContainer(hitElement, false) ? hitElement : null;
 };

-export const isValidTextContainer = (element: ExcalidrawElement) => {
-  return (
-    element.type === "rectangle" ||
-    element.type === "ellipse" ||
-    element.type === "diamond" ||
-    isImageElement(element) ||
-    isArrowElement(element)
-  );
+const VALID_CONTAINER_TYPES = new Set([
+  "rectangle",
+  "ellipse",
+  "diamond",
+  "image",
+  "arrow",
+]);
+
+export const isValidTextContainer = (element: ExcalidrawElement) =>
+  VALID_CONTAINER_TYPES.has(element.type);
+
+export const computeContainerDimensionForBoundText = (
+  dimension: number,
+  containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>,
+) => {
+  dimension = Math.ceil(dimension);
+  const padding = BOUND_TEXT_PADDING * 2;
+
+  if (containerType === "ellipse") {
+    return Math.round(((dimension + padding) / Math.sqrt(2)) * 2);
+  }
+  if (containerType === "arrow") {
+    return dimension + padding * 8;
+  }
+  if (containerType === "diamond") {
+    return 2 * (dimension + padding);
+  }
+  return dimension + padding;
+};
+
+export const getMaxContainerWidth = (container: ExcalidrawElement) => {
+  const width = getContainerDims(container).width;
+  if (isArrowElement(container)) {
+    const containerWidth = width - BOUND_TEXT_PADDING * 8 * 2;
+    if (containerWidth <= 0) {
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.width;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
+    }
+    return containerWidth;
+  }
+
+  if (container.type === "ellipse") {
+    // The width of the largest rectangle inscribed inside an ellipse is
+    // Math.round((ellipse.width / 2) * Math.sqrt(2)) which is derived from
+    // equation of an ellipse -https://github.com/excalidraw/excalidraw/pull/6172
+    return Math.round((width / 2) * Math.sqrt(2)) - BOUND_TEXT_PADDING * 2;
+  }
+  if (container.type === "diamond") {
+    // The width of the largest rectangle inscribed inside a rhombus is
+    // Math.round(width / 2) - https://github.com/excalidraw/excalidraw/pull/6265
+    return Math.round(width / 2) - BOUND_TEXT_PADDING * 2;
+  }
+  return width - BOUND_TEXT_PADDING * 2;
+};
+
+export const getMaxContainerHeight = (container: ExcalidrawElement) => {
+  const height = getContainerDims(container).height;
+  if (isArrowElement(container)) {
+    const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
+    if (containerHeight <= 0) {
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.height;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
+    }
+    return height;
+  }
+  if (container.type === "ellipse") {
+    // The height of the largest rectangle inscribed inside an ellipse is
+    // Math.round((ellipse.height / 2) * Math.sqrt(2)) which is derived from
+    // equation of an ellipse - https://github.com/excalidraw/excalidraw/pull/6172
+    return Math.round((height / 2) * Math.sqrt(2)) - BOUND_TEXT_PADDING * 2;
+  }
+  if (container.type === "diamond") {
+    // The height of the largest rectangle inscribed inside a rhombus is
+    // Math.round(height / 2) - https://github.com/excalidraw/excalidraw/pull/6265
+    return Math.round(height / 2) - BOUND_TEXT_PADDING * 2;
+  }
+  return height - BOUND_TEXT_PADDING * 2;
+};
+
+export const isMeasureTextSupported = () => {
+  const width = getTextWidth(
+    DUMMY_TEXT,
+    getFontString({
+      fontSize: DEFAULT_FONT_SIZE,
+      fontFamily: DEFAULT_FONT_FAMILY,
+    }),
+  );
+  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];
 };
@@ -3,19 +3,23 @@ import ExcalidrawApp from "../excalidraw-app";
 import { GlobalTestState, render, screen } from "../tests/test-utils";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import { CODES, KEYS } from "../keys";
-import { fireEvent } from "../tests/test-utils";
+import {
+  fireEvent,
+  mockBoundingClientRect,
+  restoreOriginalGetBoundingClientRect,
+} from "../tests/test-utils";
 import { queryByText } from "@testing-library/react";

-import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
+import { FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
 import {
  ExcalidrawTextElement,
  ExcalidrawTextElementWithContainer,
 } from "./types";
-import * as textElementUtils from "./textElement";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
 import { resize } from "../tests/utils";
 import { getOriginalContainerHeightFromCache } from "./textWysiwyg";
+
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);

@@ -222,11 +226,19 @@ describe("textWysiwyg", () => {

  describe("Test container-unbound text", () => {
    const { h } = window;
+    const dimensions = { height: 400, width: 800 };

    let textarea: HTMLTextAreaElement;
    let textElement: ExcalidrawTextElement;
+
+    beforeAll(() => {
+      mockBoundingClientRect(dimensions);
+    });
+
    beforeEach(async () => {
      await render(<ExcalidrawApp />);
+      //@ts-ignore
+      h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!);

      textElement = UI.createElement("text");

@@ -236,6 +248,10 @@ describe("textWysiwyg", () => {
      )!;
    });

+    afterAll(() => {
+      restoreOriginalGetBoundingClientRect();
+    });
+
    it("should add a tab at the start of the first line", () => {
      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
      textarea.value = "Line#1\nLine#2";
@@ -434,23 +450,33 @@ describe("textWysiwyg", () => {
      );
      expect(h.state.zoom.value).toBe(1);
    });
+
+    it("text should never go beyond max width", async () => {
+      UI.clickTool("text");
+      mouse.clickAt(750, 300);
+
+      textarea = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      )!;
+      fireEvent.change(textarea, {
+        target: {
+          value:
+            "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
+        },
+      });
+
+      textarea.dispatchEvent(new Event("input"));
+      await new Promise((cb) => setTimeout(cb, 0));
+      textarea.blur();
+      expect(textarea.style.width).toBe("792px");
+      expect(h.elements[0].width).toBe(1000);
+    });
  });

  describe("Test container-bound text", () => {
    let rectangle: any;
    const { h } = window;

-    const DUMMY_HEIGHT = 240;
-    const DUMMY_WIDTH = 160;
-    const APPROX_LINE_HEIGHT = 25;
-    const INITIAL_WIDTH = 10;
-
-    beforeAll(() => {
-      jest
-        .spyOn(textElementUtils, "getApproxLineHeight")
-        .mockReturnValue(APPROX_LINE_HEIGHT);
-    });
-
    beforeEach(async () => {
      await render(<ExcalidrawApp />);
      h.elements = [];
@@ -500,6 +526,44 @@ 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",
@@ -643,11 +707,11 @@ describe("textWysiwyg", () => {
    ["freedraw", "line"].forEach((type: any) => {
      it(`shouldn't create text element when pressing 'Enter' key on ${type} `, async () => {
        h.elements = [];
-        const elemnet = UI.createElement(type, {
+        const element = UI.createElement(type, {
          width: 100,
          height: 50,
        });
-        API.setSelectedElements([elemnet]);
+        API.setSelectedElements([element]);
        Keyboard.keyPress(KEYS.ENTER);
        expect(h.elements.length).toBe(1);
      });
@@ -732,39 +796,6 @@ describe("textWysiwyg", () => {
    });

    it("should wrap text and vertcially center align once text submitted", async () => {
-      jest
-        .spyOn(textElementUtils, "measureText")
-        .mockImplementation((text, font, maxWidth) => {
-          let width = INITIAL_WIDTH;
-          let height = APPROX_LINE_HEIGHT;
-          let baseline = 10;
-          if (!text) {
-            return {
-              width,
-              height,
-              baseline,
-            };
-          }
-          baseline = 30;
-          width = DUMMY_WIDTH;
-          if (text === "Hello \nWorld!") {
-            height = APPROX_LINE_HEIGHT * 2;
-          }
-          if (maxWidth) {
-            width = maxWidth;
-            // To capture cases where maxWidth passed is initial width
-            // due to which the text is not wrapped correctly
-            if (maxWidth === INITIAL_WIDTH) {
-              height = DUMMY_HEIGHT;
-            }
-          }
-          return {
-            width,
-            height,
-            baseline,
-          };
-        });
-
      expect(h.elements.length).toBe(1);

      Keyboard.keyDown(KEYS.ENTER);
@@ -773,11 +804,6 @@ describe("textWysiwyg", () => {
        ".excalidraw-textEditorContainer > textarea",
      ) as HTMLTextAreaElement;

-      // mock scroll height
-      jest
-        .spyOn(editor, "scrollHeight", "get")
-        .mockImplementation(() => APPROX_LINE_HEIGHT * 2);
-
      fireEvent.change(editor, {
        target: {
          value: "Hello World!",
@@ -792,11 +818,11 @@ describe("textWysiwyg", () => {
      expect(text.text).toBe("Hello \nWorld!");
      expect(text.originalText).toBe("Hello World!");
      expect(text.y).toBe(
-        rectangle.y + rectangle.height / 2 - (APPROX_LINE_HEIGHT * 2) / 2,
+        rectangle.y + h.elements[0].height / 2 - text.height / 2,
      );
-      expect(text.x).toBe(rectangle.x + BOUND_TEXT_PADDING);
-      expect(text.height).toBe(APPROX_LINE_HEIGHT * 2);
-      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
+      expect(text.x).toBe(25);
+      expect(text.height).toBe(50);
+      expect(text.width).toBe(60);

      // Edit and text by removing second line and it should
      // still vertically align correctly
@@ -813,11 +839,6 @@ describe("textWysiwyg", () => {
        },
      });

-      // mock scroll height
-      jest
-        .spyOn(editor, "scrollHeight", "get")
-        .mockImplementation(() => APPROX_LINE_HEIGHT);
-      editor.style.height = "25px";
      editor.dispatchEvent(new Event("input"));

      await new Promise((r) => setTimeout(r, 0));
@@ -827,12 +848,12 @@ describe("textWysiwyg", () => {

      expect(text.text).toBe("Hello");
      expect(text.originalText).toBe("Hello");
+      expect(text.height).toBe(25);
+      expect(text.width).toBe(50);
      expect(text.y).toBe(
-        rectangle.y + rectangle.height / 2 - APPROX_LINE_HEIGHT / 2,
+        rectangle.y + h.elements[0].height / 2 - text.height / 2,
      );
-      expect(text.x).toBe(rectangle.x + BOUND_TEXT_PADDING);
-      expect(text.height).toBe(APPROX_LINE_HEIGHT);
-      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
+      expect(text.x).toBe(30);
    });

    it("should unbind bound text when unbind action from context menu is triggered", async () => {
@@ -919,8 +940,8 @@ describe("textWysiwyg", () => {
      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        Array [
-          109.5,
-          17,
+          85,
+          4.5,
        ]
      `);

@@ -934,6 +955,8 @@ describe("textWysiwyg", () => {
      editor.select();

      fireEvent.click(screen.getByTitle("Left"));
+      await new Promise((r) => setTimeout(r, 0));
+
      fireEvent.click(screen.getByTitle("Align bottom"));
      await new Promise((r) => setTimeout(r, 0));

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

@@ -967,7 +990,7 @@ describe("textWysiwyg", () => {
      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        Array [
-          424,
+          375,
          -539,
        ]
      `);
@@ -1082,9 +1105,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(85);
-      expect(text.x).toBe(89.5);
-      expect(text.y).toBe(90);
+      expect(rectangle.y).toBe(-40);
+      expect(text.x).toBe(85);
+      expect(text.y).toBe(-35);

      Keyboard.withModifierKeys({ ctrl: true }, () => {
        Keyboard.keyPress(KEYS.Z);
@@ -1114,29 +1137,6 @@ describe("textWysiwyg", () => {
    });

    it("should restore original container height and clear cache once text is unbind", async () => {
-      jest
-        .spyOn(textElementUtils, "measureText")
-        .mockImplementation((text, font, maxWidth) => {
-          let width = INITIAL_WIDTH;
-          let height = APPROX_LINE_HEIGHT;
-          let baseline = 10;
-          if (!text) {
-            return {
-              width,
-              height,
-              baseline,
-            };
-          }
-          baseline = 30;
-          width = DUMMY_WIDTH;
-          height = APPROX_LINE_HEIGHT * 5;
-
-          return {
-            width,
-            height,
-            baseline,
-          };
-        });
      const originalRectHeight = rectangle.height;
      expect(rectangle.height).toBe(originalRectHeight);

@@ -1150,7 +1150,7 @@ describe("textWysiwyg", () => {
        target: { value: "Online whiteboard collaboration made easy" },
      });
      editor.blur();
-      expect(rectangle.height).toBe(135);
+      expect(rectangle.height).toBe(185);
      mouse.select(rectangle);
      fireEvent.contextMenu(GlobalTestState.canvas, {
        button: 2,
@@ -1176,7 +1176,7 @@ describe("textWysiwyg", () => {
      editor.blur();

      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
-      expect(rectangle.height).toBe(215);
+      expect(rectangle.height).toBe(156);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(null);

      mouse.select(rectangle);
@@ -1188,13 +1188,12 @@ describe("textWysiwyg", () => {

      await new Promise((r) => setTimeout(r, 0));
      editor.blur();
-      expect(rectangle.height).toBe(215);
+      expect(rectangle.height).toBe(156);
      // cache updated again
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(215);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(156);
    });

-    //@todo fix this test later once measureText is mocked correctly
-    it.skip("should reset the container height cache when font properties updated", async () => {
+    it("should reset the container height cache when font properties updated", async () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);

@@ -1220,7 +1219,42 @@ 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);
    });

    describe("should align correctly", () => {
@@ -1248,7 +1282,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            15,
-            20,
+            25,
          ]
        `);
      });
@@ -1258,8 +1292,8 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Align top"));
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
-            94.5,
-            20,
+            30,
+            25,
          ]
        `);
      });
@@ -1269,22 +1303,22 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Align top"));

        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              174,
-              20,
-            ]
-          `);
+          Array [
+            45,
+            25,
+          ]
+        `);
      });

      it("when center left", async () => {
        fireEvent.click(screen.getByTitle("Center vertically"));
        fireEvent.click(screen.getByTitle("Left"));
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              15,
-              25,
-            ]
-          `);
+          Array [
+            15,
+            45,
+          ]
+        `);
      });

      it("when center center", async () => {
@@ -1292,11 +1326,11 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Center vertically"));

        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              -25,
-              25,
-            ]
-          `);
+          Array [
+            30,
+            45,
+          ]
+        `);
      });

      it("when center right", async () => {
@@ -1304,11 +1338,11 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Center vertically"));

        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              174,
-              25,
-            ]
-          `);
+          Array [
+            45,
+            45,
+          ]
+        `);
      });

      it("when bottom left", async () => {
@@ -1316,34 +1350,120 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Align bottom"));

        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              15,
-              25,
-            ]
-          `);
+          Array [
+            15,
+            65,
+          ]
+        `);
      });

      it("when bottom center", async () => {
        fireEvent.click(screen.getByTitle("Center"));
        fireEvent.click(screen.getByTitle("Align bottom"));
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              94.5,
-              25,
-            ]
-          `);
+          Array [
+            30,
+            65,
+          ]
+        `);
      });

      it("when bottom right", async () => {
        fireEvent.click(screen.getByTitle("Right"));
        fireEvent.click(screen.getByTitle("Align bottom"));
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
-            Array [
-              174,
-              25,
-            ]
-          `);
+          Array [
+            45,
+            65,
+          ]
+        `);
      });
    });
+
+    it("should wrap text in a container when wrap text in container triggered from context menu", async () => {
+      UI.clickTool("text");
+      mouse.clickAt(20, 30);
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, {
+        target: {
+          value: "Excalidraw is an opensource virtual collaborative whiteboard",
+        },
+      });
+
+      editor.dispatchEvent(new Event("input"));
+      await new Promise((cb) => setTimeout(cb, 0));
+
+      editor.select();
+      fireEvent.click(screen.getByTitle("Left"));
+      await new Promise((r) => setTimeout(r, 0));
+
+      editor.blur();
+
+      const textElement = h.elements[1] as ExcalidrawTextElement;
+      expect(textElement.width).toBe(600);
+      expect(textElement.height).toBe(25);
+      expect(textElement.textAlign).toBe(TEXT_ALIGN.LEFT);
+      expect((textElement as ExcalidrawTextElement).text).toBe(
+        "Excalidraw is an opensource virtual collaborative whiteboard",
+      );
+
+      API.setSelectedElements([textElement]);
+
+      fireEvent.contextMenu(GlobalTestState.canvas, {
+        button: 2,
+        clientX: 20,
+        clientY: 30,
+      });
+
+      const contextMenu = document.querySelector(".context-menu");
+      fireEvent.click(
+        queryByText(contextMenu as HTMLElement, "Wrap text in a container")!,
+      );
+      expect(h.elements.length).toBe(3);
+
+      expect(h.elements[1]).toEqual(
+        expect.objectContaining({
+          angle: 0,
+          backgroundColor: "transparent",
+          boundElements: [
+            {
+              id: h.elements[2].id,
+              type: "text",
+            },
+          ],
+          fillStyle: "hachure",
+          groupIds: [],
+          height: 35,
+          isDeleted: false,
+          link: null,
+          locked: false,
+          opacity: 100,
+          roughness: 1,
+          roundness: {
+            type: 3,
+          },
+          strokeColor: "#000000",
+          strokeStyle: "solid",
+          strokeWidth: 1,
+          type: "rectangle",
+          updated: 1,
+          version: 1,
+          width: 610,
+          x: 15,
+          y: 25,
+        }),
+      );
+      expect(h.elements[2] as ExcalidrawTextElement).toEqual(
+        expect.objectContaining({
+          text: "Excalidraw is an opensource virtual collaborative whiteboard",
+          verticalAlign: VERTICAL_ALIGN.MIDDLE,
+          textAlign: TEXT_ALIGN.LEFT,
+          boundElements: null,
+        }),
+      );
+    });
  });
 });
@@ -22,15 +22,19 @@ import {
 import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
-  getApproxLineHeight,
  getBoundTextElementId,
-  getBoundTextElementOffset,
+  getContainerCoords,
  getContainerDims,
  getContainerElement,
  getTextElementAngle,
  getTextWidth,
+  measureText,
  normalizeText,
+  redrawTextBoundingBox,
  wrapText,
+  getMaxContainerHeight,
+  getMaxContainerWidth,
+  computeContainerDimensionForBoundText,
 } from "./textElement";
 import {
  actionDecreaseFontSize,
@@ -38,7 +42,6 @@ import {
 } from "../actions/actionProperties";
 import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
-import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";

@@ -147,9 +150,7 @@ export const textWysiwyg = ({
      return;
    }
    const { textAlign, verticalAlign } = updatedTextElement;
-    const approxLineHeight = getApproxLineHeight(
-      getFontString(updatedTextElement),
-    );
+
    if (updatedTextElement && isTextElement(updatedTextElement)) {
      let coordX = updatedTextElement.x;
      let coordY = updatedTextElement.y;
@@ -157,7 +158,7 @@ export const textWysiwyg = ({
      let maxWidth = updatedTextElement.width;

      let maxHeight = updatedTextElement.height;
-      const width = updatedTextElement.width;
+      let textElementWidth = updatedTextElement.width;
      // Set to element height by default since that's
      // what is going to be used for unbounded text
      let textElementHeight = updatedTextElement.height;
@@ -208,11 +209,12 @@ export const textWysiwyg = ({

        // autogrow container height if text exceeds
        if (!isArrowElement(container) && textElementHeight > maxHeight) {
-          const diff = Math.min(
-            textElementHeight - maxHeight,
-            approxLineHeight,
+          const targetContainerHeight = computeContainerDimensionForBoundText(
+            textElementHeight,
+            container.type,
          );
-          mutateElement(container, { height: containerDims.height + diff });
+
+          mutateElement(container, { height: targetContainerHeight });
          return;
        } else if (
          // autoshrink container height until original container height
@@ -221,28 +223,26 @@ export const textWysiwyg = ({
          containerDims.height > originalContainerData.height &&
          textElementHeight < maxHeight
        ) {
-          const diff = Math.min(
-            maxHeight - textElementHeight,
-            approxLineHeight,
+          const targetContainerHeight = computeContainerDimensionForBoundText(
+            textElementHeight,
+            container.type,
          );
-          mutateElement(container, { height: containerDims.height - diff });
+          mutateElement(container, { height: targetContainerHeight });
        }
        // Start pushing text upward until a diff of 30px (padding)
        // is reached
        else {
+          const containerCoords = getContainerCoords(container);
+
          // vertically center align the text
          if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
            if (!isArrowElement(container)) {
              coordY =
-                container.y + containerDims.height / 2 - textElementHeight / 2;
+                containerCoords.y + maxHeight / 2 - textElementHeight / 2;
            }
          }
          if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-            coordY =
-              container.y +
-              containerDims.height -
-              textElementHeight -
-              getBoundTextElementOffset(updatedTextElement);
+            coordY = containerCoords.y + (maxHeight - textElementHeight);
          }
        }
      }
@@ -265,27 +265,25 @@ 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);
+      } else {
+        textElementWidth += 0.5;
      }
-
      // Make sure text editor height doesn't go beyond viewport
      const editorMaxHeight =
        (appState.height - viewportY) / appState.zoom.value;
      Object.assign(editable.style, {
        font: getFontString(updatedTextElement),
        // must be defined *after* font ¯\_(ツ)_/¯
-        lineHeight: `${lineHeight}px`,
-        width: `${Math.min(width, maxWidth)}px`,
+        lineHeight: element.lineHeight,
+        width: `${textElementWidth}px`,
        height: `${textElementHeight}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
        transform: getTransform(
-          width,
+          textElementWidth,
          textElementHeight,
          getTextElementAngle(updatedTextElement),
          appState,
@@ -299,6 +297,7 @@ export const textWysiwyg = ({
        filter: "var(--theme-filter)",
        maxHeight: `${editorMaxHeight}px`,
      });
+      editable.scrollTop = 0;
      // For some reason updating font attribute doesn't set font family
      // hence updating font family explicitly for test environment
      if (isTestEnv()) {
@@ -378,55 +377,20 @@ export const textWysiwyg = ({
        id,
      ) as ExcalidrawTextElement;
      const font = getFontString(updatedTextElement);
-      // using scrollHeight here since we need to calculate
-      // number of lines so cannot use editable.style.height
-      // as that gets updated below
-      // Rounding here so that the lines calculated is more accurate in all browsers.
-      // The scrollHeight and approxLineHeight differs in diff browsers
-      // eg it gives 1.05 in firefox for handewritten small font due to which
-      // height gets updated as lines > 1 and leads to jumping text for first line in bound container
-      // hence rounding here to avoid that
-      const lines = Math.round(
-        editable.scrollHeight / getApproxLineHeight(font),
-      );
-      // auto increase height only when lines  > 1 so its
-      // measured correctly and vertically aligns for
-      // first line as well as setting height to "auto"
-      // doubles the height as soon as user starts typing
-      if (isBoundToContainer(element) && lines > 1) {
+      if (isBoundToContainer(element)) {
        const container = getContainerElement(element);
-
-        let height = "auto";
-        editable.style.height = "0px";
-        let heightSet = false;
-        if (lines === 2) {
-          const actualLineCount = wrapText(
-            editable.value,
-            font,
-            getMaxContainerWidth(container!),
-          ).split("\n").length;
-          // This is browser behaviour when setting height to "auto"
-          // It sets the height needed for 2 lines even if actual
-          // line count is 1 as mentioned above as well
-          // hence reducing the height by half if actual line count is 1
-          // so single line aligns vertically when deleting
-          if (actualLineCount === 1) {
-            height = `${editable.scrollHeight / 2}px`;
-            editable.style.height = height;
-            heightSet = true;
-          }
-        }
        const wrappedText = wrapText(
          normalizeText(editable.value),
          font,
          getMaxContainerWidth(container!),
        );
-        const width = getTextWidth(wrappedText, font);
+        const { width, height } = measureText(
+          wrappedText,
+          font,
+          updatedTextElement.lineHeight,
+        );
        editable.style.width = `${width}px`;
-
-        if (!heightSet) {
-          editable.style.height = `${editable.scrollHeight}px`;
-        }
+        editable.style.height = `${height}px`;
      }
      onChange(normalizeText(editable.value));
    };
@@ -463,7 +427,9 @@ export const textWysiwyg = ({
          event.code === CODES.BRACKET_RIGHT))
    ) {
      event.preventDefault();
-      if (event.shiftKey || event.code === CODES.BRACKET_LEFT) {
+      if (event.isComposing) {
+        return;
+      } else if (event.shiftKey || event.code === CODES.BRACKET_LEFT) {
        outdent();
      } else {
        indent();
@@ -612,6 +578,7 @@ export const textWysiwyg = ({
          ),
        });
      }
+      redrawTextBoundingBox(updateElement, container);
    }

    onSubmit({
@@ -0,0 +1,66 @@
+import { API } from "../tests/helpers/api";
+import { hasBoundTextElement } from "./typeChecks";
+
+describe("Test TypeChecks", () => {
+  describe("Test hasBoundTextElement", () => {
+    it("should return true for text bindable containers with bound text", () => {
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "rectangle",
+            boundElements: [{ type: "text", id: "text-id" }],
+          }),
+        ),
+      ).toBeTruthy();
+
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "ellipse",
+            boundElements: [{ type: "text", id: "text-id" }],
+          }),
+        ),
+      ).toBeTruthy();
+
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "arrow",
+            boundElements: [{ type: "text", id: "text-id" }],
+          }),
+        ),
+      ).toBeTruthy();
+
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "image",
+            boundElements: [{ type: "text", id: "text-id" }],
+          }),
+        ),
+      ).toBeTruthy();
+    });
+
+    it("should return false for text bindable containers without bound text", () => {
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "freedraw",
+            boundElements: [{ type: "arrow", id: "arrow-id" }],
+          }),
+        ),
+      ).toBeFalsy();
+    });
+
+    it("should return false for non text bindable containers", () => {
+      expect(
+        hasBoundTextElement(
+          API.createElement({
+            type: "freedraw",
+            boundElements: [{ type: "text", id: "text-id" }],
+          }),
+        ),
+      ).toBeFalsy();
+    });
+  });
+});
@@ -1,5 +1,6 @@
 import { ROUNDNESS } from "../constants";
 import { AppState } from "../types";
+import { MarkNonNullable } from "../utility-types";
 import {
  ExcalidrawElement,
  ExcalidrawTextElement,
@@ -139,7 +140,7 @@ export const hasBoundTextElement = (
  element: ExcalidrawElement | null,
 ): element is MarkNonNullable<ExcalidrawBindableElement, "boundElements"> => {
  return (
-    isBindableElement(element) &&
+    isTextBindableContainer(element) &&
    !!element.boundElements?.some(({ type }) => type === "text")
  );
 };
@@ -6,6 +6,7 @@ import {
  THEME,
  VERTICAL_ALIGN,
 } from "../constants";
+import { MarkNonNullable, ValueOf } from "../utility-types";

 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid";
@@ -130,11 +131,15 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
    fontSize: number;
    fontFamily: FontFamilyValues;
    text: string;
-    baseline: number;
    textAlign: TextAlign;
    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 =
@@ -0,0 +1,3 @@
+import { unstable_createStore } from "jotai";
+
+export const appJotaiStore = unstable_createStore();
@@ -70,7 +70,7 @@ import { decryptData } from "../../data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
 import { atom, useAtom } from "jotai";
-import { jotaiStore } from "../../jotai";
+import { appJotaiStore } from "../app-jotai";

 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const collabDialogShownAtom = atom(false);
@@ -167,7 +167,7 @@ class Collab extends PureComponent<Props, CollabState> {
      setUsername: this.setUsername,
    };

-    jotaiStore.set(collabAPIAtom, collabAPI);
+    appJotaiStore.set(collabAPIAtom, collabAPI);
    this.onOfflineStatusToggle();

    if (
@@ -185,7 +185,7 @@ class Collab extends PureComponent<Props, CollabState> {
  }

  onOfflineStatusToggle = () => {
-    jotaiStore.set(isOfflineAtom, !window.navigator.onLine);
+    appJotaiStore.set(isOfflineAtom, !window.navigator.onLine);
  };

  componentWillUnmount() {
@@ -208,10 +208,10 @@ class Collab extends PureComponent<Props, CollabState> {
    }
  }

-  isCollaborating = () => jotaiStore.get(isCollaboratingAtom)!;
+  isCollaborating = () => appJotaiStore.get(isCollaboratingAtom)!;

  private setIsCollaborating = (isCollaborating: boolean) => {
-    jotaiStore.set(isCollaboratingAtom, isCollaborating);
+    appJotaiStore.set(isCollaboratingAtom, isCollaborating);
  };

  private onUnload = () => {
@@ -804,7 +804,7 @@ class Collab extends PureComponent<Props, CollabState> {
  );

  handleClose = () => {
-    jotaiStore.set(collabDialogShownAtom, false);
+    appJotaiStore.set(collabDialogShownAtom, false);
  };

  setUsername = (username: string) => {
@@ -838,10 +838,9 @@ class Collab extends PureComponent<Props, CollabState> {
          />
        )}
        {errorMessage && (
-          <ErrorDialog
-            message={errorMessage}
-            onClose={() => this.setState({ errorMessage: "" })}
-          />
+          <ErrorDialog onClose={() => this.setState({ errorMessage: "" })}>
+            {errorMessage}
+          </ErrorDialog>
        )}
      </>
    );
@@ -10,13 +10,13 @@ import {
  shareWindows,
 } from "../../components/icons";
 import { ToolButton } from "../../components/ToolButton";
-import { t } from "../../i18n";
 import "./RoomDialog.scss";
 import Stack from "../../components/Stack";
 import { AppState } from "../../types";
 import { trackEvent } from "../../analytics";
 import { getFrame } from "../../utils";
 import DialogActionButton from "../../components/DialogActionButton";
+import { useI18n } from "../../i18n";

 const getShareIcon = () => {
  const navigator = window.navigator as any;
@@ -51,6 +51,7 @@ const RoomDialog = ({
  setErrorMessage: (message: string) => void;
  theme: AppState["theme"];
 }) => {
+  const { t } = useI18n();
  const roomLinkInput = useRef<HTMLInputElement>(null);

  const copyRoomLink = async () => {
@@ -1,12 +1,13 @@
 import React from "react";
 import { PlusPromoIcon } from "../../components/icons";
-import { t } from "../../i18n";
+import { useI18n } from "../../i18n";
 import { WelcomeScreen } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";

 export const AppWelcomeScreen: React.FC<{
  setCollabDialogShown: (toggle: boolean) => any;
 }> = React.memo((props) => {
+  const { t } = useI18n();
  let headingContent;

  if (isExcalidrawPlusSignedUser) {
@@ -1,17 +1,21 @@
 import { shield } from "../../components/icons";
 import { Tooltip } from "../../components/Tooltip";
-import { t } from "../../i18n";
+import { useI18n } from "../../i18n";

-export const EncryptedIcon = () => (
-  <a
-    className="encrypted-icon tooltip"
-    href="https://blog.excalidraw.com/end-to-end-encryption/"
-    target="_blank"
-    rel="noopener noreferrer"
-    aria-label={t("encrypted.link")}
-  >
-    <Tooltip label={t("encrypted.tooltip")} long={true}>
-      {shield}
-    </Tooltip>
-  </a>
-);
+export const EncryptedIcon = () => {
+  const { t } = useI18n();
+
+  return (
+    <a
+      className="encrypted-icon tooltip"
+      href="https://blog.excalidraw.com/end-to-end-encryption/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={t("encrypted.link")}
+    >
+      <Tooltip label={t("encrypted.tooltip")} long={true}>
+        {shield}
+      </Tooltip>
+    </a>
+  );
+};
@@ -6,7 +6,7 @@ import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
 import { FileId, NonDeletedExcalidrawElement } from "../../element/types";
 import { AppState, BinaryFileData, BinaryFiles } from "../../types";
 import { nanoid } from "nanoid";
-import { t } from "../../i18n";
+import { useI18n } from "../../i18n";
 import { excalidrawPlusIcon } from "./icons";
 import { encryptData, generateEncryptionKey } from "../../data/encryption";
 import { isInitializedImageElement } from "../../element/typeChecks";
@@ -79,6 +79,7 @@ export const ExportToExcalidrawPlus: React.FC<{
  files: BinaryFiles;
  onError: (error: Error) => void;
 }> = ({ elements, appState, files, onError }) => {
+  const { t } = useI18n();
  return (
    <Card color="primary">
      <div className="Card-icon">{excalidrawPlusIcon}</div>
@@ -1,22 +1,23 @@
-import { useAtom } from "jotai";
+import { useSetAtom } from "jotai";
 import React from "react";
-import { langCodeAtom } from "..";
-import * as i18n from "../../i18n";
+import { appLangCodeAtom } from "..";
+import { defaultLang, useI18n } from "../../i18n";
 import { languages } from "../../i18n";

 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
-  const [langCode, setLangCode] = useAtom(langCodeAtom);
+  const { t, langCode } = useI18n();
+  const setLangCode = useSetAtom(appLangCodeAtom);

  return (
    <select
      className="dropdown-select dropdown-select__language"
      onChange={({ target }) => setLangCode(target.value)}
      value={langCode}
-      aria-label={i18n.t("buttons.selectLanguage")}
+      aria-label={t("buttons.selectLanguage")}
      style={style}
    >
-      <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
-        {i18n.defaultLang.label}
+      <option key={defaultLang.code} value={defaultLang.code}>
+        {defaultLang.label}
      </option>
      {languages.map((lang) => (
        <option key={lang.code} value={lang.code}>
@@ -14,6 +14,7 @@ import { encryptData, decryptData } from "../../data/encryption";
 import { MIME_TYPES } from "../../constants";
 import { reconcileElements } from "../collab/reconciliation";
 import { getSyncableElements, SyncableExcalidrawElement } from ".";
+import { ResolutionType } from "../../utility-types";

 // private
 // -----------------------------------------------------------------------------
@@ -263,7 +263,7 @@ export const loadScene = async (
      await importFromBackend(id, privateKey),
      localDataState?.appState,
      localDataState?.elements,
-      { repairBindings: true },
+      { repairBindings: true, refreshDimensions: true },
    );
  } else {
    data = restore(localDataState || null, null, null, {
@@ -75,15 +75,17 @@ import { loadFilesFromFirebase } from "./data/firebase";
 import { LocalData } from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
 import clsx from "clsx";
-import { atom, Provider, useAtom, useAtomValue } from "jotai";
-import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
+import { atom, Provider, useAtom, useAtomValue } from "jotai";
+import { useAtomWithInitialValue } from "../jotai";
+import { appJotaiStore } from "./app-jotai";

 import "./index.scss";
+import { ResolutionType } from "../utility-types";

 polyfill();

@@ -226,15 +228,15 @@ const initializeScene = async (opts: {
  return { scene: null, isExternalScene: false };
 };

-const currentLangCode = languageDetector.detect() || defaultLang.code;
-
-export const langCodeAtom = atom(
-  Array.isArray(currentLangCode) ? currentLangCode[0] : currentLangCode,
+const detectedLangCode = languageDetector.detect() || defaultLang.code;
+export const appLangCodeAtom = atom(
+  Array.isArray(detectedLangCode) ? detectedLangCode[0] : detectedLangCode,
 );

 const ExcalidrawWrapper = () => {
  const [errorMessage, setErrorMessage] = useState("");
-  const [langCode, setLangCode] = useAtom(langCodeAtom);
+  const [langCode, setLangCode] = useAtom(appLangCodeAtom);
+
  // initial state
  // ---------------------------------------------------------------------------

@@ -671,10 +673,9 @@ const ExcalidrawWrapper = () => {
      </Excalidraw>
      {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
      {errorMessage && (
-        <ErrorDialog
-          message={errorMessage}
-          onClose={() => setErrorMessage("")}
-        />
+        <ErrorDialog onClose={() => setErrorMessage("")}>
+          {errorMessage}
+        </ErrorDialog>
      )}
    </div>
  );
@@ -683,7 +684,7 @@ const ExcalidrawWrapper = () => {
 const ExcalidrawApp = () => {
  return (
    <TopErrorBoundary>
-      <Provider unstable_createStore={() => jotaiStore}>
+      <Provider unstable_createStore={() => appJotaiStore}>
        <ExcalidrawWrapper />
      </Provider>
    </TopErrorBoundary>
@@ -18,6 +18,8 @@ interface Window {
  EXCALIDRAW_EXPORT_SOURCE: string;
  EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
  gtag: Function;
+  _paq: any[];
+  _mtm: any[];
 }

 interface CanvasRenderingContext2D {
@@ -50,36 +52,6 @@ interface Clipboard extends EventTarget {
  write(data: any[]): Promise<void>;
 }

-type Mutable<T> = {
-  -readonly [P in keyof T]: T[P];
-};
-
-type ValueOf<T> = T[keyof T];
-
-type Merge<M, N> = Omit<M, keyof N> & N;
-
-/** utility type to assert that the second type is a subtype of the first type.
- * Returns the subtype. */
-type SubtypeOf<Supertype, Subtype extends Supertype> = Subtype;
-
-type ResolutionType<T extends (...args: any) => any> = T extends (
-  ...args: any
-) => Promise<infer R>
-  ? R
-  : any;
-
-// https://github.com/krzkaczor/ts-essentials
-type MarkOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-
-type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> &
-  Required<Pick<T, RK>>;
-
-type MarkNonNullable<T, K extends keyof T> = {
-  [P in K]-?: P extends K ? NonNullable<T[P]> : T[P];
-} & { [P in keyof T]: T[P] };
-
-type NonOptional<T> = Exclude<T, undefined>;
-
 // PNG encoding/decoding
 // -----------------------------------------------------------------------------
 type TEXtChunk = { name: "tEXt"; data: Uint8Array };
@@ -101,23 +73,6 @@ declare module "png-chunks-extract" {
 }
 // -----------------------------------------------------------------------------

-// -----------------------------------------------------------------------------
-// type getter for interface's callable type
-// src: https://stackoverflow.com/a/58658851/927631
-// -----------------------------------------------------------------------------
-type SignatureType<T> = T extends (...args: infer R) => any ? R : never;
-type CallableType<T extends (...args: any[]) => any> = (
-  ...args: SignatureType<T>
-) => ReturnType<T>;
-// --------------------------------------------------------------------------—
-
-// Type for React.forwardRef --- supply only the first generic argument T
-type ForwardRef<T, P = any> = Parameters<
-  CallableType<React.ForwardRefRenderFunction<T, P>>
->[1];
-
-// --------------------------------------------------------------------------—
-
 interface Blob {
  handle?: import("browser-fs-acces").FileSystemHandle;
  name?: string;
@@ -2,6 +2,7 @@ import { AppState } from "./types";
 import { ExcalidrawElement } from "./element/types";
 import { isLinearElement } from "./element/typeChecks";
 import { deepCopyElement } from "./element/newElement";
+import { Mutable } from "./utility-types";

 export interface HistoryEntry {
  appState: ReturnType<typeof clearAppStatePropertiesForHistory>;
@@ -1,6 +1,8 @@
 import fallbackLangData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
 import { ENV } from "./constants";
+import { jotaiScope, jotaiStore } from "./jotai";
+import { atom, useAtomValue } from "jotai";

 const COMPLETION_THRESHOLD = 85;

@@ -99,6 +101,8 @@ export const setLanguage = async (lang: Language) => {
      currentLangData = fallbackLangData;
    }
  }
+
+  jotaiStore.set(editorLangCodeAtom, lang.code);
 };

 export const getLanguage = () => currentLang;
@@ -143,3 +147,15 @@ export const t = (
  }
  return translation;
 };
+
+/** @private atom used solely to rerender components using `useI18n` hook */
+const editorLangCodeAtom = atom(defaultLang.code);
+
+// Should be used in components that fall under these cases:
+// - component is rendered as an <Excalidraw> child
+// - component is rendered internally by <Excalidraw>, but the component
+//   is memoized w/o being updated on `langCode`, `AppState`, or `UIAppState`
+export const useI18n = () => {
+  const langCode = useAtomValue(editorLangCodeAtom, jotaiScope);
+  return { t, langCode };
+};
@@ -1,4 +1,4 @@
-import { unstable_createStore, useAtom, WritableAtom } from "jotai";
+import { PrimitiveAtom, unstable_createStore, useAtom } from "jotai";
 import { useLayoutEffect } from "react";

 export const jotaiScope = Symbol();
@@ -6,7 +6,7 @@ export const jotaiStore = unstable_createStore();

 export const useAtomWithInitialValue = <
  T extends unknown,
-  A extends WritableAtom<T, T>,
+  A extends PrimitiveAtom<T>,
 >(
  atom: A,
  initialValue: T | (() => T),
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "تعذر استيراد المشهد من عنوان URL المتوفر. إما أنها مشوهة، أو لا تحتوي على بيانات Excalidraw JSON صالحة.",
    "resetLibrary": "هذا سوف يمسح مكتبتك. هل أنت متأكد؟",
    "removeItemsFromsLibrary": "حذف {{count}} عنصر (عناصر) من المكتبة؟",
-    "invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفاً. التعاون المباشر معطل."
+    "invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفاً. التعاون المباشر معطل.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "نوع الملف غير مدعوم.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Този файлов формат не се поддържа.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "সরবরাহ করা লিঙ্ক থেকে দৃশ্য লোড করা যায়নি৷ এটি হয় বিকৃত, অথবা বৈধ এক্সক্যালিড্র জেসন তথ্য নেই৷",
    "resetLibrary": "এটি আপনার সংগ্রহ পরিষ্কার করবে। আপনি কি নিশ্চিত?",
    "removeItemsFromsLibrary": "সংগ্রহ থেকে {{count}} বস্তু বিয়োগ করা হবে। আপনি কি নিশ্চিত?",
-    "invalidEncryptionKey": "অবৈধ এনক্রীপশন কী।"
+    "invalidEncryptionKey": "অবৈধ এনক্রীপশন কী।",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "অসমর্থিত ফাইল।",
@@ -1,7 +1,7 @@
 {
  "labels": {
    "paste": "Enganxa",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "Enganxar com a text pla",
    "pasteCharts": "Enganxa els diagrames",
    "selectAll": "Selecciona-ho tot",
    "multiSelect": "Afegeix un element a la selecció",
@@ -72,7 +72,7 @@
    "layers": "Capes",
    "actions": "Accions",
    "language": "Llengua",
-    "liveCollaboration": "",
+    "liveCollaboration": "Col·laboració en directe...",
    "duplicateSelection": "Duplica",
    "untitled": "Sense títol",
    "name": "Nom",
@@ -116,8 +116,8 @@
      "label": "Enllaç"
    },
    "lineEditor": {
-      "edit": "",
-      "exit": ""
+      "edit": "Editar línia",
+      "exit": "Sortir de l'editor de línia"
    },
    "elementLock": {
      "lock": "Bloca",
@@ -136,8 +136,8 @@
  "buttons": {
    "clearReset": "Neteja el llenç",
    "exportJSON": "Exporta a un fitxer",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Exporta la imatge...",
+    "export": "Guardar a...",
    "exportToPng": "Exporta a PNG",
    "exportToSvg": "Exporta a SNG",
    "copyToClipboard": "Copia al porta-retalls",
@@ -145,7 +145,7 @@
    "scale": "Escala",
    "save": "Desa al fitxer actual",
    "saveAs": "Anomena i desa",
-    "load": "",
+    "load": "Obrir",
    "getShareableLink": "Obté l'enllaç per a compartir",
    "close": "Tanca",
    "selectLanguage": "Trieu la llengua",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "No s'ha pogut importar l'escena des de l'adreça URL proporcionada. Està malformada o no conté dades Excalidraw JSON vàlides.",
    "resetLibrary": "Això buidarà la biblioteca. N'esteu segur?",
    "removeItemsFromsLibrary": "Suprimir {{count}} element(s) de la biblioteca?",
-    "invalidEncryptionKey": "La clau d'encriptació ha de tenir 22 caràcters. La col·laboració en directe està desactivada."
+    "invalidEncryptionKey": "La clau d'encriptació ha de tenir 22 caràcters. La col·laboració en directe està desactivada.",
+    "collabOfflineWarning": "Sense connexió a internet disponible.\nEls vostres canvis no seran guardats!"
  },
  "errors": {
    "unsupportedFileType": "Tipus de fitxer no suportat.",
@@ -202,8 +203,8 @@
    "invalidSVGString": "SVG no vàlid.",
    "cannotResolveCollabServer": "No ha estat possible connectar amb el servidor collab. Si us plau recarregueu la pàgina i torneu a provar.",
    "importLibraryError": "No s'ha pogut carregar la biblioteca",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "collabSaveFailed": "No s'ha pogut desar a la base de dades de fons. Si els problemes persisteixen, hauríeu de desar el fitxer localment per assegurar-vos que no perdeu el vostre treball.",
+    "collabSaveFailed_sizeExceeded": "No s'ha pogut desar a la base de dades de fons, sembla que el llenç és massa gran. Hauríeu de desar el fitxer localment per assegurar-vos que no perdeu el vostre treball."
  },
  "toolBar": {
    "selection": "Selecció",
@@ -217,10 +218,10 @@
    "text": "Text",
    "library": "Biblioteca",
    "lock": "Mantenir activa l'eina seleccionada desprès de dibuixar",
-    "penMode": "",
+    "penMode": "Mode de llapis - evita tocar",
    "link": "Afegeix / actualitza l'enllaç per a la forma seleccionada",
    "eraser": "Esborrador",
-    "hand": ""
+    "hand": "Mà (eina de desplaçament)"
  },
  "headings": {
    "canvasActions": "Accions del llenç",
@@ -228,7 +229,7 @@
    "shapes": "Formes"
  },
  "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Per moure el llenç, manteniu premuda la roda del ratolí o la barra espaiadora mentre arrossegueu o utilitzeu l'eina manual",
    "linearElement": "Feu clic per a dibuixar múltiples punts; arrossegueu per a una sola línia",
    "freeDraw": "Feu clic i arrossegueu, deixeu anar per a finalitzar",
    "text": "Consell: també podeu afegir text fent doble clic en qualsevol lloc amb l'eina de selecció",
@@ -239,7 +240,7 @@
    "resize": "Per restringir les proporcions mentres es canvia la mida, mantenir premut el majúscul (SHIFT); per canviar la mida des del centre, mantenir premut ALT",
    "resizeImage": "Podeu redimensionar lliurement prement MAJÚSCULA;\nper a redimensionar des del centre, premeu ALT",
    "rotate": "Per restringir els angles mentre gira, mantenir premut el majúscul (SHIFT)",
-    "lineEditor_info": "",
+    "lineEditor_info": "Mantingueu premut Ctrl o Cmd i feu doble clic o premeu Ctrl o Cmd + Retorn per editar els punts",
    "lineEditor_pointSelected": "Premeu Suprimir per a eliminar el(s) punt(s), CtrlOrCmd+D per a duplicar-lo, o arrossegueu-lo per a moure'l",
    "lineEditor_nothingSelected": "Seleccioneu un punt per a editar-lo (premeu SHIFT si voleu\nselecció múltiple), o manteniu Alt i feu clic per a afegir més punts",
    "placeImage": "Feu clic per a col·locar la imatge o clic i arrossegar per a establir-ne la mida manualment",
@@ -247,7 +248,7 @@
    "bindTextToElement": "Premeu enter per a afegir-hi text",
    "deepBoxSelect": "Manteniu CtrlOrCmd per a selecció profunda, i per a evitar l'arrossegament",
    "eraserRevert": "Mantingueu premuda Alt per a revertir els elements seleccionats per a esborrar",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "És probable que aquesta funció es pugui activar posant la marca \"dom.events.asyncClipboard.clipboardItem\" a \"true\". Per canviar les marques del navegador al Firefox, visiteu la pàgina \"about:config\"."
  },
  "canvasError": {
    "cannotShowPreview": "No es pot mostrar la previsualització",
@@ -295,7 +296,7 @@
    "blog": "Llegiu el nostre blog",
    "click": "clic",
    "deepSelect": "Selecció profunda",
-    "deepBoxSelect": "",
+    "deepBoxSelect": "Seleccioneu profundament dins del quadre i eviteu arrossegar",
    "curvedArrow": "Fletxa corba",
    "curvedLine": "Línia corba",
    "documentation": "Documentació",
@@ -316,8 +317,8 @@
    "zoomToFit": "Zoom per veure tots els elements",
    "zoomToSelection": "Zoom per veure la selecció",
    "toggleElementLock": "Blocar/desblocar la selecció",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "movePageUpDown": "Mou la pàgina cap amunt/a baix",
+    "movePageLeftRight": "Mou la pàgina cap a l'esquerra/dreta"
  },
  "clearCanvasDialog": {
    "title": "Neteja el llenç"
@@ -399,7 +400,7 @@
    "fileSavedToFilename": "S'ha desat a {filename}",
    "canvas": "el llenç",
    "selection": "la selecció",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Fer servir {{shortcut}} per enganxar com un sol element,\no enganxeu-lo en un editor de text existent"
  },
  "colors": {
    "ffffff": "Blanc",
@@ -450,15 +451,15 @@
  },
  "welcomeScreen": {
    "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "Totes les vostres dades es guarden localment al vostre navegador.",
+      "center_heading_plus": "Vols anar a Excalidraw+ en comptes?",
+      "menuHint": "Exportar, preferències, llenguatges..."
    },
    "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "Exportar, preferències i més...",
+      "center_heading": "Diagrames. Fer. Simple.",
+      "toolbarHint": "Selecciona una eina i comença a dibuixar!",
+      "helpHint": "Dreceres i ajuda"
    }
  }
 }
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Die Szene konnte nicht von der angegebenen URL importiert werden. Sie ist entweder fehlerhaft oder enthält keine gültigen Excalidraw JSON-Daten.",
    "resetLibrary": "Dieses löscht deine Bibliothek. Bist du sicher?",
    "removeItemsFromsLibrary": "{{count}} Element(e) aus der Bibliothek löschen?",
-    "invalidEncryptionKey": "Verschlüsselungsschlüssel muss 22 Zeichen lang sein. Die Live-Zusammenarbeit ist deaktiviert."
+    "invalidEncryptionKey": "Verschlüsselungsschlüssel muss 22 Zeichen lang sein. Die Live-Zusammenarbeit ist deaktiviert.",
+    "collabOfflineWarning": "Keine Internetverbindung verfügbar.\nDeine Änderungen werden nicht gespeichert!"
  },
  "errors": {
    "unsupportedFileType": "Nicht unterstützter Dateityp.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Δεν ήταν δυνατή η εισαγωγή σκηνής από το URL που δώσατε. Είτε έχει λάθος μορφή, είτε δεν περιέχει έγκυρα δεδομένα JSON Excalidraw.",
    "resetLibrary": "Αυτό θα καθαρίσει τη βιβλιοθήκη σας. Είστε σίγουροι;",
    "removeItemsFromsLibrary": "Διαγραφή {{count}} αντικειμένου(ων) από τη βιβλιοθήκη;",
-    "invalidEncryptionKey": "Το κλειδί κρυπτογράφησης πρέπει να είναι 22 χαρακτήρες. Η ζωντανή συνεργασία είναι απενεργοποιημένη."
+    "invalidEncryptionKey": "Το κλειδί κρυπτογράφησης πρέπει να είναι 22 χαρακτήρες. Η ζωντανή συνεργασία είναι απενεργοποιημένη.",
+    "collabOfflineWarning": "Δεν υπάρχει διαθέσιμη σύνδεση στο internet.\nΟι αλλαγές σας δεν θα αποθηκευτούν!"
  },
  "errors": {
    "unsupportedFileType": "Μη υποστηριζόμενος τύπος αρχείου.",
@@ -110,6 +110,7 @@
    "increaseFontSize": "Increase font size",
    "unbindText": "Unbind text",
    "bindText": "Bind text to the container",
+    "createContainerFromText": "Wrap text in a container",
    "link": {
      "edit": "Edit link",
      "create": "Create link",
@@ -119,7 +120,6 @@
      "edit": "Edit line",
      "exit": "Exit line editor"
    },
-
    "elementLock": {
      "lock": "Lock",
      "unlock": "Unlock",
@@ -205,7 +205,22 @@
    "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
    "importLibraryError": "Couldn't load library",
    "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
-    "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work."
+    "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work.",
+    "brave_measure_text_error": {
+      "start": "Looks like you are using Brave browser with the",
+      "aggressive_block_fingerprint": "Aggressively Block Fingerprinting",
+      "setting_enabled": "setting enabled",
+      "break": "This could result in breaking the",
+      "text_elements": "Text Elements",
+      "in_your_drawings": "in your drawings",
+      "strongly_recommend": "We strongly recommend disabling this setting. You can follow",
+      "steps": "these steps",
+      "how": "on how to do so",
+      "disable_setting": " If disabling this setting doesn't fix the display of text elements, please open an",
+      "issue": "issue",
+      "write": "on our GitHub, or write us on",
+      "discord": "Discord"
+    }
  },
  "toolBar": {
    "selection": "Selection",
@@ -103,7 +103,7 @@
    "share": "Compartir",
    "showStroke": "Mostrar selector de color de trazo",
    "showBackground": "Mostrar el selector de color de fondo",
-    "toggleTheme": "Alternar tema",
+    "toggleTheme": "Cambiar tema",
    "personalLib": "Biblioteca personal",
    "excalidrawLib": "Biblioteca Excalidraw",
    "decreaseFontSize": "Disminuir tamaño de letra",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "No se ha podido importar la escena desde la URL proporcionada. Está mal formada, o no contiene datos de Excalidraw JSON válidos.",
    "resetLibrary": "Esto borrará tu biblioteca. ¿Estás seguro?",
    "removeItemsFromsLibrary": "¿Eliminar {{count}} elemento(s) de la biblioteca?",
-    "invalidEncryptionKey": "La clave de cifrado debe tener 22 caracteres. La colaboración en vivo está deshabilitada."
+    "invalidEncryptionKey": "La clave de cifrado debe tener 22 caracteres. La colaboración en vivo está deshabilitada.",
+    "collabOfflineWarning": "No hay conexión a internet disponible.\n¡No se guardarán los cambios!"
  },
  "errors": {
    "unsupportedFileType": "Tipo de archivo no admitido.",
@@ -233,7 +234,7 @@
    "freeDraw": "Haz clic y arrastra, suelta al terminar",
    "text": "Consejo: también puedes añadir texto haciendo doble clic en cualquier lugar con la herramienta de selección",
    "text_selected": "Doble clic o pulse ENTER para editar el texto",
-    "text_editing": "Pulse Escape o CtrlOrCmd+ENTER para terminar de editar",
+    "text_editing": "Pulse Escape o Ctrl/Cmd + ENTER para terminar de editar",
    "linearElementMulti": "Haz clic en el último punto o presiona Escape o Enter para finalizar",
    "lockAngle": "Puedes restringir el ángulo manteniendo presionado el botón SHIFT",
    "resize": "Para mantener las proporciones mantén SHIFT presionado mientras modificas el tamaño, \nmantén presionado ALT para modificar el tamaño desde el centro",
@@ -314,7 +315,7 @@
    "title": "Ayuda",
    "view": "Vista",
    "zoomToFit": "Ajustar la vista para mostrar todos los elementos",
-    "zoomToSelection": "Zoom a la selección",
+    "zoomToSelection": "Ampliar selección",
    "toggleElementLock": "Bloquear/desbloquear selección",
    "movePageUpDown": "Mover página hacia arriba/abajo",
    "movePageLeftRight": "Mover página hacia la izquierda/derecha"
@@ -326,9 +327,9 @@
    "title": "Publicar biblioteca",
    "itemName": "Nombre del artículo",
    "authorName": "Nombre del autor",
-    "githubUsername": "Nombre de usuario de Github",
+    "githubUsername": "Nombre de usuario de GitHub",
    "twitterUsername": "Nombre de usuario de Twitter",
-    "libraryName": "Nombre de la librería",
+    "libraryName": "Nombre de la biblioteca",
    "libraryDesc": "Descripción de la biblioteca",
    "website": "Sitio Web",
    "placeholder": {
@@ -336,7 +337,7 @@
      "libraryName": "Nombre de tu biblioteca",
      "libraryDesc": "Descripción de su biblioteca para ayudar a la gente a entender su uso",
      "githubHandle": "Nombre de usuario de GitHub (opcional), así podrá editar la biblioteca una vez enviada para su revisión",
-      "twitterHandle": "Nombre de usuario de Twitter (opcional), así que sabemos a quién acreditar cuando se promociona en Twitter",
+      "twitterHandle": "Nombre de usuario de Twitter (opcional), así sabemos a quién acreditar cuando se promociona en Twitter",
      "website": "Enlace a su sitio web personal o en cualquier otro lugar (opcional)"
    },
    "errors": {
@@ -458,7 +459,7 @@
      "menuHint": "Exportar, preferencias y más...",
      "center_heading": "Diagramas. Hecho. Simplemente.",
      "toolbarHint": "¡Elige una herramienta y empieza a dibujar!",
-      "helpHint": "Atajos & ayuda"
+      "helpHint": "Atajos y ayuda"
    }
  }
 }
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Ezin izan da eszena inportatu emandako URLtik. Gaizki eratuta dago edo ez du baliozko Excalidraw JSON daturik.",
    "resetLibrary": "Honek zure liburutegia garbituko du. Ziur zaude?",
    "removeItemsFromsLibrary": "Liburutegitik {{count}} elementu ezabatu?",
-    "invalidEncryptionKey": "Enkriptazio-gakoak 22 karaktere izan behar ditu. Zuzeneko lankidetza desgaituta dago."
+    "invalidEncryptionKey": "Enkriptazio-gakoak 22 karaktere izan behar ditu. Zuzeneko lankidetza desgaituta dago.",
+    "collabOfflineWarning": "Ez dago Interneteko konexiorik.\nZure aldaketak ez dira gordeko!"
  },
  "errors": {
    "unsupportedFileType": "Onartu gabeko fitxategi mota.",
@@ -220,7 +221,7 @@
    "penMode": "Luma modua - ukipena saihestu",
    "link": "Gehitu / Eguneratu esteka hautatutako forma baterako",
    "eraser": "Borragoma",
-    "hand": ""
+    "hand": "Eskua (panoratze tresna)"
  },
  "headings": {
    "canvasActions": "Canvas ekintzak",
@@ -228,7 +229,7 @@
    "shapes": "Formak"
  },
  "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Oihala mugitzeko, eutsi saguaren gurpila edo zuriune-barra arrastatzean, edo erabili esku tresna",
    "linearElement": "Egin klik hainbat puntu hasteko, arrastatu lerro bakarrerako",
    "freeDraw": "Egin klik eta arrastatu, askatu amaitutakoan",
    "text": "Aholkua: testua gehitu dezakezu edozein lekutan klik bikoitza eginez hautapen tresnarekin",
@@ -247,7 +248,7 @@
    "bindTextToElement": "Sakatu Sartu testua gehitzeko",
    "deepBoxSelect": "Eutsi Ctrl edo Cmd sakatuta aukeraketa sakona egiteko eta arrastatzea saihesteko",
    "eraserRevert": "Eduki Alt sakatuta ezabatzeko markatutako elementuak leheneratzeko",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "Ezaugarri hau \"dom.events.asyncClipboard.clipboardItem\" marka \"true\" gisa ezarrita gaitu daiteke. Firefox-en arakatzailearen banderak aldatzeko, bisitatu \"about:config\" orrialdera."
  },
  "canvasError": {
    "cannotShowPreview": "Ezin da oihala aurreikusi",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "بوم نقاشی از آدرس ارائه شده وارد نشد. این یا نادرست است، یا حاوی داده Excalidraw JSON معتبر نیست.",
    "resetLibrary": "ین کار کل صفحه را پاک میکند. آیا مطمئنید?",
    "removeItemsFromsLibrary": "حذف {{count}} آیتم(ها) از کتابخانه?",
-    "invalidEncryptionKey": "کلید رمزگذاری باید 22 کاراکتر باشد. همکاری زنده غیرفعال است."
+    "invalidEncryptionKey": "کلید رمزگذاری باید 22 کاراکتر باشد. همکاری زنده غیرفعال است.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "نوع فایل پشتیبانی نشده.",
@@ -1,7 +1,7 @@
 {
  "labels": {
    "paste": "Liitä",
-    "pasteAsPlaintext": "",
+    "pasteAsPlaintext": "Liitä pelkkänä tekstinä",
    "pasteCharts": "Liitä kaaviot",
    "selectAll": "Valitse kaikki",
    "multiSelect": "Lisää kohde valintaan",
@@ -72,7 +72,7 @@
    "layers": "Tasot",
    "actions": "Toiminnot",
    "language": "Kieli",
-    "liveCollaboration": "",
+    "liveCollaboration": "Live Yhteistyö...",
    "duplicateSelection": "Monista",
    "untitled": "Nimetön",
    "name": "Nimi",
@@ -116,14 +116,14 @@
      "label": "Linkki"
    },
    "lineEditor": {
-      "edit": "",
-      "exit": ""
+      "edit": "Muokkaa riviä",
+      "exit": "Poistu rivieditorista"
    },
    "elementLock": {
-      "lock": "",
-      "unlock": "",
-      "lockAll": "",
-      "unlockAll": ""
+      "lock": "Lukitse",
+      "unlock": "Poista lukitus",
+      "lockAll": "Lukitse kaikki",
+      "unlockAll": "Poista lukitus kaikista"
    },
    "statusPublished": "Julkaistu",
    "sidebarLock": "Pidä sivupalkki avoinna"
@@ -136,8 +136,8 @@
  "buttons": {
    "clearReset": "Tyhjennä piirtoalue",
    "exportJSON": "Vie tiedostoon",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Vie kuva...",
+    "export": "Tallenna nimellä...",
    "exportToPng": "Vie PNG-tiedostona",
    "exportToSvg": "Vie SVG-tiedostona",
    "copyToClipboard": "Kopioi leikepöydälle",
@@ -145,7 +145,7 @@
    "scale": "Koko",
    "save": "Tallenna nykyiseen tiedostoon",
    "saveAs": "Tallenna nimellä",
-    "load": "",
+    "load": "Avaa",
    "getShareableLink": "Hae jaettava linkki",
    "close": "Sulje",
    "selectLanguage": "Valitse kieli",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Teosta ei voitu tuoda annetusta URL-osoitteesta. Tallenne on vioittunut, tai osoitteessa ei ole Excalidraw JSON-dataa.",
    "resetLibrary": "Tämä tyhjentää kirjastosi. Jatketaanko?",
    "removeItemsFromsLibrary": "Poista {{count}} kohdetta kirjastosta?",
-    "invalidEncryptionKey": "Salausavaimen on oltava 22 merkkiä pitkä. Live-yhteistyö ei ole käytössä."
+    "invalidEncryptionKey": "Salausavaimen on oltava 22 merkkiä pitkä. Live-yhteistyö ei ole käytössä.",
+    "collabOfflineWarning": "Internet-yhteyttä ei ole saatavilla.\nMuutoksiasi ei tallenneta!"
  },
  "errors": {
    "unsupportedFileType": "Tiedostotyyppiä ei tueta.",
@@ -201,9 +202,9 @@
    "svgImageInsertError": "SVG- kuvaa ei voitu lisätä. Tiedoston SVG-sisältö näyttää virheelliseltä.",
    "invalidSVGString": "Virheellinen SVG.",
    "cannotResolveCollabServer": "Yhteyden muodostaminen collab-palvelimeen epäonnistui. Virkistä sivu ja yritä uudelleen.",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "Kokoelman lataaminen epäonnistui",
+    "collabSaveFailed": "Ei voitu tallentaan palvelimen tietokantaan. Jos ongelmia esiintyy, sinun kannatta tallentaa tallentaa tiedosto paikallisesti varmistaaksesi, että et menetä työtäsi.",
+    "collabSaveFailed_sizeExceeded": "Ei voitu tallentaan palvelimen tietokantaan. Jos ongelmia esiintyy, sinun kannatta tallentaa tallentaa tiedosto paikallisesti varmistaaksesi, että et menetä työtäsi."
  },
  "toolBar": {
    "selection": "Valinta",
@@ -217,10 +218,10 @@
    "text": "Teksti",
    "library": "Kirjasto",
    "lock": "Pidä valittu työkalu aktiivisena piirron jälkeen",
-    "penMode": "",
+    "penMode": "Kynätila - estä kosketus",
    "link": "Lisää/päivitä linkki valitulle muodolle",
    "eraser": "Poistotyökalu",
-    "hand": ""
+    "hand": "Käsi (panning-työkalu)"
  },
  "headings": {
    "canvasActions": "Piirtoalueen toiminnot",
@@ -228,7 +229,7 @@
    "shapes": "Muodot"
  },
  "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Piirtoalueen liikuttamiseksi pidä hiiren pyörää tai välilyöntiä pohjassa tai käytä käsityökalua",
    "linearElement": "Klikkaa piirtääksesi useampi piste, raahaa piirtääksesi yksittäinen viiva",
    "freeDraw": "Paina ja raahaa, päästä irti kun olet valmis",
    "text": "Vinkki: voit myös lisätä tekstiä kaksoisnapsauttamalla mihin tahansa valintatyökalulla",
@@ -239,7 +240,7 @@
    "resize": "Voit rajoittaa mittasuhteet pitämällä SHIFT-näppäintä alaspainettuna kun muutat kokoa, pidä ALT-näppäintä alaspainettuna muuttaaksesi kokoa keskipisteen suhteen",
    "resizeImage": "Voit muuttaa kokoa vapaasti pitämällä SHIFTiä pohjassa, pidä ALT pohjassa muuttaaksesi kokoa keskipisteen ympäri",
    "rotate": "Voit rajoittaa kulman pitämällä SHIFT pohjassa pyörittäessäsi",
-    "lineEditor_info": "",
+    "lineEditor_info": "Pidä CtrlOrCmd pohjassa ja kaksoisnapsauta tai paina CtrlOrCmd + Enter muokataksesi pisteitä",
    "lineEditor_pointSelected": "Poista piste(et) painamalla delete, monista painamalla CtrlOrCmd+D, tai liikuta raahaamalla",
    "lineEditor_nothingSelected": "Valitse muokattava piste (monivalinta pitämällä SHIFT pohjassa), tai paina Alt ja klikkaa lisätäksesi uusia pisteitä",
    "placeImage": "Klikkaa asettaaksesi kuvan, tai klikkaa ja raahaa asettaaksesi sen koon manuaalisesti",
@@ -247,7 +248,7 @@
    "bindTextToElement": "Lisää tekstiä painamalla enter",
    "deepBoxSelect": "Käytä syvävalintaa ja estä raahaus painamalla CtrlOrCmd",
    "eraserRevert": "Pidä Alt alaspainettuna, kumotaksesi merkittyjen elementtien poistamisen",
-    "firefox_clipboard_write": ""
+    "firefox_clipboard_write": "Tämä ominaisuus voidaan todennäköisesti ottaa käyttöön asettamalla \"dom.events.asyncClipboard.clipboardItem\" kohta \"true\":ksi. Vaihtaaksesi selaimen kohdan Firefoxissa, käy \"about:config\" sivulla."
  },
  "canvasError": {
    "cannotShowPreview": "Esikatselua ei voitu näyttää",
@@ -315,9 +316,9 @@
    "view": "Näkymä",
    "zoomToFit": "Näytä kaikki elementit",
    "zoomToSelection": "Näytä valinta",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "Lukitse / poista lukitus valinta",
+    "movePageUpDown": "Siirrä sivua ylös/alas",
+    "movePageLeftRight": "Siirrä sivua vasemmalle/oikealle"
  },
  "clearCanvasDialog": {
    "title": "Pyyhi piirtoalue"
@@ -399,7 +400,7 @@
    "fileSavedToFilename": "Tallennettiin kohteeseen {filename}",
    "canvas": "piirtoalue",
    "selection": "valinta",
-    "pasteAsSingleElement": ""
+    "pasteAsSingleElement": "Käytä {{shortcut}} liittääksesi yhtenä elementtinä,\ntai liittääksesi olemassa olevaan tekstieditoriin"
  },
  "colors": {
    "ffffff": "Valkoinen",
@@ -450,15 +451,15 @@
  },
  "welcomeScreen": {
    "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
+      "center_heading": "Kaikki tietosi on tallennettu paikallisesti selaimellesi.",
+      "center_heading_plus": "Haluatko sen sijaan mennä Excalidraw+:aan?",
+      "menuHint": "Vie, asetukset, kielet, ..."
    },
    "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
+      "menuHint": "Vie, asetukset ja lisää...",
+      "center_heading": "Kaaviot. Tehty. Yksinkertaiseksi.",
+      "toolbarHint": "Valitse työkalu ja aloita piirtäminen!",
+      "helpHint": "Pikanäppäimet & ohje"
    }
  }
 }
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Impossible d'importer la scène depuis l'URL fournie. Elle est soit incorrecte, soit ne contient pas de données JSON Excalidraw valides.",
    "resetLibrary": "Cela va effacer votre bibliothèque. Êtes-vous sûr·e ?",
    "removeItemsFromsLibrary": "Supprimer {{count}} élément(s) de la bibliothèque ?",
-    "invalidEncryptionKey": "La clé de chiffrement doit comporter 22 caractères. La collaboration en direct est désactivée."
+    "invalidEncryptionKey": "La clé de chiffrement doit comporter 22 caractères. La collaboration en direct est désactivée.",
+    "collabOfflineWarning": "Aucune connexion internet disponible.\nVos modifications ne seront pas enregistrées !"
  },
  "errors": {
    "unsupportedFileType": "Type de fichier non supporté.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Non se puido importar a escena dende a URL proporcionada. Ou ben está malformada ou non contén un JSON con información válida para Excalidraw.",
    "resetLibrary": "Isto limpará a súa biblioteca. Está seguro?",
    "removeItemsFromsLibrary": "Eliminar {{count}} elemento(s) da biblioteca?",
-    "invalidEncryptionKey": "A clave de cifrado debe ter 22 caracteres. A colaboración en directo está desactivada."
+    "invalidEncryptionKey": "A clave de cifrado debe ter 22 caracteres. A colaboración en directo está desactivada.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Tipo de ficheiro non soportado.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "ייבוא המידע מן סצינה מכתובת האינטרנט נכשלה. המידע בנוי באופן משובש או שהוא אינו קובץ JSON תקין של Excalidraw.",
    "resetLibrary": "פעולה זו תנקה את כל הלוח. אתה בטוח?",
    "removeItemsFromsLibrary": "מחיקת {{count}} פריטים(ים) מתוך הספריה?",
-    "invalidEncryptionKey": "מפתח ההצפנה חייב להיות בן 22 תוים. השיתוף החי מבוטל."
+    "invalidEncryptionKey": "מפתח ההצפנה חייב להיות בן 22 תוים. השיתוף החי מבוטל.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "סוג הקובץ אינו נתמך.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "दिये गये युआरेल से दृश्य आयात नहीं किया जा सका. यह या तो अनुचित है, या इसमें उचित Excalidraw JSON डेटा नहीं है।",
    "resetLibrary": "यह पूरा संग्रह रिक्त करेगा. क्या आपको यक़ीन हैं?",
    "removeItemsFromsLibrary": "{{count}} वस्तु(यें) संग्रह से हटायें?",
-    "invalidEncryptionKey": "कूटलेखन कुंजी 22 अक्षरों की होनी चाहिये, इसलिये जीवंत सहयोग अक्षम हैं"
+    "invalidEncryptionKey": "कूटलेखन कुंजी 22 अक्षरों की होनी चाहिये, इसलिये जीवंत सहयोग अक्षम हैं",
+    "collabOfflineWarning": "कोई इंटरनेट कनेक्शन उपलब्ध नहीं है।\nआपके बदलाव सहेजे नहीं जाएंगे!"
  },
  "errors": {
    "unsupportedFileType": "असमर्थित फाइल प्रकार",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Nem sikerült importálni a jelenetet a megadott URL-ről. Rossz formátumú, vagy nem tartalmaz érvényes Excalidraw JSON-adatokat.",
    "resetLibrary": "Ezzel törlöd a könyvtárát. biztos vagy ebben?",
    "removeItemsFromsLibrary": "{{count}} elemet törölsz a könyvtárból?",
-    "invalidEncryptionKey": "A titkosítási kulcsnak 22 karakterből kell állnia. Az élő együttműködés le van tiltva."
+    "invalidEncryptionKey": "A titkosítási kulcsnak 22 karakterből kell állnia. Az élő együttműködés le van tiltva.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Nem támogatott fájltípus.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Tidak dapat impor pemandangan dari URL. Kemungkinan URL itu rusak atau tidak berisi data JSON Excalidraw yang valid.",
    "resetLibrary": "Ini akan menghapus pustaka Anda. Anda yakin?",
    "removeItemsFromsLibrary": "Hapus {{count}} item dari pustaka?",
-    "invalidEncryptionKey": "Sandi enkripsi harus 22 karakter. Kolaborasi langsung dinonaktifkan."
+    "invalidEncryptionKey": "Sandi enkripsi harus 22 karakter. Kolaborasi langsung dinonaktifkan.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Tipe file tidak didukung.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Impossibile importare la scena dall'URL fornito. Potrebbe essere malformato o non contenere dati JSON Excalidraw validi.",
    "resetLibrary": "Questa azione cancellerà l'intera libreria. Sei sicuro?",
    "removeItemsFromsLibrary": "Eliminare {{count}} elementi dalla libreria?",
-    "invalidEncryptionKey": "La chiave di cifratura deve essere composta da 22 caratteri. La collaborazione live è disabilitata."
+    "invalidEncryptionKey": "La chiave di cifratura deve essere composta da 22 caratteri. La collaborazione live è disabilitata.",
+    "collabOfflineWarning": "Nessuna connessione internet disponibile.\nLe tue modifiche non verranno salvate!"
  },
  "errors": {
    "unsupportedFileType": "Tipo di file non supportato.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "指定された URL からシーンをインポートできませんでした。不正な形式であるか、有効な Excalidraw JSON データが含まれていません。",
    "resetLibrary": "ライブラリを消去します。本当によろしいですか？",
    "removeItemsFromsLibrary": "{{count}} 個のアイテムをライブラリから削除しますか？",
-    "invalidEncryptionKey": "暗号化キーは22文字でなければなりません。ライブコラボレーションは無効化されています。"
+    "invalidEncryptionKey": "暗号化キーは22文字でなければなりません。ライブコラボレーションは無効化されています。",
+    "collabOfflineWarning": "インターネットに接続されていません。\n変更は保存されません！"
  },
  "errors": {
    "unsupportedFileType": "サポートされていないファイル形式です。",
@@ -220,7 +221,7 @@
    "penMode": "ペンモード - タッチ防止",
    "link": "選択した図形のリンクを追加/更新",
    "eraser": "消しゴム",
-    "hand": ""
+    "hand": "手 (パンニングツール)"
  },
  "headings": {
    "canvasActions": "キャンバス操作",
@@ -228,7 +229,7 @@
    "shapes": "図形"
  },
  "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "キャンバスを移動するには、マウスホイールまたはスペースバーを押しながらドラッグするか、手ツールを使用します",
    "linearElement": "クリックすると複数の頂点からなる曲線を開始、ドラッグすると直線",
    "freeDraw": "クリックしてドラッグします。離すと終了します",
    "text": "ヒント: 選択ツールを使用して任意の場所をダブルクリックしてテキストを追加することもできます",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Ulamek taktert n usayes seg URL i d-ittunefken. Ahat mačči d tameɣtut neɣ ur tegbir ara isefka JSON n Excalidraw.",
    "resetLibrary": "Ayagi ad isfeḍ tamkarḍit-inek•m. Tetḥeqqeḍ?",
    "removeItemsFromsLibrary": "Ad tekkseḍ {{count}} n uferdis (en) si temkarḍit?",
-    "invalidEncryptionKey": "Tasarut n uwgelhen isefk ad tesɛu 22 n yiekkilen. Amɛiwen srid yensa."
+    "invalidEncryptionKey": "Tasarut n uwgelhen isefk ad tesɛu 22 n yiekkilen. Amɛiwen srid yensa.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Anaw n ufaylu ur yettwasefrak ara.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "제공된 URL에서 화면을 가져오는데 실패했습니다. 주소가 잘못되거나, 유효한 Excalidraw JSON 데이터를 포함하고 있지 않은 것일 수 있습니다.",
    "resetLibrary": "당신의 라이브러리를 초기화 합니다. 계속하시겠습니까?",
    "removeItemsFromsLibrary": "{{count}}개의 아이템을 라이브러리에서 삭제하시겠습니까?",
-    "invalidEncryptionKey": "암호화 키는 반드시 22글자여야 합니다. 실시간 협업이 비활성화됩니다."
+    "invalidEncryptionKey": "암호화 키는 반드시 22글자여야 합니다. 실시간 협업이 비활성화됩니다.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "지원하지 않는 파일 형식 입니다.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "ناتوانێت دیمەنەکە هاوردە بکات لە URL ی دابینکراو. یان نادروستە، یان داتای \"ئێکسکالیدراو\" JSON ی دروستی تێدا نییە.",
    "resetLibrary": "ئەمە کتێبخانەکەت خاوێن دەکاتەوە. ئایا دڵنیایت?",
    "removeItemsFromsLibrary": "سڕینەوەی {{count}} ئایتم(ەکان) لە کتێبخانە؟",
-    "invalidEncryptionKey": "کلیلی رەمزاندن دەبێت لە 22 پیت بێت. هاوکاری ڕاستەوخۆ لە کارخراوە."
+    "invalidEncryptionKey": "کلیلی رەمزاندن دەبێت لە 22 پیت بێت. هاوکاری ڕاستەوخۆ لە کارخراوە.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "جۆری فایلی پشتگیری نەکراو.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Nepavyko suimportuoti scenos iš pateiktos nuorodos (URL). Ji arba blogai suformatuota, arba savyje neturi teisingų Excalidraw JSON duomenų.",
    "resetLibrary": "Tai išvalys tavo biblioteką. Ar tikrai to nori?",
    "removeItemsFromsLibrary": "Ištrinti {{count}} elementą/-us iš bibliotekos?",
-    "invalidEncryptionKey": "Šifravimo raktas turi būti iš 22 simbolių. Redagavimas gyvai yra išjungtas."
+    "invalidEncryptionKey": "Šifravimo raktas turi būti iš 22 simbolių. Redagavimas gyvai yra išjungtas.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Nepalaikomas failo tipas.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Nevarēja importēt ainu no norādītā URL. Vai nu tas ir nederīgs, vai nesatur derīgus Excalidraw JSON datus.",
    "resetLibrary": "Šī funkcija iztukšos bibliotēku. Vai turpināt?",
    "removeItemsFromsLibrary": "Vai izņemt {{count}} vienumu(s) no bibliotēkas?",
-    "invalidEncryptionKey": "Šifrēšanas atslēgai jābūt 22 simbolus garai. Tiešsaistes sadarbība ir izslēgta."
+    "invalidEncryptionKey": "Šifrēšanas atslēgai jābūt 22 simbolus garai. Tiešsaistes sadarbība ir izslēgta.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Neatbalstīts datnes veids.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "दिलेल्या यू-आर-एल पासून दृश्य आणू शकलो नाही. तो एकतर बरोबार नाही आहे किंवा त्यात वैध एक्सकेलीड्रॉ जेसन डेटा नाही.",
    "resetLibrary": "पटल स्वच्छ होणार, तुम्हाला खात्री आहे का?",
    "removeItemsFromsLibrary": "संग्रहातून {{count}} तत्व (एक किव्हा अनेक) काढू?",
-    "invalidEncryptionKey": "कूटबद्धन कुंजी 22 अक्षरांची असणे आवश्यक आहे. थेट सहयोग अक्षम केले आहे."
+    "invalidEncryptionKey": "कूटबद्धन कुंजी 22 अक्षरांची असणे आवश्यक आहे. थेट सहयोग अक्षम केले आहे.",
+    "collabOfflineWarning": "इंटरनेट कनेक्शन उपलब्ध नाही.\nतुमचे बदल जतन केले जाणार नाहीत!"
  },
  "errors": {
    "unsupportedFileType": "असमर्थित फाइल प्रकार.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidEncryptionKey": "",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Kunne ikke importere scene fra den oppgitte URL-en. Den er enten ødelagt, eller inneholder ikke gyldig Excalidraw JSON-data.",
    "resetLibrary": "Dette vil tømme biblioteket ditt. Er du sikker?",
    "removeItemsFromsLibrary": "Slett {{count}} element(er) fra biblioteket?",
-    "invalidEncryptionKey": "Krypteringsnøkkel må ha 22 tegn. Live-samarbeid er deaktivert."
+    "invalidEncryptionKey": "Krypteringsnøkkel må ha 22 tegn. Live-samarbeid er deaktivert.",
+    "collabOfflineWarning": "Ingen Internett-tilkobling tilgjengelig.\nEndringer dine vil ikke bli lagret!"
  },
  "errors": {
    "unsupportedFileType": "Filtypen støttes ikke.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Kan scène niet importeren vanuit de opgegeven URL. Het is onjuist of bevat geen geldige Excalidraw JSON-gegevens.",
    "resetLibrary": "Dit zal je bibliotheek wissen. Weet je het zeker?",
    "removeItemsFromsLibrary": "Verwijder {{count}} item(s) uit bibliotheek?",
-    "invalidEncryptionKey": "Encryptiesleutel moet 22 tekens zijn. Live samenwerking is uitgeschakeld."
+    "invalidEncryptionKey": "Encryptiesleutel moet 22 tekens zijn. Live samenwerking is uitgeschakeld.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Niet-ondersteund bestandstype.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Kunne ikkje hente noko scene frå den URL-en. Ho er anten øydelagd eller inneheld ikkje gyldig Excalidraw JSON-data.",
    "resetLibrary": "Dette vil fjerne alt innhald frå biblioteket. Er du sikker?",
    "removeItemsFromsLibrary": "Slette {{count}} element frå biblioteket?",
-    "invalidEncryptionKey": "Krypteringsnøkkelen må ha 22 teikn. Sanntidssamarbeid er deaktivert."
+    "invalidEncryptionKey": "Krypteringsnøkkelen må ha 22 teikn. Sanntidssamarbeid er deaktivert.",
+    "collabOfflineWarning": ""
  },
  "errors": {
    "unsupportedFileType": "Filtypen er ikkje støtta.",
@@ -192,7 +192,8 @@
    "invalidSceneUrl": "Importacion impossibla de la scèna a partir de l’URL provesida. Es siá mal formatada o siá conten pas cap de donada JSON Excalidraw valida.",
    "resetLibrary": "Aquò suprimirà vòstra bibliotèca. O volètz vertadièrament ?",
    "removeItemsFromsLibrary": "Suprimir {{count}} element(s) de la bibliotèca ?",
-    "invalidEncryptionKey": "La clau de chiframent deu conténer 22 caractèrs. La collaboracion en dirèct es desactivada."
+    "invalidEncryptionKey": "La clau de chiframent deu conténer 22 caractèrs. La collaboracion en dirèct es desactivada.",
+    "collabOfflineWarning": "Cap de connexion pas disponibla.\nVòstras modificacions seràn pas salvadas !"
  },
  "errors": {
    "unsupportedFileType": "Tipe de fichièr pas pres en carga.",
@@ -220,7 +221,7 @@
    "penMode": "Mòde estilo - empachar lo contact",
    "link": "Apondre/Actualizar lo ligam per una fòrma seleccionada",
    "eraser": "Goma",
-    "hand": ""
+    "hand": "Man (aisina de desplaçament de la vista)"
  },
  "headings": {
    "canvasActions": "Accions del canabàs",
@@ -239,7 +240,7 @@
    "resize": "Podètz servar las proporcions en mantenent la tòca MAJ pendent lo redimensionament,\nmantenètz la tòca ALT per redimensionar a partir del centre",
    "resizeImage": "Podètz retalhar liurament en quichant CTRL,\nquichatz ALT per retalhar a partir del centre",
    "rotate": "Podètz restrénger los angles en mantenent MAJ pendent la rotacion",
-    "lineEditor_info": "",
+    "lineEditor_info": "Tenètz quichat Ctrl o Cmd e doble clic o quichatz Ctrl o Cmd + Entrada per modificar los ponches",
    "lineEditor_pointSelected": "Quichar Suprimir per tirar lo(s) punt(s),\nCtrlOCmd+D per duplicar, o lisatz per desplaçar",
    "lineEditor_nothingSelected": "Seleccionar un punt d’editar (manténer Maj. per ne seleccionar mantun),\no manténer Alt e clicar per n’apondre de novèls",
    "placeImage": "Clicatz per plaçar l’imatge, o clicatz e lisatz per definir sa talha manualament",
@@ -316,8 +317,8 @@
    "zoomToFit": "Zoomar per veire totes los elements",
    "zoomToSelection": "Zoomar la seleccion",
    "toggleElementLock": "Verrolhar/Desverrolhar la seleccion",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "movePageUpDown": "Desplaçar la pagina ennaut/enbàs",
+    "movePageLeftRight": "Desplaçar la pagina a esquèrra/drecha"
  },
  "clearCanvasDialog": {
    "title": "Escafar canabàs"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dwelle	0f32b7c1ef	wip: adaptive roughness	2023-04-09 19:52:18 +02:00
dwelle	b885d87bc5	feat: remove notch for non-0 roughness ellipse	2023-04-09 18:52:36 +02:00
Manuel Brandstetter	c170403b13	docs: fix closing tag in readme (#6424 Update README.md	2023-04-07 17:43:50 +02:00
zsviczian	705ac9c1ab	fix: element vanishes when zoomed in (#6417 ) Co-authored-by: David Luzar <luzar.david@gmail.com>	2023-04-07 15:30:44 +00:00
Chinmay Mhatre	68692b9d4c	feat: add container to multiple text elements (#6428 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-04-07 13:50:36 +00:00
Aakansha Doshi	d61b3cf83d	fix: don't jump text to end when out of viewport in safari (#6416 )	2023-04-05 12:17:18 +05:30
Coyote	d2b8f4d2f8	fix: getDefaultLineHeight should return default font family line height for unknown font (#6399 ) * fix(getDefaultLineHeight): make getDefaultLineHeight always has a default value * test: add getDefaultLineHeight test case when using unknown font * test: add getDefaultLineHeight test case when using unknown font * Revert "test: add getDefaultLineHeight test case when using unknown font" This reverts commit d41da5493b6edab9e599a13a23c387d38345bf03. * test: add getDefaultLineHeight test case when using unknown font * newline * newline * tweaks * trigger action * trigger action * fix --------- Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>	2023-03-30 00:46:23 +05:30
Aakansha Doshi	f8e65bb77e	fix: Revert use `ideographic` textBaseline to improve layout shift when editing text" (#6400 ) Revert "fix: use `ideographic` textBaseline to improve layout shift when editing text (#6384)" This reverts commit `9e52c30ce8`.	2023-03-29 18:53:03 +05:30
Milos Vetesnik	3030e96d62	feat: starting migration from GA to Matomo for better privacy (#6398 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-03-29 11:13:06 +02:00
dongfang	44453b725d	fix: call stack size exceeded when paste large text (#6373 ) (#6396 ) * fix: call stack size exceeded when paste large text (#6373) * fix: add test case for paste multi-line text * fix * tweak * add missing assertion * add comments * lint --------- Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>	2023-03-29 13:45:30 +05:30
Type Horror	25bb6738ea	feat: Add fitToContent and animate to scrollToContent (#6319 ) Co-authored-by: Brice Leroy <brice@brigalabs.com> Co-authored-by: dwelle <luzar.david@gmail.com>	2023-03-25 23:26:58 +01:00
David Luzar	9e52c30ce8	fix: use `ideographic` textBaseline to improve layout shift when editing text (#6384 )	2023-03-22 18:33:37 +01:00
Aakansha Doshi	83383977f5	feat: add line height attribute to text element (#6360 ) * feat: add line height attribute to text element * lint * update line height when redrawing text bounding box * fix tests * retain line height when pasting styles * fix test * create a util for calculating ling height using old algo * update line height when resizing multiple text elements * make line height backward compatible * udpate line height for older element when font size updated * remove logs * Add specs * lint * review fixes * simplify by changing `lineHeight` from px to unitless * make param non-optional * update comment * fix: jumping text due to font size being calculated incorrectly * update line height when font family is updated * lint * Add spec * more specs * rename to getDefaultLineHeight * fix getting lineHeight for potentially undefined fontFamily * reduce duplication * fix fallback * refactor and comment tweaks * fix --------- Co-authored-by: dwelle <luzar.david@gmail.com>	2023-03-22 11:32:38 +05:30
David Luzar	ac4c8b3ca7	fix: chrome crashing when embedding scene on chrome arm (#6383 )	2023-03-21 18:48:49 +01:00
zsviczian	5c8941467d	fix: division by zero in findFocusPointForEllipse leads to infinite loop in wrapText freezing Excalidraw (#6377 ) * Update collision.ts * Update textElement.ts * Update textElement.ts * tweak * fix * remove unnecessary `Math.sign` * change check and add doc * Add a case for negative max width and specs * fix --------- Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>	2023-03-20 17:50:09 +05:30
Samyat Gautam	0726911fa6	fix: containerizing text incorrectly updates arrow bindings (#6369 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-03-18 15:00:28 +00:00
dependabot[bot]	7e330c8ee1	build(deps-dev): bump webpack from 5.73.0 to 5.76.0 in /src/packages/utils (#6354 ) build(deps-dev): bump webpack in /src/packages/utils Bumps [webpack](https://github.com/webpack/webpack) from 5.73.0 to 5.76.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.73.0...v5.76.0) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-15 11:04:13 +05:30
dependabot[bot]	7d21747644	build(deps-dev): bump webpack from 5.73.0 to 5.76.0 in /src/packages/excalidraw (#6355 ) build(deps-dev): bump webpack in /src/packages/excalidraw Bumps [webpack](https://github.com/webpack/webpack) from 5.73.0 to 5.76.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.73.0...v5.76.0) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-15 11:04:01 +05:30
dependabot[bot]	e718136aea	build(deps): bump webpack from 5.74.0 to 5.76.1 in /dev-docs (#6356 ) Bumps [webpack](https://github.com/webpack/webpack) from 5.74.0 to 5.76.1. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.74.0...v5.76.1) --- updated-dependencies: - dependency-name: webpack dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-15 11:03:40 +05:30
Salah Eddine Daci	fe83e2922d	build: move TS and types to devDependencies (#6346 )	2023-03-14 12:06:57 +00:00
David Luzar	20edddcd4e	fix: ensure export preview is centered (#6337 )	2023-03-14 13:03:55 +01:00
Aakansha Doshi	f6e8be399e	fix: hide text align for labelled arrows (#6339 ) * fix: hide text align for labelled arrows * lintttt * since we fetch seledcted Elements including the bound text hence this block can be removed * fix	2023-03-14 17:21:46 +05:30
Aakansha Doshi	ab49cad6b1	perf: break early if the line width <= max width of the container (#6347 ) * fix: break early if the line width <= max width of the container * Remove dead code * remove dead code * lint * remove	2023-03-14 17:18:16 +05:30
Aakansha Doshi	6aeb18b784	fix: refresh dimensions when elements loaded from shareable link and blob (#6333 ) * fix: refresh dimensions when elements loaded from shareable link * refresh text dimensions when loading from file * remove log	2023-03-14 17:08:23 +05:30
Aakansha Doshi	023313e92f	fix: show error message when measureText API breaks in brave (#6336 ) * fix: show error message when measureText API breaks in brave * Add docs * Add assets * tweak message * fix * tweak message * add translations * lint * fix * fix * lint * lint * lint please work now * tweak doc * fix * split error component to new file * add specs * tweaks Co-authored-by: David Luzar <luzar.david@gmail.com> * wrap in div with a width of 30rem * fix spec * fix * Fix typo --------- Co-authored-by: David Luzar <luzar.david@gmail.com> Co-authored-by: Daniel J. Geiger <1852529+DanielJGeiger@users.noreply.github.com>	2023-03-13 19:46:09 +05:30
David Luzar	1eee488dab	feat: add thai lang support (#6314 )	2023-03-11 22:15:52 +01:00
Aakansha Doshi	dd4c333925	fix: add an offset of 0.5px for text editor in containers (#6328 ) * fix: add an offset of 0.5px for text editor in containers * fix specs and lint	2023-03-09 13:07:36 +05:30
David Luzar	8542c95a7a	fix: move utility types out of `.d.ts` file to fix exported declaration files (#6315 )	2023-03-04 19:21:57 +01:00
David Luzar	cef6094d4c	fix: more jotai scopes missing (#6313 )	2023-03-03 16:19:02 +01:00
dependabot[bot]	3322f0fa6f	build(deps): bump @sideway/formula from 3.0.0 to 3.0.1 in /dev-docs (#6309 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-03 14:45:29 +01:00
Omar Brikaa	34a7d48b95	fix: provide HelpButton title prop (#6209 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-03-03 12:50:18 +00:00
Aakansha Doshi	5c0b15ce2b	fix: respect text align when wrapping in a container (#6310 ) * fix: respect text align when wrapping in a container * fix	2023-03-03 18:07:26 +05:30
Aakansha Doshi	9f9666110e	chore: Add debug flag to enable text container bounding box (#6296 ) * debug: Add debug flag to enable text container bounding box * newline * fix	2023-03-03 18:01:55 +05:30
dependabot[bot]	05ffce62ef	build(deps): bump dns-packet from 5.3.1 to 5.4.0 in /src/packages/excalidraw (#6305 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-03 13:20:53 +01:00
Aakansha Doshi	0f06fa3851	feat: create bound container from text (#6301 ) * feat: create container from text * fix lint and spec * fix * round off dims * ceil * review fixes * fix * Add specs * fix * fix z-index and type * consider group * consider linear bindings * lint	2023-03-03 17:40:42 +05:30
Aakansha Doshi	1ce933d2f5	fix: compute bounding box correctly for text element when multiple element resizing (#6307 )	2023-03-03 17:34:11 +05:30
David Luzar	15655acb5a	fix: use jotai scope for editor-specific atoms (#6308 )	2023-03-03 11:58:36 +00:00
dependabot[bot]	d5b264c2d2	build(deps): bump http-cache-semantics from 4.1.0 to 4.1.1 in /dev-docs (#6192 ) Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1. - [Release notes](https://github.com/kornelski/http-cache-semantics/releases) - [Commits](https://github.com/kornelski/http-cache-semantics/compare/v4.1.0...v4.1.1) --- updated-dependencies: - dependency-name: http-cache-semantics dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-03-01 14:51:36 +05:30
Aakansha Doshi	bd4424bbe3	fix: consider arrow for bound text element (#6297 ) * fix: consider arrow for bound text element * add spec	2023-02-28 19:53:30 +05:30
Aakansha Doshi	38fc51b4e3	fix: text never goes beyond max width for unbound text elements (#6288 )	2023-02-27 16:54:29 +05:30
David Luzar	e1dc748aef	fix: svg text baseline (#6285 * fix: svg text baseline * fix for multiline	2023-02-26 12:51:44 +01:00
Aakansha Doshi	0e95e2b386	fix: compute container height from bound text correctly (#6273 ) * fix: compute container height from bound text correctly * fix specs * Add tests	2023-02-23 17:39:02 +05:30
Aakansha Doshi	9659254fd6	feat: improve text measurements in bound containers (#6187 ) * feat: move to canvas measureText * calcualte height with better heuristic * improve heuristic more * remove vertical offset as its not needed * lint * calculate width of individual char and ceil to calculate width and remove adjustment factor * push the word if equal to max width * update height when text overflows for vertical alignment top/bottom * remove the hack of updating height when line mismatch as its not needed * remove scroll height and calculate the height instead * remove unused code * fix * remove * use math.ceil for whole width instead of individual chars * fix tests * fix * fix * redraw text bounding box instead when font loaded to fix alignment as well * fix * fix * fix * Add a 0.05px extra only for firefox * Add spec * stop taking ceil and increase firefox editor width by 0.05px * Ad 0.05px in safari too * lint * lint * remove baseline from measureFontSizeFromWH * don't redraw on font load * lint * refactor name and signature	2023-02-23 16:33:10 +05:30
Tengku Farhan	39b96cb011	fix: fit mobile toolbar and make scrollable (#6270 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-02-23 11:24:04 +01:00
David Luzar	04a8c22f39	fix: rerender i18n in host components on lang change (#6224 )	2023-02-22 14:01:23 +00:00
Excalidraw Bot	e4506be3e8	chore: Update translations from Crowdin (#6191 )	2023-02-22 11:23:10 +00:00
Hikaru Yoshino	1e816e87bf	fix: indenting via `tab` clashing with IME compositor (#6258 )	2023-02-22 12:10:29 +01:00
Aakansha Doshi	5368ddef74	fix: improve text wrapping inside rhombus and more fixes (#6265 ) * fix: improve text wrapping inside rhombus * Add comments * specs * fix: shift resize and multiple element regression for ellipse and rhombus * use container width for scaling font size * fix * fix multiple resize * lint * redraw on submit * redraw only newly pasted elements * no padding when center * fix tests * fix * dont add padding in rhombus when aligning * refactor * fix * move getMaxContainerHeight and getMaxContainerWidth to textElement.ts * Add specs	2023-02-22 16:28:12 +05:30
Aakansha Doshi	88ff32e9b3	fix: improve text wrapping in ellipse and alignment (#6172 ) * fix: improve text wrapping in ellipse * compute height when font properties updated * fix alignment * fix alignment when resizing * fix * ad padding * always compute height when redrawing bounding box and refactor * lint * fix specs * fix * redraw text bounding box when pasted or refreshed * fix * Add specs * fix * restore on font load * add comments	2023-02-21 12:36:43 +05:30
Jan Klass	0fcbddda8e	docs: Fix outdated link in README.md (#6263 )	2023-02-20 09:44:25 +00:00