fix hitbox

support rotation
support ellipse
2025-07-25 13:58:22 +08:00 · 2023-02-16 13:29:54 +05:30 · 2023-02-15 17:36:46 +05:30 · 2023-02-15 15:20:12 +05:30 · 2023-02-15 13:32:47 +05:30
113 changed files with 962 additions and 1623 deletions
--- a/.env.development
+++ b/.env.development
@ -22,8 +22,3 @@ REACT_APP_DEV_ENABLE_SW=
 REACT_APP_DEV_DISABLE_LIVE_RELOAD=

 FAST_REFRESH=false
-
-#Debug flags
-
-# To enable bounding box for text containers
-REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=
--- a/README.md
+++ b/README.md
@ -1,121 +1,29 @@
-<a href="https://excalidraw.com/" target="_blank" rel="noopener">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2FExcalidraw_Github_cover_dark.png" />
-    <img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2FExcalidraw_Github_cover.png" />
-  </picture>
-</a>
-
-<h4 align="center">
-  <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://blog.excalidraw.com">Blog</a> |
-  <a href="https://docs.excalidraw.com">Documentation</a> |
-  <a href="https://plus.excalidraw.com">Excalidraw+</a>
-</h4>
-
-<div align="center">
-  <h2>
-    An open source virtual hand-drawn style whiteboard. </br>
-    Collaborative and end-to-end encrypted. </br>
-  <br />
-  </h3>
-</div>
-
-<br />
-<p align="center">
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
-    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+<div align="center" style="display:flex;flex-direction:column;"}>
+  <a href="https://excalidraw.com">
+    <img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams."/>
  </a>
-  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
-    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
-  </a>
-  <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
-  </a>
-  <a href="https://twitter.com/excalidraw">
-    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
-  </a>
-</p>
-
-<div align="center">
-  <figure>
-    <a href="https://excalidraw.com" target="_blank" rel="noopener">
-      <img src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2Fproduct_showcase.png" alt="Product showcase" />
+  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br/>Collaborative and end-to-end encrypted.</h3>
+  <p>
+    <a href="https://twitter.com/excalidraw">
+      <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
    </a>
-    <figcaption>
-      <p align="center">
-        Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.
-      </p>
-    </figcaption>
-  </figure>
+    <a href="https://discord.gg/UexuTaE">
+      <img alt="Chat with us on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
+    </a>
+  </p>
 </div>

-## Features
+## Try now

-The Excalidraw editor (npm package) supports:
+Visit [excalidraw.com](https://excalidraw.com) to start sketching.

- 💯&nbsp;Free & open-source.
- 🎨&nbsp;Infinite, canvas-based whiteboard.
- ✍️&nbsp;Hand-drawn like style.
- 🌓&nbsp;Dark mode.
- 🏗️&nbsp;Customizable.
- 📷&nbsp;Image support.
- 😀&nbsp;Shape libraries support.
- 👅&nbsp;Localization (i18n) support.
- 🖼️&nbsp;Export to PNG, SVG & clipboard.
- 💾&nbsp;Open format - export drawings as an `.excalidraw` json file.
- ⚒️&nbsp;Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
- ➡️&nbsp;Arrow-binding & labeled arrows.
- 🔙&nbsp;Undo / Redo.
- 🔍&nbsp;Zoom and panning support.
+## Community

-## Excalidraw.com
+For latest updates, follow us on [twitter](https://twitter.com/excalidraw). If you need help or want to chat, join us on [Discord](https://discord.gg/UexuTaE). For releases and deep dives, check out our [blog](https://blog.excalidraw.com). Report bugs on [GitHub](https://github.com/excalidraw/excalidraw/issues).

-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:
+## Supporting Excalidraw

- 📡&nbsp;PWA support (works offline).
- 🤼&nbsp;Real-time collaboration.
- 🔒&nbsp;End-to-end encryption.
- 💾&nbsp;Local-first support (autosaves to the browser).
- 🔗&nbsp;Shareable links (export to a readonly link you can share with others).
-
-We'll be adding these features as drop-in plugins for the npm package in the future.
-
-## Quick start
-
-Install the [Excalidraw npm package](https://www.npmjs.com/package/@excalidraw/excalidraw):
-
-```
-npm install react react-dom @excalidraw/excalidraw
-```
-
-or via yarn
-
-```
-yarn add react react-dom @excalidraw/excalidraw
-```
-
-Don't forget to check out our [Documentation](https://docs.excalidraw.com)!
-
-## Contributing
-
- Missing something or found a bug? [Report here](https://github.com/excalidraw/excalidraw/issues).
- Want to contribute? Check out our [contribution guide](https://docs.excalidraw.com/docs/introduction/contributing) or let us know on [Discord](https://discord.gg/UexuTaE).
- Want to help with translations? See the [translation guide](https://docs.excalidraw.com/docs/introduction/contributing#translating).
-
-## Integrations
-
- [VScode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor)
- [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw)
-
-## Who's integrating Excalidraw
-
-[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) • and many others
-
-## Sponsors & support
-
-If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw) or use [Excalidraw+](https://plus.excalidraw.com/).
-
-## Thank you for supporting Excalidraw
+If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).

 [<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/10/website)

@ -124,3 +32,13 @@ If you like the project, you can become a sponsor at [Open Collective](https://o
 Last but not least, we're thankful to these companies for offering their services for free:

 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.com)
+
+## Developers
+
+You can integrate Excalidraw into your app by installing our [npm component](https://npmjs.com/package/@excalidraw/excalidraw).
+
+Visit our documentation on [https://docs.excalidraw.com](https://docs.excalidraw.com).
+
+## Who's integrating Excalidraw
+
+[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/)
--- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
@ -53,7 +53,7 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
 **_Signature_**

 <pre>
-restore(
+restoreElements(
  data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
  localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a>
--- a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
@ -34,16 +34,14 @@ function App() {

 Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.

-The following worfklow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
-
 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
 export default function App() {
-  const [Excalidraw, setExcalidraw] = useState(null);
+  const [Comp, setComp] = useState(null);
  useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) => setExcalidraw(comp.Excalidraw));
+    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
  }, []);
-  return <>{Excalidraw && <Excalidraw />}</>;
+  return <>{Comp && <Comp />}</>;
 }
 ```

--- a/dev-docs/docs/introduction/contributing.mdx
+++ b/dev-docs/docs/introduction/contributing.mdx
@ -20,7 +20,7 @@ Pull requests are welcome. For major changes, please [open an issue](https://git

 ### Option 2 - CodeSandbox

-1. Go to https://codesandbox.io/p/github/excalidraw/excalidraw
+1. Go to https://codesandbox.io/s/github/excalidraw/excalidraw
 1. Connect your GitHub account
 1. Go to Git tab on left side
 1. Tap on `Fork Sandbox`
--- a/dev-docs/yarn.lock
+++ b/dev-docs/yarn.lock
@ -1785,9 +1785,9 @@
    "@hapi/hoek" "^9.0.0"

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

 "@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.1"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
-  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
+  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==

 http-deceiver@^1.2.7:
  version "1.2.7"
--- a/src/actions/actionBoundText.tsx
+++ b/src/actions/actionBoundText.tsx
@ -1,8 +1,7 @@
-import { BOUND_TEXT_PADDING, ROUNDNESS, VERTICAL_ALIGN } from "../constants";
-import { getNonDeletedElements, isTextElement, newElement } from "../element";
+import { VERTICAL_ALIGN } from "../constants";
+import { getNonDeletedElements, isTextElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import {
-  computeContainerDimensionForBoundText,
  getBoundTextElement,
  measureText,
  redrawTextBoundingBox,
@ -14,11 +13,8 @@ import {
 import {
  hasBoundTextElement,
  isTextBindableContainer,
-  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
 import {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
  ExcalidrawTextContainer,
  ExcalidrawTextElement,
 } from "../element/types";
@ -42,7 +38,7 @@ export const actionUnbindText = register({
    selectedElements.forEach((element) => {
      const boundTextElement = getBoundTextElement(element);
      if (boundTextElement) {
-        const { width, height } = measureText(
+        const { width, height, baseline } = measureText(
          boundTextElement.originalText,
          getFontString(boundTextElement),
        );
@ -55,6 +51,7 @@ export const actionUnbindText = register({
          containerId: null,
          width,
          height,
+          baseline,
          text: boundTextElement.originalText,
        });
        mutateElement(element, {
@ -133,151 +130,19 @@ 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: pushTextAboveContainer(elements, container, textElement),
+      elements: updatedElements,
      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);
-    return selectedElements.length === 1 && isTextElement(selectedElements[0]);
-  },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    const updatedElements = elements.slice();
-    if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
-      const textElement = selectedElements[0];
-      const container = newElement({
-        type: "rectangle",
-        backgroundColor: appState.currentItemBackgroundColor,
-        boundElements: [
-          ...(textElement.boundElements || []),
-          { id: textElement.id, type: "text" },
-        ],
-        angle: textElement.angle,
-        fillStyle: appState.currentItemFillStyle,
-        strokeColor: appState.currentItemStrokeColor,
-        roughness: appState.currentItemRoughness,
-        strokeWidth: appState.currentItemStrokeWidth,
-        strokeStyle: appState.currentItemStrokeStyle,
-        roundness:
-          appState.currentItemRoundness === "round"
-            ? {
-                type: isUsingAdaptiveRadius("rectangle")
-                  ? ROUNDNESS.ADAPTIVE_RADIUS
-                  : ROUNDNESS.PROPORTIONAL_RADIUS,
-              }
-            : null,
-        opacity: 100,
-        locked: false,
-        x: textElement.x - BOUND_TEXT_PADDING,
-        y: textElement.y - BOUND_TEXT_PADDING,
-        width: computeContainerDimensionForBoundText(
-          textElement.width,
-          "rectangle",
-        ),
-        height: computeContainerDimensionForBoundText(
-          textElement.height,
-          "rectangle",
-        ),
-        groupIds: textElement.groupIds,
-      });
-
-      // update bindings
-      if (textElement.boundElements?.length) {
-        const linearElementIds = textElement.boundElements
-          .filter((ele) => ele.type === "arrow")
-          .map((el) => el.id);
-        const linearElements = updatedElements.filter((ele) =>
-          linearElementIds.includes(ele.id),
-        ) as ExcalidrawLinearElement[];
-        linearElements.forEach((ele) => {
-          let startBinding = null;
-          let endBinding = null;
-          if (ele.startBinding) {
-            startBinding = { ...ele.startBinding, elementId: container.id };
-          }
-          if (ele.endBinding) {
-            endBinding = { ...ele.endBinding, elementId: container.id };
-          }
-          mutateElement(ele, { startBinding, endBinding });
-        });
-      }
-
-      mutateElement(textElement, {
-        containerId: container.id,
-        verticalAlign: VERTICAL_ALIGN.MIDDLE,
-        boundElements: null,
-      });
-      redrawTextBoundingBox(textElement, container);
-
-      return {
-        elements: pushContainerBelowText(
-          [...elements, container],
-          container,
-          textElement,
-        ),
-        appState: {
-          ...appState,
-          selectedElementIds: {
-            [container.id]: true,
-            [textElement.id]: false,
-          },
-        },
-        commitToHistory: true,
-      };
-    }
-    return {
-      elements: updatedElements,
-      appState,
-      commitToHistory: true,
-    };
-  },
-});
--- a/src/actions/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@ -1,6 +1,5 @@
 import { isDarwin } from "../constants";
 import { t } from "../i18n";
-import { SubtypeOf } from "../utility-types";
 import { getShortcutKey } from "../utils";
 import { ActionName } from "./types";

--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@ -6,7 +6,6 @@ import {
  ExcalidrawProps,
  BinaryFiles,
 } from "../types";
-import { MarkOptional } from "../utility-types";

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

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

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
--- a/src/components/ActiveConfirmDialog.tsx
+++ b/src/components/ActiveConfirmDialog.tsx
@ -1,7 +1,6 @@
 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";

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

--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -108,7 +108,6 @@ import {
  textWysiwyg,
  transformElements,
  updateTextElement,
-  redrawTextBoundingBox,
 } from "../element";
 import {
  bindOrUnbindLinearElement,
@ -265,8 +264,8 @@ import {
  getBoundTextElement,
  getContainerCenter,
  getContainerDims,
-  getContainerElement,
  getTextBindableContainerAtPosition,
+  isHittingContainerStroke,
  isValidTextContainer,
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
@ -284,7 +283,6 @@ import { actionPaste } from "../actions/actionClipboard";
 import { actionToggleHandTool } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
-import { actionCreateContainerFromText } from "../actions/actionBoundText";

 const deviceContextInitialValue = {
  isSmScreen: false,
@ -1628,7 +1626,6 @@ class App extends React.Component<AppProps, AppState> {
      oldIdToDuplicatedId.set(element.id, newElement.id);
      return newElement;
    });
-
    bindTextToShapeAfterDuplication(newElements, elements, oldIdToDuplicatedId);
    const nextElements = [
      ...this.scene.getElementsIncludingDeleted(),
@ -1641,14 +1638,6 @@ 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(
@ -2675,6 +2664,14 @@ 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({
@ -2768,12 +2765,17 @@ class App extends React.Component<AppProps, AppState> {
      );
      if (container) {
        if (
+          isArrowElement(container) ||
          hasBoundTextElement(container) ||
-          !isTransparent(container.backgroundColor) ||
-          isHittingElementNotConsideringBoundingBox(container, this.state, [
+          !isTransparent(
+            (container as ExcalidrawTextContainer).backgroundColor,
+          ) ||
+          isHittingContainerStroke(
            sceneX,
            sceneY,
-          ])
+            container,
+            this.state.zoom.value,
+          )
        ) {
          const midPoint = getContainerCenter(container, this.state);

@ -6238,7 +6240,6 @@ class App extends React.Component<AppProps, AppState> {
      actionGroup,
      actionUnbindText,
      actionBindText,
-      actionCreateContainerFromText,
      actionUngroup,
      CONTEXT_MENU_SEPARATOR,
      actionAddToLibrary,
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@ -6,7 +6,6 @@ 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;
@ -25,7 +24,7 @@ const ConfirmDialog = (props: Props) => {
    ...rest
  } = props;
  const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);

  return (
    <Dialog
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@ -16,7 +16,6 @@ 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;
@ -73,7 +72,7 @@ export const Dialog = (props: DialogProps) => {
  }, [islandNode, props.autofocus]);

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

  const onClose = () => {
    setAppState({ openMenu: null });
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@ -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={`${t("helpDialog.title")} — ?`}
-    aria-label={t("helpDialog.title")}
+    title={`${props.title} — ?`}
+    aria-label={props.title}
  >
    {HelpIcon}
  </button>
--- a/src/components/LibraryMenuHeaderContent.tsx
+++ b/src/components/LibraryMenuHeaderContent.tsx
@ -48,7 +48,6 @@ export const LibraryMenuHeader: React.FC<{
  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
  const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
    isLibraryMenuOpenAtom,
-    jotaiScope,
  );
  const renderRemoveLibAlert = useCallback(() => {
    const content = selectedItems.length
--- a/src/components/main-menu/DefaultItems.tsx
+++ b/src/components/main-menu/DefaultItems.tsx
@ -1,5 +1,5 @@
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { useI18n } from "../../i18n";
+import { t } from "../../i18n";
 import {
  useExcalidrawAppState,
  useExcalidrawSetAppState,
@ -31,10 +31,11 @@ import "./DefaultItems.scss";
 import clsx from "clsx";
 import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
-import { jotaiScope } from "../../jotai";

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

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

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

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

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

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

  const actionManager = useExcalidrawActionManager();

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

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

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

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

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

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

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

 export const Export = () => {
-  const { t } = useI18n();
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
  const setAppState = useExcalidrawSetAppState();
  return (
    <DropdownMenuItem
@ -243,7 +248,9 @@ export const LiveCollaborationTrigger = ({
  onSelect: () => void;
  isCollaborating: boolean;
 }) => {
-  const { t } = useI18n();
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
  return (
    <DropdownMenuItem
      data-testid="collab-button"
--- a/src/components/welcome-screen/WelcomeScreen.Center.tsx
+++ b/src/components/welcome-screen/WelcomeScreen.Center.tsx
@ -1,6 +1,6 @@
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { t, useI18n } from "../../i18n";
+import { t } from "../../i18n";
 import {
  useDevice,
  useExcalidrawActionManager,
@ -172,7 +172,10 @@ const MenuItemLiveCollaborationTrigger = ({
 }: {
  onSelect: () => any;
 }) => {
-  const { t } = useI18n();
+  // FIXME when we tie t() to lang state
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const appState = useExcalidrawAppState();
+
  return (
    <WelcomeScreenMenuItem shortcut={null} onSelect={onSelect} icon={usersIcon}>
      {t("labels.liveCollaboration")}
--- a/src/constants.ts
+++ b/src/constants.ts
@ -9,9 +9,6 @@ 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;

 export const APP_NAME = "Excalidraw";

--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@ -530,7 +530,6 @@
  // (doesn't work in Firefox)
  ::-webkit-scrollbar {
    width: 3px;
-    height: 3px;
  }

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

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

    .ToolIcon__keybinding {
      display: none;
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@ -7,7 +7,6 @@ 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";
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@ -34,7 +34,6 @@ 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";

 type RestoredAppState = Omit<
  AppState,
@ -172,6 +171,7 @@ const restoreElement = (
        fontSize,
        fontFamily,
        text: element.text ?? "",
+        baseline: element.baseline,
        textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
        verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
        containerId: element.containerId ?? null,
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@ -23,7 +23,6 @@ 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];
--- a/src/element/collision.ts
+++ b/src/element/collision.ts
@ -38,7 +38,6 @@ import { isTextElement } from ".";
 import { isTransparent } from "../utils";
 import { shouldShowBoundingBox } from "./transformHandles";
 import { getBoundTextElement } from "./textElement";
-import { Mutable } from "../utility-types";

 const isElementDraggableFromInside = (
  element: NonDeletedExcalidrawElement,
--- a/src/element/linearElementEditor.ts
+++ b/src/element/linearElementEditor.ts
@ -41,7 +41,6 @@ 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;
--- a/src/element/mutateElement.ts
+++ b/src/element/mutateElement.ts
@ -5,7 +5,6 @@ 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>,
--- a/src/element/newElement.ts
+++ b/src/element/newElement.ts
@ -22,17 +22,16 @@ import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
+  getBoundTextElement,
  getBoundTextElementOffset,
  getContainerDims,
  getContainerElement,
  measureText,
  normalizeText,
  wrapText,
-  getMaxContainerWidth,
 } from "./textElement";
-import { VERTICAL_ALIGN } from "../constants";
+import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
 import { isArrowElement } from "./typeChecks";
-import { MarkOptional, Merge, Mutable } from "../utility-types";

 type ElementConstructorOpts = MarkOptional<
  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@ -154,6 +153,7 @@ export const newTextElement = (
      y: opts.y - offsets.y,
      width: metrics.width,
      height: metrics.height,
+      baseline: metrics.baseline,
      containerId: opts.containerId || null,
      originalText: text,
    },
@ -170,13 +170,18 @@ const getAdjustedDimensions = (
  y: number;
  width: number;
  height: number;
+  baseline: number;
 } => {
+  let maxWidth = null;
  const container = getContainerElement(element);
-
-  const { width: nextWidth, height: nextHeight } = measureText(
-    nextText,
-    getFontString(element),
-  );
+  if (container) {
+    maxWidth = getMaxContainerWidth(container);
+  }
+  const {
+    width: nextWidth,
+    height: nextHeight,
+    baseline: nextBaseline,
+  } = measureText(nextText, getFontString(element), maxWidth);
  const { textAlign, verticalAlign } = element;
  let x: number;
  let y: number;
@ -185,7 +190,11 @@ const getAdjustedDimensions = (
    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
    !element.containerId
  ) {
-    const prevMetrics = measureText(element.text, getFontString(element));
+    const prevMetrics = measureText(
+      element.text,
+      getFontString(element),
+      maxWidth,
+    );
    const offsets = getTextElementPositionOffsets(element, {
      width: nextWidth - prevMetrics.width,
      height: nextHeight - prevMetrics.height,
@ -249,6 +258,7 @@ const getAdjustedDimensions = (
    height: nextHeight,
    x: Number.isFinite(x) ? x : element.x,
    y: Number.isFinite(y) ? y : element.y,
+    baseline: nextBaseline,
  };
 };

@ -268,6 +278,38 @@ 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,
  {
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@ -43,10 +43,12 @@ import {
  getApproxMinLineWidth,
  getBoundTextElement,
  getBoundTextElementId,
+  getBoundTextElementOffset,
  getContainerElement,
  handleBindTextResize,
-  getMaxContainerWidth,
+  measureText,
 } from "./textElement";
+import { getMaxContainerWidth } from "./newElement";

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

 const MIN_FONT_SIZE = 1;

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

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

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

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

  if (transformHandleDirection.includes("e")) {
@ -412,24 +423,23 @@ export const resizeSingleElement = (
    if (stateOfBoundTextElementAtResize) {
      boundTextFont = {
        fontSize: stateOfBoundTextElementAtResize.fontSize,
+        baseline: stateOfBoundTextElementAtResize.baseline,
      };
    }
    if (shouldMaintainAspectRatio) {
-      const updatedElement = {
-        ...element,
-        width: eleNewWidth,
-        height: eleNewHeight,
-      };
-
-      const nextFontSize = measureFontSizeFromWidth(
+      const boundTextElementPadding =
+        getBoundTextElementOffset(boundTextElement);
+      const nextFont = measureFontSizeFromWH(
        boundTextElement,
-        getMaxContainerWidth(updatedElement),
+        eleNewWidth - boundTextElementPadding * 2,
+        eleNewHeight - boundTextElementPadding * 2,
      );
-      if (nextFontSize === null) {
+      if (nextFont === null) {
        return;
      }
      boundTextFont = {
-        fontSize: nextFontSize,
+        fontSize: nextFont.size,
+        baseline: nextFont.baseline,
      };
    } else {
      const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
@ -673,6 +683,7 @@ const resizeMultipleElements = (
      y: number;
      points?: Point[];
      fontSize?: number;
+      baseline?: number;
    } = {
      width,
      height,
@ -681,34 +692,31 @@ const resizeMultipleElements = (
      ...rescaledPoints,
    };

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

    const boundTextElement = getBoundTextElement(element.latest);

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

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

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

      if (boundTextElement) {
        boundTextUpdates = {
-          fontSize,
+          fontSize: textMeasurements.size,
+          baseline: textMeasurements.baseline,
        };
      }
    }
--- a/src/element/textElement.test.ts
+++ b/src/element/textElement.test.ts
@ -1,12 +1,5 @@
 import { BOUND_TEXT_PADDING } from "../constants";
-import { API } from "../tests/helpers/api";
-import {
-  computeContainerDimensionForBoundText,
-  getContainerCoords,
-  getMaxContainerWidth,
-  getMaxContainerHeight,
-  wrapText,
-} from "./textElement";
+import { measureText, wrapText } from "./textElement";
 import { FontString } from "./types";

 describe("Test wrapText", () => {
@ -35,11 +28,10 @@ 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: 80,
+        width: 90,
        res: `Hello 
 whats 
 up`,
@ -63,7 +55,7 @@ p`,
      {
        desc: "break words as per the width",

-        width: 140,
+        width: 150,
        res: `Hello whats 
 up`,
      },
@ -73,13 +65,6 @@ 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);
@ -87,14 +72,13 @@ 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: 80,
+        width: 90,
        res: `Hello
 whats 
 up`,
@ -178,121 +162,35 @@ break it now`,
 });

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

-    it("should compute coords correctly when ellipse", () => {
-      const element = API.createElement({
-        type: "ellipse",
-        ...params,
-      });
-      expect(getContainerCoords(element)).toEqual({
-        x: 44.2893218813452455,
-        y: 39.64466094067262,
-      });
-    });
+  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 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,
-      });
-    });
+    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>
+    `);
  });

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

-    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);
-    });
+    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>
+    `);
  });
 });
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@ -12,7 +12,12 @@ import { BOUND_TEXT_PADDING, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
 import { isTextElement } from ".";
-import { isBoundToContainer, isArrowElement } from "./typeChecks";
+import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
+import {
+  isBoundToContainer,
+  isImageElement,
+  isArrowElement,
+} from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
 import { AppState } from "../types";
 import { isTextBindableContainer } from "./typeChecks";
@ -23,7 +28,7 @@ import {
  resetOriginalContainerCache,
  updateOriginalContainerCache,
 } from "./textWysiwyg";
-import { ExtractSetType } from "../utility-types";
+import { rotatePoint } from "../math";

 export const normalizeText = (text: string) => {
  return (
@ -40,66 +45,68 @@ export const redrawTextBoundingBox = (
  container: ExcalidrawElement | null,
 ) => {
  let maxWidth = undefined;
-
-  const boundTextUpdates = {
-    x: textElement.x,
-    y: textElement.y,
-    text: textElement.text,
-    width: textElement.width,
-    height: textElement.height,
-  };
-
-  boundTextUpdates.text = textElement.text;
-
+  let text = textElement.text;
  if (container) {
    maxWidth = getMaxContainerWidth(container);
-    boundTextUpdates.text = wrapText(
+    text = wrapText(
      textElement.originalText,
      getFontString(textElement),
      maxWidth,
    );
  }
-  const metrics = measureText(
-    boundTextUpdates.text,
-    getFontString(textElement),
-  );
-
-  boundTextUpdates.width = metrics.width;
-  boundTextUpdates.height = metrics.height;
-
+  const metrics = measureText(text, getFontString(textElement), maxWidth);
+  let coordY = textElement.y;
+  let coordX = textElement.x;
+  // Resize container and vertically center align the text
  if (container) {
-    if (isArrowElement(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 {
      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;
-      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;
+      coordY = centerY - (textElement.height + diffHeight) / 2;
+      coordX = centerX - (textElement.width + diffWidth) / 2;
    }
  }
-
-  mutateElement(textElement, boundTextUpdates);
+  mutateElement(textElement, {
+    width: metrics.width,
+    height: metrics.height,
+    baseline: metrics.baseline,
+    y: coordY,
+    x: coordX,
+    text,
+  });
 };

 export const bindTextToShapeAfterDuplication = (
@ -171,6 +178,7 @@ 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(
@ -179,17 +187,18 @@ export const handleBindTextResize = (
          maxWidth,
        );
      }
-      const dimensions = measureText(text, getFontString(textElement));
+      const dimensions = measureText(
+        text,
+        getFontString(textElement),
+        maxWidth,
+      );
      nextHeight = dimensions.height;
      nextWidth = dimensions.width;
+      nextBaseLine = dimensions.baseline;
    }
    // increase height in case text element height exceeds
    if (nextHeight > maxHeight) {
-      containerHeight = computeContainerDimensionForBoundText(
-        nextHeight,
-        container.type,
-      );
-
+      containerHeight = nextHeight + getBoundTextElementOffset(textElement) * 2;
      const diff = containerHeight - containerDims.height;
      // fix the y coord when resizing from ne/nw/n
      const updatedY =
@ -209,64 +218,94 @@ export const handleBindTextResize = (
      text,
      width: nextWidth,
      height: nextHeight,
-    });

+      baseline: nextBaseLine,
+    });
    if (!isArrowElement(container)) {
-      mutateElement(
-        textElement,
-        computeBoundTextPosition(
-          container,
-          textElement as ExcalidrawTextElementWithContainer,
-        ),
+      updateBoundTextPosition(
+        container,
+        textElement as ExcalidrawTextElementWithContainer,
      );
    }
  }
 };

-const computeBoundTextPosition = (
+const updateBoundTextPosition = (
  container: ExcalidrawElement,
  boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
-  const containerCoords = getContainerCoords(container);
-  const maxContainerHeight = getMaxContainerHeight(container);
-  const maxContainerWidth = getMaxContainerWidth(container);
-
-  let x;
+  const containerDims = getContainerDims(container);
+  const boundTextElementPadding = getBoundTextElementOffset(boundTextElement);
  let y;
  if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
-    y = containerCoords.y;
+    y = container.y + boundTextElementPadding;
  } else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-    y = containerCoords.y + (maxContainerHeight - boundTextElement.height);
-  } else {
    y =
-      containerCoords.y +
-      (maxContainerHeight / 2 - boundTextElement.height / 2);
-  }
-  if (boundTextElement.textAlign === TEXT_ALIGN.LEFT) {
-    x = containerCoords.x;
-  } else if (boundTextElement.textAlign === TEXT_ALIGN.RIGHT) {
-    x = containerCoords.x + (maxContainerWidth - boundTextElement.width);
+      container.y +
+      containerDims.height -
+      boundTextElement.height -
+      boundTextElementPadding;
  } else {
-    x =
-      containerCoords.x + (maxContainerWidth / 2 - boundTextElement.width / 2);
+    y = container.y + containerDims.height / 2 - boundTextElement.height / 2;
  }
-  return { x, y };
+  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 });
 };
-
 // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
-
-export const measureText = (text: string, font: FontString) => {
+export const measureText = (
+  text: string,
+  font: FontString,
+  maxWidth?: number | null,
+) => {
  text = text
    .split("\n")
    // replace empty lines with single space because leading/trailing empty
    // lines would be stripped from computation
    .map((x) => x || " ")
    .join("\n");
+  const container = document.createElement("div");
+  container.style.position = "absolute";
+  container.style.whiteSpace = "pre";
+  container.style.font = font;
+  container.style.minHeight = "1em";

-  const height = getTextHeight(text, font);
-  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;

-  return { width, height };
+  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 };
 };

 const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
@ -276,51 +315,45 @@ export const getApproxLineHeight = (font: FontString) => {
  if (cacheApproxLineHeight[font]) {
    return cacheApproxLineHeight[font];
  }
-  const fontSize = parseInt(font);
-
-  // Calculate line height relative to font size
-  cacheApproxLineHeight[font] = fontSize * 1.2;
+  cacheApproxLineHeight[font] = measureText(DUMMY_TEXT, font, null).height;
  return cacheApproxLineHeight[font];
 };

 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 width * 10;
+    return metrics.width * 10;
  }
-  return width;
+  // Since measureText behaves differently in different browsers
+  // OS so considering a adjustment factor of 0.2
+  const adjustmentFactor = 0.2;
+
+  return metrics.width + adjustmentFactor;
 };

 export const getTextWidth = (text: string, font: FontString) => {
-  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  const lines = text.split("\n");
  let width = 0;
  lines.forEach((line) => {
    width = Math.max(width, getLineWidth(line, font));
  });
  return width;
 };
-
-export const getTextHeight = (text: string, font: FontString) => {
-  const lines = text.replace(/\r\n?/g, "\n").split("\n");
-  const lineHeight = getApproxLineHeight(font);
-  return lineHeight * lines.length;
-};
-
 export const wrapText = (text: string, font: FontString, maxWidth: number) => {
  const lines: Array<string> = [];
  const originalLines = text.split("\n");
  const spaceWidth = getLineWidth(" ", font);
+
  const push = (str: string) => {
    if (str.trim()) {
      lines.push(str);
@ -337,23 +370,16 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
    let currentLineWidthTillNow = 0;

    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
-      else if (currentWordWidth > maxWidth) {
+      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;
-
        while (words[index].length > 0) {
          const currentChar = String.fromCodePoint(
            words[index].codePointAt(0)!,
@ -394,7 +420,7 @@ 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 = "";
@ -454,9 +480,9 @@ export const charWidth = (() => {
    getCache,
  };
 })();
-
 export const getApproxMinLineWidth = (font: FontString) => {
  const maxCharWidth = getMaxCharWidth(font);
+
  if (maxCharWidth === 0) {
    return (
      measureText(DUMMY_TEXT.split("").join("\n"), font).width +
@ -596,26 +622,6 @@ 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)) {
@ -628,13 +634,12 @@ export const getBoundTextElementOffset = (
  boundTextElement: ExcalidrawTextElement | null,
 ) => {
  const container = getContainerElement(boundTextElement);
-  if (!container || !boundTextElement) {
+  if (!container) {
    return 0;
  }
  if (isArrowElement(container)) {
    return BOUND_TEXT_PADDING * 8;
  }
-
  return BOUND_TEXT_PADDING;
 };

@ -710,87 +715,102 @@ export const getTextBindableContainerAtPosition = (
  return isTextBindableContainer(hitElement, false) ? hitElement : null;
 };

-const VALID_CONTAINER_TYPES = new Set([
-  "rectangle",
-  "ellipse",
-  "diamond",
-  "image",
-  "arrow",
-]);
+export const isValidTextContainer = (element: ExcalidrawElement) => {
+  return (
+    element.type === "rectangle" ||
+    element.type === "ellipse" ||
+    element.type === "diamond" ||
+    isImageElement(element) ||
+    isArrowElement(element)
+  );
+};

-export const isValidTextContainer = (element: ExcalidrawElement) =>
-  VALID_CONTAINER_TYPES.has(element.type);
-
-export const computeContainerDimensionForBoundText = (
-  dimension: number,
-  containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>,
+export const isHittingContainerStroke = (
+  x: number,
+  y: number,
+  container: ExcalidrawTextContainer,
+  zoom: number,
 ) => {
-  dimension = Math.ceil(dimension);
-  const padding = BOUND_TEXT_PADDING * 2;
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(container);
+  const topLeft = [x1, y1];
+  const topRight = [x2, y1];
+  const bottomLeft = [x1, y2];
+  const bottomRight = [x2, y2];

-  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;
-};
+  const [counterRotateX, counterRotateY] = rotatePoint(
+    [x, y],
+    [cx, cy],
+    -container.angle,
+  );

-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;
-  }
+  const strokeWidth = container.strokeWidth;
+  const threshold = 10 / zoom;

  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;
-};
+    const h = (topLeft[0] + topRight[0]) / 2;
+    const k = (topLeft[1] + bottomLeft[1]) / 2;
+    let a = container.width / 2 + strokeWidth / 2 + threshold;
+    let b = container.height / 2 + strokeWidth / 2 + threshold;
+    const checkPointOnOuterEllipse =
+      Math.pow(counterRotateX - h, 2) / Math.pow(a, 2) +
+      Math.pow(counterRotateY - k, 2) / Math.pow(b, 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;
+    a = container.width / 2 - strokeWidth / 2 - threshold;
+    b = container.height / 2 - strokeWidth / 2 - threshold;
+
+    const checkPointOnInnerEllipse =
+      Math.pow(counterRotateX - h, 2) / Math.pow(a, 2) +
+      Math.pow(counterRotateY - k, 2) / Math.pow(b, 2);
+
+    // The expression evaluates to 1 means point is on ellipse,
+    // < 1 means inside ellipse and > 1 means outside ellipse
+    if (
+      checkPointOnInnerEllipse === 1 ||
+      checkPointOnOuterEllipse === 1 ||
+      (checkPointOnInnerEllipse > 1 && checkPointOnOuterEllipse < 1)
+    ) {
+      return true;
    }
-    return height;
+    return false;
  }
-  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;
+
+  // Left Stroke
+  if (
+    counterRotateX >= topLeft[0] - strokeWidth / 2 - threshold &&
+    counterRotateX <= topLeft[0] + strokeWidth / 2 + threshold &&
+    counterRotateY >= topLeft[1] - threshold &&
+    counterRotateY <= bottomRight[1] + threshold
+  ) {
+    return true;
  }
-  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;
+  // Top stroke
+  if (
+    counterRotateX >= topLeft[0] - threshold &&
+    counterRotateX <= topRight[0] + threshold &&
+    counterRotateY >= topLeft[1] - threshold - strokeWidth / 2 &&
+    counterRotateY <= topLeft[1] + threshold + strokeWidth / 2
+  ) {
+    return true;
  }
-  return height - BOUND_TEXT_PADDING * 2;
+
+  // Right stroke
+  if (
+    counterRotateX >= topRight[0] - threshold - strokeWidth / 2 &&
+    counterRotateX <= topRight[0] + threshold + strokeWidth / 2 &&
+    counterRotateY >= topRight[1] - threshold &&
+    counterRotateY <= bottomRight[1] + threshold
+  ) {
+    return true;
+  }
+
+  // Bottom Stroke
+  if (
+    counterRotateX >= bottomLeft[0] - threshold &&
+    counterRotateX <= bottomRight[0] + threshold &&
+    counterRotateY >= bottomLeft[1] - threshold - strokeWidth / 2 &&
+    counterRotateY <= bottomLeft[1] + threshold + strokeWidth / 2
+  ) {
+    return true;
+  }
+  return false;
 };
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@ -3,23 +3,19 @@ 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,
-  mockBoundingClientRect,
-  restoreOriginalGetBoundingClientRect,
-} from "../tests/test-utils";
+import { fireEvent } from "../tests/test-utils";
 import { queryByText } from "@testing-library/react";

-import { FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
+import { BOUND_TEXT_PADDING, FONT_FAMILY } 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")!);

@ -226,19 +222,11 @@ 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");

@ -248,10 +236,6 @@ 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";
@ -450,33 +434,23 @@ 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 = [];
@ -489,21 +463,14 @@ describe("textWysiwyg", () => {
      });
    });

-    it("should bind text to container when double clicked inside filled container", async () => {
-      const rectangle = API.createElement({
-        type: "rectangle",
-        x: 10,
-        y: 20,
-        width: 90,
-        height: 75,
-        backgroundColor: "red",
-      });
-      h.elements = [rectangle];
-
+    it("should bind text to container when double clicked on center of filled container", async () => {
      expect(h.elements.length).toBe(1);
      expect(h.elements[0].id).toBe(rectangle.id);

-      mouse.doubleClickAt(rectangle.x + 10, rectangle.y + 10);
+      mouse.doubleClickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
      expect(h.elements.length).toBe(2);

      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
@ -537,37 +504,24 @@ describe("textWysiwyg", () => {
      });
      h.elements = [rectangle];

-      mouse.doubleClickAt(rectangle.x + 10, rectangle.y + 10);
-      expect(h.elements.length).toBe(2);
-      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.type).toBe("text");
-      expect(text.containerId).toBe(null);
-      mouse.down();
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-      await new Promise((r) => setTimeout(r, 0));
-      editor.blur();
-
      mouse.doubleClickAt(
        rectangle.x + rectangle.width / 2,
        rectangle.y + rectangle.height / 2,
      );
-      expect(h.elements.length).toBe(3);
+      expect(h.elements.length).toBe(2);

-      text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(rectangle.id);
-
      mouse.down();
-      editor = document.querySelector(
+      const editor = document.querySelector(
        ".excalidraw-textEditorContainer > textarea",
      ) as HTMLTextAreaElement;

      fireEvent.change(editor, { target: { value: "Hello World!" } });
+
      await new Promise((r) => setTimeout(r, 0));
      editor.blur();
-
      expect(rectangle.boundElements).toStrictEqual([
        { id: text.id, type: "text" },
      ]);
@ -597,43 +551,6 @@ describe("textWysiwyg", () => {
      ]);
    });

-    it("should bind text to container when double clicked on container stroke", async () => {
-      const rectangle = API.createElement({
-        type: "rectangle",
-        x: 10,
-        y: 20,
-        width: 90,
-        height: 75,
-        strokeWidth: 4,
-      });
-      h.elements = [rectangle];
-
-      expect(h.elements.length).toBe(1);
-      expect(h.elements[0].id).toBe(rectangle.id);
-
-      mouse.doubleClickAt(rectangle.x + 2, rectangle.y + 2);
-      expect(h.elements.length).toBe(2);
-
-      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.type).toBe("text");
-      expect(text.containerId).toBe(rectangle.id);
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
-      mouse.down();
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
-
-      await new Promise((r) => setTimeout(r, 0));
-      editor.blur();
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
-    });
-
    it("shouldn't bind to non-text-bindable containers", async () => {
      const freedraw = API.createElement({
        type: "freedraw",
@ -669,11 +586,11 @@ describe("textWysiwyg", () => {
    ["freedraw", "line"].forEach((type: any) => {
      it(`shouldn't create text element when pressing 'Enter' key on ${type} `, async () => {
        h.elements = [];
-        const element = UI.createElement(type, {
+        const elemnet = UI.createElement(type, {
          width: 100,
          height: 50,
        });
-        API.setSelectedElements([element]);
+        API.setSelectedElements([elemnet]);
        Keyboard.keyPress(KEYS.ENTER);
        expect(h.elements.length).toBe(1);
      });
@ -758,6 +675,39 @@ 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);
@ -766,6 +716,11 @@ 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!",
@ -780,11 +735,11 @@ describe("textWysiwyg", () => {
      expect(text.text).toBe("Hello \nWorld!");
      expect(text.originalText).toBe("Hello World!");
      expect(text.y).toBe(
-        rectangle.y + h.elements[0].height / 2 - text.height / 2,
+        rectangle.y + rectangle.height / 2 - (APPROX_LINE_HEIGHT * 2) / 2,
      );
-      expect(text.x).toBe(25);
-      expect(text.height).toBe(48);
-      expect(text.width).toBe(60);
+      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);

      // Edit and text by removing second line and it should
      // still vertically align correctly
@ -801,6 +756,11 @@ 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));
@ -810,12 +770,12 @@ describe("textWysiwyg", () => {

      expect(text.text).toBe("Hello");
      expect(text.originalText).toBe("Hello");
-      expect(text.height).toBe(24);
-      expect(text.width).toBe(50);
      expect(text.y).toBe(
-        rectangle.y + h.elements[0].height / 2 - text.height / 2,
+        rectangle.y + rectangle.height / 2 - APPROX_LINE_HEIGHT / 2,
      );
-      expect(text.x).toBe(30);
+      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);
    });

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

@ -917,8 +877,6 @@ 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));

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

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

      Keyboard.withModifierKeys({ ctrl: true }, () => {
        Keyboard.keyPress(KEYS.Z);
@ -1099,6 +1057,29 @@ 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);

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

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

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

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

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

@ -1181,9 +1163,7 @@ describe("textWysiwyg", () => {
      expect(
        (h.elements[1] as ExcalidrawTextElementWithContainer).fontSize,
      ).toEqual(36);
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(
-        96.39999999999999,
-      );
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
    });

    describe("should align correctly", () => {
@ -1211,7 +1191,7 @@ describe("textWysiwyg", () => {
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
            15,
-            25,
+            20,
          ]
        `);
      });
@ -1221,8 +1201,8 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Align top"));
        expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
          Array [
-            30,
-            25,
+            94.5,
+            20,
          ]
        `);
      });
@ -1232,22 +1212,22 @@ describe("textWysiwyg", () => {
        fireEvent.click(screen.getByTitle("Align top"));

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

      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,
-            45.5,
-          ]
-        `);
+            Array [
+              15,
+              25,
+            ]
+          `);
      });

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

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

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

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

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

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

      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 [
-            30,
-            66,
-          ]
-        `);
+            Array [
+              94.5,
+              25,
+            ]
+          `);
      });

      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 [
-            45,
-            66,
-          ]
-        `);
+            Array [
+              174,
+              25,
+            ]
+          `);
      });
    });
-
-    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(24);
-      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: 34,
-          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,
-        }),
-      );
-    });
  });
 });
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@ -24,17 +24,13 @@ import { mutateElement } from "./mutateElement";
 import {
  getApproxLineHeight,
  getBoundTextElementId,
-  getContainerCoords,
+  getBoundTextElementOffset,
  getContainerDims,
  getContainerElement,
  getTextElementAngle,
  getTextWidth,
-  measureText,
  normalizeText,
-  redrawTextBoundingBox,
  wrapText,
-  getMaxContainerHeight,
-  getMaxContainerWidth,
 } from "./textElement";
 import {
  actionDecreaseFontSize,
@ -42,6 +38,7 @@ 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";

@ -160,7 +157,7 @@ export const textWysiwyg = ({
      let maxWidth = updatedTextElement.width;

      let maxHeight = updatedTextElement.height;
-      let textElementWidth = updatedTextElement.width;
+      const width = updatedTextElement.width;
      // Set to element height by default since that's
      // what is going to be used for unbounded text
      let textElementHeight = updatedTextElement.height;
@ -233,17 +230,19 @@ export const textWysiwyg = ({
        // 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 =
-                containerCoords.y + maxHeight / 2 - textElementHeight / 2;
+                container.y + containerDims.height / 2 - textElementHeight / 2;
            }
          }
          if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-            coordY = containerCoords.y + (maxHeight - textElementHeight);
+            coordY =
+              container.y +
+              containerDims.height -
+              textElementHeight -
+              getBoundTextElementOffset(updatedTextElement);
          }
        }
      }
@ -270,11 +269,10 @@ export const textWysiwyg = ({
      const lineHeight = updatedTextElement.containerId
        ? approxLineHeight
        : updatedTextElement.height / lines.length;
-
      if (!container) {
        maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
-        textElementWidth = Math.min(textElementWidth, maxWidth);
      }
+
      // Make sure text editor height doesn't go beyond viewport
      const editorMaxHeight =
        (appState.height - viewportY) / appState.zoom.value;
@ -282,12 +280,12 @@ export const textWysiwyg = ({
        font: getFontString(updatedTextElement),
        // must be defined *after* font ¯\_(ツ)_/¯
        lineHeight: `${lineHeight}px`,
-        width: `${textElementWidth}px`,
+        width: `${Math.min(width, maxWidth)}px`,
        height: `${textElementHeight}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
        transform: getTransform(
-          textElementWidth,
+          width,
          textElementHeight,
          getTextElementAngle(updatedTextElement),
          appState,
@ -346,32 +344,7 @@ export const textWysiwyg = ({
    overflowWrap: "break-word",
    boxSizing: "content-box",
  });
-
-  const magicOffset =
-    (excalidrawContainer
-      ? parseFloat(getComputedStyle(excalidrawContainer).fontSize)
-      : 16) / 16;
-
-  const onEditableInput = () => {
-    const updatedTextElement = Scene.getScene(element)?.getElement(
-      id,
-    ) as ExcalidrawTextElement;
-    const font = getFontString(updatedTextElement);
-    if (isBoundToContainer(element)) {
-      const container = getContainerElement(element);
-      const wrappedText = wrapText(
-        normalizeText(editable.value),
-        font,
-        getMaxContainerWidth(container!),
-      );
-      const { width, height } = measureText(wrappedText, font);
-      editable.style.width = `${width + magicOffset}px`;
-      editable.style.height = `${height}px`;
-    }
-  };
-
  updateWysiwygStyle();
-  onEditableInput();

  if (onChange) {
    editable.onpaste = async (event) => {
@ -401,7 +374,60 @@ export const textWysiwyg = ({
    };

    editable.oninput = () => {
-      onEditableInput();
+      const updatedTextElement = Scene.getScene(element)?.getElement(
+        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) {
+        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);
+        editable.style.width = `${width}px`;
+
+        if (!heightSet) {
+          editable.style.height = `${editable.scrollHeight}px`;
+        }
+      }
      onChange(normalizeText(editable.value));
    };
  }
@ -437,9 +463,7 @@ export const textWysiwyg = ({
          event.code === CODES.BRACKET_RIGHT))
    ) {
      event.preventDefault();
-      if (event.isComposing) {
-        return;
-      } else if (event.shiftKey || event.code === CODES.BRACKET_LEFT) {
+      if (event.shiftKey || event.code === CODES.BRACKET_LEFT) {
        outdent();
      } else {
        indent();
@ -588,7 +612,6 @@ export const textWysiwyg = ({
          ),
        });
      }
-      redrawTextBoundingBox(updateElement, container);
    }

    onSubmit({
--- a/src/element/typeChecks.test.ts
+++ b/src/element/typeChecks.test.ts
@ -1,66 +0,0 @@
-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();
-    });
-  });
-});
--- a/src/element/typeChecks.ts
+++ b/src/element/typeChecks.ts
@ -1,6 +1,5 @@
 import { ROUNDNESS } from "../constants";
 import { AppState } from "../types";
-import { MarkNonNullable } from "../utility-types";
 import {
  ExcalidrawElement,
  ExcalidrawTextElement,
@ -138,9 +137,9 @@ export const isExcalidrawElement = (element: any): boolean => {

 export const hasBoundTextElement = (
  element: ExcalidrawElement | null,
-): element is MarkNonNullable<ExcalidrawBindableElement, "boundElements"> => {
+): element is ExcalidrawBindableElement => {
  return (
-    isTextBindableContainer(element) &&
+    isBindableElement(element) &&
    !!element.boundElements?.some(({ type }) => type === "text")
  );
 };
--- a/src/element/types.ts
+++ b/src/element/types.ts
@ -6,7 +6,6 @@ import {
  THEME,
  VERTICAL_ALIGN,
 } from "../constants";
-import { MarkNonNullable, ValueOf } from "../utility-types";

 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid";
@ -131,6 +130,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
    fontSize: number;
    fontFamily: FontFamilyValues;
    text: string;
+    baseline: number;
    textAlign: TextAlign;
    verticalAlign: VerticalAlign;
    containerId: ExcalidrawGenericElement["id"] | null;
--- a/src/excalidraw-app/app-jotai.ts
+++ b/src/excalidraw-app/app-jotai.ts
@ -1,3 +0,0 @@
-import { unstable_createStore } from "jotai";
-
-export const appJotaiStore = unstable_createStore();
--- a/src/excalidraw-app/collab/Collab.tsx
+++ b/src/excalidraw-app/collab/Collab.tsx
@ -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 { appJotaiStore } from "../app-jotai";
+import { jotaiStore } from "../../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,
    };

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

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

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

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

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

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

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

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

  setUsername = (username: string) => {
--- a/src/excalidraw-app/collab/RoomDialog.tsx
+++ b/src/excalidraw-app/collab/RoomDialog.tsx
@ -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,7 +51,6 @@ const RoomDialog = ({
  setErrorMessage: (message: string) => void;
  theme: AppState["theme"];
 }) => {
-  const { t } = useI18n();
  const roomLinkInput = useRef<HTMLInputElement>(null);

  const copyRoomLink = async () => {
--- a/src/excalidraw-app/components/AppWelcomeScreen.tsx
+++ b/src/excalidraw-app/components/AppWelcomeScreen.tsx
@ -1,13 +1,12 @@
 import React from "react";
 import { PlusPromoIcon } from "../../components/icons";
-import { useI18n } from "../../i18n";
+import { t } 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) {
--- a/src/excalidraw-app/components/EncryptedIcon.tsx
+++ b/src/excalidraw-app/components/EncryptedIcon.tsx
@ -1,21 +1,17 @@
 import { shield } from "../../components/icons";
 import { Tooltip } from "../../components/Tooltip";
-import { useI18n } from "../../i18n";
+import { t } from "../../i18n";

-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>
-  );
-};
+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>
+);
--- a/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx
+++ b/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx
@ -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 { useI18n } from "../../i18n";
+import { t } from "../../i18n";
 import { excalidrawPlusIcon } from "./icons";
 import { encryptData, generateEncryptionKey } from "../../data/encryption";
 import { isInitializedImageElement } from "../../element/typeChecks";
@ -79,7 +79,6 @@ 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>
--- a/src/excalidraw-app/components/LanguageList.tsx
+++ b/src/excalidraw-app/components/LanguageList.tsx
@ -1,23 +1,22 @@
-import { useSetAtom } from "jotai";
+import { useAtom } from "jotai";
 import React from "react";
-import { appLangCodeAtom } from "..";
-import { defaultLang, useI18n } from "../../i18n";
+import { langCodeAtom } from "..";
+import * as i18n from "../../i18n";
 import { languages } from "../../i18n";

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

  return (
    <select
      className="dropdown-select dropdown-select__language"
      onChange={({ target }) => setLangCode(target.value)}
      value={langCode}
-      aria-label={t("buttons.selectLanguage")}
+      aria-label={i18n.t("buttons.selectLanguage")}
      style={style}
    >
-      <option key={defaultLang.code} value={defaultLang.code}>
-        {defaultLang.label}
+      <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
+        {i18n.defaultLang.label}
      </option>
      {languages.map((lang) => (
        <option key={lang.code} value={lang.code}>
--- a/src/excalidraw-app/data/firebase.ts
+++ b/src/excalidraw-app/data/firebase.ts
@ -14,7 +14,6 @@ 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
 // -----------------------------------------------------------------------------
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@ -75,17 +75,15 @@ 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();

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

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

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

@ -685,7 +683,7 @@ const ExcalidrawWrapper = () => {
 const ExcalidrawApp = () => {
  return (
    <TopErrorBoundary>
-      <Provider unstable_createStore={() => appJotaiStore}>
+      <Provider unstable_createStore={() => jotaiStore}>
        <ExcalidrawWrapper />
      </Provider>
    </TopErrorBoundary>
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -50,6 +50,36 @@ 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 };
@ -71,6 +101,23 @@ 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;
--- a/src/history.ts
+++ b/src/history.ts
@ -2,7 +2,6 @@ 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>;
--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -1,8 +1,6 @@
 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;

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

 export const getLanguage = () => currentLang;
@ -147,15 +143,3 @@ 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 };
-};
--- a/src/jotai.ts
+++ b/src/jotai.ts
@ -1,4 +1,4 @@
-import { PrimitiveAtom, unstable_createStore, useAtom } from "jotai";
+import { unstable_createStore, useAtom, WritableAtom } 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 PrimitiveAtom<T>,
+  A extends WritableAtom<T, T>,
 >(
  atom: A,
  initialValue: T | (() => T),
--- a/src/locales/ar-SA.json
+++ b/src/locales/ar-SA.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "تعذر استيراد المشهد من عنوان URL المتوفر. إما أنها مشوهة، أو لا تحتوي على بيانات Excalidraw JSON صالحة.",
    "resetLibrary": "هذا سوف يمسح مكتبتك. هل أنت متأكد؟",
    "removeItemsFromsLibrary": "حذف {{count}} عنصر (عناصر) من المكتبة؟",
-    "invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفاً. التعاون المباشر معطل.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفاً. التعاون المباشر معطل."
  },
  "errors": {
    "unsupportedFileType": "نوع الملف غير مدعوم.",
--- a/src/locales/bg-BG.json
+++ b/src/locales/bg-BG.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "Този файлов формат не се поддържа.",
--- a/src/locales/bn-BD.json
+++ b/src/locales/bn-BD.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "সরবরাহ করা লিঙ্ক থেকে দৃশ্য লোড করা যায়নি৷ এটি হয় বিকৃত, অথবা বৈধ এক্সক্যালিড্র জেসন তথ্য নেই৷",
    "resetLibrary": "এটি আপনার সংগ্রহ পরিষ্কার করবে। আপনি কি নিশ্চিত?",
    "removeItemsFromsLibrary": "সংগ্রহ থেকে {{count}} বস্তু বিয়োগ করা হবে। আপনি কি নিশ্চিত?",
-    "invalidEncryptionKey": "অবৈধ এনক্রীপশন কী।",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "অবৈধ এনক্রীপশন কী।"
  },
  "errors": {
    "unsupportedFileType": "অসমর্থিত ফাইল।",
--- a/src/locales/ca-ES.json
+++ b/src/locales/ca-ES.json
@ -1,7 +1,7 @@
 {
  "labels": {
    "paste": "Enganxa",
-    "pasteAsPlaintext": "Enganxar com a text pla",
+    "pasteAsPlaintext": "",
    "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": "Col·laboració en directe...",
+    "liveCollaboration": "",
    "duplicateSelection": "Duplica",
    "untitled": "Sense títol",
    "name": "Nom",
@ -116,8 +116,8 @@
      "label": "Enllaç"
    },
    "lineEditor": {
-      "edit": "Editar línia",
-      "exit": "Sortir de l'editor de línia"
+      "edit": "",
+      "exit": ""
    },
    "elementLock": {
      "lock": "Bloca",
@ -136,8 +136,8 @@
  "buttons": {
    "clearReset": "Neteja el llenç",
    "exportJSON": "Exporta a un fitxer",
-    "exportImage": "Exporta la imatge...",
-    "export": "Guardar a...",
+    "exportImage": "",
+    "export": "",
    "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": "Obrir",
+    "load": "",
    "getShareableLink": "Obté l'enllaç per a compartir",
    "close": "Tanca",
    "selectLanguage": "Trieu la llengua",
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Sense connexió a internet disponible.\nEls vostres canvis no seran guardats!"
+    "invalidEncryptionKey": "La clau d'encriptació ha de tenir 22 caràcters. La col·laboració en directe està desactivada."
  },
  "errors": {
    "unsupportedFileType": "Tipus de fitxer no suportat.",
@ -203,8 +202,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": "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."
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
  },
  "toolBar": {
    "selection": "Selecció",
@ -218,10 +217,10 @@
    "text": "Text",
    "library": "Biblioteca",
    "lock": "Mantenir activa l'eina seleccionada desprès de dibuixar",
-    "penMode": "Mode de llapis - evita tocar",
+    "penMode": "",
    "link": "Afegeix / actualitza l'enllaç per a la forma seleccionada",
    "eraser": "Esborrador",
-    "hand": "Mà (eina de desplaçament)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Accions del llenç",
@ -229,7 +228,7 @@
    "shapes": "Formes"
  },
  "hints": {
-    "canvasPanning": "Per moure el llenç, manteniu premuda la roda del ratolí o la barra espaiadora mentre arrossegueu o utilitzeu l'eina manual",
+    "canvasPanning": "",
    "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ó",
@ -240,7 +239,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": "Mantingueu premut Ctrl o Cmd i feu doble clic o premeu Ctrl o Cmd + Retorn per editar els punts",
+    "lineEditor_info": "",
    "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",
@ -248,7 +247,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": "É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\"."
+    "firefox_clipboard_write": ""
  },
  "canvasError": {
    "cannotShowPreview": "No es pot mostrar la previsualització",
@ -296,7 +295,7 @@
    "blog": "Llegiu el nostre blog",
    "click": "clic",
    "deepSelect": "Selecció profunda",
-    "deepBoxSelect": "Seleccioneu profundament dins del quadre i eviteu arrossegar",
+    "deepBoxSelect": "",
    "curvedArrow": "Fletxa corba",
    "curvedLine": "Línia corba",
    "documentation": "Documentació",
@ -317,8 +316,8 @@
    "zoomToFit": "Zoom per veure tots els elements",
    "zoomToSelection": "Zoom per veure la selecció",
    "toggleElementLock": "Blocar/desblocar la selecció",
-    "movePageUpDown": "Mou la pàgina cap amunt/a baix",
-    "movePageLeftRight": "Mou la pàgina cap a l'esquerra/dreta"
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
  },
  "clearCanvasDialog": {
    "title": "Neteja el llenç"
@ -400,7 +399,7 @@
    "fileSavedToFilename": "S'ha desat a {filename}",
    "canvas": "el llenç",
    "selection": "la selecció",
-    "pasteAsSingleElement": "Fer servir {{shortcut}} per enganxar com un sol element,\no enganxeu-lo en un editor de text existent"
+    "pasteAsSingleElement": ""
  },
  "colors": {
    "ffffff": "Blanc",
@ -451,15 +450,15 @@
  },
  "welcomeScreen": {
    "app": {
-      "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..."
+      "center_heading": "",
+      "center_heading_plus": "",
+      "menuHint": ""
    },
    "defaults": {
-      "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"
+      "menuHint": "",
+      "center_heading": "",
+      "toolbarHint": "",
+      "helpHint": ""
    }
  }
 }
--- a/src/locales/cs-CZ.json
+++ b/src/locales/cs-CZ.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/da-DK.json
+++ b/src/locales/da-DK.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/de-DE.json
+++ b/src/locales/de-DE.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Keine Internetverbindung verfügbar.\nDeine Änderungen werden nicht gespeichert!"
+    "invalidEncryptionKey": "Verschlüsselungsschlüssel muss 22 Zeichen lang sein. Die Live-Zusammenarbeit ist deaktiviert."
  },
  "errors": {
    "unsupportedFileType": "Nicht unterstützter Dateityp.",
--- a/src/locales/el-GR.json
+++ b/src/locales/el-GR.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Δεν ήταν δυνατή η εισαγωγή σκηνής από το URL που δώσατε. Είτε έχει λάθος μορφή, είτε δεν περιέχει έγκυρα δεδομένα JSON Excalidraw.",
    "resetLibrary": "Αυτό θα καθαρίσει τη βιβλιοθήκη σας. Είστε σίγουροι;",
    "removeItemsFromsLibrary": "Διαγραφή {{count}} αντικειμένου(ων) από τη βιβλιοθήκη;",
-    "invalidEncryptionKey": "Το κλειδί κρυπτογράφησης πρέπει να είναι 22 χαρακτήρες. Η ζωντανή συνεργασία είναι απενεργοποιημένη.",
-    "collabOfflineWarning": "Δεν υπάρχει διαθέσιμη σύνδεση στο internet.\nΟι αλλαγές σας δεν θα αποθηκευτούν!"
+    "invalidEncryptionKey": "Το κλειδί κρυπτογράφησης πρέπει να είναι 22 χαρακτήρες. Η ζωντανή συνεργασία είναι απενεργοποιημένη."
  },
  "errors": {
    "unsupportedFileType": "Μη υποστηριζόμενος τύπος αρχείου.",
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -110,7 +110,6 @@
    "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",
--- a/src/locales/es-ES.json
+++ b/src/locales/es-ES.json
@ -103,7 +103,7 @@
    "share": "Compartir",
    "showStroke": "Mostrar selector de color de trazo",
    "showBackground": "Mostrar el selector de color de fondo",
-    "toggleTheme": "Cambiar tema",
+    "toggleTheme": "Alternar tema",
    "personalLib": "Biblioteca personal",
    "excalidrawLib": "Biblioteca Excalidraw",
    "decreaseFontSize": "Disminuir tamaño de letra",
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "No hay conexión a internet disponible.\n¡No se guardarán los cambios!"
+    "invalidEncryptionKey": "La clave de cifrado debe tener 22 caracteres. La colaboración en vivo está deshabilitada."
  },
  "errors": {
    "unsupportedFileType": "Tipo de archivo no admitido.",
@ -234,7 +233,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 Ctrl/Cmd + ENTER para terminar de editar",
+    "text_editing": "Pulse Escape o CtrlOrCmd+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",
@ -315,7 +314,7 @@
    "title": "Ayuda",
    "view": "Vista",
    "zoomToFit": "Ajustar la vista para mostrar todos los elementos",
-    "zoomToSelection": "Ampliar selección",
+    "zoomToSelection": "Zoom a la selección",
    "toggleElementLock": "Bloquear/desbloquear selección",
    "movePageUpDown": "Mover página hacia arriba/abajo",
    "movePageLeftRight": "Mover página hacia la izquierda/derecha"
@ -327,9 +326,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 biblioteca",
+    "libraryName": "Nombre de la librería",
    "libraryDesc": "Descripción de la biblioteca",
    "website": "Sitio Web",
    "placeholder": {
@ -337,7 +336,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í sabemos a quién acreditar cuando se promociona en Twitter",
+      "twitterHandle": "Nombre de usuario de Twitter (opcional), así que sabemos a quién acreditar cuando se promociona en Twitter",
      "website": "Enlace a su sitio web personal o en cualquier otro lugar (opcional)"
    },
    "errors": {
@ -459,7 +458,7 @@
      "menuHint": "Exportar, preferencias y más...",
      "center_heading": "Diagramas. Hecho. Simplemente.",
      "toolbarHint": "¡Elige una herramienta y empieza a dibujar!",
-      "helpHint": "Atajos y ayuda"
+      "helpHint": "Atajos & ayuda"
    }
  }
 }
--- a/src/locales/eu-ES.json
+++ b/src/locales/eu-ES.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Ez dago Interneteko konexiorik.\nZure aldaketak ez dira gordeko!"
+    "invalidEncryptionKey": "Enkriptazio-gakoak 22 karaktere izan behar ditu. Zuzeneko lankidetza desgaituta dago."
  },
  "errors": {
    "unsupportedFileType": "Onartu gabeko fitxategi mota.",
@ -221,7 +220,7 @@
    "penMode": "Luma modua - ukipena saihestu",
    "link": "Gehitu / Eguneratu esteka hautatutako forma baterako",
    "eraser": "Borragoma",
-    "hand": "Eskua (panoratze tresna)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Canvas ekintzak",
@ -229,7 +228,7 @@
    "shapes": "Formak"
  },
  "hints": {
-    "canvasPanning": "Oihala mugitzeko, eutsi saguaren gurpila edo zuriune-barra arrastatzean, edo erabili esku tresna",
+    "canvasPanning": "",
    "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",
@ -248,7 +247,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": "Ezaugarri hau \"dom.events.asyncClipboard.clipboardItem\" marka \"true\" gisa ezarrita gaitu daiteke. Firefox-en arakatzailearen banderak aldatzeko, bisitatu \"about:config\" orrialdera."
+    "firefox_clipboard_write": ""
  },
  "canvasError": {
    "cannotShowPreview": "Ezin da oihala aurreikusi",
--- a/src/locales/fa-IR.json
+++ b/src/locales/fa-IR.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "بوم نقاشی از آدرس ارائه شده وارد نشد. این یا نادرست است، یا حاوی داده Excalidraw JSON معتبر نیست.",
    "resetLibrary": "ین کار کل صفحه را پاک میکند. آیا مطمئنید?",
    "removeItemsFromsLibrary": "حذف {{count}} آیتم(ها) از کتابخانه?",
-    "invalidEncryptionKey": "کلید رمزگذاری باید 22 کاراکتر باشد. همکاری زنده غیرفعال است.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "کلید رمزگذاری باید 22 کاراکتر باشد. همکاری زنده غیرفعال است."
  },
  "errors": {
    "unsupportedFileType": "نوع فایل پشتیبانی نشده.",
--- a/src/locales/fi-FI.json
+++ b/src/locales/fi-FI.json
@ -1,7 +1,7 @@
 {
  "labels": {
    "paste": "Liitä",
-    "pasteAsPlaintext": "Liitä pelkkänä tekstinä",
+    "pasteAsPlaintext": "",
    "pasteCharts": "Liitä kaaviot",
    "selectAll": "Valitse kaikki",
    "multiSelect": "Lisää kohde valintaan",
@ -72,7 +72,7 @@
    "layers": "Tasot",
    "actions": "Toiminnot",
    "language": "Kieli",
-    "liveCollaboration": "Live Yhteistyö...",
+    "liveCollaboration": "",
    "duplicateSelection": "Monista",
    "untitled": "Nimetön",
    "name": "Nimi",
@ -116,14 +116,14 @@
      "label": "Linkki"
    },
    "lineEditor": {
-      "edit": "Muokkaa riviä",
-      "exit": "Poistu rivieditorista"
+      "edit": "",
+      "exit": ""
    },
    "elementLock": {
-      "lock": "Lukitse",
-      "unlock": "Poista lukitus",
-      "lockAll": "Lukitse kaikki",
-      "unlockAll": "Poista lukitus kaikista"
+      "lock": "",
+      "unlock": "",
+      "lockAll": "",
+      "unlockAll": ""
    },
    "statusPublished": "Julkaistu",
    "sidebarLock": "Pidä sivupalkki avoinna"
@ -136,8 +136,8 @@
  "buttons": {
    "clearReset": "Tyhjennä piirtoalue",
    "exportJSON": "Vie tiedostoon",
-    "exportImage": "Vie kuva...",
-    "export": "Tallenna nimellä...",
+    "exportImage": "",
+    "export": "",
    "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": "Avaa",
+    "load": "",
    "getShareableLink": "Hae jaettava linkki",
    "close": "Sulje",
    "selectLanguage": "Valitse kieli",
@ -192,8 +192,7 @@
    "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ä.",
-    "collabOfflineWarning": "Internet-yhteyttä ei ole saatavilla.\nMuutoksiasi ei tallenneta!"
+    "invalidEncryptionKey": "Salausavaimen on oltava 22 merkkiä pitkä. Live-yhteistyö ei ole käytössä."
  },
  "errors": {
    "unsupportedFileType": "Tiedostotyyppiä ei tueta.",
@ -202,9 +201,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": "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."
+    "importLibraryError": "",
+    "collabSaveFailed": "",
+    "collabSaveFailed_sizeExceeded": ""
  },
  "toolBar": {
    "selection": "Valinta",
@ -218,10 +217,10 @@
    "text": "Teksti",
    "library": "Kirjasto",
    "lock": "Pidä valittu työkalu aktiivisena piirron jälkeen",
-    "penMode": "Kynätila - estä kosketus",
+    "penMode": "",
    "link": "Lisää/päivitä linkki valitulle muodolle",
    "eraser": "Poistotyökalu",
-    "hand": "Käsi (panning-työkalu)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Piirtoalueen toiminnot",
@ -229,7 +228,7 @@
    "shapes": "Muodot"
  },
  "hints": {
-    "canvasPanning": "Piirtoalueen liikuttamiseksi pidä hiiren pyörää tai välilyöntiä pohjassa tai käytä käsityökalua",
+    "canvasPanning": "",
    "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",
@ -240,7 +239,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": "Pidä CtrlOrCmd pohjassa ja kaksoisnapsauta tai paina CtrlOrCmd + Enter muokataksesi pisteitä",
+    "lineEditor_info": "",
    "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",
@ -248,7 +247,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": "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."
+    "firefox_clipboard_write": ""
  },
  "canvasError": {
    "cannotShowPreview": "Esikatselua ei voitu näyttää",
@ -316,9 +315,9 @@
    "view": "Näkymä",
    "zoomToFit": "Näytä kaikki elementit",
    "zoomToSelection": "Näytä valinta",
-    "toggleElementLock": "Lukitse / poista lukitus valinta",
-    "movePageUpDown": "Siirrä sivua ylös/alas",
-    "movePageLeftRight": "Siirrä sivua vasemmalle/oikealle"
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
  },
  "clearCanvasDialog": {
    "title": "Pyyhi piirtoalue"
@ -400,7 +399,7 @@
    "fileSavedToFilename": "Tallennettiin kohteeseen {filename}",
    "canvas": "piirtoalue",
    "selection": "valinta",
-    "pasteAsSingleElement": "Käytä {{shortcut}} liittääksesi yhtenä elementtinä,\ntai liittääksesi olemassa olevaan tekstieditoriin"
+    "pasteAsSingleElement": ""
  },
  "colors": {
    "ffffff": "Valkoinen",
@ -451,15 +450,15 @@
  },
  "welcomeScreen": {
    "app": {
-      "center_heading": "Kaikki tietosi on tallennettu paikallisesti selaimellesi.",
-      "center_heading_plus": "Haluatko sen sijaan mennä Excalidraw+:aan?",
-      "menuHint": "Vie, asetukset, kielet, ..."
+      "center_heading": "",
+      "center_heading_plus": "",
+      "menuHint": ""
    },
    "defaults": {
-      "menuHint": "Vie, asetukset ja lisää...",
-      "center_heading": "Kaaviot. Tehty. Yksinkertaiseksi.",
-      "toolbarHint": "Valitse työkalu ja aloita piirtäminen!",
-      "helpHint": "Pikanäppäimet & ohje"
+      "menuHint": "",
+      "center_heading": "",
+      "toolbarHint": "",
+      "helpHint": ""
    }
  }
 }
--- a/src/locales/fr-FR.json
+++ b/src/locales/fr-FR.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Aucune connexion internet disponible.\nVos modifications ne seront pas enregistrées !"
+    "invalidEncryptionKey": "La clé de chiffrement doit comporter 22 caractères. La collaboration en direct est désactivée."
  },
  "errors": {
    "unsupportedFileType": "Type de fichier non supporté.",
--- a/src/locales/gl-ES.json
+++ b/src/locales/gl-ES.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "A clave de cifrado debe ter 22 caracteres. A colaboración en directo está desactivada."
  },
  "errors": {
    "unsupportedFileType": "Tipo de ficheiro non soportado.",
--- a/src/locales/he-IL.json
+++ b/src/locales/he-IL.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "ייבוא המידע מן סצינה מכתובת האינטרנט נכשלה. המידע בנוי באופן משובש או שהוא אינו קובץ JSON תקין של Excalidraw.",
    "resetLibrary": "פעולה זו תנקה את כל הלוח. אתה בטוח?",
    "removeItemsFromsLibrary": "מחיקת {{count}} פריטים(ים) מתוך הספריה?",
-    "invalidEncryptionKey": "מפתח ההצפנה חייב להיות בן 22 תוים. השיתוף החי מבוטל.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "מפתח ההצפנה חייב להיות בן 22 תוים. השיתוף החי מבוטל."
  },
  "errors": {
    "unsupportedFileType": "סוג הקובץ אינו נתמך.",
--- a/src/locales/hi-IN.json
+++ b/src/locales/hi-IN.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "दिये गये युआरेल से दृश्य आयात नहीं किया जा सका. यह या तो अनुचित है, या इसमें उचित Excalidraw JSON डेटा नहीं है।",
    "resetLibrary": "यह पूरा संग्रह रिक्त करेगा. क्या आपको यक़ीन हैं?",
    "removeItemsFromsLibrary": "{{count}} वस्तु(यें) संग्रह से हटायें?",
-    "invalidEncryptionKey": "कूटलेखन कुंजी 22 अक्षरों की होनी चाहिये, इसलिये जीवंत सहयोग अक्षम हैं",
-    "collabOfflineWarning": "कोई इंटरनेट कनेक्शन उपलब्ध नहीं है।\nआपके बदलाव सहेजे नहीं जाएंगे!"
+    "invalidEncryptionKey": "कूटलेखन कुंजी 22 अक्षरों की होनी चाहिये, इसलिये जीवंत सहयोग अक्षम हैं"
  },
  "errors": {
    "unsupportedFileType": "असमर्थित फाइल प्रकार",
--- a/src/locales/hu-HU.json
+++ b/src/locales/hu-HU.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "A titkosítási kulcsnak 22 karakterből kell állnia. Az élő együttműködés le van tiltva."
  },
  "errors": {
    "unsupportedFileType": "Nem támogatott fájltípus.",
--- a/src/locales/id-ID.json
+++ b/src/locales/id-ID.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Sandi enkripsi harus 22 karakter. Kolaborasi langsung dinonaktifkan."
  },
  "errors": {
    "unsupportedFileType": "Tipe file tidak didukung.",
--- a/src/locales/it-IT.json
+++ b/src/locales/it-IT.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Nessuna connessione internet disponibile.\nLe tue modifiche non verranno salvate!"
+    "invalidEncryptionKey": "La chiave di cifratura deve essere composta da 22 caratteri. La collaborazione live è disabilitata."
  },
  "errors": {
    "unsupportedFileType": "Tipo di file non supportato.",
--- a/src/locales/ja-JP.json
+++ b/src/locales/ja-JP.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "指定された URL からシーンをインポートできませんでした。不正な形式であるか、有効な Excalidraw JSON データが含まれていません。",
    "resetLibrary": "ライブラリを消去します。本当によろしいですか？",
    "removeItemsFromsLibrary": "{{count}} 個のアイテムをライブラリから削除しますか？",
-    "invalidEncryptionKey": "暗号化キーは22文字でなければなりません。ライブコラボレーションは無効化されています。",
-    "collabOfflineWarning": "インターネットに接続されていません。\n変更は保存されません！"
+    "invalidEncryptionKey": "暗号化キーは22文字でなければなりません。ライブコラボレーションは無効化されています。"
  },
  "errors": {
    "unsupportedFileType": "サポートされていないファイル形式です。",
@ -221,7 +220,7 @@
    "penMode": "ペンモード - タッチ防止",
    "link": "選択した図形のリンクを追加/更新",
    "eraser": "消しゴム",
-    "hand": "手 (パンニングツール)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "キャンバス操作",
@ -229,7 +228,7 @@
    "shapes": "図形"
  },
  "hints": {
-    "canvasPanning": "キャンバスを移動するには、マウスホイールまたはスペースバーを押しながらドラッグするか、手ツールを使用します",
+    "canvasPanning": "",
    "linearElement": "クリックすると複数の頂点からなる曲線を開始、ドラッグすると直線",
    "freeDraw": "クリックしてドラッグします。離すと終了します",
    "text": "ヒント: 選択ツールを使用して任意の場所をダブルクリックしてテキストを追加することもできます",
--- a/src/locales/kab-KAB.json
+++ b/src/locales/kab-KAB.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Tasarut n uwgelhen isefk ad tesɛu 22 n yiekkilen. Amɛiwen srid yensa."
  },
  "errors": {
    "unsupportedFileType": "Anaw n ufaylu ur yettwasefrak ara.",
--- a/src/locales/kk-KZ.json
+++ b/src/locales/kk-KZ.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/ko-KR.json
+++ b/src/locales/ko-KR.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "제공된 URL에서 화면을 가져오는데 실패했습니다. 주소가 잘못되거나, 유효한 Excalidraw JSON 데이터를 포함하고 있지 않은 것일 수 있습니다.",
    "resetLibrary": "당신의 라이브러리를 초기화 합니다. 계속하시겠습니까?",
    "removeItemsFromsLibrary": "{{count}}개의 아이템을 라이브러리에서 삭제하시겠습니까?",
-    "invalidEncryptionKey": "암호화 키는 반드시 22글자여야 합니다. 실시간 협업이 비활성화됩니다.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "암호화 키는 반드시 22글자여야 합니다. 실시간 협업이 비활성화됩니다."
  },
  "errors": {
    "unsupportedFileType": "지원하지 않는 파일 형식 입니다.",
--- a/src/locales/ku-TR.json
+++ b/src/locales/ku-TR.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "ناتوانێت دیمەنەکە هاوردە بکات لە URL ی دابینکراو. یان نادروستە، یان داتای \"ئێکسکالیدراو\" JSON ی دروستی تێدا نییە.",
    "resetLibrary": "ئەمە کتێبخانەکەت خاوێن دەکاتەوە. ئایا دڵنیایت?",
    "removeItemsFromsLibrary": "سڕینەوەی {{count}} ئایتم(ەکان) لە کتێبخانە؟",
-    "invalidEncryptionKey": "کلیلی رەمزاندن دەبێت لە 22 پیت بێت. هاوکاری ڕاستەوخۆ لە کارخراوە.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "کلیلی رەمزاندن دەبێت لە 22 پیت بێت. هاوکاری ڕاستەوخۆ لە کارخراوە."
  },
  "errors": {
    "unsupportedFileType": "جۆری فایلی پشتگیری نەکراو.",
--- a/src/locales/lt-LT.json
+++ b/src/locales/lt-LT.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Šifravimo raktas turi būti iš 22 simbolių. Redagavimas gyvai yra išjungtas."
  },
  "errors": {
    "unsupportedFileType": "Nepalaikomas failo tipas.",
--- a/src/locales/lv-LV.json
+++ b/src/locales/lv-LV.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Šifrēšanas atslēgai jābūt 22 simbolus garai. Tiešsaistes sadarbība ir izslēgta."
  },
  "errors": {
    "unsupportedFileType": "Neatbalstīts datnes veids.",
--- a/src/locales/mr-IN.json
+++ b/src/locales/mr-IN.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "दिलेल्या यू-आर-एल पासून दृश्य आणू शकलो नाही. तो एकतर बरोबार नाही आहे किंवा त्यात वैध एक्सकेलीड्रॉ जेसन डेटा नाही.",
    "resetLibrary": "पटल स्वच्छ होणार, तुम्हाला खात्री आहे का?",
    "removeItemsFromsLibrary": "संग्रहातून {{count}} तत्व (एक किव्हा अनेक) काढू?",
-    "invalidEncryptionKey": "कूटबद्धन कुंजी 22 अक्षरांची असणे आवश्यक आहे. थेट सहयोग अक्षम केले आहे.",
-    "collabOfflineWarning": "इंटरनेट कनेक्शन उपलब्ध नाही.\nतुमचे बदल जतन केले जाणार नाहीत!"
+    "invalidEncryptionKey": "कूटबद्धन कुंजी 22 अक्षरांची असणे आवश्यक आहे. थेट सहयोग अक्षम केले आहे."
  },
  "errors": {
    "unsupportedFileType": "असमर्थित फाइल प्रकार.",
--- a/src/locales/my-MM.json
+++ b/src/locales/my-MM.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/nb-NO.json
+++ b/src/locales/nb-NO.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Ingen Internett-tilkobling tilgjengelig.\nEndringer dine vil ikke bli lagret!"
+    "invalidEncryptionKey": "Krypteringsnøkkel må ha 22 tegn. Live-samarbeid er deaktivert."
  },
  "errors": {
    "unsupportedFileType": "Filtypen støttes ikke.",
--- a/src/locales/nl-NL.json
+++ b/src/locales/nl-NL.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Encryptiesleutel moet 22 tekens zijn. Live samenwerking is uitgeschakeld."
  },
  "errors": {
    "unsupportedFileType": "Niet-ondersteund bestandstype.",
--- a/src/locales/nn-NO.json
+++ b/src/locales/nn-NO.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Krypteringsnøkkelen må ha 22 teikn. Sanntidssamarbeid er deaktivert."
  },
  "errors": {
    "unsupportedFileType": "Filtypen er ikkje støtta.",
--- a/src/locales/oc-FR.json
+++ b/src/locales/oc-FR.json
@ -192,8 +192,7 @@
    "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.",
-    "collabOfflineWarning": "Cap de connexion pas disponibla.\nVòstras modificacions seràn pas salvadas !"
+    "invalidEncryptionKey": "La clau de chiframent deu conténer 22 caractèrs. La collaboracion en dirèct es desactivada."
  },
  "errors": {
    "unsupportedFileType": "Tipe de fichièr pas pres en carga.",
@ -221,7 +220,7 @@
    "penMode": "Mòde estilo - empachar lo contact",
    "link": "Apondre/Actualizar lo ligam per una fòrma seleccionada",
    "eraser": "Goma",
-    "hand": "Man (aisina de desplaçament de la vista)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Accions del canabàs",
@ -240,7 +239,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": "Tenètz quichat Ctrl o Cmd e doble clic o quichatz Ctrl o Cmd + Entrada per modificar los ponches",
+    "lineEditor_info": "",
    "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",
@ -317,8 +316,8 @@
    "zoomToFit": "Zoomar per veire totes los elements",
    "zoomToSelection": "Zoomar la seleccion",
    "toggleElementLock": "Verrolhar/Desverrolhar la seleccion",
-    "movePageUpDown": "Desplaçar la pagina ennaut/enbàs",
-    "movePageLeftRight": "Desplaçar la pagina a esquèrra/drecha"
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
  },
  "clearCanvasDialog": {
    "title": "Escafar canabàs"
--- a/src/locales/pa-IN.json
+++ b/src/locales/pa-IN.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "ਦਿੱਤੀ ਗਈ URL 'ਚੋਂ ਦ੍ਰਿਸ਼ ਨੂੰ ਆਯਾਤ ਨਹੀਂ ਕਰ ਸਕੇ। ਇਹ ਜਾਂ ਤਾਂ ਖਰਾਬ ਹੈ, ਜਾਂ ਇਸ ਵਿੱਚ ਜਾਇਜ਼ Excalidraw JSON ਡਾਟਾ ਸ਼ਾਮਲ ਨਹੀਂ ਹੈ।",
    "resetLibrary": "ਇਹ ਤੁਹਾਡੀ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਸਾਫ ਕਰ ਦੇਵੇਗਾ। ਕੀ ਤੁਸੀਂ ਪੱਕਾ ਇੰਝ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?",
    "removeItemsFromsLibrary": "ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚੋਂ {{count}} ਚੀਜ਼(-ਜ਼ਾਂ) ਮਿਟਾਉਣੀਆਂ ਹਨ?",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/percentages.json
+++ b/src/locales/percentages.json
@ -1,26 +1,26 @@
 {
  "ar-SA": 92,
  "bg-BG": 54,
-  "bn-BD": 59,
-  "ca-ES": 100,
-  "cs-CZ": 74,
-  "da-DK": 32,
+  "bn-BD": 60,
+  "ca-ES": 93,
+  "cs-CZ": 75,
+  "da-DK": 33,
  "de-DE": 100,
  "el-GR": 99,
  "en": 100,
  "es-ES": 100,
-  "eu-ES": 100,
+  "eu-ES": 99,
  "fa-IR": 95,
-  "fi-FI": 100,
+  "fi-FI": 92,
  "fr-FR": 100,
-  "gl-ES": 99,
+  "gl-ES": 100,
  "he-IL": 89,
  "hi-IN": 71,
-  "hu-HU": 88,
+  "hu-HU": 89,
  "id-ID": 99,
  "it-IT": 100,
-  "ja-JP": 100,
-  "kab-KAB": 93,
+  "ja-JP": 99,
+  "kab-KAB": 94,
  "kk-KZ": 20,
  "ko-KR": 98,
  "ku-TR": 95,
@ -31,22 +31,22 @@
  "nb-NO": 100,
  "nl-NL": 90,
  "nn-NO": 89,
-  "oc-FR": 98,
-  "pa-IN": 82,
+  "oc-FR": 97,
+  "pa-IN": 83,
  "pl-PL": 84,
-  "pt-BR": 100,
-  "pt-PT": 100,
-  "ro-RO": 100,
+  "pt-BR": 97,
+  "pt-PT": 99,
+  "ro-RO": 99,
  "ru-RU": 100,
  "si-LK": 8,
  "sk-SK": 100,
  "sl-SI": 100,
  "sv-SE": 100,
-  "ta-IN": 94,
+  "ta-IN": 92,
  "tr-TR": 97,
  "uk-UA": 96,
  "vi-VN": 20,
  "zh-CN": 100,
-  "zh-HK": 25,
+  "zh-HK": 26,
  "zh-TW": 100
 }
--- a/src/locales/pl-PL.json
+++ b/src/locales/pl-PL.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Nie udało się zaimportować sceny z podanego adresu URL. Jest ona wadliwa lub nie zawiera poprawnych danych Excalidraw w formacie JSON.",
    "resetLibrary": "To wyczyści twoją bibliotekę. Jesteś pewien?",
    "removeItemsFromsLibrary": "Usunąć {{count}} element(ów) z biblioteki?",
-    "invalidEncryptionKey": "Klucz szyfrowania musi składać się z 22 znaków. Współpraca na żywo jest wyłączona.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Klucz szyfrowania musi składać się z 22 znaków. Współpraca na żywo jest wyłączona."
  },
  "errors": {
    "unsupportedFileType": "Nieobsługiwany typ pliku.",
--- a/src/locales/pt-BR.json
+++ b/src/locales/pt-BR.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Não foi possível importar a cena da URL fornecida. Ela está incompleta ou não contém dados JSON válidos do Excalidraw.",
    "resetLibrary": "Isto limpará a sua biblioteca. Você tem certeza?",
    "removeItemsFromsLibrary": "Excluir {{count}} item(ns) da biblioteca?",
-    "invalidEncryptionKey": "A chave de encriptação deve ter 22 caracteres. A colaboração ao vivo está desabilitada.",
-    "collabOfflineWarning": "Sem conexão com a internet disponível.\nSuas alterações não serão salvas!"
+    "invalidEncryptionKey": "A chave de encriptação deve ter 22 caracteres. A colaboração ao vivo está desabilitada."
  },
  "errors": {
    "unsupportedFileType": "Tipo de arquivo não suportado.",
@ -221,7 +220,7 @@
    "penMode": "Modo caneta — impede o toque",
    "link": "Adicionar/Atualizar link para uma forma selecionada",
    "eraser": "Borracha",
-    "hand": "Mão (ferramenta de rolagem)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Ações da tela",
@ -229,7 +228,7 @@
    "shapes": "Formas"
  },
  "hints": {
-    "canvasPanning": "Para mover a tela, segure a roda do mouse ou a barra de espaço enquanto arrasta ou use a ferramenta de mão",
+    "canvasPanning": "",
    "linearElement": "Clique para iniciar vários pontos, arraste para uma única linha",
    "freeDraw": "Toque e arraste, solte quando terminar",
    "text": "Dica: você também pode adicionar texto clicando duas vezes em qualquer lugar com a ferramenta de seleção",
@ -248,7 +247,7 @@
    "bindTextToElement": "Pressione Enter para adicionar o texto",
    "deepBoxSelect": "Segure Ctrl/Cmd para seleção profunda e para evitar arrastar",
    "eraserRevert": "Segure a tecla Alt para inverter os elementos marcados para exclusão",
-    "firefox_clipboard_write": "Esse recurso pode ser ativado configurando a opção \"dom.events.asyncClipboard.clipboardItem\" como \"true\". Para alterar os sinalizadores do navegador no Firefox, visite a página \"about:config\"."
+    "firefox_clipboard_write": ""
  },
  "canvasError": {
    "cannotShowPreview": "Não é possível mostrar pré-visualização",
@ -451,15 +450,15 @@
  },
  "welcomeScreen": {
    "app": {
-      "center_heading": "Todos os dados são salvos localmente no seu navegador.",
-      "center_heading_plus": "Você queria ir para o Excalidraw+ em vez disso?",
-      "menuHint": "Exportar, preferências, idiomas..."
+      "center_heading": "",
+      "center_heading_plus": "",
+      "menuHint": ""
    },
    "defaults": {
-      "menuHint": "Exportar, preferências e mais...",
-      "center_heading": "Diagramas, Feito. Simples.",
-      "toolbarHint": "Escolha uma ferramenta e comece a desenhar!",
-      "helpHint": "Atalhos e ajuda"
+      "menuHint": "",
+      "center_heading": "",
+      "toolbarHint": "",
+      "helpHint": ""
    }
  }
 }
--- a/src/locales/pt-PT.json
+++ b/src/locales/pt-PT.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Não foi possível importar a cena a partir do URL fornecido. Ou está mal formado ou não contém dados JSON do Excalidraw válidos.",
    "resetLibrary": "Isto irá limpar a sua biblioteca. Tem a certeza?",
    "removeItemsFromsLibrary": "Apagar {{count}} item(ns) da biblioteca?",
-    "invalidEncryptionKey": "Chave de encriptação deve ter 22 caracteres. A colaboração ao vivo está desativada.",
-    "collabOfflineWarning": "Sem ligação à internet disponível.\nAs suas alterações não serão salvas!"
+    "invalidEncryptionKey": "Chave de encriptação deve ter 22 caracteres. A colaboração ao vivo está desativada."
  },
  "errors": {
    "unsupportedFileType": "Tipo de ficheiro não suportado.",
@ -221,7 +220,7 @@
    "penMode": "Modo caneta - impedir toque",
    "link": "Acrescentar/ Adicionar ligação para uma forma seleccionada",
    "eraser": "Borracha",
-    "hand": "Mão (ferramenta de movimento da tela)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Ações da área de desenho",
@ -229,7 +228,7 @@
    "shapes": "Formas"
  },
  "hints": {
-    "canvasPanning": "Para mover a tela, carregue na roda do rato ou na barra de espaço enquanto arrasta, ou use a ferramenta da mão",
+    "canvasPanning": "",
    "linearElement": "Clique para iniciar vários pontos, arraste para uma única linha",
    "freeDraw": "Clique e arraste, large quando terminar",
    "text": "Dica: também pode adicionar texto clicando duas vezes em qualquer lugar com a ferramenta de seleção",
@ -248,7 +247,7 @@
    "bindTextToElement": "Carregue Enter para acrescentar texto",
    "deepBoxSelect": "Mantenha a tecla CtrlOrCmd carregada para selecção profunda, impedindo o arrastamento",
    "eraserRevert": "Carregue também em Alt para reverter os elementos marcados para serem apagados",
-    "firefox_clipboard_write": "Esta função pode provavelmente ser ativada definindo a opção \"dom.events.asyncClipboard.clipboardItem\" como \"true\". Para alterar os sinalizadores do navegador no Firefox, visite a página \"about:config\"."
+    "firefox_clipboard_write": ""
  },
  "canvasError": {
    "cannotShowPreview": "Não é possível mostrar uma pré-visualização",
--- a/src/locales/ro-RO.json
+++ b/src/locales/ro-RO.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Scena nu a putut fi importată din URL-ul furnizat. Este fie incorect formată, fie nu conține date JSON Excalidraw valide.",
    "resetLibrary": "Această opțiune va elimina conținutul din bibliotecă. Confirmi?",
    "removeItemsFromsLibrary": "Ștergi {{count}} element(e) din bibliotecă?",
-    "invalidEncryptionKey": "Cheia de criptare trebuie să aibă 22 de caractere. Colaborarea în direct este dezactivată.",
-    "collabOfflineWarning": "Nu este disponibilă nicio conexiune la internet.\nModificările nu vor fi salvate!"
+    "invalidEncryptionKey": "Cheia de criptare trebuie să aibă 22 de caractere. Colaborarea în direct este dezactivată."
  },
  "errors": {
    "unsupportedFileType": "Tip de fișier neacceptat.",
@ -221,7 +220,7 @@
    "penMode": "Mod stilou – împiedică atingerea",
    "link": "Adăugare/actualizare URL pentru forma selectată",
    "eraser": "Radieră",
-    "hand": "Mână (instrument de panoramare)"
+    "hand": ""
  },
  "headings": {
    "canvasActions": "Acțiuni pentru pânză",
@ -229,7 +228,7 @@
    "shapes": "Forme"
  },
  "hints": {
-    "canvasPanning": "Pentru a muta pânză, ține apăsată rotița mausului sau bara de spațiu sau folosește instrumentul în formă de mână",
+    "canvasPanning": "",
    "linearElement": "Dă clic pentru a crea mai multe puncte, glisează pentru a forma o singură linie",
    "freeDraw": "Dă clic pe pânză și glisează cursorul, apoi eliberează-l când ai terminat",
    "text": "Sfat: poți adăuga text și dând dublu clic oriunde cu instrumentul de selecție",
@ -248,7 +247,7 @@
    "bindTextToElement": "Apasă tasta Enter pentru a adăuga text",
    "deepBoxSelect": "Ține apăsată tasta Ctrl sau Cmd pentru a efectua selectarea de adâncime și pentru a preveni glisarea",
    "eraserRevert": "Ține apăsată tasta Alt pentru a anula elementele marcate pentru ștergere",
-    "firefox_clipboard_write": "Această caracteristică poate fi probabil activată prin setarea preferinței „dom.events.asyncClipboard.clipboardItem” ca „true”. Pentru a schimba preferințele navigatorului în Firefox, accesează pagina „about:config”."
+    "firefox_clipboard_write": ""
  },
  "canvasError": {
    "cannotShowPreview": "Nu se poate afișa previzualizarea",
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Невозможно импортировать сцену с предоставленного URL. Неверный формат, или не содержит верных Excalidraw JSON данных.",
    "resetLibrary": "Это очистит вашу библиотеку. Вы уверены?",
    "removeItemsFromsLibrary": "Удалить {{count}} объект(ов) из библиотеки?",
-    "invalidEncryptionKey": "Ключ шифрования должен состоять из 22 символов. Одновременное редактирование отключено.",
-    "collabOfflineWarning": "Отсутствует интернет-соединение.\nВаши изменения не будут сохранены!"
+    "invalidEncryptionKey": "Ключ шифрования должен состоять из 22 символов. Одновременное редактирование отключено."
  },
  "errors": {
    "unsupportedFileType": "Неподдерживаемый тип файла.",
--- a/src/locales/si-LK.json
+++ b/src/locales/si-LK.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/sk-SK.json
+++ b/src/locales/sk-SK.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Nepodarilo sa načítať scénu z poskytnutej URL. Je nevalidná alebo neobsahuje žiadne validné Excalidraw JSON dáta.",
    "resetLibrary": "Týmto vyprázdnite vašu knižnicu. Ste si istý?",
    "removeItemsFromsLibrary": "Odstrániť {{count}} položiek z knižnice?",
-    "invalidEncryptionKey": "Šifrovací kľúč musí mať 22 znakov. Živá spolupráca je vypnutá.",
-    "collabOfflineWarning": "Internetové pripojenie nie je dostupné.\nVaše zmeny nebudú uložené!"
+    "invalidEncryptionKey": "Šifrovací kľúč musí mať 22 znakov. Živá spolupráca je vypnutá."
  },
  "errors": {
    "unsupportedFileType": "Nepodporovaný typ súboru.",
--- a/src/locales/sl-SI.json
+++ b/src/locales/sl-SI.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "S priloženega URL-ja ni bilo mogoče uvoziti scene. Je napačno oblikovana ali pa ne vsebuje veljavnih podatkov Excalidraw JSON.",
    "resetLibrary": "To bo počistilo vašo knjižnico. Ali ste prepričani?",
    "removeItemsFromsLibrary": "Izbriši elemente ({{count}}) iz knjižnice?",
-    "invalidEncryptionKey": "Ključ za šifriranje mora vsebovati 22 znakov. Sodelovanje v živo je onemogočeno.",
-    "collabOfflineWarning": "Internetna povezava ni na voljo.\nVaše spremembe ne bodo shranjene!"
+    "invalidEncryptionKey": "Ključ za šifriranje mora vsebovati 22 znakov. Sodelovanje v živo je onemogočeno."
  },
  "errors": {
    "unsupportedFileType": "Nepodprt tip datoteke.",
--- a/src/locales/sv-SE.json
+++ b/src/locales/sv-SE.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Det gick inte att importera skiss från den angivna webbadressen. Antingen har den fel format, eller så innehåller den ingen giltig Excalidraw JSON data.",
    "resetLibrary": "Detta kommer att rensa ditt bibliotek. Är du säker?",
    "removeItemsFromsLibrary": "Ta bort {{count}} objekt från biblioteket?",
-    "invalidEncryptionKey": "Krypteringsnyckeln måste vara 22 tecken. Livesamarbetet är inaktiverat.",
-    "collabOfflineWarning": "Ingen internetanslutning tillgänglig.\nDina ändringar kommer inte att sparas!"
+    "invalidEncryptionKey": "Krypteringsnyckeln måste vara 22 tecken. Livesamarbetet är inaktiverat."
  },
  "errors": {
    "unsupportedFileType": "Filtypen stöds inte.",
--- a/src/locales/ta-IN.json
+++ b/src/locales/ta-IN.json
@ -1,7 +1,7 @@
 {
  "labels": {
    "paste": "ஒட்டு",
-    "pasteAsPlaintext": "அலங்காரமின்றி ஒட்டு",
+    "pasteAsPlaintext": "",
    "pasteCharts": "விளக்கப்படங்களை ஒட்டு",
    "selectAll": "எல்லாம் தேர்ந்தெடு",
    "multiSelect": "உறுப்பைத் தெரிவில் சேர்",
@ -54,7 +54,7 @@
    "veryLarge": "மிகப் பெரிய",
    "solid": "திடமான",
    "hachure": "மலைக்குறிக்கோடு",
-    "crossHatch": "குறுக்குகதவு",
+    "crossHatch": "",
    "thin": "மெல்லிய",
    "bold": "பட்டை",
    "left": "இடது",
@ -72,7 +72,7 @@
    "layers": "அடுக்குகள்",
    "actions": "செயல்கள்",
    "language": "மொழி",
-    "liveCollaboration": "நேரடி கூட்டுப்பணி...",
+    "liveCollaboration": "",
    "duplicateSelection": "நகலாக்கு",
    "untitled": "தலைப்பற்றது",
    "name": "பெயர்",
@ -116,7 +116,7 @@
      "label": "தொடுப்பு"
    },
    "lineEditor": {
-      "edit": "தொடுப்பைத் திருத்து",
+      "edit": "",
      "exit": ""
    },
    "elementLock": {
@ -137,7 +137,7 @@
    "clearReset": "கித்தானை அகரமாக்கு",
    "exportJSON": "கோப்புக்கு ஏற்றுமதிசெய்",
    "exportImage": "",
-    "export": "இதில் சேமி...",
+    "export": "",
    "exportToPng": "PNGக்கு ஏற்றுமதிசெய்",
    "exportToSvg": "SVGக்கு ஏற்றுமதிசெய்",
    "copyToClipboard": "நகலகத்திற்கு நகலெடு",
@ -145,7 +145,7 @@
    "scale": "அளவு",
    "save": "தற்போதைய கோப்புக்குச் சேமி",
    "saveAs": "இப்படி சேமி",
-    "load": "திற",
+    "load": "",
    "getShareableLink": "பகிரக்கூடிய தொடுப்பைப் பெறு",
    "close": "மூடு",
    "selectLanguage": "மொழியைத் தேர்ந்தெடு",
@ -192,8 +192,7 @@
    "invalidSceneUrl": "வழங்கப்பட்ட உரலியிலிருந்து காட்சியை இறக்கவியலா. இது தவறான வடிவத்தில் உள்ளது, அ செல்லத்தக்க எக்ஸ்கேலிட்ரா JSON தரவைக் கொண்டில்லை.",
    "resetLibrary": "இது உங்கள் நுலகத்தைத் துடைக்கும். நீங்கள் உறுதியா?",
    "removeItemsFromsLibrary": "{{count}} உருப்படி(கள்)-ஐ உம் நூலகத்திலிருந்து அழிக்கவா?",
-    "invalidEncryptionKey": "மறையாக்க விசை 22 வரியுருக்கள் கொண்டிருக்கவேண்டும். நேரடி கூட்டுப்பணி முடக்கப்பட்டது.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "மறையாக்க விசை 22 வரியுருக்கள் கொண்டிருக்கவேண்டும். நேரடி கூட்டுப்பணி முடக்கப்பட்டது."
  },
  "errors": {
    "unsupportedFileType": "ஆதரிக்கப்படா கோப்பு வகை.",
@ -457,9 +456,9 @@
    },
    "defaults": {
      "menuHint": "",
-      "center_heading": "எளிமையாக வரைபடங்கள் உருவாக்க!",
-      "toolbarHint": "கருவியைத் தேர்ந்தெடு & வரை!",
-      "helpHint": "குறுக்குவழிகள் & உதவி"
+      "center_heading": "",
+      "toolbarHint": "",
+      "helpHint": ""
    }
  }
 }
--- a/src/locales/tr-TR.json
+++ b/src/locales/tr-TR.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Verilen bağlantıdan çalışma alanı yüklenemedi. Dosya bozuk olabilir veya geçerli bir Excalidraw JSON verisi bulundurmuyor olabilir.",
    "resetLibrary": "Bu işlem kütüphanenizi sıfırlayacak. Emin misiniz?",
    "removeItemsFromsLibrary": "{{count}} öğe(ler) kitaplıktan kaldırılsın mı?",
-    "invalidEncryptionKey": "Şifreleme anahtarı 22 karakter olmalı. Canlı işbirliği devre dışı bırakıldı.",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": "Şifreleme anahtarı 22 karakter olmalı. Canlı işbirliği devre dışı bırakıldı."
  },
  "errors": {
    "unsupportedFileType": "Desteklenmeyen dosya türü.",
--- a/src/locales/uk-UA.json
+++ b/src/locales/uk-UA.json
@ -72,7 +72,7 @@
    "layers": "Шари",
    "actions": "Дії",
    "language": "Мова",
-    "liveCollaboration": "Спільна робота у режимі реального часу...",
+    "liveCollaboration": "",
    "duplicateSelection": "Дублювати",
    "untitled": "Без назви",
    "name": "Ім’я",
@ -192,8 +192,7 @@
    "invalidSceneUrl": "Не вдалося імпортувати сцену з наданого URL. Він або недоформований, або не містить дійсних даних Excalidraw JSON.",
    "resetLibrary": "Це призведе до очищення бібліотеки. Ви впевнені?",
    "removeItemsFromsLibrary": "Видалити {{count}} елемент(ів) з бібліотеки?",
-    "invalidEncryptionKey": "Ключ шифрування повинен бути довжиною до 22 символів. Спільну роботу вимкнено.",
-    "collabOfflineWarning": "Немає підключення до Інтернету.\nВаші зміни не будуть збережені!"
+    "invalidEncryptionKey": "Ключ шифрування повинен бути довжиною до 22 символів. Спільну роботу вимкнено."
  },
  "errors": {
    "unsupportedFileType": "Непідтримуваний тип файлу.",
@ -458,8 +457,8 @@
    "defaults": {
      "menuHint": "",
      "center_heading": "",
-      "toolbarHint": "Оберіть інструмент і почніть малювати!",
-      "helpHint": "Гарячі клавіші і допомога"
+      "toolbarHint": "",
+      "helpHint": ""
    }
  }
 }
--- a/src/locales/vi-VN.json
+++ b/src/locales/vi-VN.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "无法从提供的 URL 导入场景。它或者格式不正确，或者不包含有效的 Excalidraw JSON 数据。",
    "resetLibrary": "这将会清除你的素材库。你确定要这么做吗？",
    "removeItemsFromsLibrary": "确定要从素材库中删除 {{count}} 个项目吗？",
-    "invalidEncryptionKey": "密钥必须包含22个字符。实时协作已被禁用。",
-    "collabOfflineWarning": "无网络连接。\n您的改动将不会被保存！"
+    "invalidEncryptionKey": "密钥必须包含22个字符。实时协作已被禁用。"
  },
  "errors": {
    "unsupportedFileType": "不支持的文件格式。",
@ -240,7 +239,7 @@
    "resize": "您可以按住SHIFT来限制比例大小，\n按住ALT来调整中心大小",
    "resizeImage": "按住SHIFT可以自由缩放，\n按住ALT可以从中间缩放",
    "rotate": "旋转时可以按住 Shift 来约束角度",
-    "lineEditor_info": "按住 CtrlOrCmd 并双击或按 CtrlOrCmd + Enter 来编辑点",
+    "lineEditor_info": "按住 CtrlOrCmd 并双击或按 CtrlOrmd + Enter 来编辑点",
    "lineEditor_pointSelected": "按下 Delete 移除点，Ctrl 或 Cmd+D 以复制，拖动以移动",
    "lineEditor_nothingSelected": "选择要编辑的点 (按住 SHIFT 选择多个)，\n或按住 Alt 并点击以添加新点",
    "placeImage": "点击放置图像，或者点击并拖动以手动设置图像大小",
--- a/src/locales/zh-HK.json
+++ b/src/locales/zh-HK.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "",
    "resetLibrary": "",
    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": "",
-    "collabOfflineWarning": ""
+    "invalidEncryptionKey": ""
  },
  "errors": {
    "unsupportedFileType": "",
--- a/src/locales/zh-TW.json
+++ b/src/locales/zh-TW.json
@ -192,8 +192,7 @@
    "invalidSceneUrl": "無法由提供的 URL 匯入場景。可能是發生異常，或未包含有效的 Excalidraw JSON 資料。",
    "resetLibrary": "這會清除您的資料庫，是否確定？",
    "removeItemsFromsLibrary": "從資料庫刪除 {{count}} 項？",
-    "invalidEncryptionKey": "加密鍵必須為22字元。即時協作已停用。",
-    "collabOfflineWarning": "沒有可用的網路連線。\n變更無法儲存！"
+    "invalidEncryptionKey": "加密鍵必須為22字元。即時協作已停用。"
  },
  "errors": {
    "unsupportedFileType": "不支援的檔案類型。",
--- a/src/math.ts
+++ b/src/math.ts
@ -12,7 +12,6 @@ import {
 } from "./element/types";
 import { getShapeForElement } from "./renderer/renderElement";
 import { getCurvePathOps } from "./element/bounds";
-import { Mutable } from "./utility-types";

 export const rotate = (
  x1: number,
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@ -15,12 +15,10 @@ Please add the latest change on the top under the correct section.

 ### Features

- Expose `useI18n()` hook return an object containing `t()` i18n helper and current `langCode`. You can use this in components you render as `<Excalidraw>` children to render any of our i18n locale strings. [#6224](https://github.com/excalidraw/excalidraw/pull/6224)
-
 - [`restoreElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils/restore#restoreelements) API now takes an optional parameter `opts` which currently supports the below attributes

 ```js
-{ refreshDimensions?: boolean, repairBindings?: boolean }
+{ refreshDimensions?: boolean, repair?: boolean }
 ```

 The same `opts` param has been added to [`restore`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils/restore#restore) API as well.
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aakansha Doshi	9c10fe60f1	fix hitbox	2023-02-16 13:29:54 +05:30
Aakansha Doshi	96b172ebfa	support rotation	2023-02-15 17:36:46 +05:30
Aakansha Doshi	16db74cedd	support ellipse	2023-02-15 15:20:12 +05:30
Aakansha Doshi	4d1b31a171	feat: bind text to container when clicked on filled shape or element stroke	2023-02-15 13:32:47 +05:30