publish handleLinkNavigation to app props

2022-02-03 19:18:09 +01:00
226 changed files with 5768 additions and 9991 deletions
@@ -4,10 +4,5 @@ REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

-# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
-REACT_APP_WS_SERVER_URL=http://localhost:3002
-
-# set this only if using the collaboration workflow we use on excalidraw.com
-REACT_APP_PORTAL_URL=
-
+REACT_APP_SOCKET_SERVER_URL=http://localhost:3002
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
@@ -4,11 +4,7 @@ REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

-REACT_APP_PORTAL_URL=https://portal.excalidraw.com
-# Fill to set socket server URL used for collaboration.
-# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
-REACT_APP_WS_SERVER_URL=
-
+REACT_APP_SOCKET_SERVER_URL=https://oss-collab-us1.excalidraw.com
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'

 # production-only vars
@@ -23,5 +23,4 @@ jobs:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      - name: Auto release
        run: |
-          yarn add @actions/core
          yarn autorelease
@@ -1,55 +0,0 @@
-name: Auto release preview @excalidraw/excalidraw-preview
-on:
-  issue_comment:
-    types: [created, edited]
-
-jobs:
-  Auto-release-excalidraw-preview:
-    name: Auto release preview
-    if: github.event.comment.body == '@excalibot release package' && github.event.issue.pull_request
-    runs-on: ubuntu-latest
-    steps:
-      - name: React to release comment
-        uses: peter-evans/create-or-update-comment@v1
-        with:
-          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
-          comment-id: ${{ github.event.comment.id }}
-          reactions: "+1"
-      - name: Get PR SHA
-        id: sha
-        uses: actions/github-script@v4
-        with:
-          result-encoding: string
-          script: |
-            const { owner, repo, number } = context.issue;
-            const pr = await github.pulls.get({
-              owner,
-              repo,
-              pull_number: number,
-            });
-            return pr.data.head.sha
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ steps.sha.outputs.result }}
-          fetch-depth: 2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-      - name: Set up publish access
-        run: |
-          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Auto release preview
-        id: "autorelease"
-        run: |
-          yarn add @actions/core
-          yarn autorelease preview ${{ github.event.issue.number }}
-      - name: Post comment post release
-        if: always()
-        uses: peter-evans/create-or-update-comment@v1
-        with:
-          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
-          issue-number: ${{ github.event.issue.number }}
-          body: "@${{ github.event.comment.user.login }} ${{ steps.autorelease.outputs.result }}"
@@ -0,0 +1,29 @@
+name: Build packages
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  packages:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - name: Install dependencies
+        run: |
+          yarn --frozen-lockfile
+          yarn --cwd src/packages/excalidraw
+          yarn --cwd src/packages/utils
+      - name: Build @excalidraw/excalidraw
+        run: |
+          yarn --cwd src/packages/excalidraw run pack
+      - name: Build @excalidraw/utils
+        run: |
+          yarn --cwd src/packages/utils run pack
@@ -10,7 +10,7 @@ jobs:
      - name: Setup Node.js 14.x
        uses: actions/setup-node@v2
        with:
-          node-version: 14.x
+          node-version: 16.x
      - name: Install and test
        run: |
          yarn --frozen-lockfile
@@ -23,7 +23,3 @@ static
 yarn-debug.log*
 yarn-error.log*
 src/packages/excalidraw/types
-src/packages/excalidraw/example/public/bundle.js
-src/packages/excalidraw/example/public/excalidraw-assets-dev
-src/packages/excalidraw/example/public/excalidraw.development.js
-
@@ -32,10 +32,6 @@ Last but not least, we're thankful to these companies for offering their service

 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.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/) •
-
 ## Documentation

 ### Shortcuts
@@ -128,41 +124,14 @@ For collaboration, you will need to set up [collab server](https://github.com/ex

 #### Commands

-##### Install the dependencies
-
-```
-yarn
-```
-
-##### Run the project
-
-```
-yarn start
-```
-
-##### Reformat all files with Prettier
-
-```
-yarn fix
-```
-
-##### Run tests
-
-```
-yarn test
-```
-
-##### Update test snapshots
-
-```
-yarn test:update
-```
-
-##### Test for formatting with Prettier
-
-```
-yarn test:code
-```
+| Command            | Description                       |
+| ------------------ | --------------------------------- |
+| `yarn`             | Install the dependencies          |
+| `yarn start`       | Run the project                   |
+| `yarn fix`         | Reformat all files with Prettier  |
+| `yarn test`        | Run tests                         |
+| `yarn test:update` | Update test snapshots             |
+| `yarn test:code`   | Test for formatting with Prettier |

 #### Docker Compose

@@ -1,11 +1,12 @@
 rules_version = '2';
 service firebase.storage {
  match /b/{bucket}/o {
-    match /{files}/rooms/{room}/{file} {
-    	allow get, write: if true;
-    }
-    match /{files}/shareLinks/{shareLink}/{file} {
-    	allow get, write: if true;
+    match /{migrations} {
+      match /{scenes}/{scene} {
+      	allow get, write: if true;
+        // redundant, but let's be explicit'
+        allow list: if false;
+      }
    }
  }
 }
@@ -21,22 +21,21 @@
  "dependencies": {
    "@sentry/browser": "6.2.5",
    "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/jest-dom": "5.16.1",
    "@testing-library/react": "12.1.2",
    "@tldraw/vec": "1.4.3",
    "@types/jest": "27.4.0",
    "@types/pica": "5.1.3",
-    "@types/react": "17.0.39",
+    "@types/react": "17.0.38",
    "@types/react-dom": "17.0.11",
    "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.24.1",
+    "browser-fs-access": "0.23.0",
    "clsx": "1.1.1",
    "fake-indexeddb": "3.1.7",
    "firebase": "8.3.3",
    "i18next-browser-languagedetector": "6.1.2",
    "idb-keyval": "6.0.3",
    "image-blob-reduce": "3.0.1",
-    "jotai": "1.6.4",
    "lodash.throttle": "4.1.1",
    "nanoid": "3.1.32",
    "open-color": "1.9.1",
@@ -51,9 +50,9 @@
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
    "roughjs": "4.5.2",
-    "sass": "1.49.7",
+    "sass": "1.47.0",
    "socket.io-client": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.5.4"
  },
  "devDependencies": {
    "@excalidraw/eslint-config": "1.0.0",
@@ -62,19 +61,20 @@
    "@types/lodash.throttle": "4.1.6",
    "@types/pako": "1.0.3",
    "@types/resize-observer-browser": "0.1.6",
-    "chai": "4.3.6",
+    "chai": "4.3.4",
    "dotenv": "10.0.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "3.3.1",
+    "firebase-tools": "9.23.0",
    "husky": "7.0.4",
    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.3.7",
+    "lint-staged": "12.1.7",
    "pepjs": "0.5.3",
    "prettier": "2.5.1",
    "rewire": "5.0.0"
  },
  "resolutions": {
-    "@typescript-eslint/typescript-estree": "5.10.2"
+    "@typescript-eslint/typescript-estree": "5.3.0"
  },
  "engines": {
    "node": ">=14.0.0"
@@ -72,6 +72,12 @@
      crossorigin="anonymous"
    />

+    <link
+      href="%REACT_APP_SOCKET_SERVER_URL%/socket.io"
+      rel="preconnect"
+      crossorigin="anonymous"
+    />
+
    <link
      rel="manifest"
      href="manifest.json"
@@ -124,6 +130,26 @@
        user-select: none;
      }

+      .LoadingMessage {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .LoadingMessage span {
+        background-color: var(--button-gray-1);
+        border-radius: 5px;
+        padding: 0.8em 1.2em;
+        color: var(--popup-text-color);
+        font-size: 1.3em;
+      }
      #root {
        height: 100%;
        -webkit-touch-callout: none;
@@ -132,10 +158,8 @@
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
-      }

-      @media screen and (min-width: 1200px) {
-        #root {
+        @media screen and (min-width: 1200px) {
          -webkit-touch-callout: default;
          -webkit-user-select: auto;
          -khtml-user-select: auto;
@@ -152,6 +176,10 @@
    <header>
      <h1 class="visually-hidden">Excalidraw</h1>
    </header>
-    <div id="root"></div>
+    <div id="root">
+      <div class="LoadingMessage">
+        <span>Loading scene...</span>
+      </div>
+    </div>
  </body>
 </html>
@@ -1,6 +1,5 @@
 const fs = require("fs");
 const { exec, execSync } = require("child_process");
-const core = require("@actions/core");

 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
@@ -16,25 +15,18 @@ const publish = () => {
    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
    execSync(`yarn --cwd ${excalidrawDir} publish`);
-    console.info("Published 🎉");
-    core.setOutput(
-      "result",
-      `**Preview version has been shipped** :rocket:
-    You can use [@excalidraw/excalidraw-preview@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw-preview/v/${pkg.version}) for testing!`,
-    );
  } catch (error) {
-    core.setOutput("result", "package couldn't be published :warning:!");
    console.error(error);
-    process.exit(1);
  }
 };
+
 // get files changed between prev and head commit
 exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
  if (error || stderr) {
    console.error(error);
-    core.setOutput("result", ":warning: Package couldn't be published!");
    process.exit(1);
  }
+
  const changedFiles = stdout.trim().split("\n");
  const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;

@@ -45,33 +37,16 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
    );
  });
  if (!excalidrawPackageFiles.length) {
-    console.info("Skipping release as no valid diff found");
-    core.setOutput("result", "Skipping release as no valid diff found");
    process.exit(0);
  }

  // update package.json
+  pkg.version = `${pkg.version}-${getShortCommitHash()}`;
  pkg.name = "@excalidraw/excalidraw-next";
-  let version = `${pkg.version}-${getShortCommitHash()}`;
-
-  // update readme
-  let data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
-
-  const isPreview = process.argv.slice(2)[0] === "preview";
-  if (isPreview) {
-    // use pullNumber-commithash as the version for preview
-    const pullRequestNumber = process.argv.slice(3)[0];
-    version = `${pkg.version}-${pullRequestNumber}-${getShortCommitHash()}`;
-    // replace "excalidraw-next" with "excalidraw-preview"
-    pkg.name = "@excalidraw/excalidraw-preview";
-    data = data.replace(/excalidraw-next/g, "excalidraw-preview");
-    data = data.trim();
-  }
-  pkg.version = version;
-
  fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");

+  // update readme
+  const data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
-  console.info("Publish in progress...");
  publish();
 });
@@ -20,7 +20,7 @@ const headerForType = {
  perf: "Performance",
  build: "Build",
 };
-const badCommits = [];
+
 const getCommitHashForLastVersion = async () => {
  try {
    const commitMessage = `"release @excalidraw/excalidraw@${lastVersion}"`;
@@ -53,26 +53,19 @@ const getLibraryCommitsSinceLastRelease = async () => {
    const messageWithoutType = commit.slice(indexOfColon + 1).trim();
    const messageWithCapitalizeFirst =
      messageWithoutType.charAt(0).toUpperCase() + messageWithoutType.slice(1);
-    const prMatch = commit.match(/\(#([0-9]*)\)/);
-    if (prMatch) {
-      const prNumber = prMatch[1];
+    const prNumber = commit.match(/\(#([0-9]*)\)/)[1];

-      // return if the changelog already contains the pr number which would happen for package updates
-      if (existingChangeLog.includes(prNumber)) {
-        return;
-      }
-      const prMarkdown = `[#${prNumber}](https://github.com/excalidraw/excalidraw/pull/${prNumber})`;
-      const messageWithPRLink = messageWithCapitalizeFirst.replace(
-        /\(#[0-9]*\)/,
-        prMarkdown,
-      );
-      commitList[type].push(messageWithPRLink);
-    } else {
-      badCommits.push(commit);
-      commitList[type].push(messageWithCapitalizeFirst);
+    // return if the changelog already contains the pr number which would happen for package updates
+    if (existingChangeLog.includes(prNumber)) {
+      return;
    }
+    const prMarkdown = `[#${prNumber}](https://github.com/excalidraw/excalidraw/pull/${prNumber})`;
+    const messageWithPRLink = messageWithCapitalizeFirst.replace(
+      /\(#[0-9]*\)/,
+      prMarkdown,
+    );
+    commitList[type].push(messageWithPRLink);
  });
-  console.info("Bad commits:", badCommits);
  return commitList;
 };

@@ -7,7 +7,6 @@ import { t } from "../i18n";

 export const actionAddToLibrary = register({
  name: "addToLibrary",
-  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
@@ -43,7 +43,6 @@ const alignSelectedElements = (

 export const actionAlignTop = register({
  name: "alignTop",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@@ -73,7 +72,6 @@ export const actionAlignTop = register({

 export const actionAlignBottom = register({
  name: "alignBottom",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@@ -103,7 +101,6 @@ export const actionAlignBottom = register({

 export const actionAlignLeft = register({
  name: "alignLeft",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@@ -133,8 +130,6 @@ export const actionAlignLeft = register({

 export const actionAlignRight = register({
  name: "alignRight",
-  trackEvent: { category: "element" },
-
  perform: (elements, appState) => {
    return {
      appState,
@@ -164,8 +159,6 @@ export const actionAlignRight = register({

 export const actionAlignVerticallyCentered = register({
  name: "alignVerticallyCentered",
-  trackEvent: { category: "element" },
-
  perform: (elements, appState) => {
    return {
      appState,
@@ -191,7 +184,6 @@ export const actionAlignVerticallyCentered = register({

 export const actionAlignHorizontallyCentered = register({
  name: "alignHorizontallyCentered",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@@ -1,136 +0,0 @@
-import { VERTICAL_ALIGN } from "../constants";
-import { getNonDeletedElements, isTextElement } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import {
-  getBoundTextElement,
-  measureText,
-  redrawTextBoundingBox,
-} from "../element/textElement";
-import {
-  hasBoundTextElement,
-  isTextBindableContainer,
-} from "../element/typeChecks";
-import {
-  ExcalidrawTextContainer,
-  ExcalidrawTextElement,
-} from "../element/types";
-import { getSelectedElements } from "../scene";
-import { getFontString } from "../utils";
-import { register } from "./register";
-
-export const actionUnbindText = register({
-  name: "unbindText",
-  contextItemLabel: "labels.unbindText",
-  trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return selectedElements.some((element) => hasBoundTextElement(element));
-  },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    selectedElements.forEach((element) => {
-      const boundTextElement = getBoundTextElement(element);
-      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
-        );
-        mutateElement(boundTextElement as ExcalidrawTextElement, {
-          containerId: null,
-          width,
-          height,
-          baseline,
-          text: boundTextElement.originalText,
-        });
-        mutateElement(element, {
-          boundElements: element.boundElements?.filter(
-            (ele) => ele.id !== boundTextElement.id,
-          ),
-        });
-      }
-    });
-    return {
-      elements,
-      appState,
-      commitToHistory: true,
-    };
-  },
-});
-
-export const actionBindText = register({
-  name: "bindText",
-  contextItemLabel: "labels.bindText",
-  trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    if (selectedElements.length === 2) {
-      const textElement =
-        isTextElement(selectedElements[0]) ||
-        isTextElement(selectedElements[1]);
-
-      let bindingContainer;
-      if (isTextBindableContainer(selectedElements[0])) {
-        bindingContainer = selectedElements[0];
-      } else if (isTextBindableContainer(selectedElements[1])) {
-        bindingContainer = selectedElements[1];
-      }
-      if (
-        textElement &&
-        bindingContainer &&
-        getBoundTextElement(bindingContainer) === null
-      ) {
-        return true;
-      }
-    }
-    return false;
-  },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-
-    let textElement: ExcalidrawTextElement;
-    let container: ExcalidrawTextContainer;
-
-    if (
-      isTextElement(selectedElements[0]) &&
-      isTextBindableContainer(selectedElements[1])
-    ) {
-      textElement = selectedElements[0];
-      container = selectedElements[1];
-    } else {
-      textElement = selectedElements[1] as ExcalidrawTextElement;
-      container = selectedElements[0] as ExcalidrawTextContainer;
-    }
-    mutateElement(textElement, {
-      containerId: container.id,
-      verticalAlign: VERTICAL_ALIGN.MIDDLE,
-    });
-    mutateElement(container, {
-      boundElements: (container.boundElements || []).concat({
-        type: "text",
-        id: textElement.id,
-      }),
-    });
-    redrawTextBoundingBox(textElement, container);
-    const updatedElements = elements.slice();
-    const textElementIndex = updatedElements.findIndex(
-      (ele) => ele.id === textElement.id,
-    );
-    updatedElements.splice(textElementIndex, 1);
-    const containerIndex = updatedElements.findIndex(
-      (ele) => ele.id === container.id,
-    );
-    updatedElements.splice(containerIndex + 1, 0, textElement);
-    return {
-      elements: updatedElements,
-      appState: { ...appState, selectedElementIds: { [container.id]: true } },
-      commitToHistory: true,
-    };
-  },
-});
@@ -1,5 +1,5 @@
 import { ColorPicker } from "../components/ColorPicker";
-import { eraser, zoomIn, zoomOut } from "../components/icons";
+import { zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { THEME, ZOOM_STEP } from "../constants";
@@ -15,20 +15,18 @@ import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
-import { getDefaultAppState, isEraserActive } from "../appState";
+import { getDefaultAppState } from "../appState";
 import ClearCanvas from "../components/ClearCanvas";
-import clsx from "clsx";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
-  trackEvent: false,
  perform: (_, appState, value) => {
    return {
      appState: { ...appState, ...value },
      commitToHistory: !!value.viewBackgroundColor,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ appState, updateData }) => {
    return (
      <div style={{ position: "relative" }}>
        <ColorPicker
@@ -41,8 +39,6 @@ export const actionChangeViewBackgroundColor = register({
            updateData({ openPopup: active ? "canvasColorPicker" : null })
          }
          data-testid="canvas-background-picker"
-          elements={elements}
-          appState={appState}
        />
      </div>
    );
@@ -51,7 +47,6 @@ export const actionChangeViewBackgroundColor = register({

 export const actionClearCanvas = register({
  name: "clearCanvas",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState, _, app) => {
    app.imageCache.clear();
    return {
@@ -62,6 +57,7 @@ export const actionClearCanvas = register({
        ...getDefaultAppState(),
        files: {},
        theme: appState.theme,
+        elementLocked: appState.elementLocked,
        penMode: appState.penMode,
        penDetected: appState.penDetected,
        exportBackground: appState.exportBackground,
@@ -69,10 +65,6 @@ export const actionClearCanvas = register({
        gridSize: appState.gridSize,
        showStats: appState.showStats,
        pasteDialog: appState.pasteDialog,
-        activeTool:
-          appState.activeTool.type === "image"
-            ? { ...appState.activeTool, type: "selection" }
-            : appState.activeTool,
      },
      commitToHistory: true,
    };
@@ -83,7 +75,6 @@ export const actionClearCanvas = register({

 export const actionZoomIn = register({
  name: "zoomIn",
-  trackEvent: { category: "canvas" },
  perform: (_elements, appState, _, app) => {
    return {
      appState: {
@@ -119,7 +110,6 @@ export const actionZoomIn = register({

 export const actionZoomOut = register({
  name: "zoomOut",
-  trackEvent: { category: "canvas" },
  perform: (_elements, appState, _, app) => {
    return {
      appState: {
@@ -155,7 +145,6 @@ export const actionZoomOut = register({

 export const actionResetZoom = register({
  name: "resetZoom",
-  trackEvent: { category: "canvas" },
  perform: (_elements, appState, _, app) => {
    return {
      appState: {
@@ -254,7 +243,6 @@ const zoomToFitElements = (

 export const actionZoomToSelected = register({
  name: "zoomToSelection",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState) => zoomToFitElements(elements, appState, true),
  keyTest: (event) =>
    event.code === CODES.TWO &&
@@ -265,7 +253,6 @@ export const actionZoomToSelected = register({

 export const actionZoomToFit = register({
  name: "zoomToFit",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState) => zoomToFitElements(elements, appState, false),
  keyTest: (event) =>
    event.code === CODES.ONE &&
@@ -276,7 +263,6 @@ export const actionZoomToFit = register({

 export const actionToggleTheme = register({
  name: "toggleTheme",
-  trackEvent: { category: "canvas" },
  perform: (_, appState, value) => {
    return {
      appState: {
@@ -299,42 +285,3 @@ export const actionToggleTheme = register({
  ),
  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });
-
-export const actionErase = register({
-  name: "eraser",
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState) => {
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        activeTool: {
-          ...appState.activeTool,
-          type: isEraserActive(appState)
-            ? appState.activeTool.lastActiveToolBeforeEraser ?? "selection"
-            : "eraser",
-          lastActiveToolBeforeEraser:
-            appState.activeTool.type === "eraser" //node throws incorrect type error when using isEraserActive()
-              ? null
-              : appState.activeTool.type,
-        },
-      },
-      commitToHistory: true,
-    };
-  },
-  keyTest: (event) => event.key === KEYS.E,
-  PanelComponent: ({ elements, appState, updateData, data }) => (
-    <ToolButton
-      type="button"
-      icon={eraser}
-      className={clsx("eraser", { active: isEraserActive(appState) })}
-      title={`${t("toolBar.eraser")}-${getShortcutKey("E")}`}
-      aria-label={t("toolBar.eraser")}
-      onClick={() => {
-        updateData(null);
-      }}
-      size={data?.size || "medium"}
-    ></ToolButton>
-  ),
-});
@@ -1,19 +1,14 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import {
-  copyTextToSystemClipboard,
-  copyToClipboard,
-  probablySupportsClipboardWriteText,
-} from "../clipboard";
+import { copyToClipboard } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { getNonDeletedElements } from "../element";
 import { t } from "../i18n";

 export const actionCopy = register({
  name: "copy",
-  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
    copyToClipboard(getNonDeletedElements(elements), appState, app.files);

@@ -28,7 +23,6 @@ export const actionCopy = register({

 export const actionCut = register({
  name: "cut",
-  trackEvent: { category: "element" },
  perform: (elements, appState, data, app) => {
    actionCopy.perform(elements, appState, data, app);
    return actionDeleteSelected.perform(elements, appState);
@@ -39,7 +33,6 @@ export const actionCut = register({

 export const actionCopyAsSvg = register({
  name: "copyAsSvg",
-  trackEvent: { category: "element" },
  perform: async (elements, appState, _data, app) => {
    if (!app.canvas) {
      return {
@@ -80,7 +73,6 @@ export const actionCopyAsSvg = register({

 export const actionCopyAsPng = register({
  name: "copyAsPng",
-  trackEvent: { category: "element" },
  perform: async (elements, appState, _data, app) => {
    if (!app.canvas) {
      return {
@@ -130,35 +122,3 @@ export const actionCopyAsPng = register({
  contextItemLabel: "labels.copyAsPng",
  keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
-
-export const copyText = register({
-  name: "copyText",
-  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
-
-    const text = selectedElements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
-    copyTextToSystemClipboard(text);
-    return {
-      commitToHistory: false,
-    };
-  },
-  contextItemPredicate: (elements, appState) => {
-    return (
-      probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, true).some(isTextElement)
-    );
-  },
-  contextItemLabel: "labels.copyText",
-});
@@ -58,7 +58,6 @@ const handleGroupEditingState = (

 export const actionDeleteSelected = register({
  name: "deleteSelectedElements",
-  trackEvent: { category: "element", action: "delete" },
  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      const {
@@ -134,7 +133,7 @@ export const actionDeleteSelected = register({
      elements: nextElements,
      appState: {
        ...nextAppState,
-        activeTool: { ...appState.activeTool, type: "selection" },
+        elementType: "selection",
        multiElement: null,
      },
      commitToHistory: isSomeElementSelected(
@@ -7,7 +7,7 @@ import { distributeElements, Distribution } from "../disitrubte";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+import { CODES } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
@@ -39,7 +39,6 @@ const distributeSelectedElements = (

 export const distributeHorizontally = register({
  name: "distributeHorizontally",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@@ -50,8 +49,7 @@ export const distributeHorizontally = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
+  keyTest: (event) => event.altKey && event.code === CODES.H,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      hidden={!enableActionGroup(elements, appState)}
@@ -69,7 +67,6 @@ export const distributeHorizontally = register({

 export const distributeVertically = register({
  name: "distributeVertically",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@@ -80,8 +77,7 @@ export const distributeVertically = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
+  keyTest: (event) => event.altKey && event.code === CODES.V,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      hidden={!enableActionGroup(elements, appState)}
@@ -22,7 +22,6 @@ import { isBoundToContainer } from "../element/typeChecks";

 export const actionDuplicateSelection = register({
  name: "duplicateSelection",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    // duplicate selected point(s) if editing a line
    if (appState.editingLinearElement) {
@@ -1,3 +1,4 @@
+import { trackEvent } from "../analytics";
 import { load, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
@@ -7,7 +8,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@@ -22,8 +23,8 @@ import { Theme } from "../element/types";

 export const actionChangeProjectName = register({
  name: "changeProjectName",
-  trackEvent: false,
  perform: (_elements, appState, value) => {
+    trackEvent("change", "title");
    return { appState: { ...appState, name: value }, commitToHistory: false };
  },
  PanelComponent: ({ appState, updateData, appProps }) => (
@@ -40,7 +41,6 @@ export const actionChangeProjectName = register({

 export const actionChangeExportScale = register({
  name: "changeExportScale",
-  trackEvent: { category: "export", action: "scale" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportScale: value },
@@ -89,7 +89,6 @@ export const actionChangeExportScale = register({

 export const actionChangeExportBackground = register({
  name: "changeExportBackground",
-  trackEvent: { category: "export", action: "toggleBackground" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportBackground: value },
@@ -108,7 +107,6 @@ export const actionChangeExportBackground = register({

 export const actionChangeExportEmbedScene = register({
  name: "changeExportEmbedScene",
-  trackEvent: { category: "export", action: "embedScene" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportEmbedScene: value },
@@ -130,7 +128,6 @@ export const actionChangeExportEmbedScene = register({

 export const actionSaveToActiveFile = register({
  name: "saveToActiveFile",
-  trackEvent: { category: "export" },
  perform: async (elements, appState, value, app) => {
    const fileHandleExists = !!appState.fileHandle;

@@ -175,7 +172,6 @@ export const actionSaveToActiveFile = register({

 export const actionSaveFileToDisk = register({
  name: "saveFileToDisk",
-  trackEvent: { category: "export" },
  perform: async (elements, appState, value, app) => {
    try {
      const { fileHandle } = await saveAsJSON(
@@ -204,7 +200,7 @@ export const actionSaveFileToDisk = register({
      icon={saveAs}
      title={t("buttons.saveAs")}
      aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDeviceType().isMobile}
+      showAriaLabel={useIsMobile()}
      hidden={!nativeFileSystemSupported}
      onClick={() => updateData(null)}
      data-testid="save-as-button"
@@ -214,7 +210,6 @@ export const actionSaveFileToDisk = register({

 export const actionLoadScene = register({
  name: "loadScene",
-  trackEvent: { category: "export" },
  perform: async (elements, appState, _, app) => {
    try {
      const {
@@ -248,7 +243,7 @@ export const actionLoadScene = register({
      icon={load}
      title={t("buttons.load")}
      aria-label={t("buttons.load")}
-      showAriaLabel={useDeviceType().isMobile}
+      showAriaLabel={useIsMobile()}
      onClick={updateData}
      data-testid="load-button"
    />
@@ -257,7 +252,6 @@ export const actionLoadScene = register({

 export const actionExportWithDarkMode = register({
  name: "exportWithDarkMode",
-  trackEvent: { category: "export", action: "toggleTheme" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportWithDarkMode: value },
@@ -17,7 +17,6 @@ import { isBindingElement } from "../element/typeChecks";

 export const actionFinalize = register({
  name: "finalize",
-  trackEvent: false,
  perform: (elements, appState, _, { canvas, focusContainer }) => {
    if (appState.editingLinearElement) {
      const { elementId, startBindingElement, endBindingElement } =
@@ -39,7 +38,6 @@ export const actionFinalize = register({
              : undefined,
          appState: {
            ...appState,
-            cursorButton: "up",
            editingLinearElement: null,
          },
          commitToHistory: true,
@@ -121,17 +119,13 @@ export const actionFinalize = register({
        );
      }

-      if (
-        !appState.activeTool.locked &&
-        appState.activeTool.type !== "freedraw"
-      ) {
+      if (!appState.elementLocked && appState.elementType !== "freedraw") {
        appState.selectedElementIds[multiPointElement.id] = true;
      }
    }

    if (
-      (!appState.activeTool.locked &&
-        appState.activeTool.type !== "freedraw") ||
+      (!appState.elementLocked && appState.elementType !== "freedraw") ||
      !multiPointElement
    ) {
      resetCursor(canvas);
@@ -141,20 +135,11 @@ export const actionFinalize = register({
      elements: newElements,
      appState: {
        ...appState,
-        cursorButton: "up",
-        activeTool:
-          (appState.activeTool.locked ||
-            appState.activeTool.type === "freedraw") &&
+        elementType:
+          (appState.elementLocked || appState.elementType === "freedraw") &&
          multiPointElement
-            ? appState.activeTool
-            : {
-                ...appState.activeTool,
-                type:
-                  appState.activeTool.type === "eraser" &&
-                  appState.activeTool.lastActiveToolBeforeEraser
-                    ? appState.activeTool.lastActiveToolBeforeEraser
-                    : "selection",
-              },
+            ? appState.elementType
+            : "selection",
        draggingElement: null,
        multiElement: null,
        editingElement: null,
@@ -162,8 +147,8 @@ export const actionFinalize = register({
        suggestedBindings: [],
        selectedElementIds:
          multiPointElement &&
-          !appState.activeTool.locked &&
-          appState.activeTool.type !== "freedraw"
+          !appState.elementLocked &&
+          appState.elementType !== "freedraw"
            ? {
                ...appState.selectedElementIds,
                [multiPointElement.id]: true,
@@ -171,7 +156,7 @@ export const actionFinalize = register({
            : appState.selectedElementIds,
        pendingImageElement: null,
      },
-      commitToHistory: appState.activeTool.type === "freedraw",
+      commitToHistory: appState.elementType === "freedraw",
    };
  },
  keyTest: (event, appState) =>
@@ -180,7 +165,7 @@ export const actionFinalize = register({
        (!appState.draggingElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
-  PanelComponent: ({ appState, updateData, data }) => (
+  PanelComponent: ({ appState, updateData }) => (
    <ToolButton
      type="button"
      icon={done}
@@ -188,7 +173,6 @@ export const actionFinalize = register({
      aria-label={t("buttons.done")}
      onClick={updateData}
      visible={appState.multiElement != null}
-      size={data?.size || "medium"}
    />
  ),
 });
@@ -35,7 +35,6 @@ const enableActionFlipVertical = (

 export const actionFlipHorizontal = register({
  name: "flipHorizontal",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: flipSelectedElements(elements, appState, "horizontal"),
@@ -51,7 +50,6 @@ export const actionFlipHorizontal = register({

 export const actionFlipVertical = register({
  name: "flipVertical",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: flipSelectedElements(elements, appState, "vertical"),
@@ -157,7 +155,7 @@ const flipElement = (
    // calculate new x-coord for transformation
    newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
    resizeSingleElement(
-      new Map().set(element.id, element),
+      element,
      true,
      element,
      usingNWHandle ? "nw" : "ne",
@@ -54,7 +54,6 @@ const enableActionGroup = (

 export const actionGroup = register({
  name: "group",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
@@ -148,7 +147,6 @@ export const actionGroup = register({

 export const actionUngroup = register({
  name: "ungroup",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const groupIds = getSelectedGroupIds(appState);
    if (groupIds.length === 0) {
@@ -62,7 +62,6 @@ type ActionCreator = (history: History) => Action;

 export const createUndoAction: ActionCreator = (history) => ({
  name: "undo",
-  trackEvent: { category: "history" },
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.undoOnce()),
  keyTest: (event) =>
@@ -83,7 +82,6 @@ export const createUndoAction: ActionCreator = (history) => ({

 export const createRedoAction: ActionCreator = (history) => ({
  name: "redo",
-  trackEvent: { category: "history" },
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.redoOnce()),
  keyTest: (event) =>
@@ -9,7 +9,6 @@ import { HelpIcon } from "../components/HelpIcon";

 export const actionToggleCanvasMenu = register({
  name: "toggleCanvasMenu",
-  trackEvent: { category: "menu" },
  perform: (_, appState) => ({
    appState: {
      ...appState,
@@ -30,7 +29,6 @@ export const actionToggleCanvasMenu = register({

 export const actionToggleEditMenu = register({
  name: "toggleEditMenu",
-  trackEvent: { category: "menu" },
  perform: (_elements, appState) => ({
    appState: {
      ...appState,
@@ -55,7 +53,6 @@ export const actionToggleEditMenu = register({

 export const actionFullScreen = register({
  name: "toggleFullScreen",
-  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
  perform: () => {
    if (!isFullScreen()) {
      allowFullScreen();
@@ -72,7 +69,6 @@ export const actionFullScreen = register({

 export const actionShortcuts = register({
  name: "toggleShortcuts",
-  trackEvent: { category: "menu", action: "toggleHelpDialog" },
  perform: (_elements, appState, _, { focusContainer }) => {
    if (appState.showHelpDialog) {
      focusContainer();
@@ -6,7 +6,6 @@ import { register } from "./register";

 export const actionGoToCollaborator = register({
  name: "goToCollaborator",
-  trackEvent: { category: "collab" },
  perform: (_elements, appState, value) => {
    const point = value as Collaborator["pointer"];
    if (!point) {
@@ -30,15 +30,11 @@ import {
  TextAlignCenterIcon,
  TextAlignLeftIcon,
  TextAlignRightIcon,
-  TextAlignTopIcon,
-  TextAlignBottomIcon,
-  TextAlignMiddleIcon,
 } from "../components/icons";
 import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
-  VERTICAL_ALIGN,
 } from "../constants";
 import {
  getNonDeletedElements,
@@ -62,7 +58,6 @@ import {
  ExcalidrawTextElement,
  FontFamilyValues,
  TextAlign,
-  VerticalAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
@@ -150,7 +145,6 @@ const changeFontSize = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  getNewFontSize: (element: ExcalidrawTextElement) => number,
-  fallbackValue?: ExcalidrawTextElement["fontSize"],
 ) => {
  const newFontSizes = new Set<number>();

@@ -166,7 +160,11 @@ const changeFontSize = (
          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
            fontSize: newFontSize,
          });
-          redrawTextBoundingBox(newElement, getContainerElement(oldElement));
+          redrawTextBoundingBox(
+            newElement,
+            getContainerElement(oldElement),
+            appState,
+          );

          newElement = offsetElementAfterFontResize(oldElement, newElement);

@@ -184,7 +182,7 @@ const changeFontSize = (
      currentItemFontSize:
        newFontSizes.size === 1
          ? [...newFontSizes][0]
-          : fallbackValue ?? appState.currentItemFontSize,
+          : appState.currentItemFontSize,
    },
    commitToHistory: true,
  };
@@ -194,7 +192,6 @@ const changeFontSize = (

 export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemStrokeColor && {
@@ -235,8 +232,6 @@ export const actionChangeStrokeColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "strokeColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@@ -244,7 +239,6 @@ export const actionChangeStrokeColor = register({

 export const actionChangeBackgroundColor = register({
  name: "changeBackgroundColor",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemBackgroundColor && {
@@ -278,8 +272,6 @@ export const actionChangeBackgroundColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "backgroundColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@@ -287,7 +279,6 @@ export const actionChangeBackgroundColor = register({

 export const actionChangeFillStyle = register({
  name: "changeFillStyle",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@@ -337,7 +328,6 @@ export const actionChangeFillStyle = register({

 export const actionChangeStrokeWidth = register({
  name: "changeStrokeWidth",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@@ -385,7 +375,6 @@ export const actionChangeStrokeWidth = register({

 export const actionChangeSloppiness = register({
  name: "changeSloppiness",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@@ -434,7 +423,6 @@ export const actionChangeSloppiness = register({

 export const actionChangeStrokeStyle = register({
  name: "changeStrokeStyle",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@@ -482,7 +470,6 @@ export const actionChangeStrokeStyle = register({

 export const actionChangeOpacity = register({
  name: "changeOpacity",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@@ -532,9 +519,8 @@ export const actionChangeOpacity = register({

 export const actionChangeFontSize = register({
  name: "changeFontSize",
-  trackEvent: false,
  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value, value);
+    return changeFontSize(elements, appState, () => value);
  },
  PanelComponent: ({ elements, appState, updateData }) => (
    <fieldset>
@@ -546,25 +532,21 @@ export const actionChangeFontSize = register({
            value: 16,
            text: t("labels.small"),
            icon: <FontSizeSmallIcon theme={appState.theme} />,
-            testId: "fontSize-small",
          },
          {
            value: 20,
            text: t("labels.medium"),
            icon: <FontSizeMediumIcon theme={appState.theme} />,
-            testId: "fontSize-medium",
          },
          {
            value: 28,
            text: t("labels.large"),
            icon: <FontSizeLargeIcon theme={appState.theme} />,
-            testId: "fontSize-large",
          },
          {
            value: 36,
            text: t("labels.veryLarge"),
            icon: <FontSizeExtraLargeIcon theme={appState.theme} />,
-            testId: "fontSize-veryLarge",
          },
        ]}
        value={getFormValue(
@@ -590,7 +572,6 @@ export const actionChangeFontSize = register({

 export const actionDecreaseFontSize = register({
  name: "decreaseFontSize",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return changeFontSize(elements, appState, (element) =>
      Math.round(
@@ -612,7 +593,6 @@ export const actionDecreaseFontSize = register({

 export const actionIncreaseFontSize = register({
  name: "increaseFontSize",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return changeFontSize(elements, appState, (element) =>
      Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
@@ -630,7 +610,6 @@ export const actionIncreaseFontSize = register({

 export const actionChangeFontFamily = register({
  name: "changeFontFamily",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(
@@ -644,7 +623,11 @@ export const actionChangeFontFamily = register({
                fontFamily: value,
              },
            );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
+            redrawTextBoundingBox(
+              newElement,
+              getContainerElement(oldElement),
+              appState,
+            );
            return newElement;
          }

@@ -712,7 +695,6 @@ export const actionChangeFontFamily = register({

 export const actionChangeTextAlign = register({
  name: "changeTextAlign",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(
@@ -722,9 +704,15 @@ export const actionChangeTextAlign = register({
          if (isTextElement(oldElement)) {
            const newElement: ExcalidrawTextElement = newElementWith(
              oldElement,
-              { textAlign: value },
+              {
+                textAlign: value,
+              },
+            );
+            redrawTextBoundingBox(
+              newElement,
+              getContainerElement(oldElement),
+              appState,
            );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
            return newElement;
          }

@@ -739,121 +727,51 @@ export const actionChangeTextAlign = register({
      commitToHistory: true,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <legend>{t("labels.textAlign")}</legend>
-        <ButtonIconSelect<TextAlign | false>
-          group="text-align"
-          options={[
-            {
-              value: "left",
-              text: t("labels.left"),
-              icon: <TextAlignLeftIcon theme={appState.theme} />,
-            },
-            {
-              value: "center",
-              text: t("labels.center"),
-              icon: <TextAlignCenterIcon theme={appState.theme} />,
-            },
-            {
-              value: "right",
-              text: t("labels.right"),
-              icon: <TextAlignRightIcon theme={appState.theme} />,
-            },
-          ]}
-          value={getFormValue(
-            elements,
-            appState,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.textAlign;
-              }
-              const boundTextElement = getBoundTextElement(element);
-              if (boundTextElement) {
-                return boundTextElement.textAlign;
-              }
-              return null;
-            },
-            appState.currentItemTextAlign,
-          )}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
-});
-export const actionChangeVerticalAlign = register({
-  name: "changeVerticalAlign",
-  trackEvent: { category: "element" },
-  perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { verticalAlign: value },
-            );
-
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
-
-          return oldElement;
-        },
-        true,
-      ),
-      appState: {
-        ...appState,
-      },
-      commitToHistory: true,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <ButtonIconSelect<VerticalAlign | false>
-          group="text-align"
-          options={[
-            {
-              value: VERTICAL_ALIGN.TOP,
-              text: t("labels.alignTop"),
-              icon: <TextAlignTopIcon theme={appState.theme} />,
-            },
-            {
-              value: VERTICAL_ALIGN.MIDDLE,
-              text: t("labels.centerVertically"),
-              icon: <TextAlignMiddleIcon theme={appState.theme} />,
-            },
-            {
-              value: VERTICAL_ALIGN.BOTTOM,
-              text: t("labels.alignBottom"),
-              icon: <TextAlignBottomIcon theme={appState.theme} />,
-            },
-          ]}
-          value={getFormValue(elements, appState, (element) => {
-            if (isTextElement(element) && element.containerId) {
-              return element.verticalAlign;
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <fieldset>
+      <legend>{t("labels.textAlign")}</legend>
+      <ButtonIconSelect<TextAlign | false>
+        group="text-align"
+        options={[
+          {
+            value: "left",
+            text: t("labels.left"),
+            icon: <TextAlignLeftIcon theme={appState.theme} />,
+          },
+          {
+            value: "center",
+            text: t("labels.center"),
+            icon: <TextAlignCenterIcon theme={appState.theme} />,
+          },
+          {
+            value: "right",
+            text: t("labels.right"),
+            icon: <TextAlignRightIcon theme={appState.theme} />,
+          },
+        ]}
+        value={getFormValue(
+          elements,
+          appState,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.textAlign;
            }
            const boundTextElement = getBoundTextElement(element);
            if (boundTextElement) {
-              return boundTextElement.verticalAlign;
+              return boundTextElement.textAlign;
            }
            return null;
-          })}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
+          },
+          appState.currentItemTextAlign,
+        )}
+        onChange={(value) => updateData(value)}
+      />
+    </fieldset>
+  ),
 });

 export const actionChangeSharpness = register({
  name: "changeSharpness",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    const targetElements = getTargetElements(
      getNonDeletedElements(elements),
@@ -861,10 +779,10 @@ export const actionChangeSharpness = register({
    );
    const shouldUpdateForNonLinearElements = targetElements.length
      ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.activeTool.type);
+      : !isLinearElementType(appState.elementType);
    const shouldUpdateForLinearElements = targetElements.length
      ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.activeTool.type);
+      : isLinearElementType(appState.elementType);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@@ -904,8 +822,8 @@ export const actionChangeSharpness = register({
          elements,
          appState,
          (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.activeTool.type) &&
-            (isLinearElementType(appState.activeTool.type)
+          (canChangeSharpness(appState.elementType) &&
+            (isLinearElementType(appState.elementType)
              ? appState.currentItemLinearStrokeSharpness
              : appState.currentItemStrokeSharpness)) ||
            null,
@@ -918,7 +836,6 @@ export const actionChangeSharpness = register({

 export const actionChangeArrowhead = register({
  name: "changeArrowhead",
-  trackEvent: false,
  perform: (
    elements,
    appState,
@@ -5,7 +5,6 @@ import { getNonDeletedElements, isTextElement } from "../element";

 export const actionSelectAll = register({
  name: "selectAll",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      return false;
@@ -18,8 +17,7 @@ export const actionSelectAll = register({
          selectedElementIds: elements.reduce((map, element) => {
            if (
              !element.isDeleted &&
-              !(isTextElement(element) && element.containerId) &&
-              element.locked === false
+              !(isTextElement(element) && element.containerId)
            ) {
              map[element.id] = true;
            }
@@ -1,71 +0,0 @@
-import ExcalidrawApp from "../excalidraw-app";
-import { t } from "../i18n";
-import { CODES } from "../keys";
-import { API } from "../tests/helpers/api";
-import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { fireEvent, render, screen } from "../tests/test-utils";
-import { copiedStyles } from "./actionStyles";
-
-const { h } = window;
-
-const mouse = new Pointer("mouse");
-
-describe("actionStyles", () => {
-  beforeEach(async () => {
-    await render(<ExcalidrawApp />);
-  });
-  it("should copy & paste styles via keyboard", () => {
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    // Change some styles of second rectangle
-    UI.clickLabeledElement("Stroke");
-    UI.clickLabeledElement(t("colors.c92a2a"));
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.e64980"));
-    // Fill style
-    fireEvent.click(screen.getByTitle("Cross-hatch"));
-    // Stroke width
-    fireEvent.click(screen.getByTitle("Bold"));
-    // Stroke style
-    fireEvent.click(screen.getByTitle("Dotted"));
-    // Roughness
-    fireEvent.click(screen.getByTitle("Cartoonist"));
-    // Opacity
-    fireEvent.change(screen.getByLabelText("Opacity"), {
-      target: { value: "60" },
-    });
-
-    mouse.reset();
-
-    API.setSelectedElements([h.elements[1]]);
-
-    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
-      Keyboard.codeDown(CODES.C);
-    });
-    const secondRect = JSON.parse(copiedStyles);
-    expect(secondRect.id).toBe(h.elements[1].id);
-
-    mouse.reset();
-    // Paste styles to first rectangle
-    API.setSelectedElements([h.elements[0]]);
-    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
-      Keyboard.codeDown(CODES.V);
-    });
-
-    const firstRect = API.getSelectedElement();
-    expect(firstRect.id).toBe(h.elements[0].id);
-    expect(firstRect.strokeColor).toBe("#c92a2a");
-    expect(firstRect.backgroundColor).toBe("#e64980");
-    expect(firstRect.fillStyle).toBe("cross-hatch");
-    expect(firstRect.strokeWidth).toBe(2); // Bold: 2
-    expect(firstRect.strokeStyle).toBe("dotted");
-    expect(firstRect.roughness).toBe(2); // Cartoonist: 2
-    expect(firstRect.opacity).toBe(60);
-  });
-});
@@ -19,7 +19,6 @@ export let copiedStyles: string = "{}";

 export const actionCopyStyles = register({
  name: "copyStyles",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const element = elements.find((el) => appState.selectedElementIds[el.id]);
    if (element) {
@@ -40,7 +39,6 @@ export const actionCopyStyles = register({

 export const actionPasteStyles = register({
  name: "pasteStyles",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const pastedElement = JSON.parse(copiedStyles);
    if (!isExcalidrawElement(pastedElement)) {
@@ -65,7 +63,11 @@ export const actionPasteStyles = register({
              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
            });

-            redrawTextBoundingBox(newElement, getContainerElement(newElement));
+            redrawTextBoundingBox(
+              element,
+              getContainerElement(element),
+              appState,
+            );
          }
          return newElement;
        }
@@ -2,14 +2,12 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { trackEvent } from "../analytics";

 export const actionToggleGridMode = register({
  name: "gridMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.gridSize,
-  },
  perform(elements, appState) {
+    trackEvent("view", "mode", "grid");
    return {
      appState: {
        ...appState,
@@ -1,63 +0,0 @@
-import { newElementWith } from "../element/mutateElement";
-import { ExcalidrawElement } from "../element/types";
-import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { arrayToMap } from "../utils";
-import { register } from "./register";
-
-export const actionToggleLock = register({
-  name: "toggleLock",
-  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
-
-    if (!selectedElements.length) {
-      return false;
-    }
-
-    const operation = getOperation(selectedElements);
-    const selectedElementsMap = arrayToMap(selectedElements);
-
-    return {
-      elements: elements.map((element) => {
-        if (!selectedElementsMap.has(element.id)) {
-          return element;
-        }
-
-        return newElementWith(element, { locked: operation === "lock" });
-      }),
-      appState,
-      commitToHistory: true,
-    };
-  },
-  contextItemLabel: (elements, appState) => {
-    const selected = getSelectedElements(elements, appState, false);
-    if (selected.length === 1) {
-      return selected[0].locked
-        ? "labels.elementLock.unlock"
-        : "labels.elementLock.lock";
-    }
-
-    if (selected.length > 1) {
-      return getOperation(selected) === "lock"
-        ? "labels.elementLock.lockAll"
-        : "labels.elementLock.unlockAll";
-    }
-
-    throw new Error(
-      "Unexpected zero elements to lock/unlock. This should never happen.",
-    );
-  },
-  keyTest: (event, appState, elements) => {
-    return (
-      event.key.toLocaleLowerCase() === KEYS.L &&
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      getSelectedElements(elements, appState, false).length > 0
-    );
-  },
-});
-
-const getOperation = (
-  elements: readonly ExcalidrawElement[],
-): "lock" | "unlock" => (elements.some((el) => !el.locked) ? "lock" : "unlock");
@@ -3,7 +3,6 @@ import { CODES, KEYS } from "../keys";

 export const actionToggleStats = register({
  name: "stats",
-  trackEvent: { category: "menu" },
  perform(elements, appState) {
    return {
      appState: {
@@ -1,13 +1,11 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { trackEvent } from "../analytics";

 export const actionToggleViewMode = register({
  name: "viewMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.viewModeEnabled,
-  },
  perform(elements, appState) {
+    trackEvent("view", "mode", "view");
    return {
      appState: {
        ...appState,
@@ -1,13 +1,12 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { trackEvent } from "../analytics";

 export const actionToggleZenMode = register({
  name: "zenMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.zenModeEnabled,
-  },
  perform(elements, appState) {
+    trackEvent("view", "mode", "zen");
+
    return {
      appState: {
        ...appState,
@@ -0,0 +1,44 @@
+import { getNonDeletedElements } from "../element";
+import { mutateElement } from "../element/mutateElement";
+import { getBoundTextElement, measureText } from "../element/textElement";
+import { ExcalidrawTextElement } from "../element/types";
+import { getSelectedElements } from "../scene";
+import { getFontString } from "../utils";
+import { register } from "./register";
+
+export const actionUnbindText = register({
+  name: "unbindText",
+  contextItemLabel: "labels.unbindText",
+  perform: (elements, appState) => {
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+    selectedElements.forEach((element) => {
+      const boundTextElement = getBoundTextElement(element);
+      if (boundTextElement) {
+        const { width, height, baseline } = measureText(
+          boundTextElement.originalText,
+          getFontString(boundTextElement),
+        );
+        mutateElement(boundTextElement as ExcalidrawTextElement, {
+          containerId: null,
+          width,
+          height,
+          baseline,
+          text: boundTextElement.originalText,
+        });
+        mutateElement(element, {
+          boundElements: element.boundElements?.filter(
+            (ele) => ele.id !== boundTextElement.id,
+          ),
+        });
+      }
+    });
+    return {
+      elements,
+      appState,
+      commitToHistory: true,
+    };
+  },
+});
@@ -18,7 +18,6 @@ import {

 export const actionSendBackward = register({
  name: "sendBackward",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveOneLeft(elements, appState),
@@ -46,7 +45,6 @@ export const actionSendBackward = register({

 export const actionBringForward = register({
  name: "bringForward",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveOneRight(elements, appState),
@@ -74,7 +72,6 @@ export const actionBringForward = register({

 export const actionSendToBack = register({
  name: "sendToBack",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveAllLeft(elements, appState),
@@ -109,8 +106,6 @@ export const actionSendToBack = register({

 export const actionBringToFront = register({
  name: "bringToFront",
-  trackEvent: { category: "element" },
-
  perform: (elements, appState) => {
    return {
      elements: moveAllRight(elements, appState),
@@ -17,7 +17,6 @@ export {
  actionChangeFontSize,
  actionChangeFontFamily,
  actionChangeTextAlign,
-  actionChangeVerticalAlign,
 } from "./actionProperties";

 export {
@@ -75,13 +74,11 @@ export {
  actionCut,
  actionCopyAsPng,
  actionCopyAsSvg,
-  copyText,
 } from "./actionClipboard";

 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";

 export { actionToggleStats } from "./actionToggleStats";
-export { actionUnbindText, actionBindText } from "./actionBoundText";
+export { actionUnbindText } from "./actionUnbindText";
 export { actionLink } from "../element/Hyperlink";
-export { actionToggleLock } from "./actionToggleLock";
@@ -1,47 +1,18 @@
 import React from "react";
 import {
  Action,
+  ActionsManagerInterface,
  UpdaterFn,
  ActionName,
  ActionResult,
  PanelComponentProps,
-  ActionSource,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { MODES } from "../constants";
-import { trackEvent } from "../analytics";

-const trackAction = (
-  action: Action,
-  source: ActionSource,
-  appState: Readonly<AppState>,
-  elements: readonly ExcalidrawElement[],
-  app: AppClassProperties,
-  value: any,
-) => {
-  if (action.trackEvent) {
-    try {
-      if (typeof action.trackEvent === "object") {
-        const shouldTrack = action.trackEvent.predicate
-          ? action.trackEvent.predicate(appState, elements, value)
-          : true;
-        if (shouldTrack) {
-          trackEvent(
-            action.trackEvent.category,
-            action.trackEvent.action || action.name,
-            `${source} (${app.deviceType.isMobile ? "mobile" : "desktop"})`,
-          );
-        }
-      }
-    } catch (error) {
-      console.error("error while logging action:", error);
-    }
-  }
-};
-
-export class ActionManager {
-  actions = {} as Record<ActionName, Action>;
+export class ActionManager implements ActionsManagerInterface {
+  actions = {} as ActionsManagerInterface["actions"];

  updater: (actionResult: ActionResult | Promise<ActionResult>) => void;

@@ -94,15 +65,9 @@ export class ActionManager {
          ),
      );

-    if (data.length !== 1) {
-      if (data.length > 1) {
-        console.warn("Canceling as multiple actions match this shortcut", data);
-      }
+    if (data.length === 0) {
      return false;
    }
-
-    const action = data[0];
-
    const { viewModeEnabled } = this.getAppState();
    if (viewModeEnabled) {
      if (!Object.values(MODES).includes(data[0].name)) {
@@ -110,26 +75,27 @@ export class ActionManager {
      }
    }

-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-    const value = null;
-
-    trackAction(action, "keyboard", appState, elements, this.app, null);
-
    event.preventDefault();
-    event.stopPropagation();
-    this.updater(data[0].perform(elements, appState, value, this.app));
+    this.updater(
+      data[0].perform(
+        this.getElementsIncludingDeleted(),
+        this.getAppState(),
+        null,
+        this.app,
+      ),
+    );
    return true;
  }

-  executeAction(action: Action, source: ActionSource = "api") {
-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-    const value = null;
-
-    trackAction(action, source, appState, elements, this.app, value);
-
-    this.updater(action.perform(elements, appState, value, this.app));
+  executeAction(action: Action) {
+    this.updater(
+      action.perform(
+        this.getElementsIncludingDeleted(),
+        this.getAppState(),
+        null,
+        this.app,
+      ),
+    );
  }

  /**
@@ -147,11 +113,7 @@ export class ActionManager {
    ) {
      const action = this.actions[name];
      const PanelComponent = action.PanelComponent!;
-      const elements = this.getElementsIncludingDeleted();
-      const appState = this.getAppState();
      const updateData = (formState?: any) => {
-        trackAction(action, "ui", appState, elements, this.app, formState);
-
        this.updater(
          action.perform(
            this.getElementsIncludingDeleted(),
@@ -1,10 +1,8 @@
 import { t } from "../i18n";
 import { isDarwin } from "../keys";
 import { getShortcutKey } from "../utils";
-import { ActionName } from "./types";

-export type ShortcutName = SubtypeOf<
-  ActionName,
+export type ShortcutName =
  | "cut"
  | "copy"
  | "paste"
@@ -28,9 +26,7 @@ export type ShortcutName = SubtypeOf<
  | "viewMode"
  | "flipHorizontal"
  | "flipVertical"
-  | "hyperlink"
-  | "toggleLock"
->;
+  | "link";

 const shortcutMap: Record<ShortcutName, string[]> = {
  cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -67,12 +63,11 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  flipHorizontal: [getShortcutKey("Shift+H")],
  flipVertical: [getShortcutKey("Shift+V")],
  viewMode: [getShortcutKey("Alt+R")],
-  hyperlink: [getShortcutKey("CtrlOrCmd+K")],
-  toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
+  link: [getShortcutKey("CtrlOrCmd+K")],
 };

 export const getShortcutFromShortcutName = (name: ShortcutName) => {
  const shortcuts = shortcutMap[name];
-  // if multiple shortcuts available, take the first one
+  // if multiple shortcuts availiable, take the first one
  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };
@@ -8,8 +8,6 @@ import {
 } from "../types";
 import { ToolButtonSize } from "../components/ToolButton";

-export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
-
 /** if false, the action should be prevented */
 export type ActionResult =
  | {
@@ -41,7 +39,6 @@ export type ActionName =
  | "paste"
  | "copyAsPng"
  | "copyAsSvg"
-  | "copyText"
  | "sendBackward"
  | "bringForward"
  | "sendToBack"
@@ -85,7 +82,6 @@ export type ActionName =
  | "zoomToSelection"
  | "changeFontFamily"
  | "changeTextAlign"
-  | "changeVerticalAlign"
  | "toggleFullScreen"
  | "toggleShortcuts"
  | "group"
@@ -109,10 +105,7 @@ export type ActionName =
  | "increaseFontSize"
  | "decreaseFontSize"
  | "unbindText"
-  | "hyperlink"
-  | "eraser"
-  | "bindText"
-  | "toggleLock";
+  | "link";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -143,23 +136,12 @@ export interface Action {
    appState: AppState,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
-  trackEvent:
-    | false
-    | {
-        category:
-          | "toolbar"
-          | "element"
-          | "canvas"
-          | "export"
-          | "history"
-          | "menu"
-          | "collab"
-          | "hyperlink";
-        action?: string;
-        predicate?: (
-          appState: Readonly<AppState>,
-          elements: readonly ExcalidrawElement[],
-          value: any,
-        ) => boolean;
-      };
+}
+
+export interface ActionsManagerInterface {
+  actions: Record<ActionName, Action>;
+  registerAction: (action: Action) => void;
+  handleKeyDown: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
+  renderAction: (name: ActionName) => React.ReactElement | null;
+  executeAction: (action: Action) => void;
 }
@@ -3,20 +3,16 @@ export const trackEvent =
  process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
  typeof window !== "undefined" &&
  window.gtag
-    ? (category: string, action: string, label?: string, value?: number) => {
-        try {
-          window.gtag("event", action, {
-            event_category: category,
-            event_label: label,
-            value,
-          });
-        } catch (error) {
-          console.error("error logging to ga", error);
-        }
+    ? (category: string, name: string, label?: string, value?: number) => {
+        window.gtag("event", name, {
+          event_category: category,
+          event_label: label,
+          value,
+        });
      }
    : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
-    ? (category: string, action: string, label?: string, value?: number) => {}
-    : (category: string, action: string, label?: string, value?: number) => {
+    ? (category: string, name: string, label?: string, value?: number) => {}
+    : (category: string, name: string, label?: string, value?: number) => {
        // Uncomment the next line to track locally
-        // console.log("Track Event", { category, action, label, value });
+        // console.info("Track Event", category, name, label, value);
      };
@@ -41,11 +41,8 @@ export const getDefaultAppState = (): Omit<
    editingElement: null,
    editingGroupId: null,
    editingLinearElement: null,
-    activeTool: {
-      type: "selection",
-      locked: false,
-      lastActiveToolBeforeEraser: null,
-    },
+    elementLocked: false,
+    elementType: "selection",
    penMode: false,
    penDetected: false,
    errorMessage: null,
@@ -133,9 +130,10 @@ const APP_STATE_STORAGE_CONF = (<
  editingElement: { browser: false, export: false, server: false },
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
-  activeTool: { browser: true, export: false, server: false },
-  penMode: { browser: true, export: false, server: false },
-  penDetected: { browser: true, export: false, server: false },
+  elementLocked: { browser: true, export: false, server: false },
+  elementType: { browser: true, export: false, server: false },
+  penMode: { browser: false, export: false, server: false },
+  penDetected: { browser: false, export: false, server: false },
  errorMessage: { browser: false, export: false, server: false },
  exportBackground: { browser: true, export: false, server: false },
  exportEmbedScene: { browser: true, export: false, server: false },
@@ -215,9 +213,3 @@ export const cleanAppStateForExport = (appState: Partial<AppState>) => {
 export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
  return _clearAppStateForStorage(appState, "server");
 };
-
-export const isEraserActive = ({
-  activeTool,
-}: {
-  activeTool: AppState["activeTool"];
-}) => activeTool.type === "eraser";
@@ -1,10 +1,5 @@
 import colors from "./colors";
-import {
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  ENV,
-  VERTICAL_ALIGN,
-} from "./constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, ENV } from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@@ -108,7 +103,7 @@ const transposeCells = (cells: string[][]) => {
 };

 export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
-  // Copy/paste from excel, spreadsheets, tsv, csv.
+  // Copy/paste from excel, spreadhseets, tsv, csv.
  // For now we only accept 2 columns with an optional header

  // Check for tab separated values
@@ -166,8 +161,7 @@ const commonProps = {
  strokeSharpness: "sharp",
  strokeStyle: "solid",
  strokeWidth: 1,
-  verticalAlign: VERTICAL_ALIGN.MIDDLE,
-  locked: false,
+  verticalAlign: "middle",
 } as const;

 const getChartDimentions = (spreadsheet: Spreadsheet) => {
@@ -8,7 +8,6 @@ import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
-import { isPromiseLike } from "./utils";

 type ElementsClipboard = {
  type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -125,7 +124,7 @@ const getSystemClipboard = async (
 };

 /**
- * Attempts to parse clipboard. Prefers system clipboard.
+ * Attemps to parse clipboard. Prefers system clipboard.
 */
 export const parseClipboard = async (
  event: ClipboardEvent | null,
@@ -167,35 +166,10 @@ export const parseClipboard = async (
  }
 };

-export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
-  let promise;
-  try {
-    // in Safari so far we need to construct the ClipboardItem synchronously
-    // (i.e. in the same tick) otherwise browser will complain for lack of
-    // user intent. Using a Promise ClipboardItem constructor solves this.
-    // https://bugs.webkit.org/show_bug.cgi?id=222262
-    //
-    // not await so that we can detect whether the thrown error likely relates
-    // to a lack of support for the Promise ClipboardItem constructor
-    promise = navigator.clipboard.write([
-      new window.ClipboardItem({
-        [MIME_TYPES.png]: blob,
-      }),
-    ]);
-  } catch (error: any) {
-    // if we're using a Promise ClipboardItem, let's try constructing
-    // with resolution value instead
-    if (isPromiseLike(blob)) {
-      await navigator.clipboard.write([
-        new window.ClipboardItem({
-          [MIME_TYPES.png]: await blob,
-        }),
-      ]);
-    } else {
-      throw error;
-    }
-  }
-  await promise;
+export const copyBlobToClipboardAsPng = async (blob: Blob) => {
+  await navigator.clipboard.write([
+    new window.ClipboardItem({ [MIME_TYPES.png]: blob }),
+  ]);
 };

 export const copyTextToSystemClipboard = async (text: string | null) => {
@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useIsMobile } from "../components/App";
 import {
  canChangeSharpness,
  canHaveArrowheads,
@@ -19,50 +19,36 @@ import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
-import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";

 export const SelectedShapeActions = ({
  appState,
  elements,
  renderAction,
-  activeTool,
+  elementType,
 }: {
  appState: AppState;
  elements: readonly ExcalidrawElement[];
  renderAction: ActionManager["renderAction"];
-  activeTool: AppState["activeTool"]["type"];
+  elementType: ExcalidrawElement["type"];
 }) => {
  const targetElements = getTargetElements(
    getNonDeletedElements(elements),
    appState,
  );
-
-  let isSingleElementBoundContainer = false;
-  if (
-    targetElements.length === 2 &&
-    (hasBoundTextElement(targetElements[0]) ||
-      hasBoundTextElement(targetElements[1]))
-  ) {
-    isSingleElementBoundContainer = true;
-  }
  const isEditing = Boolean(appState.editingElement);
-  const deviceType = useDeviceType();
+  const isMobile = useIsMobile();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const showFillIcons =
-    hasBackground(activeTool) ||
+    hasBackground(elementType) ||
    targetElements.some(
      (element) =>
        hasBackground(element.type) && !isTransparent(element.backgroundColor),
    );
  const showChangeBackgroundIcons =
-    hasBackground(activeTool) ||
+    hasBackground(elementType) ||
    targetElements.some((element) => hasBackground(element.type));

-  const showLinkIcon =
-    targetElements.length === 1 || isSingleElementBoundContainer;
-
  let commonSelectedType: string | null = targetElements[0]?.type || null;

  for (const element of targetElements) {
@@ -74,23 +60,23 @@ export const SelectedShapeActions = ({

  return (
    <div className="panelColumn">
-      {((hasStrokeColor(activeTool) &&
-        activeTool !== "image" &&
+      {((hasStrokeColor(elementType) &&
+        elementType !== "image" &&
        commonSelectedType !== "image") ||
        targetElements.some((element) => hasStrokeColor(element.type))) &&
        renderAction("changeStrokeColor")}
      {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
      {showFillIcons && renderAction("changeFillStyle")}

-      {(hasStrokeWidth(activeTool) ||
+      {(hasStrokeWidth(elementType) ||
        targetElements.some((element) => hasStrokeWidth(element.type))) &&
        renderAction("changeStrokeWidth")}

-      {(activeTool === "freedraw" ||
+      {(elementType === "freedraw" ||
        targetElements.some((element) => element.type === "freedraw")) &&
        renderAction("changeStrokeShape")}

-      {(hasStrokeStyle(activeTool) ||
+      {(hasStrokeStyle(elementType) ||
        targetElements.some((element) => hasStrokeStyle(element.type))) && (
        <>
          {renderAction("changeStrokeStyle")}
@@ -98,12 +84,12 @@ export const SelectedShapeActions = ({
        </>
      )}

-      {(canChangeSharpness(activeTool) ||
+      {(canChangeSharpness(elementType) ||
        targetElements.some((element) => canChangeSharpness(element.type))) && (
        <>{renderAction("changeSharpness")}</>
      )}

-      {(hasText(activeTool) ||
+      {(hasText(elementType) ||
        targetElements.some((element) => hasText(element.type))) && (
        <>
          {renderAction("changeFontSize")}
@@ -114,11 +100,7 @@ export const SelectedShapeActions = ({
        </>
      )}

-      {targetElements.some(
-        (element) =>
-          hasBoundTextElement(element) || isBoundToContainer(element),
-      ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(activeTool) ||
+      {(canHaveArrowheads(elementType) ||
        targetElements.some((element) => canHaveArrowheads(element.type))) && (
        <>{renderAction("changeArrowhead")}</>
      )}
@@ -135,7 +117,7 @@ export const SelectedShapeActions = ({
        </div>
      </fieldset>

-      {targetElements.length > 1 && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && (
        <fieldset>
          <legend>{t("labels.align")}</legend>
          <div className="buttonList">
@@ -168,15 +150,15 @@ export const SelectedShapeActions = ({
          </div>
        </fieldset>
      )}
-      {!isEditing && targetElements.length > 0 && (
+      {!isMobile && !isEditing && targetElements.length > 0 && (
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
-            {!deviceType.isMobile && renderAction("duplicateSelection")}
-            {!deviceType.isMobile && renderAction("deleteSelectedElements")}
+            {renderAction("duplicateSelection")}
+            {renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
-            {showLinkIcon && renderAction("hyperlink")}
+            {targetElements.length === 1 && renderAction("link")}
          </div>
        </fieldset>
      )}
@@ -186,16 +168,14 @@ export const SelectedShapeActions = ({

 export const ShapesSwitcher = ({
  canvas,
-  activeTool,
+  elementType,
  setAppState,
  onImageAction,
-  appState,
 }: {
  canvas: HTMLCanvasElement | null;
-  activeTool: AppState["activeTool"];
+  elementType: ExcalidrawElement["type"];
  setAppState: React.Component<any, AppState>["setState"];
  onImageAction: (data: { pointerType: PointerType | null }) => void;
-  appState: AppState;
 }) => (
  <>
    {SHAPES.map(({ value, icon, key }, index) => {
@@ -210,35 +190,20 @@ export const ShapesSwitcher = ({
          key={value}
          type="radio"
          icon={icon}
-          checked={activeTool.type === value}
+          checked={elementType === value}
          name="editor-current-shape"
          title={`${capitalizeString(label)} — ${shortcut}`}
          keyBindingLabel={`${index + 1}`}
          aria-label={capitalizeString(label)}
          aria-keyshortcuts={shortcut}
          data-testid={value}
-          onPointerDown={({ pointerType }) => {
-            if (!appState.penDetected && pointerType === "pen") {
-              setAppState({
-                penDetected: true,
-                penMode: true,
-              });
-            }
-          }}
          onChange={({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
-            const nextActiveTool = { ...activeTool, type: value };
            setAppState({
-              activeTool: nextActiveTool,
+              elementType: value,
              multiElement: null,
              selectedElementIds: {},
            });
-            setCursorForShape(canvas, {
-              ...appState,
-              activeTool: nextActiveTool,
-            });
+            setCursorForShape(canvas, value);
            if (value === "image") {
              onImageAction({ pointerType });
            }
@@ -7,7 +7,7 @@ export const ButtonIconSelect = <T extends Object>({
  onChange,
  group,
 }: {
-  options: { value: T; text: string; icon: JSX.Element; testId?: string }[];
+  options: { value: T; text: string; icon: JSX.Element }[];
  value: T | null;
  onChange: (value: T) => void;
  group: string;
@@ -24,7 +24,6 @@ export const ButtonIconSelect = <T extends Object>({
          name={group}
          onChange={() => onChange(option.value)}
          checked={value === option.value}
-          data-testid={option.testId}
        />
        {option.icon}
      </label>
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useIsMobile } from "./App";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";

@@ -19,7 +19,7 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
        icon={trash}
        title={t("buttons.clearReset")}
        aria-label={t("buttons.clearReset")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useIsMobile()}
        onClick={toggleDialog}
        data-testid="clear-canvas-button"
      />
@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { users } from "./icons";

 import "./CollabButton.scss";
@@ -26,7 +26,7 @@ const CollabButton = ({
        type="button"
        title={t("labels.liveCollaboration")}
        aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useIsMobile()}
      >
        {collaboratorCount > 0 && (
          <div className="CollabButton-collaborators">{collaboratorCount}</div>
@@ -46,7 +46,7 @@
    top: -11px;
  }

-  .color-picker-content--default {
+  .color-picker-content {
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(5, auto);
@@ -59,26 +59,6 @@
    }
  }

-  .color-picker-content--canvas {
-    display: flex;
-    flex-direction: column;
-    padding: 0.25rem;
-
-    &-title {
-      color: $oc-gray-6;
-      font-size: 12px;
-      padding: 0 0.25rem;
-    }
-
-    &-colors {
-      padding: 0.5rem 0;
-
-      .color-picker-swatch {
-        margin: 0 0.25rem;
-      }
-    }
-  }
-
  .color-picker-content .color-input-container {
    grid-column: 1 / span 5;
  }
@@ -7,53 +7,6 @@ import { isArrowKey, KEYS } from "../keys";
 import { t, getLanguage } from "../i18n";
 import { isWritableElement } from "../utils";
 import colors from "../colors";
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-
-const MAX_CUSTOM_COLORS = 5;
-const MAX_DEFAULT_COLORS = 15;
-
-export const getCustomColors = (
-  elements: readonly ExcalidrawElement[],
-  type: "elementBackground" | "elementStroke",
-) => {
-  const customColors: string[] = [];
-  const updatedElements = elements
-    .filter((element) => !element.isDeleted)
-    .sort((ele1, ele2) => ele2.updated - ele1.updated);
-
-  let index = 0;
-  const elementColorTypeMap = {
-    elementBackground: "backgroundColor",
-    elementStroke: "strokeColor",
-  };
-  const colorType = elementColorTypeMap[type] as
-    | "backgroundColor"
-    | "strokeColor";
-  while (
-    index < updatedElements.length &&
-    customColors.length < MAX_CUSTOM_COLORS
-  ) {
-    const element = updatedElements[index];
-
-    if (
-      customColors.length < MAX_CUSTOM_COLORS &&
-      isCustomColor(element[colorType], type) &&
-      !customColors.includes(element[colorType])
-    ) {
-      customColors.push(element[colorType]);
-    }
-    index++;
-  }
-  return customColors;
-};
-
-const isCustomColor = (
-  color: string,
-  type: "elementBackground" | "elementStroke",
-) => {
-  return !colors[type].includes(color);
-};

 const isValidColor = (color: string) => {
  const style = new Option().style;
@@ -82,7 +35,6 @@ const keyBindings = [
  ["1", "2", "3", "4", "5"],
  ["q", "w", "e", "r", "t"],
  ["a", "s", "d", "f", "g"],
-  ["z", "x", "c", "v", "b"],
 ].flat();

 const Picker = ({
@@ -93,7 +45,6 @@ const Picker = ({
  label,
  showInput = true,
  type,
-  elements,
 }: {
  colors: string[];
  color: string | null;
@@ -102,20 +53,12 @@ const Picker = ({
  label: string;
  showInput: boolean;
  type: "canvasBackground" | "elementBackground" | "elementStroke";
-  elements: readonly ExcalidrawElement[];
 }) => {
  const firstItem = React.useRef<HTMLButtonElement>();
  const activeItem = React.useRef<HTMLButtonElement>();
  const gallery = React.useRef<HTMLDivElement>();
  const colorInput = React.useRef<HTMLInputElement>();

-  const [customColors] = React.useState(() => {
-    if (type === "canvasBackground") {
-      return [];
-    }
-    return getCustomColors(elements, type);
-  });
-
  React.useEffect(() => {
    // After the component is first mounted focus on first input
    if (activeItem.current) {
@@ -142,42 +85,23 @@ const Picker = ({
    } else if (isArrowKey(event.key)) {
      const { activeElement } = document;
      const isRTL = getLanguage().rtl;
-      let isCustom = false;
-      let index = Array.prototype.indexOf.call(
-        gallery!.current!.querySelector(".color-picker-content--default")!
-          .children,
+      const index = Array.prototype.indexOf.call(
+        gallery!.current!.children,
        activeElement,
      );
-      if (index === -1) {
-        index = Array.prototype.indexOf.call(
-          gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!.children,
-          activeElement,
-        );
-        if (index !== -1) {
-          isCustom = true;
-        }
-      }
-      const parentSelector = isCustom
-        ? gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
-
      if (index !== -1) {
-        const length = parentSelector!.children.length - (showInput ? 1 : 0);
+        const length = gallery!.current!.children.length - (showInput ? 1 : 0);
        const nextIndex =
          event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
            ? (index + 1) % length
            : event.key === (isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT)
            ? (length + index - 1) % length
-            : !isCustom && event.key === KEYS.ARROW_DOWN
+            : event.key === KEYS.ARROW_DOWN
            ? (index + 5) % length
-            : !isCustom && event.key === KEYS.ARROW_UP
+            : event.key === KEYS.ARROW_UP
            ? (length + index - 5) % length
            : index;
-        (parentSelector!.children![nextIndex] as HTMLElement)?.focus();
+        (gallery!.current!.children![nextIndex] as any).focus();
      }
      event.preventDefault();
    } else if (
@@ -185,15 +109,7 @@ const Picker = ({
      !isWritableElement(event.target)
    ) {
      const index = keyBindings.indexOf(event.key.toLowerCase());
-      const isCustom = index >= MAX_DEFAULT_COLORS;
-      const parentSelector = isCustom
-        ? gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
-      const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (parentSelector!.children![actualIndex] as HTMLElement)?.focus();
-
+      (gallery!.current!.children![index] as any).focus();
      event.preventDefault();
    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
      event.preventDefault();
@@ -203,50 +119,6 @@ const Picker = ({
    event.stopPropagation();
  };

-  const renderColors = (colors: Array<string>, custom: boolean = false) => {
-    return colors.map((_color, i) => {
-      const _colorWithoutHash = _color.replace("#", "");
-      const keyBinding = custom
-        ? keyBindings[i + MAX_DEFAULT_COLORS]
-        : keyBindings[i];
-      const label = custom
-        ? _colorWithoutHash
-        : t(`colors.${_colorWithoutHash}`);
-      return (
-        <button
-          className="color-picker-swatch"
-          onClick={(event) => {
-            (event.currentTarget as HTMLButtonElement).focus();
-            onChange(_color);
-          }}
-          title={`${label}${
-            !isTransparent(_color) ? ` (${_color})` : ""
-          } — ${keyBinding.toUpperCase()}`}
-          aria-label={label}
-          aria-keyshortcuts={keyBindings[i]}
-          style={{ color: _color }}
-          key={_color}
-          ref={(el) => {
-            if (!custom && el && i === 0) {
-              firstItem.current = el;
-            }
-            if (el && _color === color) {
-              activeItem.current = el;
-            }
-          }}
-          onFocus={() => {
-            onChange(_color);
-          }}
-        >
-          {isTransparent(_color) ? (
-            <div className="color-picker-transparent"></div>
-          ) : undefined}
-          <span className="color-picker-keybinding">{keyBinding}</span>
-        </button>
-      );
-    });
-  };
-
  return (
    <div
      className={`color-picker color-picker-type-${type}`}
@@ -266,20 +138,41 @@ const Picker = ({
        }}
        tabIndex={0}
      >
-        <div className="color-picker-content--default">
-          {renderColors(colors)}
-        </div>
-        {!!customColors.length && (
-          <div className="color-picker-content--canvas">
-            <span className="color-picker-content--canvas-title">
-              {t("labels.canvasColors")}
-            </span>
-            <div className="color-picker-content--canvas-colors">
-              {renderColors(customColors, true)}
-            </div>
-          </div>
-        )}
-
+        {colors.map((_color, i) => {
+          const _colorWithoutHash = _color.replace("#", "");
+          return (
+            <button
+              className="color-picker-swatch"
+              onClick={(event) => {
+                (event.currentTarget as HTMLButtonElement).focus();
+                onChange(_color);
+              }}
+              title={`${t(`colors.${_colorWithoutHash}`)}${
+                !isTransparent(_color) ? ` (${_color})` : ""
+              } — ${keyBindings[i].toUpperCase()}`}
+              aria-label={t(`colors.${_colorWithoutHash}`)}
+              aria-keyshortcuts={keyBindings[i]}
+              style={{ color: _color }}
+              key={_color}
+              ref={(el) => {
+                if (el && i === 0) {
+                  firstItem.current = el;
+                }
+                if (el && _color === color) {
+                  activeItem.current = el;
+                }
+              }}
+              onFocus={() => {
+                onChange(_color);
+              }}
+            >
+              {isTransparent(_color) ? (
+                <div className="color-picker-transparent"></div>
+              ) : undefined}
+              <span className="color-picker-keybinding">{keyBindings[i]}</span>
+            </button>
+          );
+        })}
        {showInput && (
          <ColorInput
            color={color}
@@ -353,8 +246,6 @@ export const ColorPicker = ({
  label,
  isActive,
  setActive,
-  elements,
-  appState,
 }: {
  type: "canvasBackground" | "elementBackground" | "elementStroke";
  color: string | null;
@@ -362,8 +253,6 @@ export const ColorPicker = ({
  label: string;
  isActive: boolean;
  setActive: (active: boolean) => void;
-  elements: readonly ExcalidrawElement[];
-  appState: AppState;
 }) => {
  const pickerButton = React.useRef<HTMLButtonElement>(null);

@@ -405,7 +294,6 @@ export const ColorPicker = ({
              label={label}
              showInput={false}
              type={type}
-              elements={elements}
            />
          </Popover>
        ) : null}
@@ -70,9 +70,7 @@ const ContextMenu = ({
                  dangerous: actionName === "deleteSelectedElements",
                  checkmark: option.checked?.(appState),
                })}
-                onClick={() =>
-                  actionManager.executeAction(option, "contextMenu")
-                }
+                onClick={() => actionManager.executeAction(option)}
              >
                <div className="context-menu-option__label">{label}</div>
                <kbd className="context-menu-option__shortcut">
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDeviceType } from "../components/App";
+import { useExcalidrawContainer, useIsMobile } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
@@ -94,7 +94,7 @@ export const Dialog = (props: DialogProps) => {
            onClick={onClose}
            aria-label={t("buttons.close")}
          >
-            {useDeviceType().isMobile ? back : close}
+            {useIsMobile() ? back : close}
          </button>
        </h2>
        <div className="Dialog__content">{props.children}</div>
@@ -139,7 +139,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
        <Section title={t("helpDialog.shortcuts")}>
          <Columns>
            <Column>
-              <ShortcutIsland caption={t("helpDialog.tools")}>
+              <ShortcutIsland caption={t("helpDialog.shapes")}>
                <Shortcut
                  label={t("toolBar.selection")}
                  shortcuts={["V", "1"]}
@@ -149,7 +149,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  shortcuts={["R", "2"]}
                />
                <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
                <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                <Shortcut
@@ -159,10 +159,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
                <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
                <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
-                <Shortcut
-                  label={t("toolBar.eraser")}
-                  shortcuts={[getShortcutKey("E")]}
-                />
                <Shortcut
                  label={t("helpDialog.editSelectedShape")}
                  shortcuts={[
@@ -363,10 +359,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
                  ]}
                />
-                <Shortcut
-                  label={t("helpDialog.toggleElementLock")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+L")]}
-                />
                <Shortcut
                  label={t("buttons.undo")}
                  shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
@@ -11,7 +11,6 @@ import {
  isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
-import { isEraserActive } from "../appState";

 interface HintViewerProps {
  appState: AppState;
@@ -20,32 +19,25 @@ interface HintViewerProps {
 }

 const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
-  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
+  const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
  const multiMode = appState.multiElement !== null;

-  if (appState.isLibraryOpen) {
-    return null;
-  }
-
-  if (isEraserActive(appState)) {
-    return t("hints.eraserRevert");
-  }
-  if (activeTool.type === "arrow" || activeTool.type === "line") {
+  if (elementType === "arrow" || elementType === "line") {
    if (!multiMode) {
      return t("hints.linearElement");
    }
    return t("hints.linearElementMulti");
  }

-  if (activeTool.type === "freedraw") {
+  if (elementType === "freedraw") {
    return t("hints.freeDraw");
  }

-  if (activeTool.type === "text") {
+  if (elementType === "text") {
    return t("hints.text");
  }

-  if (appState.activeTool.type === "image" && appState.pendingImageElement) {
+  if (appState.elementType === "image" && appState.pendingImageElement) {
    return t("hints.placeImage");
  }

@@ -77,7 +69,7 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    return t("hints.text_editing");
  }

-  if (activeTool.type === "selection") {
+  if (elementType === "selection") {
    if (
      appState.draggingElement?.type === "selection" &&
      !appState.editingElement &&
@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
+import { ActionsManagerInterface } from "../actions/types";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useIsMobile } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@@ -18,7 +19,6 @@ import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING } from "../constants";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { ActionManager } from "../actions/manager";

 const supportsContextFilters =
  "filter" in document.createElement("canvas").getContext("2d")!;
@@ -90,7 +90,7 @@ const ImageExportModal = ({
  elements: readonly NonDeletedExcalidrawElement[];
  files: BinaryFiles;
  exportPadding?: number;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  onExportToPng: ExportCB;
  onExportToSvg: ExportCB;
  onExportToClipboard: ExportCB;
@@ -229,7 +229,7 @@ export const ImageExportDialog = ({
  elements: readonly NonDeletedExcalidrawElement[];
  files: BinaryFiles;
  exportPadding?: number;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  onExportToPng: ExportCB;
  onExportToSvg: ExportCB;
  onExportToClipboard: ExportCB;
@@ -250,7 +250,7 @@ export const ImageExportDialog = ({
        icon={exportImage}
        type="button"
        aria-label={t("buttons.exportImage")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useIsMobile()}
        title={t("buttons.exportImage")}
      />
      {modalIsShown && (
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
+import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useIsMobile } from "./App";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
@@ -11,9 +12,6 @@ import { Card } from "./Card";

 import "./ExportDialog.scss";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { trackEvent } from "../analytics";
-import { ActionManager } from "../actions/manager";
-import { getFrame } from "../utils";

 export type ExportCB = (
  elements: readonly NonDeletedExcalidrawElement[],
@@ -31,7 +29,7 @@ const JSONExportModal = ({
  appState: AppState;
  files: BinaryFiles;
  elements: readonly NonDeletedExcalidrawElement[];
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  onCloseRequest: () => void;
  exportOpts: ExportOpts;
  canvas: HTMLCanvasElement | null;
@@ -56,7 +54,7 @@ const JSONExportModal = ({
              aria-label={t("exportDialog.disk_button")}
              showAriaLabel={true}
              onClick={() => {
-                actionManager.executeAction(actionSaveFileToDisk, "ui");
+                actionManager.executeAction(actionSaveFileToDisk);
              }}
            />
          </Card>
@@ -72,10 +70,9 @@ const JSONExportModal = ({
              title={t("exportDialog.link_button")}
              aria-label={t("exportDialog.link_button")}
              showAriaLabel={true}
-              onClick={() => {
-                onExportToBackend(elements, appState, files, canvas);
-                trackEvent("export", "link", `ui (${getFrame()})`);
-              }}
+              onClick={() =>
+                onExportToBackend(elements, appState, files, canvas)
+              }
            />
          </Card>
        )}
@@ -97,7 +94,7 @@ export const JSONExportDialog = ({
  elements: readonly NonDeletedExcalidrawElement[];
  appState: AppState;
  files: BinaryFiles;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  exportOpts: ExportOpts;
  canvas: HTMLCanvasElement | null;
 }) => {
@@ -117,7 +114,7 @@ export const JSONExportDialog = ({
        icon={exportFile}
        type="button"
        aria-label={t("buttons.export")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useIsMobile()}
        title={t("buttons.export")}
      />
      {modalIsShown && (
@@ -6,6 +6,7 @@ import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
+import { useIsMobile } from "../components/App";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
@@ -36,8 +37,6 @@ import { LibraryMenu } from "./LibraryMenu";
 import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
-import { trackEvent } from "../analytics";
-import { useDeviceType } from "../components/App";

 interface LayerUIProps {
  actionManager: ActionManager;
@@ -96,7 +95,7 @@ const LayerUI = ({
  id,
  onImageAction,
 }: LayerUIProps) => {
-  const deviceType = useDeviceType();
+  const isMobile = useIsMobile();

  const renderJSONExportDialog = () => {
    if (!UIOptions.canvasActions.export) {
@@ -123,7 +122,6 @@ const LayerUI = ({
    const createExporter =
      (type: ExportType): ExportCB =>
      async (exportedElements) => {
-        trackEvent("export", type, "ui");
        const fileHandle = await exportCanvas(
          type,
          exportedElements,
@@ -240,7 +238,7 @@ const LayerUI = ({
        className={CLASSES.SHAPE_ACTIONS_MENU}
        padding={2}
        style={{
-          // we want to make sure this doesn't overflow so subtracting 200
+          // we want to make sure this doesn't overflow so substracting 200
          // which is approximately height of zoom footer and top left menu items with some buffer
          // if active file name is displayed, subtracting 248 to account for its height
          maxHeight: `${appState.height - (appState.fileHandle ? 248 : 200)}px`,
@@ -250,7 +248,7 @@ const LayerUI = ({
          appState={appState}
          elements={elements}
          renderAction={actionManager.renderAction}
-          activeTool={appState.activeTool.type}
+          elementType={appState.elementType}
        />
      </Island>
    </Section>
@@ -327,8 +325,8 @@ const LayerUI = ({
                    />
                    <LockButton
                      zenModeEnabled={zenModeEnabled}
-                      checked={appState.activeTool.locked}
-                      onChange={() => onLockToggle()}
+                      checked={appState.elementLocked}
+                      onChange={onLockToggle}
                      title={t("toolBar.lock")}
                    />
                    <Island
@@ -340,14 +338,13 @@ const LayerUI = ({
                      <HintViewer
                        appState={appState}
                        elements={elements}
-                        isMobile={deviceType.isMobile}
+                        isMobile={isMobile}
                      />
                      {heading}
                      <Stack.Row gap={1}>
                        <ShapesSwitcher
-                          appState={appState}
                          canvas={canvas}
-                          activeTool={appState.activeTool}
+                          elementType={appState.elementType}
                          setAppState={setAppState}
                          onImageAction={({ pointerType }) => {
                            onImageAction({
@@ -391,7 +388,7 @@ const LayerUI = ({
                    </Tooltip>
                  ))}
            </UserList>
-            {renderTopRightUI?.(deviceType.isMobile, appState)}
+            {renderTopRightUI?.(isMobile, appState)}
          </div>
        </div>
      </FixedSideContainer>
@@ -421,39 +418,16 @@ const LayerUI = ({
                />
              </Island>
              {!viewModeEnabled && (
-                <>
-                  <div
-                    className={clsx("undo-redo-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-bottom":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("undo", { size: "small" })}
-                    {actionManager.renderAction("redo", { size: "small" })}
-                  </div>
-
-                  <div
-                    className={clsx("eraser-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("eraser", { size: "small" })}
-                  </div>
-                </>
+                <div
+                  className={clsx("undo-redo-buttons zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-bottom":
+                      zenModeEnabled,
+                  })}
+                >
+                  {actionManager.renderAction("undo", { size: "small" })}
+                  {actionManager.renderAction("redo", { size: "small" })}
+                </div>
              )}
-              {!viewModeEnabled &&
-                appState.multiElement &&
-                deviceType.isTouchScreen && (
-                  <div
-                    className={clsx("finalize-button zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("finalize", { size: "small" })}
-                  </div>
-                )}
            </Section>
          </Stack.Col>
        </div>
@@ -492,7 +466,7 @@ const LayerUI = ({

  const dialogs = (
    <>
-      {appState.isLoading && <LoadingMessage delay={250} />}
+      {appState.isLoading && <LoadingMessage />}
      {appState.errorMessage && (
        <ErrorDialog
          message={appState.errorMessage}
@@ -521,7 +495,7 @@ const LayerUI = ({
    </>
  );

-  return deviceType.isMobile ? (
+  return isMobile ? (
    <>
      {dialogs}
      <MobileMenu
@@ -533,7 +507,7 @@ const LayerUI = ({
        renderImageExportDialog={renderImageExportDialog}
        setAppState={setAppState}
        onCollabButtonClick={onCollabButtonClick}
-        onLockToggle={() => onLockToggle()}
+        onLockToggle={onLockToggle}
        onPenModeToggle={onPenModeToggle}
        canvas={canvas}
        isCollaborating={isCollaborating}
@@ -28,17 +28,8 @@
  }

  .layer-ui__library-message {
-    padding: 2em 4em;
-    min-width: 200px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .Spinner {
-      margin-bottom: 1em;
-    }
-    span {
-      font-size: 0.8em;
-    }
+    padding: 10px 20px;
+    max-width: 200px;
  }

  .publish-library-success {
@@ -1,12 +1,5 @@
-import {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  RefObject,
-  forwardRef,
-} from "react";
-import Library, { libraryItemsAtom } from "../data/library";
+import { useRef, useState, useEffect, useCallback, RefObject } from "react";
+import Library from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
 import {
@@ -26,10 +19,6 @@ import LibraryMenuItems from "./LibraryMenuItems";
 import { EVENT } from "../constants";
 import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
-import { trackEvent } from "../analytics";
-import { useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
-import Spinner from "./Spinner";

 const useOnClickOutside = (
  ref: RefObject<HTMLElement>,
@@ -64,17 +53,6 @@ const getSelectedItems = (
  selectedItems: LibraryItem["id"][],
 ) => libraryItems.filter((item) => selectedItems.includes(item.id));

-const LibraryMenuWrapper = forwardRef<
-  HTMLDivElement,
-  { children: React.ReactNode }
->(({ children }, ref) => {
-  return (
-    <Island padding={1} ref={ref} className="layer-ui__library">
-      {children}
-    </Island>
-  );
-});
-
 export const LibraryMenu = ({
  onClose,
  onInsertShape,
@@ -124,6 +102,11 @@ export const LibraryMenu = ({
    };
  }, [onClose]);

+  const [libraryItems, setLibraryItems] = useState<LibraryItems>([]);
+
+  const [loadingState, setIsLoading] = useState<
+    "preloading" | "loading" | "ready"
+  >("preloading");
  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
    useState(false);
@@ -131,35 +114,55 @@ export const LibraryMenu = ({
    url: string;
    authorName: string;
  }>(null);
+  const loadingTimerRef = useRef<number | null>(null);

-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+  useEffect(() => {
+    Promise.race([
+      new Promise((resolve) => {
+        loadingTimerRef.current = window.setTimeout(() => {
+          resolve("loading");
+        }, 100);
+      }),
+      library.loadLibrary().then((items) => {
+        setLibraryItems(items);
+        setIsLoading("ready");
+      }),
+    ]).then((data) => {
+      if (data === "loading") {
+        setIsLoading("loading");
+      }
+    });
+    return () => {
+      clearTimeout(loadingTimerRef.current!);
+    };
+  }, [library]);

-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.saveLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      setSelectedItems([]);
-    },
-    [library, setAppState, selectedItems, setSelectedItems],
-  );
+  const removeFromLibrary = useCallback(async () => {
+    const items = await library.loadLibrary();
+
+    const nextItems = items.filter((item) => !selectedItems.includes(item.id));
+    library.saveLibrary(nextItems).catch((error) => {
+      setLibraryItems(items);
+      setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+    });
+    setSelectedItems([]);
+    setLibraryItems(nextItems);
+  }, [library, setAppState, selectedItems, setSelectedItems]);

  const resetLibrary = useCallback(() => {
    library.resetLibrary();
+    setLibraryItems([]);
    focusContainer();
  }, [library, focusContainer]);

  const addToLibrary = useCallback(
-    async (elements: LibraryItem["elements"], libraryItems: LibraryItems) => {
-      trackEvent("element", "addToLibrary", "ui");
+    async (elements: LibraryItem["elements"]) => {
      if (elements.some((element) => element.type === "image")) {
        return setAppState({
          errorMessage: "Support for adding images to the library coming soon!",
        });
      }
+      const items = await library.loadLibrary();
      const nextItems: LibraryItems = [
        {
          status: "unpublished",
@@ -167,12 +170,14 @@ export const LibraryMenu = ({
          id: randomId(),
          created: Date.now(),
        },
-        ...libraryItems,
+        ...items,
      ];
      onAddToLibrary();
-      library.saveLibrary(nextItems).catch(() => {
+      library.saveLibrary(nextItems).catch((error) => {
+        setLibraryItems(items);
        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
      });
+      setLibraryItems(nextItems);
    },
    [onAddToLibrary, library, setAppState],
  );
@@ -211,7 +216,7 @@ export const LibraryMenu = ({
  }, [setPublishLibSuccess, publishLibSuccess]);

  const onPublishLibSuccess = useCallback(
-    (data, libraryItems: LibraryItems) => {
+    (data) => {
      setShowPublishLibraryDialog(false);
      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
      const nextLibItems = libraryItems.slice();
@@ -221,109 +226,101 @@ export const LibraryMenu = ({
        }
      });
      library.saveLibrary(nextLibItems);
+      setLibraryItems(nextLibItems);
    },
-    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
+    [
+      setShowPublishLibraryDialog,
+      setPublishLibSuccess,
+      libraryItems,
+      selectedItems,
+      library,
+    ],
  );

  const [lastSelectedItem, setLastSelectedItem] = useState<
    LibraryItem["id"] | null
  >(null);

-  if (libraryItemsData.status === "loading") {
-    return (
-      <LibraryMenuWrapper ref={ref}>
-        <div className="layer-ui__library-message">
-          <Spinner size="2em" />
-          <span>{t("labels.libraryLoadingMessage")}</span>
-        </div>
-      </LibraryMenuWrapper>
-    );
-  }
-
-  return (
-    <LibraryMenuWrapper ref={ref}>
+  return loadingState === "preloading" ? null : (
+    <Island padding={1} ref={ref} className="layer-ui__library">
      {showPublishLibraryDialog && (
        <PublishLibrary
          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(
-            libraryItemsData.libraryItems,
-            selectedItems,
-          )}
+          libraryItems={getSelectedItems(libraryItems, selectedItems)}
          appState={appState}
-          onSuccess={(data) =>
-            onPublishLibSuccess(data, libraryItemsData.libraryItems)
-          }
+          onSuccess={onPublishLibSuccess}
          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() =>
-            library.saveLibrary(libraryItemsData.libraryItems)
-          }
+          updateItemsInStorage={() => library.saveLibrary(libraryItems)}
          onRemove={(id: string) =>
            setSelectedItems(selectedItems.filter((_id) => _id !== id))
          }
        />
      )}
      {publishLibSuccess && renderPublishSuccess()}
-      <LibraryMenuItems
-        libraryItems={libraryItemsData.libraryItems}
-        onRemoveFromLibrary={() =>
-          removeFromLibrary(libraryItemsData.libraryItems)
-        }
-        onAddToLibrary={(elements) =>
-          addToLibrary(elements, libraryItemsData.libraryItems)
-        }
-        onInsertShape={onInsertShape}
-        pendingElements={pendingElements}
-        setAppState={setAppState}
-        libraryReturnUrl={libraryReturnUrl}
-        library={library}
-        theme={theme}
-        files={files}
-        id={id}
-        selectedItems={selectedItems}
-        onToggle={(id, event) => {
-          const shouldSelect = !selectedItems.includes(id);

-          if (shouldSelect) {
-            if (event.shiftKey && lastSelectedItem) {
-              const rangeStart = libraryItemsData.libraryItems.findIndex(
-                (item) => item.id === lastSelectedItem,
-              );
-              const rangeEnd = libraryItemsData.libraryItems.findIndex(
-                (item) => item.id === id,
-              );
+      {loadingState === "loading" ? (
+        <div className="layer-ui__library-message">
+          {t("labels.libraryLoadingMessage")}
+        </div>
+      ) : (
+        <LibraryMenuItems
+          libraryItems={libraryItems}
+          onRemoveFromLibrary={removeFromLibrary}
+          onAddToLibrary={addToLibrary}
+          onInsertShape={onInsertShape}
+          pendingElements={pendingElements}
+          setAppState={setAppState}
+          libraryReturnUrl={libraryReturnUrl}
+          library={library}
+          theme={theme}
+          files={files}
+          id={id}
+          selectedItems={selectedItems}
+          onToggle={(id, event) => {
+            const shouldSelect = !selectedItems.includes(id);

-              if (rangeStart === -1 || rangeEnd === -1) {
+            if (shouldSelect) {
+              if (event.shiftKey && lastSelectedItem) {
+                const rangeStart = libraryItems.findIndex(
+                  (item) => item.id === lastSelectedItem,
+                );
+                const rangeEnd = libraryItems.findIndex(
+                  (item) => item.id === id,
+                );
+
+                if (rangeStart === -1 || rangeEnd === -1) {
+                  setSelectedItems([...selectedItems, id]);
+                  return;
+                }
+
+                const selectedItemsMap = arrayToMap(selectedItems);
+                const nextSelectedIds = libraryItems.reduce(
+                  (acc: LibraryItem["id"][], item, idx) => {
+                    if (
+                      (idx >= rangeStart && idx <= rangeEnd) ||
+                      selectedItemsMap.has(item.id)
+                    ) {
+                      acc.push(item.id);
+                    }
+                    return acc;
+                  },
+                  [],
+                );
+
+                setSelectedItems(nextSelectedIds);
+              } else {
                setSelectedItems([...selectedItems, id]);
-                return;
              }
-
-              const selectedItemsMap = arrayToMap(selectedItems);
-              const nextSelectedIds = libraryItemsData.libraryItems.reduce(
-                (acc: LibraryItem["id"][], item, idx) => {
-                  if (
-                    (idx >= rangeStart && idx <= rangeEnd) ||
-                    selectedItemsMap.has(item.id)
-                  ) {
-                    acc.push(item.id);
-                  }
-                  return acc;
-                },
-                [],
-              );
-
-              setSelectedItems(nextSelectedIds);
+              setLastSelectedItem(id);
            } else {
-              setSelectedItems([...selectedItems, id]);
+              setLastSelectedItem(null);
+              setSelectedItems(selectedItems.filter((_id) => _id !== id));
            }
-            setLastSelectedItem(id);
-          } else {
-            setLastSelectedItem(null);
-            setSelectedItems(selectedItems.filter((_id) => _id !== id));
-          }
-        }}
-        onPublish={() => setShowPublishLibraryDialog(true)}
-        resetLibrary={resetLibrary}
-      />
-    </LibraryMenuWrapper>
+          }}
+          onPublish={() => setShowPublishLibraryDialog(true)}
+          resetLibrary={resetLibrary}
+        />
+      )}
+    </Island>
  );
 };
@@ -12,7 +12,7 @@ import {
  LibraryItems,
 } from "../types";
 import { muteFSAbortError } from "../utils";
-import { useDeviceType } from "./App";
+import { useIsMobile } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 import { exportToFileIcon, load, publishIcon, trash } from "./icons";
 import { LibraryUnit } from "./LibraryUnit";
@@ -85,7 +85,7 @@ const LibraryMenuItems = ({

  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);

-  const isMobile = useDeviceType().isMobile;
+  const isMobile = useIsMobile();

  const renderLibraryActions = () => {
    const itemsSelected = !!selectedItems.length;
@@ -106,6 +106,11 @@ const LibraryMenuItems = ({
            icon={load}
            onClick={() => {
              importLibraryFromJSON(library)
+                .then(() => {
+                  // Close and then open to get the libraries updated
+                  setAppState({ isLibraryOpen: false });
+                  setAppState({ isLibraryOpen: true });
+                })
                .catch(muteFSAbortError)
                .catch((error) => {
                  setAppState({ errorMessage: error.message });
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
 import { MIME_TYPES } from "../constants";
-import { useDeviceType } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { exportToSvg } from "../scene/export";
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
@@ -66,7 +66,7 @@ export const LibraryUnit = ({
  }, [elements, files]);

  const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useDeviceType().isMobile;
+  const isMobile = useIsMobile();
  const adder = isPending && (
    <div className="library-unit__adder">{PLUS_ICON}</div>
  );
@@ -1,30 +1,10 @@
 import { t } from "../i18n";
-import { useState, useEffect } from "react";
-import Spinner from "./Spinner";
-
-export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
-  const [isWaiting, setIsWaiting] = useState(!!delay);
-
-  useEffect(() => {
-    if (!delay) {
-      return;
-    }
-    const timer = setTimeout(() => {
-      setIsWaiting(false);
-    }, delay);
-    return () => clearTimeout(timer);
-  }, [delay]);
-
-  if (isWaiting) {
-    return null;
-  }

+export const LoadingMessage = () => {
+  // !! KEEP THIS IN SYNC WITH index.html !!
  return (
    <div className="LoadingMessage">
-      <div>
-        <Spinner />
-      </div>
-      <div className="LoadingMessage-text">{t("labels.loadingScene")}</div>
+      <span>{t("labels.loadingScene")}</span>
    </div>
  );
 };
@@ -8,7 +8,7 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { Island } from "./Island";
 import { HintViewer } from "./HintViewer";
-import { calculateScrollCenter, getSelectedElements } from "../scene";
+import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import CollabButton from "./CollabButton";
@@ -72,9 +72,8 @@ export const MobileMenu = ({
                  {heading}
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
-                      appState={appState}
                      canvas={canvas}
-                      activeTool={appState.activeTool}
+                      elementType={appState.elementType}
                      setAppState={setAppState}
                      onImageAction={({ pointerType }) => {
                        onImageAction({
@@ -86,7 +85,7 @@ export const MobileMenu = ({
                </Island>
                {renderTopRightUI && renderTopRightUI(true, appState)}
                <LockButton
-                  checked={appState.activeTool.locked}
+                  checked={appState.elementLocked}
                  onChange={onLockToggle}
                  title={t("toolBar.lock")}
                  isMobile
@@ -114,12 +113,6 @@ export const MobileMenu = ({
  };

  const renderAppToolbar = () => {
-    // Render eraser conditionally in mobile
-    const showEraser =
-      !appState.viewModeEnabled &&
-      !appState.editingElement &&
-      getSelectedElements(elements, appState).length === 0;
-
    if (viewModeEnabled) {
      return (
        <div className="App-toolbar-content">
@@ -127,16 +120,12 @@ export const MobileMenu = ({
        </div>
      );
    }
-
    return (
      <div className="App-toolbar-content">
        {actionManager.renderAction("toggleCanvasMenu")}
        {actionManager.renderAction("toggleEditMenu")}
-
        {actionManager.renderAction("undo")}
        {actionManager.renderAction("redo")}
-        {showEraser && actionManager.renderAction("eraser")}
-
        {actionManager.renderAction(
          appState.multiElement ? "finalize" : "duplicateSelection",
        )}
@@ -226,7 +215,7 @@ export const MobileMenu = ({
                appState={appState}
                elements={elements}
                renderAction={actionManager.renderAction}
-                activeTool={appState.activeTool.type}
+                elementType={appState.elementType}
              />
            </Section>
          ) : null}
@@ -4,7 +4,7 @@ import React, { useState, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import { useExcalidrawContainer, useDeviceType } from "./App";
+import { useExcalidrawContainer, useIsMobile } from "./App";
 import { AppState } from "../types";
 import { THEME } from "../constants";

@@ -59,17 +59,17 @@ export const Modal = (props: {
 const useBodyRoot = (theme: AppState["theme"]) => {
  const [div, setDiv] = useState<HTMLDivElement | null>(null);

-  const deviceType = useDeviceType();
-  const isMobileRef = useRef(deviceType.isMobile);
-  isMobileRef.current = deviceType.isMobile;
+  const isMobile = useIsMobile();
+  const isMobileRef = useRef(isMobile);
+  isMobileRef.current = isMobile;

  const { container: excalidrawContainer } = useExcalidrawContainer();

  useLayoutEffect(() => {
    if (div) {
-      div.classList.toggle("excalidraw--mobile", deviceType.isMobile);
+      div.classList.toggle("excalidraw--mobile", isMobile);
    }
-  }, [div, deviceType.isMobile]);
+  }, [div, isMobile]);

  useLayoutEffect(() => {
    const isDarkTheme =
@@ -2,7 +2,7 @@ import React from "react";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { getTargetElements } from "../scene";
 import { AppState, ExcalidrawProps } from "../types";
 import { close } from "./icons";
@@ -16,13 +16,13 @@ export const Stats = (props: {
  onClose: () => void;
  renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }) => {
-  const deviceType = useDeviceType();
+  const isMobile = useIsMobile();

  const boundingBox = getCommonBounds(props.elements);
  const selectedElements = getTargetElements(props.elements, props.appState);
  const selectedBoundingBox = getCommonBounds(selectedElements);

-  if (deviceType.isMobile && props.appState.openMenu) {
+  if (isMobile && props.appState.openMenu) {
    return null;
  }

@@ -48,7 +48,6 @@ type ToolButtonProps =
      type: "radio";
      checked: boolean;
      onChange?(data: { pointerType: PointerType | null }): void;
-      onPointerDown?(data: { pointerType: PointerType }): void;
    });

 export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
@@ -150,7 +149,6 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
      title={props.title}
      onPointerDown={(event) => {
        lastPointerTypeRef.current = event.pointerType || null;
-        props.onPointerDown?.({ pointerType: event.pointerType || null });
      }}
      onPointerUp={() => {
        requestAnimationFrame(() => {
@@ -155,7 +155,7 @@
      }

      width: 2rem;
-      height: 2rem;
+      height: 2em;
    }
  }

@@ -49,7 +49,6 @@
    .ToolIcon__hidden {
      box-shadow: none !important;
      background-color: transparent !important;
-      pointer-events: none !important;
    }

    .ToolIcon.ToolIcon__lock {
@@ -87,14 +86,8 @@

    .ToolIcon {
      &:hover {
-        --icon-fill-color: var(
-          --color-primary-contrast-offset,
-          var(--color-primary)
-        );
-        --keybinding-color: var(
-          --color-primary-contrast-offset,
-          var(--color-primary)
-        );
+        --icon-fill-color: var(--color-primary-chubb);
+        --keybinding-color: var(--color-primary-chubb);
      }
      &:active {
        --icon-fill-color: #{$oc-gray-9};
@@ -885,40 +885,6 @@ export const TextAlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
  ),
 );

-export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      d="m16,132l416,0c8.837,0 16,-7.163 16,-16l0,-40c0,-8.837 -7.163,-16 -16,-16l-416,0c-8.837,0 -16,7.163 -16,16l0,40c0,8.837 7.163,16 16,16zm0,160l416,0c8.837,0 16,-7.163 16,-16l0,-40c0,-8.837 -7.163,-16 -16,-16l-416,0c-8.837,0 -16,7.163 -16,16l0,40c0,8.837 7.163,16 16,16z"
-      fill={iconFillColor(theme)}
-      strokeLinecap="round"
-    />,
-    { width: 448, height: 512 },
-  ),
-);
-
-export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      d="M16,292L432,292C440.837,292 448,284.837 448,276L448,236C448,227.163 440.837,220 432,220L16,220C7.163,220 0,227.163 0,236L0,276C0,284.837 7.163,292 16,292ZM16,452L432,452C440.837,452 448,444.837 448,436L448,396C448,387.163 440.837,380 432,380L16,380C7.163,380 0,387.163 0,396L0,436C0,444.837 7.163,452 16,452Z"
-      fill={iconFillColor(theme)}
-      strokeLinecap="round"
-    />,
-    { width: 448, height: 512 },
-  ),
-);
-
-export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      transform="matrix(1,0,0,1,0,80)"
-      d="M16,132L432,132C440.837,132 448,124.837 448,116L448,76C448,67.163 440.837,60 432,60L16,60C7.163,60 0,67.163 0,76L0,116C0,124.837 7.163,132 16,132ZM16,292L432,292C440.837,292 448,284.837 448,276L448,236C448,227.163 440.837,220 432,220L16,220C7.163,220 0,227.163 0,236L0,276C0,284.837 7.163,292 16,292Z"
-      fill={iconFillColor(theme)}
-      strokeLinecap="round"
-    />,
-    { width: 448, height: 512 },
-  ),
-);
-
 export const publishIcon = createIcon(
  <path
    d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"
@@ -934,7 +900,3 @@ export const editIcon = createIcon(
  ></path>,
  { width: 640, height: 512 },
 );
-
-export const eraser = createIcon(
-  <path d="M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" />,
-);
@@ -24,7 +24,7 @@ export const POINTER_BUTTON = {
  WHEEL: 1,
  SECONDARY: 2,
  TOUCH: -1,
-} as const;
+};

 export enum EVENT {
  COPY = "copy",
@@ -52,8 +52,6 @@ export enum EVENT {
  HASHCHANGE = "hashchange",
  VISIBILITY_CHANGE = "visibilitychange",
  SCROLL = "scroll",
-  // custom events
-  EXCALIDRAW_LINK = "excalidraw-link",
 }

 export const ENV = {
@@ -94,9 +92,7 @@ export const MIME_TYPES = {
  excalidrawlib: "application/vnd.excalidrawlib+json",
  json: "application/json",
  svg: "image/svg+xml",
-  "excalidraw.svg": "image/svg+xml",
  png: "image/png",
-  "excalidraw.png": "image/png",
  jpg: "image/jpeg",
  gif: "image/gif",
  binary: "application/octet-stream",
@@ -184,11 +180,3 @@ export const VERSIONS = {
 } as const;

 export const BOUND_TEXT_PADDING = 5;
-
-export const VERTICAL_ALIGN = {
-  TOP: "top",
-  MIDDLE: "middle",
-  BOTTOM: "bottom",
-};
-
-export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
@@ -16,17 +16,15 @@
  left: 0;
  z-index: 999;
  display: flex;
-  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
-
-  .Spinner {
-    font-size: 2.8em;
-  }
-
-  .LoadingMessage-text {
-    margin-top: 1em;
-    font-size: 0.8em;
-  }
+}
+
+.LoadingMessage span {
+  background-color: var(--button-gray-1);
+  border-radius: 5px;
+  padding: 0.8em 1.2em;
+  color: var(--popup-text-color);
+  font-size: 1.3em;
 }
@@ -290,16 +290,6 @@
    width: 100%;

    box-sizing: border-box;
-
-    .eraser {
-      &.ToolIcon:hover {
-        --icon-fill-color: #fff;
-        --keybinding-color: #fff;
-      }
-      &.active {
-        background-color: var(--color-primary);
-      }
-    }
  }

  .App-toolbar-content {
@@ -477,17 +467,7 @@
    font-family: var(--ui-font);
  }

-  .finalize-button {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 0.4em;
-    margin-top: auto;
-    margin-bottom: auto;
-    margin-inline-start: 0.6em;
-  }
-
-  .undo-redo-buttons,
-  .eraser-buttons {
+  .undo-redo-buttons {
    display: grid;
    grid-auto-flow: column;
    gap: 0.4em;
@@ -38,6 +38,7 @@
  --text-primary-color: #{$oc-gray-8};

  --color-primary: #6965db;
+  --color-primary-chubb: #625ee0; // to offset Chubb illusion
  --color-primary-darker: #5b57d1;
  --color-primary-darkest: #4a47b1;
  --color-primary-light: #e2e1fc;
@@ -84,6 +85,7 @@
    --text-primary-color: #{$oc-gray-4};

    --color-primary: #5650f0;
+    --color-primary-chubb: #726dff; // to offset Chubb illusion
    --color-primary-darker: #4b46d8;
    --color-primary-darkest: #3e39be;
    --color-primary-light: #3f3d64;
@@ -1,16 +1,20 @@
 import { nanoid } from "nanoid";
 import { cleanAppStateForExport } from "../appState";
-import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
+import {
+  ALLOWED_IMAGE_MIME_TYPES,
+  EXPORT_DATA_TYPES,
+  MIME_TYPES,
+} from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
-import { AppState, DataURL, LibraryItem } from "../types";
+import { AppState, DataURL } from "../types";
 import { bytesToHexString } from "../utils";
 import { FileSystemHandle } from "./filesystem";
-import { isValidExcalidrawData, isValidLibrary } from "./json";
-import { restore, restoreLibraryItems } from "./restore";
+import { isValidExcalidrawData } from "./json";
+import { restore } from "./restore";
 import { ImportedLibraryData } from "./types";

 const parseFileContents = async (blob: Blob | File) => {
@@ -159,17 +163,13 @@ export const loadFromBlob = async (
  }
 };

-export const loadLibraryFromBlob = async (
-  blob: Blob,
-  defaultStatus: LibraryItem["status"] = "unpublished",
-) => {
+export const loadLibraryFromBlob = async (blob: Blob) => {
  const contents = await parseFileContents(blob);
-  const data: ImportedLibraryData | undefined = JSON.parse(contents);
-  if (!isValidLibrary(data)) {
-    throw new Error("Invalid library");
+  const data: ImportedLibraryData = JSON.parse(contents);
+  if (data.type !== EXPORT_DATA_TYPES.excalidrawLibrary) {
+    throw new Error(t("alerts.couldNotLoadInvalidFile"));
  }
-  const libraryItems = data.libraryItems || data.library;
-  return restoreLibraryItems(libraryItems, defaultStatus);
+  return data;
 };

 export const canvasToBlob = async (
@@ -13,9 +13,7 @@ type FILE_EXTENSION =
  | "gif"
  | "jpg"
  | "png"
-  | "excalidraw.png"
  | "svg"
-  | "excalidraw.svg"
  | "json"
  | "excalidraw"
  | "excalidrawlib";
@@ -105,9 +105,7 @@ export const encodeSvgMetadata = async ({ text }: { text: string }) => {

 export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
  if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
-    const match = svg.match(
-      /<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/,
-    );
+    const match = svg.match(/<!-- payload-start -->(.+?)<!-- payload-end -->/);
    if (!match) {
      throw new Error("INVALID");
    }
@@ -16,7 +16,7 @@ export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";

 export const exportCanvas = async (
-  type: Omit<ExportType, "backend">,
+  type: ExportType,
  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
@@ -56,7 +56,7 @@ export const exportCanvas = async (
        {
          description: "Export to SVG",
          name,
-          extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
+          extension: "svg",
          fileHandle,
        },
      );
@@ -73,10 +73,10 @@ export const exportCanvas = async (
  });
  tempCanvas.style.display = "none";
  document.body.appendChild(tempCanvas);
+  let blob = await canvasToBlob(tempCanvas);
+  tempCanvas.remove();

  if (type === "png") {
-    let blob = await canvasToBlob(tempCanvas);
-    tempCanvas.remove();
    if (appState.exportEmbedScene) {
      blob = await (
        await import(/* webpackChunkName: "image" */ "./image")
@@ -89,24 +89,17 @@ export const exportCanvas = async (
    return await fileSave(blob, {
      description: "Export to PNG",
      name,
-      extension: appState.exportEmbedScene ? "excalidraw.png" : "png",
+      extension: "png",
      fileHandle,
    });
  } else if (type === "clipboard") {
    try {
-      const blob = canvasToBlob(tempCanvas);
      await copyBlobToClipboardAsPng(blob);
    } catch (error: any) {
      if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
        throw error;
      }
      throw new Error(t("alerts.couldNotCopyToClipboard"));
-    } finally {
-      tempCanvas.remove();
    }
-  } else {
-    tempCanvas.remove();
-    // shouldn't happen
-    throw new Error("Unsupported export type");
  }
 };
@@ -15,7 +15,6 @@ import {
  ExportedDataState,
  ImportedDataState,
  ExportedLibraryData,
-  ImportedLibraryData,
 } from "./types";
 import Library from "./library";

@@ -115,7 +114,7 @@ export const isValidExcalidrawData = (data?: {
  );
 };

-export const isValidLibrary = (json: any): json is ImportedLibraryData => {
+export const isValidLibrary = (json: any) => {
  return (
    typeof json === "object" &&
    json &&
@@ -124,18 +123,14 @@ export const isValidLibrary = (json: any): json is ImportedLibraryData => {
  );
 };

-export const serializeLibraryAsJSON = (libraryItems: LibraryItems) => {
+export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
  const data: ExportedLibraryData = {
    type: EXPORT_DATA_TYPES.excalidrawLibrary,
    version: VERSIONS.excalidrawLibrary,
    source: EXPORT_SOURCE,
    libraryItems,
  };
-  return JSON.stringify(data, null, 2);
-};
-
-export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
-  const serialized = serializeLibraryAsJSON(libraryItems);
+  const serialized = JSON.stringify(data, null, 2);
  await fileSave(
    new Blob([serialized], {
      type: MIME_TYPES.excalidrawlib,
@@ -1,52 +1,11 @@
 import { loadLibraryFromBlob } from "./blob";
 import { LibraryItems, LibraryItem } from "../types";
-import { restoreLibraryItems } from "./restore";
+import { restoreElements, restoreLibraryItems } from "./restore";
+import { getNonDeletedElements } from "../element";
 import type App from "../components/App";
-import { ImportedDataState } from "./types";
-import { atom } from "jotai";
-import { jotaiStore } from "../jotai";
-import { isPromiseLike } from "../utils";
-import { t } from "../i18n";
-
-export const libraryItemsAtom = atom<
-  | { status: "loading"; libraryItems: null; promise: Promise<LibraryItems> }
-  | { status: "loaded"; libraryItems: LibraryItems }
->({ status: "loaded", libraryItems: [] });
-
-const cloneLibraryItems = (libraryItems: LibraryItems): LibraryItems =>
-  JSON.parse(JSON.stringify(libraryItems));
-
-/**
- * checks if library item does not exist already in current library
- */
-const isUniqueItem = (
-  existingLibraryItems: LibraryItems,
-  targetLibraryItem: LibraryItem,
-) => {
-  return !existingLibraryItems.find((libraryItem) => {
-    if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
-      return false;
-    }
-
-    // detect z-index difference by checking the excalidraw elements
-    // are in order
-    return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
-      return (
-        libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id &&
-        libItemExcalidrawItem.versionNonce ===
-          targetLibraryItem.elements[idx].versionNonce
-      );
-    });
-  });
-};

 class Library {
-  /** cache for currently active promise when initializing/updating libaries
-   asynchronously */
-  private libraryItemsPromise: Promise<LibraryItems> | null = null;
-  /** last resolved libraryItems */
-  private lastLibraryItems: LibraryItems = [];
-
+  private libraryCache: LibraryItems | null = null;
  private app: App;

  constructor(app: App) {
@@ -54,92 +13,107 @@ class Library {
  }

  resetLibrary = async () => {
-    this.saveLibrary([]);
+    await this.app.props.onLibraryChange?.([]);
+    this.libraryCache = [];
+  };
+
+  restoreLibraryItem = (libraryItem: LibraryItem): LibraryItem | null => {
+    const elements = getNonDeletedElements(
+      restoreElements(libraryItem.elements, null),
+    );
+    return elements.length ? { ...libraryItem, elements } : null;
  };

  /** imports library (currently merges, removing duplicates) */
-  async importLibrary(
-    library:
-      | Blob
-      | Required<ImportedDataState>["libraryItems"]
-      | Promise<Required<ImportedDataState>["libraryItems"]>,
-    defaultStatus: LibraryItem["status"] = "unpublished",
-  ) {
-    return this.saveLibrary(
-      new Promise<LibraryItems>(async (resolve, reject) => {
-        try {
-          let libraryItems: LibraryItems;
-          if (library instanceof Blob) {
-            libraryItems = await loadLibraryFromBlob(library, defaultStatus);
-          } else {
-            libraryItems = restoreLibraryItems(await library, defaultStatus);
-          }
+  async importLibrary(blob: Blob, defaultStatus = "unpublished") {
+    const libraryFile = await loadLibraryFromBlob(blob);
+    if (!libraryFile || !(libraryFile.libraryItems || libraryFile.library)) {
+      return;
+    }

-          const existingLibraryItems = this.lastLibraryItems;
-
-          const filteredItems = [];
-          for (const item of libraryItems) {
-            if (isUniqueItem(existingLibraryItems, item)) {
-              filteredItems.push(item);
-            }
-          }
-
-          resolve([...filteredItems, ...existingLibraryItems]);
-        } catch (error) {
-          reject(new Error(t("errors.importLibraryError")));
+    /**
+     * checks if library item does not exist already in current library
+     */
+    const isUniqueitem = (
+      existingLibraryItems: LibraryItems,
+      targetLibraryItem: LibraryItem,
+    ) => {
+      return !existingLibraryItems.find((libraryItem) => {
+        if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
+          return false;
        }
-      }),
+
+        // detect z-index difference by checking the excalidraw elements
+        // are in order
+        return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
+          return (
+            libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id &&
+            libItemExcalidrawItem.versionNonce ===
+              targetLibraryItem.elements[idx].versionNonce
+          );
+        });
+      });
+    };
+
+    const existingLibraryItems = await this.loadLibrary();
+
+    const library = libraryFile.libraryItems || libraryFile.library || [];
+    const restoredLibItems = restoreLibraryItems(
+      library,
+      defaultStatus as "published" | "unpublished",
    );
+    const filteredItems = [];
+    for (const item of restoredLibItems) {
+      const restoredItem = this.restoreLibraryItem(item as LibraryItem);
+      if (restoredItem && isUniqueitem(existingLibraryItems, restoredItem)) {
+        filteredItems.push(restoredItem);
+      }
+    }
+
+    await this.saveLibrary([...filteredItems, ...existingLibraryItems]);
  }

  loadLibrary = (): Promise<LibraryItems> => {
    return new Promise(async (resolve) => {
+      if (this.libraryCache) {
+        return resolve(JSON.parse(JSON.stringify(this.libraryCache)));
+      }
+
      try {
-        resolve(
-          cloneLibraryItems(
-            await (this.libraryItemsPromise || this.lastLibraryItems),
-          ),
-        );
-      } catch (error) {
-        return resolve(this.lastLibraryItems);
+        const libraryItems = this.app.libraryItemsFromStorage;
+        if (!libraryItems) {
+          return resolve([]);
+        }
+
+        const items = libraryItems.reduce((acc, item) => {
+          const restoredItem = this.restoreLibraryItem(item);
+          if (restoredItem) {
+            acc.push(item);
+          }
+          return acc;
+        }, [] as Mutable<LibraryItems>);
+
+        // clone to ensure we don't mutate the cached library elements in the app
+        this.libraryCache = JSON.parse(JSON.stringify(items));
+
+        resolve(items);
+      } catch (error: any) {
+        console.error(error);
+        resolve([]);
      }
    });
  };

-  saveLibrary = async (items: LibraryItems | Promise<LibraryItems>) => {
-    const prevLibraryItems = this.lastLibraryItems;
+  saveLibrary = async (items: LibraryItems) => {
+    const prevLibraryItems = this.libraryCache;
    try {
-      let nextLibraryItems;
-      if (isPromiseLike(items)) {
-        const promise = items.then((items) => cloneLibraryItems(items));
-        this.libraryItemsPromise = promise;
-        jotaiStore.set(libraryItemsAtom, {
-          status: "loading",
-          promise,
-          libraryItems: null,
-        });
-        nextLibraryItems = await promise;
-      } else {
-        nextLibraryItems = cloneLibraryItems(items);
-      }
-
-      this.lastLibraryItems = nextLibraryItems;
-      this.libraryItemsPromise = null;
-
-      jotaiStore.set(libraryItemsAtom, {
-        status: "loaded",
-        libraryItems: nextLibraryItems,
-      });
-      await this.app.props.onLibraryChange?.(
-        cloneLibraryItems(nextLibraryItems),
-      );
+      const serializedItems = JSON.stringify(items);
+      // cache optimistically so that the app has access to the latest
+      // immediately
+      this.libraryCache = JSON.parse(serializedItems);
+      await this.app.props.onLibraryChange?.(items);
    } catch (error: any) {
-      this.lastLibraryItems = prevLibraryItems;
-      this.libraryItemsPromise = null;
-      jotaiStore.set(libraryItemsAtom, {
-        status: "loaded",
-        libraryItems: prevLibraryItems,
-      });
+      this.libraryCache = prevLibraryItems;
      throw error;
    }
  };
@@ -10,11 +10,7 @@ import {
  NormalizedZoomValue,
 } from "../types";
 import { ImportedDataState } from "./types";
-import {
-  getNonDeletedElements,
-  getNormalizedDimensions,
-  isInvisiblySmallElement,
-} from "../element";
+import { getNormalizedDimensions, isInvisiblySmallElement } from "../element";
 import { isLinearElementType } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
@@ -34,9 +30,9 @@ type RestoredAppState = Omit<
  "offsetTop" | "offsetLeft" | "width" | "height"
 >;

-export const AllowedExcalidrawActiveTools: Record<
-  AppState["activeTool"]["type"],
-  boolean
+export const AllowedExcalidrawElementTypes: Record<
+  ExcalidrawElement["type"],
+  true
 > = {
  selection: true,
  text: true,
@@ -47,7 +43,6 @@ export const AllowedExcalidrawActiveTools: Record<
  image: true,
  arrow: true,
  freedraw: true,
-  eraser: false,
 };

 export type RestoredDataState = {
@@ -111,7 +106,6 @@ const restoreElementWithProperties = <
      : element.boundElements ?? [],
    updated: element.updated ?? getUpdatedTimestamp(),
    link: element.link ?? null,
-    locked: element.locked ?? false,
  };

  return {
@@ -240,8 +234,10 @@ export const restoreAppState = (
  localAppState: Partial<AppState> | null | undefined,
 ): RestoredAppState => {
  appState = appState || {};
+
  const defaultAppState = getDefaultAppState();
  const nextAppState = {} as typeof defaultAppState;
+
  for (const [key, defaultValue] of Object.entries(defaultAppState) as [
    keyof typeof defaultAppState,
    any,
@@ -255,20 +251,12 @@ export const restoreAppState = (
        ? localValue
        : defaultValue;
  }
+
  return {
    ...nextAppState,
-    cursorButton: localAppState?.cursorButton || "up",
-    // reset on fresh restore so as to hide the UI button if penMode not active
-    penDetected:
-      localAppState?.penDetected ??
-      (appState.penMode ? appState.penDetected ?? false : false),
-    activeTool: {
-      lastActiveToolBeforeEraser: null,
-      locked: nextAppState.activeTool.locked ?? false,
-      type: AllowedExcalidrawActiveTools[nextAppState.activeTool.type]
-        ? nextAppState.activeTool.type ?? "selection"
-        : "selection",
-    },
+    elementType: AllowedExcalidrawElementTypes[nextAppState.elementType]
+      ? nextAppState.elementType
+      : "selection",
    // Migrates from previous version where appState.zoom was a number
    zoom:
      typeof appState.zoom === "number"
@@ -280,7 +268,7 @@ export const restoreAppState = (
 };

 export const restore = (
-  data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null,
+  data: ImportedDataState | null,
  /**
   * Local AppState (`this.state` or initial state from localStorage) so that we
   * don't overwrite local state with default values (when values not
@@ -297,45 +285,28 @@ export const restore = (
  };
 };

-const restoreLibraryItem = (libraryItem: LibraryItem) => {
-  const elements = restoreElements(
-    getNonDeletedElements(libraryItem.elements),
-    null,
-  );
-  return elements.length ? { ...libraryItem, elements } : null;
-};
-
 export const restoreLibraryItems = (
-  libraryItems: ImportedDataState["libraryItems"] = [],
+  libraryItems: NonOptional<ImportedDataState["libraryItems"]>,
  defaultStatus: LibraryItem["status"],
 ) => {
  const restoredItems: LibraryItem[] = [];
  for (const item of libraryItems) {
    // migrate older libraries
    if (Array.isArray(item)) {
-      const restoredItem = restoreLibraryItem({
+      restoredItems.push({
        status: defaultStatus,
        elements: item,
        id: randomId(),
        created: Date.now(),
      });
-      if (restoredItem) {
-        restoredItems.push(restoredItem);
-      }
    } else {
-      const _item = item as MarkOptional<
-        LibraryItem,
-        "id" | "status" | "created"
-      >;
-      const restoredItem = restoreLibraryItem({
+      const _item = item as MarkOptional<LibraryItem, "id" | "status">;
+      restoredItems.push({
        ..._item,
        id: _item.id || randomId(),
        status: _item.status || defaultStatus,
        created: _item.created || Date.now(),
      });
-      if (restoredItem) {
-        restoredItems.push(restoredItem);
-      }
    }
  }
  return restoredItems;
@@ -1,9 +1,8 @@
-import { AppState, ExcalidrawProps, Point } from "../types";
+import { AppState, Point } from "../types";
 import {
  getShortcutKey,
  sceneCoordsToViewportCoords,
  viewportCoordsToSceneCoords,
-  wrapEvent,
 } from "../utils";
 import { mutateElement } from "./mutateElement";
 import { NonDeletedExcalidrawElement } from "./types";
@@ -31,7 +30,6 @@ import { isPointHittingElementBoundingBox } from "./collision";
 import { getElementAbsoluteCoords } from "./";

 import "./Hyperlink.scss";
-import { trackEvent } from "../analytics";

 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -50,12 +48,10 @@ export const Hyperlink = ({
  element,
  appState,
  setAppState,
-  onLinkOpen,
 }: {
  element: NonDeletedExcalidrawElement;
  appState: AppState;
  setAppState: React.Component<any, AppState>["setState"];
-  onLinkOpen: ExcalidrawProps["onLinkOpen"];
 }) => {
  const linkVal = element.link || "";

@@ -70,10 +66,6 @@ export const Hyperlink = ({

    const link = normalizeLink(inputRef.current.value);

-    if (!element.link && link) {
-      trackEvent("hyperlink", "create");
-    }
-
    mutateElement(element, { link });
    setAppState({ showHyperlinkPopup: "info" });
  }, [element, setAppState]);
@@ -113,7 +105,6 @@ export const Hyperlink = ({
  }, [appState, element, isEditing, setAppState]);

  const handleRemove = useCallback(() => {
-    trackEvent("hyperlink", "delete");
    mutateElement(element, { link: null });
    if (isEditing) {
      inputRef.current!.value = "";
@@ -122,15 +113,13 @@ export const Hyperlink = ({
  }, [setAppState, element, isEditing]);

  const onEdit = () => {
-    trackEvent("hyperlink", "edit", "popup-ui");
    setAppState({ showHyperlinkPopup: "editor" });
  };
  const { x, y } = getCoordsForPopover(element, appState);
  if (
    appState.draggingElement ||
    appState.resizingElement ||
-    appState.isRotating ||
-    appState.openMenu
+    appState.isRotating
  ) {
    return null;
  }
@@ -170,18 +159,6 @@ export const Hyperlink = ({
            "d-none": isEditing,
          })}
          target={isLocalLink(element.link) ? "_self" : "_blank"}
-          onClick={(event) => {
-            if (element.link && onLinkOpen) {
-              const customEvent = wrapEvent(
-                EVENT.EXCALIDRAW_LINK,
-                event.nativeEvent,
-              );
-              onLinkOpen(element, customEvent);
-              if (customEvent.defaultPrevented) {
-                event.preventDefault();
-              }
-            }
-          }}
          rel="noopener noreferrer"
        >
          {element.link}
@@ -220,9 +197,8 @@ const getCoordsForPopover = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
 ) => {
-  const [x1, y1] = getElementAbsoluteCoords(element);
  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
-    { sceneX: x1 + element.width / 2, sceneY: y1 },
+    { sceneX: element.x + element.width / 2, sceneY: element.y },
    appState,
  );
  const x = viewportX - appState.offsetLeft - CONTAINER_WIDTH / 2;
@@ -246,23 +222,20 @@ export const isLocalLink = (link: string | null) => {
 };

 export const actionLink = register({
-  name: "hyperlink",
+  name: "link",
  perform: (elements, appState) => {
    if (appState.showHyperlinkPopup === "editor") {
      return false;
    }
-
    return {
      elements,
      appState: {
        ...appState,
        showHyperlinkPopup: "editor",
-        openMenu: null,
      },
      commitToHistory: true,
    };
  },
-  trackEvent: { category: "hyperlink", action: "click" },
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
  contextItemLabel: (elements, appState) =>
    getContextMenuLabel(elements, appState),
@@ -333,19 +306,9 @@ export const isPointHittingLinkIcon = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
  [x, y]: Point,
-  isMobile: boolean,
 ) => {
-  if (!element.link || appState.selectedElementIds[element.id]) {
-    return false;
-  }
  const threshold = 4 / appState.zoom.value;
-  if (
-    !isMobile &&
-    appState.viewModeEnabled &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold)
-  ) {
-    return true;
-  }
+
  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);

  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
@@ -358,6 +321,7 @@ export const isPointHittingLinkIcon = (
    x < linkX + threshold + linkWidth &&
    y > linkY - threshold &&
    y < linkY + linkHeight + threshold;
+
  return hitLink;
 };

@@ -412,7 +376,6 @@ const renderTooltip = (
    },
    "top",
  );
-  trackEvent("hyperlink", "tooltip", "link-icon");

  IS_HYPERLINK_TOOLTIP_VISIBLE = true;
 };
@@ -441,13 +404,13 @@ export const shouldHideLinkPopup = (
  if (isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold)) {
    return false;
  }
-  const [x1, y1, x2] = getElementAbsoluteCoords(element);
+
  // hit box to prevent hiding when hovered in the vertical area between element and popover
  if (
-    sceneX >= x1 &&
-    sceneX <= x2 &&
-    sceneY >= y1 - SPACE_BOTTOM &&
-    sceneY <= y1
+    sceneX >= element.x &&
+    sceneX <= element.x + element.width &&
+    sceneY <= element.y &&
+    sceneY >= element.y - SPACE_BOTTOM
  ) {
    return false;
  }
@@ -255,8 +255,7 @@ export const getHoveredElementForBinding = (
  const hoveredElement = getElementAtPosition(
    scene.getElements(),
    (element) =>
-      isBindableElement(element, false) &&
-      bindingBorderTest(element, pointerCoords),
+      isBindableElement(element) && bindingBorderTest(element, pointerCoords),
  );
  return hoveredElement as NonDeleted<ExcalidrawBindableElement> | null;
 };
@@ -457,13 +456,13 @@ export const getEligibleElementsForBinding = (
 ): SuggestedBinding[] => {
  const includedElementIds = new Set(elements.map(({ id }) => id));
  return elements.flatMap((element) =>
-    isBindingElement(element, false)
+    isBindingElement(element)
      ? (getElligibleElementsForBindingElement(
          element as NonDeleted<ExcalidrawLinearElement>,
        ).filter(
          (element) => !includedElementIds.has(element.id),
        ) as SuggestedBinding[])
-      : isBindableElement(element, false)
+      : isBindableElement(element)
      ? getElligibleElementsForBindableElementAndWhere(element).filter(
          (binding) => !includedElementIds.has(binding[0].id),
        )
@@ -509,7 +508,7 @@ const getElligibleElementsForBindableElementAndWhere = (
  return Scene.getScene(bindableElement)!
    .getElements()
    .map((element) => {
-      if (!isBindingElement(element, false)) {
+      if (!isBindingElement(element)) {
        return null;
      }
      const canBindStart = isLinearElementEligibleForNewBindingByBindable(
@@ -660,47 +659,28 @@ export const fixBindingsAfterDeletion = (
  const deletedElementIds = new Set(
    deletedElements.map((element) => element.id),
  );
-  // non-deleted which bindings need to be updated
-  const affectedElements: Set<ExcalidrawElement["id"]> = new Set();
+  // Non deleted and need an update
+  const boundElementIds: Set<ExcalidrawElement["id"]> = new Set();
  deletedElements.forEach((deletedElement) => {
    if (isBindableElement(deletedElement)) {
      deletedElement.boundElements?.forEach((element) => {
        if (!deletedElementIds.has(element.id)) {
-          affectedElements.add(element.id);
+          boundElementIds.add(element.id);
        }
      });
-    } else if (isBindingElement(deletedElement)) {
-      if (deletedElement.startBinding) {
-        affectedElements.add(deletedElement.startBinding.elementId);
-      }
-      if (deletedElement.endBinding) {
-        affectedElements.add(deletedElement.endBinding.elementId);
-      }
    }
  });
-  sceneElements
-    .filter(({ id }) => affectedElements.has(id))
-    .forEach((element) => {
-      if (isBindableElement(element)) {
-        mutateElement(element, {
-          boundElements: newBoundElementsAfterDeletion(
-            element.boundElements,
-            deletedElementIds,
-          ),
-        });
-      } else if (isBindingElement(element)) {
-        mutateElement(element, {
-          startBinding: newBindingAfterDeletion(
-            element.startBinding,
-            deletedElementIds,
-          ),
-          endBinding: newBindingAfterDeletion(
-            element.endBinding,
-            deletedElementIds,
-          ),
-        });
-      }
+  (
+    sceneElements.filter(({ id }) =>
+      boundElementIds.has(id),
+    ) as ExcalidrawLinearElement[]
+  ).forEach((element: ExcalidrawLinearElement) => {
+    const { startBinding, endBinding } = element;
+    mutateElement(element, {
+      startBinding: newBindingAfterDeletion(startBinding, deletedElementIds),
+      endBinding: newBindingAfterDeletion(endBinding, deletedElementIds),
    });
+  });
 };

 const newBindingAfterDeletion = (
@@ -712,13 +692,3 @@ const newBindingAfterDeletion = (
  }
  return binding;
 };
-
-const newBoundElementsAfterDeletion = (
-  boundElements: ExcalidrawElement["boundElements"],
-  deletedElementIds: Set<ExcalidrawElement["id"]>,
-) => {
-  if (!boundElements) {
-    return null;
-  }
-  return boundElements.filter((ele) => !deletedElementIds.has(ele.id));
-};
@@ -185,7 +185,7 @@ const getLinearElementAbsoluteCoords = (
      maxY + element.y,
    ];
  } else {
-    const shape = getShapeForElement(element)!;
+    const shape = getShapeForElement(element) as Drawable[];

    // first element is always the curve
    const ops = getCurvePathOps(shape[0]);
@@ -326,7 +326,7 @@ const getLinearElementRotatedBounds = (
    return [minX, minY, maxX, maxY];
  }

-  const shape = getShapeForElement(element)!;
+  const shape = getShapeForElement(element) as Drawable[];

  // first element is always the curve
  const ops = getCurvePathOps(shape[0]);
@@ -24,7 +24,6 @@ import {
  NonDeleted,
  ExcalidrawFreeDrawElement,
  ExcalidrawImageElement,
-  ExcalidrawLinearElement,
 } from "./types";

 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@@ -362,14 +361,6 @@ const hitTestFreeDrawElement = (
    B = element.points[i + 1];
  }

-  const shape = getShapeForElement(element);
-
-  // for filled freedraw shapes, support
-  // selecting from inside
-  if (shape && shape.sets.length) {
-    return hitTestRoughShape(shape, x, y, threshold);
-  }
-
  return false;
 };

@@ -392,11 +383,7 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
  }
  const [relX, relY] = GAPoint.toTuple(point);

-  const shape = getShapeForElement(element as ExcalidrawLinearElement);
-
-  if (!shape) {
-    return false;
-  }
+  const shape = getShapeForElement(element) as Drawable[];

  if (args.check === isInsideCheck) {
    const hit = shape.some((subshape) =>
@@ -646,7 +633,7 @@ const getCorners = (

 // Returns intersection of `line` with `segment`, with `segment` moved by
 // `gap` in its polar direction.
-// If intersection coincides with second segment point returns empty array.
+// If intersection conincides with second segment point returns empty array.
 const intersectSegment = (
  line: GA.Line,
  segment: [GA.Point, GA.Point],
@@ -834,7 +821,7 @@ const hitTestCurveInside = (
  sharpness: ExcalidrawElement["strokeSharpness"],
 ) => {
  const ops = getCurvePathOps(drawable);
-  const points: Mutable<Point>[] = [];
+  const points: Point[] = [];
  let odd = false; // select one line out of double lines
  for (const operation of ops) {
    if (operation.op === "move") {
@@ -848,17 +835,13 @@ const hitTestCurveInside = (
        points.push([operation.data[2], operation.data[3]]);
        points.push([operation.data[4], operation.data[5]]);
      }
-    } else if (operation.op === "lineTo") {
-      if (odd) {
-        points.push([operation.data[0], operation.data[1]]);
-      }
    }
  }
  if (points.length >= 4) {
    if (sharpness === "sharp") {
      return isPointInPolygon(points, x, y);
    }
-    const polygonPoints = pointsOnBezierCurves(points, 10, 5);
+    const polygonPoints = pointsOnBezierCurves(points as any, 10, 5);
    return isPointInPolygon(polygonPoints, x, y);
  }
  return false;
@@ -913,10 +896,9 @@ const hitTestRoughShape = (
      // position of the previous operation
      return retVal;
    } else if (op === "lineTo") {
-      return hitTestCurveInside(drawable, x, y, "sharp");
+      // TODO: Implement this
    } else if (op === "qcurveTo") {
      // TODO: Implement this
-      console.warn("qcurveTo is not implemented yet");
    }

    return false;
@@ -1,10 +1,12 @@
+import { SHAPES } from "../shapes";
 import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
+import Scene from "../scene/Scene";
 import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
-import { getBoundTextElement } from "./textElement";
+import { getBoundTextElementId } from "./textElement";
 import { isSelectedViaGroup } from "../groups";

 export const dragSelectedElements = (
@@ -37,14 +39,16 @@ export const dragSelectedElements = (
      // container is part of a group, but we're dragging the container directly
      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
    ) {
-      const textElement = getBoundTextElement(element);
-      if (textElement) {
+      const boundTextElementId = getBoundTextElementId(element);
+      if (boundTextElementId) {
+        const textElement =
+          Scene.getScene(element)!.getElement(boundTextElementId);
        updateElementCoords(
          lockDirection,
          distanceX,
          distanceY,
          pointerDownState,
-          textElement,
+          textElement!,
          offset,
        );
      }
@@ -92,7 +96,7 @@ export const getDragOffsetXY = (

 export const dragNewElement = (
  draggingElement: NonDeletedExcalidrawElement,
-  elementType: AppState["activeTool"]["type"],
+  elementType: typeof SHAPES[number]["value"],
  originX: number,
  originY: number,
  x: number,
@@ -106,20 +106,6 @@ export const normalizeSVG = async (SVGString: string) => {
      svg.setAttribute("xmlns", SVG_NS);
    }

-    if (!svg.hasAttribute("width") || !svg.hasAttribute("height")) {
-      const viewBox = svg.getAttribute("viewBox");
-      let width = svg.getAttribute("width") || "50";
-      let height = svg.getAttribute("height") || "50";
-      if (viewBox) {
-        const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
-        if (match) {
-          [, width, height] = match;
-        }
-      }
-      svg.setAttribute("width", width);
-      svg.setAttribute("height", height);
-    }
-
    return svg.outerHTML;
  }
 };
@@ -205,7 +205,7 @@ export class LinearElementEditor {
      );

      // suggest bindings for first and last point if selected
-      if (isBindingElement(element, false)) {
+      if (isBindingElement(element)) {
        const coords: { x: number; y: number }[] = [];

        const firstSelectedIndex = selectedPointsIndices[0];
@@ -401,7 +401,7 @@ export class LinearElementEditor {
      ret.hitElement = element;
    } else {
      // You might be wandering why we are storing the binding elements on
-      // LinearElementEditor and passing them in, instead of calculating them
+      // LinearElementEditor and passing them in, insted of calculating them
      // from the end points of the `linearElement` - this is to allow disabling
      // binding (which needs to happen at the point the user finishes moving
      // the point).
@@ -2,7 +2,11 @@ import { duplicateElement } from "./newElement";
 import { mutateElement } from "./mutateElement";
 import { API } from "../tests/helpers/api";
 import { FONT_FAMILY } from "../constants";
-import { isPrimitive } from "../utils";
+
+const isPrimitive = (val: any) => {
+  const type = typeof val;
+  return val == null || (type !== "object" && type !== "function");
+};

 const assertCloneObjects = (source: any, clone: any) => {
  for (const key in clone) {
@@ -22,7 +22,8 @@ import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import { getContainerElement, measureText, wrapText } from "./textElement";
-import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+import { isBoundToContainer } from "./typeChecks";
+import { BOUND_TEXT_PADDING } from "../constants";

 type ElementConstructorOpts = MarkOptional<
  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -56,7 +57,6 @@ const _newElementBase = <T extends ExcalidrawElement>(
    strokeSharpness,
    boundElements = null,
    link = null,
-    locked,
    ...rest
  }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
@@ -84,7 +84,6 @@ const _newElementBase = <T extends ExcalidrawElement>(
    boundElements,
    updated: getUpdatedTimestamp(),
    link,
-    locked,
  };
  return element;
 };
@@ -176,7 +175,7 @@ const getAdjustedDimensions = (
  let y: number;
  if (
    textAlign === "center" &&
-    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
+    verticalAlign === "middle" &&
    !element.containerId
  ) {
    const prevMetrics = measureText(
@@ -222,7 +221,8 @@ const getAdjustedDimensions = (

  // make sure container dimensions are set properly when
  // text editor overflows beyond viewport dimensions
-  if (container) {
+  if (isBoundToContainer(element)) {
+    const container = getContainerElement(element)!;
    let height = container.height;
    let width = container.width;
    if (nextHeight > height - BOUND_TEXT_PADDING * 2) {
@@ -1,4 +1,4 @@
-import { BOUND_TEXT_PADDING, SHIFT_LOCKING_ANGLE } from "../constants";
+import { SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";

 import {
@@ -12,7 +12,6 @@ import {
  ExcalidrawTextElement,
  NonDeletedExcalidrawElement,
  NonDeleted,
-  ExcalidrawElement,
 } from "./types";
 import {
  getElementAbsoluteCoords,
@@ -36,7 +35,6 @@ import {
 import { Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
-  getApproxMinLineHeight,
  getApproxMinLineWidth,
  getBoundTextElement,
  getBoundTextElementId,
@@ -107,7 +105,7 @@ export const transformElements = (
      updateBoundElements(element);
    } else if (transformHandleType) {
      resizeSingleElement(
-        pointerDownState.originalElements,
+        pointerDownState.originalElements.get(element.id) as typeof element,
        shouldMaintainAspectRatio,
        element,
        transformHandleType,
@@ -142,6 +140,7 @@ export const transformElements = (
        pointerX,
        pointerY,
      );
+      handleBindTextResize(selectedElements, transformHandleType);
      return true;
    }
  }
@@ -187,7 +186,7 @@ const validateTwoPointElementNormalized = (
 };

 const getPerfectElementSizeWithRotation = (
-  elementType: ExcalidrawElement["type"],
+  elementType: string,
  width: number,
  height: number,
  angle: number,
@@ -398,7 +397,7 @@ const resizeSingleTextElement = (
 };

 export const resizeSingleElement = (
-  originalElements: PointerDownState["originalElements"],
+  stateAtResizeStart: NonDeletedExcalidrawElement,
  shouldMaintainAspectRatio: boolean,
  element: NonDeletedExcalidrawElement,
  transformHandleDirection: TransformHandleDirection,
@@ -406,7 +405,6 @@ export const resizeSingleElement = (
  pointerX: number,
  pointerY: number,
 ) => {
-  const stateAtResizeStart = originalElements.get(element.id)!;
  // Gets bounds corners
  const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
    stateAtResizeStart,
@@ -431,6 +429,8 @@ export const resizeSingleElement = (
    element.height,
  );

+  const boundTextElementId = getBoundTextElementId(element);
+
  const boundsCurrentWidth = esx2 - esx1;
  const boundsCurrentHeight = esy2 - esy1;

@@ -441,9 +441,6 @@ export const resizeSingleElement = (
  let scaleX = atStartBoundsWidth / boundsCurrentWidth;
  let scaleY = atStartBoundsHeight / boundsCurrentHeight;

-  let boundTextFont: { fontSize?: number; baseline?: number } = {};
-  const boundTextElement = getBoundTextElement(element);
-
  if (transformHandleDirection.includes("e")) {
    scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
  }
@@ -456,7 +453,6 @@ export const resizeSingleElement = (
  if (transformHandleDirection.includes("n")) {
    scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;
  }
-
  // Linear elements dimensions differ from bounds dimensions
  const eleInitialWidth = stateAtResizeStart.width;
  const eleInitialHeight = stateAtResizeStart.height;
@@ -486,37 +482,6 @@ export const resizeSingleElement = (
    }
  }

-  if (boundTextElement) {
-    const stateOfBoundTextElementAtResize = originalElements.get(
-      boundTextElement.id,
-    ) as typeof boundTextElement | undefined;
-    if (stateOfBoundTextElementAtResize) {
-      boundTextFont = {
-        fontSize: stateOfBoundTextElementAtResize.fontSize,
-        baseline: stateOfBoundTextElementAtResize.baseline,
-      };
-    }
-    if (shouldMaintainAspectRatio) {
-      const nextFont = measureFontSizeFromWH(
-        boundTextElement,
-        eleNewWidth - BOUND_TEXT_PADDING * 2,
-        eleNewHeight - BOUND_TEXT_PADDING * 2,
-      );
-      if (nextFont === null) {
-        return;
-      }
-      boundTextFont = {
-        fontSize: nextFont.size,
-        baseline: nextFont.baseline,
-      };
-    } else {
-      const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
-      const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
-      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
-      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
-    }
-  }
-
  const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
    getResizedElementAbsoluteCoords(
      stateAtResizeStart,
@@ -526,6 +491,11 @@ export const resizeSingleElement = (
  const newBoundsWidth = newBoundsX2 - newBoundsX1;
  const newBoundsHeight = newBoundsY2 - newBoundsY1;

+  // don't allow resize to negative dimensions when text is bounded to container
+  if ((newBoundsWidth < 0 || newBoundsHeight < 0) && boundTextElementId) {
+    return;
+  }
+
  // Calculate new topLeft based on fixed corner during resize
  let newTopLeft = [...startTopLeft] as [number, number];
  if (["n", "w", "nw"].includes(transformHandleDirection)) {
@@ -618,9 +588,13 @@ export const resizeSingleElement = (
      ],
    });
  }
-
+  let minWidth = 0;
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement) {
+    minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
+  }
  if (
-    resizedElement.width !== 0 &&
+    resizedElement.width >= minWidth &&
    resizedElement.height !== 0 &&
    Number.isFinite(resizedElement.x) &&
    Number.isFinite(resizedElement.y)
@@ -629,10 +603,7 @@ export const resizeSingleElement = (
      newSize: { width: resizedElement.width, height: resizedElement.height },
    });
    mutateElement(element, resizedElement);
-    if (boundTextElement && boundTextFont) {
-      mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
-    }
-    handleBindTextResize(element, transformHandleDirection);
+    handleBindTextResize([element], transformHandleDirection);
  }
 };

@@ -703,25 +674,7 @@ const resizeMultipleElements = (
        }
        const width = element.width * scale;
        const height = element.height * scale;
-        const boundTextElement = getBoundTextElement(element);
        let font: { fontSize?: number; baseline?: number } = {};
-
-        if (boundTextElement) {
-          const nextFont = measureFontSizeFromWH(
-            boundTextElement,
-            width - BOUND_TEXT_PADDING * 2,
-            height - BOUND_TEXT_PADDING * 2,
-          );
-
-          if (nextFont === null) {
-            return null;
-          }
-          font = {
-            fontSize: nextFont.size,
-            baseline: nextFont.baseline,
-          };
-        }
-
        if (isTextElement(element)) {
          const nextFont = measureFontSizeFromWH(element, width, height);
          if (nextFont === null) {
@@ -765,15 +718,6 @@ const resizeMultipleElements = (
    if (updates) {
      elements.forEach((element, index) => {
        mutateElement(element, updates[index]);
-        const boundTextElement = getBoundTextElement(element);
-
-        if (boundTextElement) {
-          mutateElement(boundTextElement, {
-            fontSize: updates[index].fontSize,
-            baseline: updates[index].baseline,
-          });
-          handleBindTextResize(element, transformHandleType);
-        }
      });
    }
  }
@@ -10,6 +10,5 @@ export const showSelectedShapeActions = (
    !appState.viewModeEnabled &&
      (appState.editingElement ||
        getSelectedElements(elements, appState).length ||
-        (appState.activeTool.type !== "selection" &&
-          appState.activeTool.type !== "eraser")),
+        appState.elementType !== "selection"),
  );
@@ -32,7 +32,7 @@ describe("getPerfectElementSize", () => {
    expect(width).toEqual(135);
    expect(height).toEqual(135);
  });
-  it("should return height:0 and width:0 when width and height are 0", () => {
+  it("should return height:0 and width:0 when width and heigh are 0", () => {
    const { height, width } = getPerfectElementSize("arrow", 0, 0);
    expect(width).toEqual(0);
    expect(height).toEqual(0);
@@ -2,7 +2,6 @@ import { ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
-import { AppState } from "../types";

 export const isInvisiblySmallElement = (
  element: ExcalidrawElement,
@@ -17,7 +16,7 @@ export const isInvisiblySmallElement = (
 * Makes a perfect shape or diagonal/horizontal/vertical line
 */
 export const getPerfectElementSize = (
-  elementType: AppState["activeTool"]["type"],
+  elementType: string,
  width: number,
  height: number,
 ): { width: number; height: number } => {
@@ -1,5 +1,6 @@
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
+  ExcalidrawBindableElement,
  ExcalidrawElement,
  ExcalidrawTextElement,
  ExcalidrawTextElementWithContainer,
@@ -7,14 +8,15 @@ import {
  NonDeletedExcalidrawElement,
 } from "./types";
 import { mutateElement } from "./mutateElement";
-import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+import { BOUND_TEXT_PADDING } from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
-import { isTextElement } from ".";
+import { AppState } from "../types";

 export const redrawTextBoundingBox = (
  element: ExcalidrawTextElement,
  container: ExcalidrawElement | null,
+  appState: AppState,
 ) => {
  const maxWidth = container
    ? container.width - BOUND_TEXT_PADDING * 2
@@ -33,32 +35,24 @@ export const redrawTextBoundingBox = (
    getFontString(element),
    maxWidth,
  );
+
  let coordY = element.y;
-  let coordX = element.x;
  // Resize container and vertically center align the text
  if (container) {
+    coordY = container.y + container.height / 2 - metrics.height / 2;
    let nextHeight = container.height;
-    coordX = container.x + BOUND_TEXT_PADDING;
-    if (element.verticalAlign === VERTICAL_ALIGN.TOP) {
-      coordY = container.y + BOUND_TEXT_PADDING;
-    } else if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-      coordY =
-        container.y + container.height - metrics.height - BOUND_TEXT_PADDING;
-    } else {
-      coordY = container.y + container.height / 2 - metrics.height / 2;
-      if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
-        nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
-        coordY = container.y + nextHeight / 2 - metrics.height / 2;
-      }
+    if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
+      nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
+      coordY = container.y + nextHeight / 2 - metrics.height / 2;
    }
    mutateElement(container, { height: nextHeight });
  }
+
  mutateElement(element, {
    width: metrics.width,
    height: metrics.height,
    baseline: metrics.baseline,
    y: coordY,
-    x: coordX,
    text,
  });
 };
@@ -77,99 +71,91 @@ export const bindTextToShapeAfterDuplication = (
    const boundTextElementId = getBoundTextElementId(element);

    if (boundTextElementId) {
-      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);
-      if (newTextElementId) {
-        const newContainer = sceneElementMap.get(newElementId);
-        if (newContainer) {
-          mutateElement(newContainer, {
-            boundElements: element.boundElements?.concat({
-              type: "text",
-              id: newTextElementId,
-            }),
-          });
-        }
-        const newTextElement = sceneElementMap.get(newTextElementId);
-        if (newTextElement && isTextElement(newTextElement)) {
-          mutateElement(newTextElement, {
-            containerId: newContainer ? newElementId : null,
-          });
-        }
-      }
+      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId)!;
+      mutateElement(
+        sceneElementMap.get(newElementId) as ExcalidrawBindableElement,
+        {
+          boundElements: element.boundElements?.concat({
+            type: "text",
+            id: newTextElementId,
+          }),
+        },
+      );
+      mutateElement(
+        sceneElementMap.get(newTextElementId) as ExcalidrawTextElement,
+        {
+          containerId: newElementId,
+        },
+      );
    }
  });
 };

 export const handleBindTextResize = (
-  element: NonDeletedExcalidrawElement,
+  elements: readonly NonDeletedExcalidrawElement[],
  transformHandleType: MaybeTransformHandleType,
 ) => {
-  const boundTextElementId = getBoundTextElementId(element);
-  if (boundTextElementId) {
-    const textElement = Scene.getScene(element)!.getElement(
-      boundTextElementId,
-    ) as ExcalidrawTextElement;
-    if (textElement && textElement.text) {
-      if (!element) {
-        return;
-      }
-      let text = textElement.text;
-      let nextHeight = textElement.height;
-      let containerHeight = element.height;
-      let nextBaseLine = textElement.baseline;
-      if (transformHandleType !== "n" && transformHandleType !== "s") {
-        if (text) {
-          text = wrapText(
-            textElement.originalText,
+  elements.forEach((element) => {
+    const boundTextElementId = getBoundTextElementId(element);
+    if (boundTextElementId) {
+      const textElement = Scene.getScene(element)!.getElement(
+        boundTextElementId,
+      ) as ExcalidrawTextElement;
+      if (textElement && textElement.text) {
+        if (!element) {
+          return;
+        }
+        let text = textElement.text;
+        let nextHeight = textElement.height;
+        let containerHeight = element.height;
+        let nextBaseLine = textElement.baseline;
+        if (transformHandleType !== "n" && transformHandleType !== "s") {
+          if (text) {
+            text = wrapText(
+              textElement.originalText,
+              getFontString(textElement),
+              element.width,
+            );
+          }
+
+          const dimensions = measureText(
+            text,
            getFontString(textElement),
            element.width,
          );
+          nextHeight = dimensions.height;
+          nextBaseLine = dimensions.baseline;
+        }
+        // increase height in case text element height exceeds
+        if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) {
+          containerHeight = nextHeight + BOUND_TEXT_PADDING * 2;
+          const diff = containerHeight - element.height;
+          // fix the y coord when resizing from ne/nw/n
+          const updatedY =
+            transformHandleType === "ne" ||
+            transformHandleType === "nw" ||
+            transformHandleType === "n"
+              ? element.y - diff
+              : element.y;
+          mutateElement(element, {
+            height: containerHeight,
+            y: updatedY,
+          });
        }

-        const dimensions = measureText(
+        const updatedY = element.y + containerHeight / 2 - nextHeight / 2;
+        mutateElement(textElement, {
          text,
-          getFontString(textElement),
-          element.width,
-        );
-        nextHeight = dimensions.height;
-        nextBaseLine = dimensions.baseline;
-      }
-      // increase height in case text element height exceeds
-      if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) {
-        containerHeight = nextHeight + BOUND_TEXT_PADDING * 2;
-        const diff = containerHeight - element.height;
-        // fix the y coord when resizing from ne/nw/n
-        const updatedY =
-          transformHandleType === "ne" ||
-          transformHandleType === "nw" ||
-          transformHandleType === "n"
-            ? element.y - diff
-            : element.y;
-        mutateElement(element, {
-          height: containerHeight,
+          // preserve padding and set width correctly
+          width: element.width - BOUND_TEXT_PADDING * 2,
+          height: nextHeight,
+          x: element.x + BOUND_TEXT_PADDING,
          y: updatedY,
+          baseline: nextBaseLine,
        });
      }
-
-      let updatedY;
-      if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
-        updatedY = element.y + BOUND_TEXT_PADDING;
-      } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-        updatedY = element.y + element.height - nextHeight - BOUND_TEXT_PADDING;
-      } else {
-        updatedY = element.y + element.height / 2 - nextHeight / 2;
-      }
-
-      mutateElement(textElement, {
-        text,
-        // preserve padding and set width correctly
-        width: element.width - BOUND_TEXT_PADDING * 2,
-        height: nextHeight,
-        x: element.x + BOUND_TEXT_PADDING,
-        y: updatedY,
-        baseline: nextBaseLine,
-      });
    }
-  }
+  });
 };

 // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
@@ -369,7 +355,6 @@ export const charWidth = (() => {
      const width = getTextWidth(char, font);
      cachedCharWidth[font][ascii] = width;
    }
-
    return cachedCharWidth[font][ascii];
  };

@@ -382,14 +367,14 @@ export const charWidth = (() => {
  };
 })();
 export const getApproxMinLineWidth = (font: FontString) => {
-  const maxCharWidth = getMaxCharWidth(font);
-  if (maxCharWidth === 0) {
+  const minCharWidth = getMinCharWidth(font);
+  if (minCharWidth === 0) {
    return (
      measureText(DUMMY_TEXT.split("").join("\n"), font).width +
      BOUND_TEXT_PADDING * 2
    );
  }
-  return maxCharWidth + BOUND_TEXT_PADDING * 2;
+  return minCharWidth + BOUND_TEXT_PADDING * 2;
 };

 export const getApproxMinLineHeight = (font: FontString) => {
@@ -406,15 +391,6 @@ export const getMinCharWidth = (font: FontString) => {
  return Math.min(...cacheWithOutEmpty);
 };

-export const getMaxCharWidth = (font: FontString) => {
-  const cache = charWidth.getCache(font);
-  if (!cache) {
-    return 0;
-  }
-  const cacheWithOutEmpty = cache.filter((val) => val !== undefined);
-  return Math.max(...cacheWithOutEmpty);
-};
-
 export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
  // Generally lower case is used so converting to lower case
  const dummyText = DUMMY_TEXT.toLocaleLowerCase();
@@ -440,10 +416,7 @@ export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
 };

 export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
-  return container?.boundElements?.length
-    ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
-        null
-    : null;
+  return container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id;
 };

 export const getBoundTextElement = (element: ExcalidrawElement | null) => {
@@ -12,8 +12,6 @@ import {
  ExcalidrawTextElementWithContainer,
 } from "./types";
 import * as textElementUtils from "./textElement";
-import { API } from "../tests/helpers/api";
-import { mutateElement } from "./mutateElement";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);

@@ -21,201 +19,7 @@ const tab = "    ";
 const mouse = new Pointer("mouse");

 describe("textWysiwyg", () => {
-  describe("start text editing", () => {
-    const { h } = window;
-    beforeEach(async () => {
-      await render(<ExcalidrawApp />);
-      h.elements = [];
-    });
-
-    it("should prefer editing selected text element (non-bindable container present)", async () => {
-      const line = API.createElement({
-        type: "line",
-        width: 100,
-        height: 0,
-        points: [
-          [0, 0],
-          [100, 0],
-        ],
-      });
-      const textSize = 20;
-      const text = API.createElement({
-        type: "text",
-        text: "ola",
-        x: line.width / 2 - textSize / 2,
-        y: -textSize / 2,
-        width: textSize,
-        height: textSize,
-      });
-      h.elements = [text, line];
-
-      API.setSelectedElements([text]);
-
-      Keyboard.keyPress(KEYS.ENTER);
-
-      expect(h.state.editingElement?.id).toBe(text.id);
-      expect(
-        (h.state.editingElement as ExcalidrawTextElement).containerId,
-      ).toBe(null);
-    });
-
-    it("should prefer editing selected text element (bindable container present)", async () => {
-      const container = API.createElement({
-        type: "rectangle",
-        width: 100,
-        boundElements: [],
-      });
-      const textSize = 20;
-
-      const boundText = API.createElement({
-        type: "text",
-        text: "ola",
-        x: container.width / 2 - textSize / 2,
-        y: container.height / 2 - textSize / 2,
-        width: textSize,
-        height: textSize,
-        containerId: container.id,
-      });
-
-      const boundText2 = API.createElement({
-        type: "text",
-        text: "ola",
-        x: container.width / 2 - textSize / 2,
-        y: container.height / 2 - textSize / 2,
-        width: textSize,
-        height: textSize,
-        containerId: container.id,
-      });
-
-      h.elements = [container, boundText, boundText2];
-
-      mutateElement(container, {
-        boundElements: [{ type: "text", id: boundText.id }],
-      });
-
-      API.setSelectedElements([boundText2]);
-
-      Keyboard.keyPress(KEYS.ENTER);
-
-      expect(h.state.editingElement?.id).toBe(boundText2.id);
-    });
-
-    it("should not create bound text on ENTER if text exists at container center", () => {
-      const container = API.createElement({
-        type: "rectangle",
-        width: 100,
-      });
-      const textSize = 20;
-      const text = API.createElement({
-        type: "text",
-        text: "ola",
-        x: container.width / 2 - textSize / 2,
-        y: container.height / 2 - textSize / 2,
-        width: textSize,
-        height: textSize,
-        containerId: container.id,
-      });
-
-      h.elements = [container, text];
-
-      API.setSelectedElements([container]);
-
-      Keyboard.keyPress(KEYS.ENTER);
-
-      expect(h.state.editingElement?.id).toBe(text.id);
-    });
-
-    it("should edit existing bound text on ENTER even if higher z-index unbound text exists at container center", () => {
-      const container = API.createElement({
-        type: "rectangle",
-        width: 100,
-        boundElements: [],
-      });
-      const textSize = 20;
-
-      const boundText = API.createElement({
-        type: "text",
-        text: "ola",
-        x: container.width / 2 - textSize / 2,
-        y: container.height / 2 - textSize / 2,
-        width: textSize,
-        height: textSize,
-        containerId: container.id,
-      });
-
-      const boundText2 = API.createElement({
-        type: "text",
-        text: "ola",
-        x: container.width / 2 - textSize / 2,
-        y: container.height / 2 - textSize / 2,
-        width: textSize,
-        height: textSize,
-        containerId: container.id,
-      });
-
-      h.elements = [container, boundText, boundText2];
-
-      mutateElement(container, {
-        boundElements: [{ type: "text", id: boundText.id }],
-      });
-
-      API.setSelectedElements([container]);
-
-      Keyboard.keyPress(KEYS.ENTER);
-
-      expect(h.state.editingElement?.id).toBe(boundText.id);
-    });
-
-    it("should edit text under cursor when clicked with text tool", () => {
-      const text = API.createElement({
-        type: "text",
-        text: "ola",
-        x: 60,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-
-      h.elements = [text];
-      UI.clickTool("text");
-
-      mouse.clickAt(text.x + 50, text.y + 50);
-
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      expect(editor).not.toBe(null);
-      expect(h.state.editingElement?.id).toBe(text.id);
-      expect(h.elements.length).toBe(1);
-    });
-
-    it("should edit text under cursor when double-clicked with selection tool", () => {
-      const text = API.createElement({
-        type: "text",
-        text: "ola",
-        x: 60,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-
-      h.elements = [text];
-      UI.clickTool("selection");
-
-      mouse.doubleClickAt(text.x + 50, text.y + 50);
-
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      expect(editor).not.toBe(null);
-      expect(h.state.editingElement?.id).toBe(text.id);
-      expect(h.elements.length).toBe(1);
-    });
-  });
-
-  describe("Test container-unbound text", () => {
+  describe("Test unbounded text", () => {
    const { h } = window;

    let textarea: HTMLTextAreaElement;
@@ -431,7 +235,7 @@ describe("textWysiwyg", () => {
    });
  });

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

@@ -511,39 +315,6 @@ describe("textWysiwyg", () => {
      ]);
    });

-    it("shouldn't bind to non-text-bindable containers", async () => {
-      const line = API.createElement({
-        type: "line",
-        width: 100,
-        height: 0,
-        points: [
-          [0, 0],
-          [100, 0],
-        ],
-      });
-      h.elements = [line];
-
-      UI.clickTool("text");
-
-      mouse.clickAt(line.x + line.width / 2, line.y + line.height / 2);
-
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, {
-        target: {
-          value: "Hello World!",
-        },
-      });
-      fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
-      editor.dispatchEvent(new Event("input"));
-
-      expect(line.boundElements).toBe(null);
-      expect(h.elements[1].type).toBe("text");
-      expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null);
-    });
-
    it("should update font family correctly on undo/redo by selecting bounded text when font family was updated", async () => {
      expect(h.elements.length).toBe(1);

@@ -704,7 +475,7 @@ describe("textWysiwyg", () => {
      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
    });

-    it("should unbind bound text when unbind action from context menu is triggered", async () => {
+    it("should unbind bound text when unbind action from context menu is triggred", async () => {
      expect(h.elements.length).toBe(1);
      expect(h.elements[0].id).toBe(rectangle.id);

@@ -745,47 +516,5 @@ describe("textWysiwyg", () => {
        null,
      );
    });
-    it("shouldn't bind to container if container has bound text", async () => {
-      expect(h.elements.length).toBe(1);
-
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
-
-      expect(h.elements.length).toBe(2);
-
-      // Bind first text
-      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.containerId).toBe(rectangle.id);
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-      await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
-      editor.blur();
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
-
-      // Attempt to bind another text
-      UI.clickTool("text");
-      mouse.clickAt(
-        rectangle.x + rectangle.width / 2,
-        rectangle.y + rectangle.height / 2,
-      );
-      mouse.down();
-      expect(h.elements.length).toBe(3);
-      text = h.elements[2] as ExcalidrawTextElementWithContainer;
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-      await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Whats up?" } });
-      editor.blur();
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: h.elements[1].id, type: "text" },
-      ]);
-      expect(text.containerId).toBe(null);
-    });
  });
 });
@@ -7,7 +7,7 @@ import {
 } from "../utils";
 import Scene from "../scene/Scene";
 import { isBoundToContainer, isTextElement } from "./typeChecks";
-import { CLASSES, BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+import { CLASSES, BOUND_TEXT_PADDING } from "../constants";
 import {
  ExcalidrawElement,
  ExcalidrawTextElement,
@@ -86,7 +86,7 @@ export const textWysiwyg = ({
    updatedElement: ExcalidrawTextElement,
    editable: HTMLTextAreaElement,
  ) => {
-    const currentFont = editable.style.fontFamily.replace(/"/g, "");
+    const currentFont = editable.style.fontFamily.replaceAll('"', "");
    if (
      getFontFamilyString({ fontFamily: updatedElement.fontFamily }) !==
      currentFont
@@ -102,13 +102,9 @@ export const textWysiwyg = ({

  const updateWysiwygStyle = () => {
    const appState = app.state;
-    const updatedElement =
-      Scene.getScene(element)?.getElement<ExcalidrawTextElement>(id);
-    if (!updatedElement) {
-      return;
-    }
-    const { textAlign, verticalAlign } = updatedElement;
-
+    const updatedElement = Scene.getScene(element)?.getElement(
+      id,
+    ) as ExcalidrawTextElement;
    const approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
    if (updatedElement && isTextElement(updatedElement)) {
      let coordX = updatedElement.x;
@@ -118,7 +114,7 @@ export const textWysiwyg = ({

      let maxHeight = updatedElement.height;
      let width = updatedElement.width;
-      // Set to element height by default since that's
+      // Set to element height by default since thats
      // what is going to be used for unbounded text
      let height = updatedElement.height;
      if (container && updatedElement.containerId) {
@@ -144,7 +140,7 @@ export const textWysiwyg = ({
        maxHeight = container.height - BOUND_TEXT_PADDING * 2;
        width = maxWidth;
        // The coordinates of text box set a distance of
-        // 5px to preserve padding
+        // 30px to preserve padding
        coordX = container.x + BOUND_TEXT_PADDING;
        // autogrow container height if text exceeds
        if (height > maxHeight) {
@@ -164,34 +160,12 @@ export const textWysiwyg = ({
        // is reached
        else {
          // vertically center align the text
-          if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
-            coordY = container.y + container.height / 2 - height / 2;
-          }
-          if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-            coordY =
-              container.y + container.height - height - BOUND_TEXT_PADDING;
-          }
+          coordY = container.y + container.height / 2 - height / 2;
        }
      }
      const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
-      const initialSelectionStart = editable.selectionStart;
-      const initialSelectionEnd = editable.selectionEnd;
-      const initialLength = editable.value.length;
+      const { textAlign } = updatedElement;
      editable.value = updatedElement.originalText;
-
-      // restore cursor position after value updated so it doesn't
-      // go to the end of text when container auto expanded
-      if (
-        initialSelectionStart === initialSelectionEnd &&
-        initialSelectionEnd !== initialLength
-      ) {
-        // get diff between length and selection end and shift
-        // the cursor by "diff" times to position correctly
-        const diff = initialLength - initialSelectionEnd;
-        editable.selectionStart = editable.value.length - diff;
-        editable.selectionEnd = editable.value.length - diff;
-      }
-
      const lines = updatedElement.originalText.split("\n");
      const lineHeight = updatedElement.containerId
        ? approxLineHeight
@@ -221,7 +195,6 @@ export const textWysiwyg = ({
          editorMaxHeight,
        ),
        textAlign,
-        verticalAlign,
        color: updatedElement.strokeColor,
        opacity: updatedElement.opacity / 100,
        filter: "var(--theme-filter)",
@@ -285,7 +258,7 @@ export const textWysiwyg = ({
      // as that gets updated below
      const lines = editable.scrollHeight / getApproxLineHeight(font);
      // auto increase height only when lines  > 1 so its
-      // measured correctly and vertically aligns for
+      // measured correctly and vertically alignes for
      // first line as well as setting height to "auto"
      // doubles the height as soon as user starts typing
      if (isBoundToContainer(element) && lines > 1) {
@@ -424,7 +397,7 @@ export const textWysiwyg = ({
  };

  /**
-   * @returns indices of start positions of selected lines, in reverse order
+   * @returns indeces of start positions of selected lines, in reverse order
   */
  const getSelectedLinesStartIndices = () => {
    let { selectionStart, selectionEnd, value } = editable;
--- a/Show More
+++ b/Show More