remove debug

import lazily
feat: compress non-transparent PNGs as JPGs and allow larger dimensions
2021-11-22 23:20:40 +01:00 · 2021-11-22 22:11:10 +01:00 · 2021-11-22 17:39:59 +01:00
228 changed files with 7525 additions and 19559 deletions
@@ -4,9 +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

-REACT_APP_PORTAL_URL=http://localhost:3002
-# 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=http://localhost:3000
 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
@@ -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
-
@@ -1,2 +1 @@
-#!/bin/sh
 yarn lint-staged
@@ -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
@@ -122,10 +118,6 @@ yarn start

 Now you can open [http://localhost:3000](http://localhost:3000) and start coding in your favorite code editor.

-#### Collaboration
-
-For collaboration, you will need to set up [collab server](https://github.com/excalidraw/excalidraw-room) in local.
-
 #### Commands

 | Command            | Description                       |
@@ -21,15 +21,15 @@
  "dependencies": {
    "@sentry/browser": "6.2.5",
    "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/jest-dom": "5.15.0",
    "@testing-library/react": "12.1.2",
-    "@tldraw/vec": "1.4.3",
-    "@types/jest": "27.4.0",
+    "@tldraw/vec": "0.1.3",
+    "@types/jest": "27.0.2",
    "@types/pica": "5.1.3",
-    "@types/react": "17.0.39",
+    "@types/react": "17.0.34",
    "@types/react-dom": "17.0.11",
    "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.24.1",
+    "browser-fs-access": "0.21.1",
    "clsx": "1.1.1",
    "fake-indexeddb": "3.1.7",
    "firebase": "8.3.3",
@@ -37,7 +37,7 @@
    "idb-keyval": "6.0.3",
    "image-blob-reduce": "3.0.1",
    "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.32",
+    "nanoid": "3.1.30",
    "open-color": "1.9.1",
    "pako": "1.0.11",
    "perfect-freehand": "1.0.16",
@@ -49,31 +49,31 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
-    "roughjs": "4.5.2",
-    "sass": "1.49.7",
+    "roughjs": "4.5.0",
+    "sass": "1.43.4",
    "socket.io-client": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.5.2"
  },
  "devDependencies": {
    "@excalidraw/eslint-config": "1.0.0",
    "@excalidraw/prettier-config": "1.0.2",
-    "@types/chai": "4.3.0",
+    "@types/chai": "4.2.22",
    "@types/lodash.throttle": "4.1.6",
-    "@types/pako": "1.0.3",
+    "@types/pako": "1.0.2",
    "@types/resize-observer-browser": "0.1.6",
-    "chai": "4.3.6",
-    "dotenv": "10.0.0",
+    "chai": "4.3.4",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "3.3.1",
+    "firebase-tools": "9.22.0",
    "husky": "7.0.4",
    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.3.3",
+    "lint-staged": "12.0.1",
    "pepjs": "0.5.3",
-    "prettier": "2.5.1",
+    "prettier": "2.4.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"
@@ -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();
 });
@@ -11,7 +11,6 @@ const crowdinMap = {
  "de-DE": "en-de",
  "el-GR": "en-el",
  "es-ES": "en-es",
-  "eu-ES": "en-eu",
  "fa-IR": "en-fa",
  "fi-FI": "en-fi",
  "fr-FR": "en-fr",
@@ -43,7 +42,6 @@ const crowdinMap = {
  "zh-CN": "en-zhcn",
  "zh-HK": "en-zhhk",
  "zh-TW": "en-zhtw",
-  "lt-LT": "en-lt",
  "lv-LV": "en-lv",
  "cs-CZ": "en-cs",
  "kk-KZ": "en-kk",
@@ -71,7 +69,6 @@ const flags = {
  "kab-KAB": "🏳",
  "kk-KZ": "🇰🇿",
  "ko-KR": "🇰🇷",
-  "lt-LT": "🇱🇹",
  "lv-LV": "🇱🇻",
  "my-MM": "🇲🇲",
  "nb-NO": "🇳🇴",
@@ -105,7 +102,6 @@ const languages = {
  "de-DE": "Deutsch",
  "el-GR": "Ελληνικά",
  "es-ES": "Español",
-  "eu-ES": "Euskara",
  "fa-IR": "فارسی",
  "fi-FI": "Suomi",
  "fr-FR": "Français",
@@ -118,7 +114,6 @@ const languages = {
  "kab-KAB": "Taqbaylit",
  "kk-KZ": "Қазақ тілі",
  "ko-KR": "한국어",
-  "lt-LT": "Lietuvių",
  "lv-LV": "Latviešu",
  "my-MM": "Burmese",
  "nb-NO": "Norsk bokmål",
@@ -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;
 };

@@ -8,12 +8,7 @@ import { t } from "../i18n";
 export const actionAddToLibrary = register({
  name: "addToLibrary",
  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
-    if (selectedElements.some((element) => element.type === "image")) {
+    if (elements.some((element) => element.type === "image")) {
      return {
        commitToHistory: false,
        appState: {
@@ -30,7 +25,10 @@ export const actionAddToLibrary = register({
          {
            id: randomId(),
            status: "unpublished",
-            elements: selectedElements.map(deepCopyElement),
+            elements: getSelectedElements(
+              getNonDeletedElements(elements),
+              appState,
+            ).map(deepCopyElement),
            created: Date.now(),
          },
          ...items,
@@ -8,13 +8,13 @@ import {
  CenterVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";

 const enableActionGroup = (
@@ -34,11 +34,9 @@ const alignSelectedElements = (

  const updatedElements = alignElements(selectedElements, alignment);

-  const updatedElementsMap = arrayToMap(updatedElements);
+  const updatedElementsMap = getElementMap(updatedElements);

-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
+  return elements.map((element) => updatedElementsMap[element.id] || element);
 };

 export const actionAlignTop = register({
@@ -9,7 +9,7 @@ import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
-import { getStateForZoom } from "../scene/zoom";
+import { getNewZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
 import { getShortcutKey } from "../utils";
 import { register } from "./register";
@@ -26,7 +26,7 @@ export const actionChangeViewBackgroundColor = register({
      commitToHistory: !!value.viewBackgroundColor,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ appState, updateData }) => {
    return (
      <div style={{ position: "relative" }}>
        <ColorPicker
@@ -39,8 +39,6 @@ export const actionChangeViewBackgroundColor = register({
            updateData({ openPopup: active ? "canvasColorPicker" : null })
          }
          data-testid="canvas-background-picker"
-          elements={elements}
-          appState={appState}
        />
      </div>
    );
@@ -60,15 +58,11 @@ export const actionClearCanvas = register({
        files: {},
        theme: appState.theme,
        elementLocked: appState.elementLocked,
-        penMode: appState.penMode,
-        penDetected: appState.penDetected,
        exportBackground: appState.exportBackground,
        exportEmbedScene: appState.exportEmbedScene,
        gridSize: appState.gridSize,
        showStats: appState.showStats,
        pasteDialog: appState.pasteDialog,
-        elementType:
-          appState.elementType === "image" ? "selection" : appState.elementType,
      },
      commitToHistory: true,
    };
@@ -79,18 +73,17 @@ export const actionClearCanvas = register({

 export const actionZoomIn = register({
  name: "zoomIn",
-  perform: (_elements, appState, _, app) => {
+  perform: (_elements, appState) => {
+    const zoom = getNewZoom(
+      getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
+      appState.zoom,
+      { left: appState.offsetLeft, top: appState.offsetTop },
+      { x: appState.width / 2, y: appState.height / 2 },
+    );
    return {
      appState: {
        ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
-          },
-          appState,
-        ),
+        zoom,
      },
      commitToHistory: false,
    };
@@ -114,18 +107,18 @@ export const actionZoomIn = register({

 export const actionZoomOut = register({
  name: "zoomOut",
-  perform: (_elements, appState, _, app) => {
+  perform: (_elements, appState) => {
+    const zoom = getNewZoom(
+      getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
+      appState.zoom,
+      { left: appState.offsetLeft, top: appState.offsetTop },
+      { x: appState.width / 2, y: appState.height / 2 },
+    );
+
    return {
      appState: {
        ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
-          },
-          appState,
-        ),
+        zoom,
      },
      commitToHistory: false,
    };
@@ -149,24 +142,25 @@ export const actionZoomOut = register({

 export const actionResetZoom = register({
  name: "resetZoom",
-  perform: (_elements, appState, _, app) => {
+  perform: (_elements, appState) => {
    return {
      appState: {
        ...appState,
-        ...getStateForZoom(
+        zoom: getNewZoom(
+          1 as NormalizedZoomValue,
+          appState.zoom,
+          { left: appState.offsetLeft, top: appState.offsetTop },
          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(1),
+            x: appState.width / 2,
+            y: appState.height / 2,
          },
-          appState,
        ),
      },
      commitToHistory: false,
    };
  },
  PanelComponent: ({ updateData, appState }) => (
-    <Tooltip label={t("buttons.resetZoom")} style={{ height: "100%" }}>
+    <Tooltip label={t("buttons.resetZoom")}>
      <ToolButton
        type="button"
        className="reset-zoom-button"
@@ -218,12 +212,14 @@ const zoomToFitElements = (
      ? getCommonBounds(selectedElements)
      : getCommonBounds(nonDeletedElements);

-  const newZoom = {
-    value: zoomValueToFitBoundsOnViewport(commonBounds, {
-      width: appState.width,
-      height: appState.height,
-    }),
-  };
+  const zoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
+    width: appState.width,
+    height: appState.height,
+  });
+  const newZoom = getNewZoom(zoomValue, appState.zoom, {
+    left: appState.offsetLeft,
+    top: appState.offsetTop,
+  });

  const [x1, y1, x2, y2] = commonBounds;
  const centerX = (x1 + x2) / 2;
@@ -25,7 +25,7 @@ export const actionCut = register({
  name: "cut",
  perform: (elements, appState, data, app) => {
    actionCopy.perform(elements, appState, data, app);
-    return actionDeleteSelected.perform(elements, appState);
+    return actionDeleteSelected.perform(elements, appState, data, app);
  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
@@ -42,7 +42,6 @@ export const actionCopyAsSvg = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    try {
      await exportCanvas(
@@ -82,7 +81,6 @@ export const actionCopyAsPng = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    try {
      await exportCanvas(
@@ -11,7 +11,6 @@ import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { isBoundToContainer } from "../element/typeChecks";

 const deleteSelectedElements = (
  elements: readonly ExcalidrawElement[],
@@ -22,12 +21,6 @@ const deleteSelectedElements = (
      if (appState.selectedElementIds[el.id]) {
        return newElementWith(el, { isDeleted: true });
      }
-      if (
-        isBoundToContainer(el) &&
-        appState.selectedElementIds[el.containerId]
-      ) {
-        return newElementWith(el, { isDeleted: true });
-      }
      return el;
    }),
    appState: {
@@ -62,7 +55,7 @@ export const actionDeleteSelected = register({
    if (appState.editingLinearElement) {
      const {
        elementId,
-        selectedPointsIndices,
+        activePointIndex,
        startBindingElement,
        endBindingElement,
      } = appState.editingLinearElement;
@@ -72,7 +65,8 @@ export const actionDeleteSelected = register({
      }
      if (
        // case: no point selected → delete whole element
-        selectedPointsIndices == null ||
+        activePointIndex == null ||
+        activePointIndex === -1 ||
        // case: deleting last remaining point
        element.points.length < 2
      ) {
@@ -92,17 +86,15 @@ export const actionDeleteSelected = register({
      // We cannot do this inside `movePoint` because it is also called
      // when deleting the uncommitted point (which hasn't caused any binding)
      const binding = {
-        startBindingElement: selectedPointsIndices?.includes(0)
-          ? null
-          : startBindingElement,
-        endBindingElement: selectedPointsIndices?.includes(
-          element.points.length - 1,
-        )
-          ? null
-          : endBindingElement,
+        startBindingElement:
+          activePointIndex === 0 ? null : startBindingElement,
+        endBindingElement:
+          activePointIndex === element.points.length - 1
+            ? null
+            : endBindingElement,
      };

-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.movePoint(element, activePointIndex, "delete");

      return {
        elements,
@@ -111,15 +103,13 @@ export const actionDeleteSelected = register({
          editingLinearElement: {
            ...appState.editingLinearElement,
            ...binding,
-            selectedPointsIndices:
-              selectedPointsIndices?.[0] > 0
-                ? [selectedPointsIndices[0] - 1]
-                : [0],
+            activePointIndex: activePointIndex > 0 ? activePointIndex - 1 : 0,
          },
        },
        commitToHistory: true,
      };
    }
+
    let { elements: nextElements, appState: nextAppState } =
      deleteSelectedElements(elements, appState);
    fixBindingsAfterDeletion(
@@ -4,13 +4,13 @@ import {
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../disitrubte";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, 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";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";

 const enableActionGroup = (
@@ -30,11 +30,9 @@ const distributeSelectedElements = (

  const updatedElements = distributeElements(selectedElements, distribution);

-  const updatedElementsMap = arrayToMap(updatedElements);
+  const updatedElementsMap = getElementMap(updatedElements);

-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
+  return elements.map((element) => updatedElementsMap[element.id] || element);
 };

 export const distributeHorizontally = register({
@@ -49,8 +47,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)}
@@ -78,8 +75,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)}
@@ -2,12 +2,13 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { clone } from "../components/icons";
 import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { mutateElement } from "../element/mutateElement";
 import {
  selectGroupsForSelectedElements,
  getSelectedGroupForElement,
@@ -17,23 +18,41 @@ import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import { ActionResult } from "./types";
 import { GRID_SIZE } from "../constants";
-import { bindTextToShapeAfterDuplication } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";

 export const actionDuplicateSelection = register({
  name: "duplicateSelection",
  perform: (elements, appState) => {
-    // duplicate selected point(s) if editing a line
+    // duplicate point if selected while editing multi-point element
    if (appState.editingLinearElement) {
-      const ret = LinearElementEditor.duplicateSelectedPoints(appState);
-
-      if (!ret) {
+      const { activePointIndex, elementId } = appState.editingLinearElement;
+      const element = LinearElementEditor.getElement(elementId);
+      if (!element || activePointIndex === null) {
        return false;
      }
-
+      const { points } = element;
+      const selectedPoint = points[activePointIndex];
+      const nextPoint = points[activePointIndex + 1];
+      mutateElement(element, {
+        points: [
+          ...points.slice(0, activePointIndex + 1),
+          nextPoint
+            ? [
+                (selectedPoint[0] + nextPoint[0]) / 2,
+                (selectedPoint[1] + nextPoint[1]) / 2,
+              ]
+            : [selectedPoint[0] + 30, selectedPoint[1] + 30],
+          ...points.slice(activePointIndex + 1),
+        ],
+      });
      return {
+        appState: {
+          ...appState,
+          editingLinearElement: {
+            ...appState.editingLinearElement,
+            activePointIndex: activePointIndex + 1,
+          },
+        },
        elements,
-        appState: ret.appState,
        commitToHistory: true,
      };
    }
@@ -87,12 +106,9 @@ const duplicateElements = (
  const finalElements: ExcalidrawElement[] = [];

  let index = 0;
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, true),
-  );
  while (index < elements.length) {
    const element = elements[index];
-    if (selectedElementIds.get(element.id)) {
+    if (appState.selectedElementIds[element.id]) {
      if (element.groupIds.length) {
        const groupId = getSelectedGroupForElement(appState, element);
        // if group selected, duplicate it atomically
@@ -114,11 +130,7 @@ const duplicateElements = (
    }
    index++;
  }
-  bindTextToShapeAfterDuplication(
-    finalElements,
-    oldElements,
-    oldIdToDuplicatedId,
-  );
+
  fixBindingsAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);

  return {
@@ -128,9 +140,7 @@ const duplicateElements = (
        ...appState,
        selectedGroupIds: {},
        selectedElementIds: newElements.reduce((acc, element) => {
-          if (!isBoundToContainer(element)) {
-            acc[element.id] = true;
-          }
+          acc[element.id] = true;
          return acc;
        }, {} as any),
      },
@@ -1,6 +1,6 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
@@ -9,7 +9,6 @@ import { getTransformHandles } from "../element/transformHandles";
 import { isFreeDrawElement, isLinearElement } from "../element/typeChecks";
 import { updateBoundElements } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { arrayToMap } from "../utils";

 const enableActionFlipHorizontal = (
  elements: readonly ExcalidrawElement[],
@@ -84,11 +83,9 @@ const flipSelectedElements = (
    flipDirection,
  );

-  const updatedElementsMap = arrayToMap(updatedElements);
+  const updatedElementsMap = getElementMap(updatedElements);

-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
+  return elements.map((element) => updatedElementsMap[element.id] || element);
 };

 const flipElements = (
@@ -145,9 +142,10 @@ const flipElement = (
  }

  if (isLinearElement(element)) {
-    for (let index = 1; index < element.points.length; index++) {
-      LinearElementEditor.movePoints(element, [
-        { index, point: [-element.points[index][0], element.points[index][1]] },
+    for (let i = 1; i < element.points.length; i++) {
+      LinearElementEditor.movePoint(element, i, [
+        -element.points[i][0],
+        element.points[i][1],
      ]);
    }
    LinearElementEditor.normalizePoints(element);
@@ -155,7 +153,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",
@@ -1,6 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { UngroupIcon, GroupIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
@@ -17,9 +17,8 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
-import { isBoundToContainer } from "../element/typeChecks";

 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
  if (elements.length >= 2) {
@@ -45,7 +44,6 @@ const enableActionGroup = (
  const selectedElements = getSelectedElements(
    getNonDeletedElements(elements),
    appState,
-    true,
  );
  return (
    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
@@ -58,7 +56,6 @@ export const actionGroup = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    if (selectedElements.length < 2) {
      // nothing to group
@@ -86,9 +83,8 @@ export const actionGroup = register({
      }
    }
    const newGroupId = randomId();
-    const selectElementIds = arrayToMap(selectedElements);
    const updatedElements = elements.map((element) => {
-      if (!selectElementIds.get(element.id)) {
+      if (!appState.selectedElementIds[element.id]) {
        return element;
      }
      return newElementWith(element, {
@@ -152,12 +148,7 @@ export const actionUngroup = register({
    if (groupIds.length === 0) {
      return { appState, elements, commitToHistory: false };
    }
-
-    const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
    const nextElements = elements.map((element) => {
-      if (isBoundToContainer(element)) {
-        boundTextElementIds.push(element.id);
-      }
      const nextGroupIds = removeFromSelectedGroups(
        element.groupIds,
        appState.selectedGroupIds,
@@ -169,19 +160,11 @@ export const actionUngroup = register({
        groupIds: nextGroupIds,
      });
    });
-
-    const updateAppState = selectGroupsForSelectedElements(
-      { ...appState, selectedGroupIds: {} },
-      getNonDeletedElements(nextElements),
-    );
-
-    // remove binded text elements from selection
-    boundTextElementIds.forEach(
-      (id) => (updateAppState.selectedElementIds[id] = false),
-    );
    return {
-      appState: updateAppState,
-
+      appState: selectGroupsForSelectedElements(
+        { ...appState, selectedGroupIds: {} },
+        getNonDeletedElements(nextElements),
+      ),
      elements: nextElements,
      commitToHistory: true,
    };
@@ -6,9 +6,9 @@ import History, { HistoryEntry } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { isWindows, KEYS } from "../keys";
+import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { arrayToMap } from "../utils";

 const writeData = (
  prevElements: readonly ExcalidrawElement[],
@@ -27,17 +27,17 @@ const writeData = (
      return { commitToHistory };
    }

-    const prevElementMap = arrayToMap(prevElements);
+    const prevElementMap = getElementMap(prevElements);
    const nextElements = data.elements;
-    const nextElementMap = arrayToMap(nextElements);
+    const nextElementMap = getElementMap(nextElements);

    const deletedElements = prevElements.filter(
-      (prevElement) => !nextElementMap.has(prevElement.id),
+      (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
    );
    const elements = nextElements
      .map((nextElement) =>
        newElementWith(
-          prevElementMap.get(nextElement.id) || nextElement,
+          prevElementMap[nextElement.id] || nextElement,
          nextElement,
        ),
      )
@@ -30,31 +30,19 @@ 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,
  isTextElement,
  redrawTextBoundingBox,
 } from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import {
-  getBoundTextElement,
-  getContainerElement,
-} from "../element/textElement";
-import {
-  isBoundToContainer,
-  isLinearElement,
-  isLinearElementType,
-} from "../element/typeChecks";
+import { newElementWith } from "../element/mutateElement";
+import { isLinearElement, isLinearElementType } from "../element/typeChecks";
 import {
  Arrowhead,
  ExcalidrawElement,
@@ -62,37 +50,27 @@ import {
  ExcalidrawTextElement,
  FontFamilyValues,
  TextAlign,
-  VerticalAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
-import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
  canChangeSharpness,
  canHaveArrowheads,
  getCommonAttributeOfSelectedElements,
-  getSelectedElements,
  getTargetElements,
  isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap } from "../utils";
 import { register } from "./register";

-const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
-
 const changeProperty = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  callback: (element: ExcalidrawElement) => ExcalidrawElement,
-  includeBoundText = false,
 ) => {
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, includeBoundText),
-  );
  return elements.map((element) => {
    if (
-      selectedElementIds.get(element.id) ||
+      appState.selectedElementIds[element.id] ||
      element.id === appState.editingElement?.id
    ) {
      return callback(element);
@@ -122,97 +100,18 @@ const getFormValue = function <T>(
  );
 };

-const offsetElementAfterFontResize = (
-  prevElement: ExcalidrawTextElement,
-  nextElement: ExcalidrawTextElement,
-) => {
-  if (isBoundToContainer(nextElement)) {
-    return nextElement;
-  }
-  return mutateElement(
-    nextElement,
-    {
-      x:
-        prevElement.textAlign === "left"
-          ? prevElement.x
-          : prevElement.x +
-            (prevElement.width - nextElement.width) /
-              (prevElement.textAlign === "center" ? 2 : 1),
-      // centering vertically is non-standard, but for Excalidraw I think
-      // it makes sense
-      y: prevElement.y + (prevElement.height - nextElement.height) / 2,
-    },
-    false,
-  );
-};
-
-const changeFontSize = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  getNewFontSize: (element: ExcalidrawTextElement) => number,
-  fallbackValue?: ExcalidrawTextElement["fontSize"],
-) => {
-  const newFontSizes = new Set<number>();
-
-  return {
-    elements: changeProperty(
-      elements,
-      appState,
-      (oldElement) => {
-        if (isTextElement(oldElement)) {
-          const newFontSize = getNewFontSize(oldElement);
-          newFontSizes.add(newFontSize);
-
-          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-            fontSize: newFontSize,
-          });
-          redrawTextBoundingBox(
-            newElement,
-            getContainerElement(oldElement),
-            appState,
-          );
-
-          newElement = offsetElementAfterFontResize(oldElement, newElement);
-
-          return newElement;
-        }
-
-        return oldElement;
-      },
-      true,
-    ),
-    appState: {
-      ...appState,
-      // update state only if we've set all select text elements to
-      // the same font size
-      currentItemFontSize:
-        newFontSizes.size === 1
-          ? [...newFontSizes][0]
-          : fallbackValue ?? appState.currentItemFontSize,
-    },
-    commitToHistory: true,
-  };
-};
-
-// -----------------------------------------------------------------------------
-
 export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemStrokeColor && {
-        elements: changeProperty(
-          elements,
-          appState,
-          (el) => {
-            return hasStrokeColor(el.type)
-              ? newElementWith(el, {
-                  strokeColor: value.currentItemStrokeColor,
-                })
-              : el;
-          },
-          true,
-        ),
+        elements: changeProperty(elements, appState, (el) => {
+          return hasStrokeColor(el.type)
+            ? newElementWith(el, {
+                strokeColor: value.currentItemStrokeColor,
+              })
+            : el;
+        }),
      }),
      appState: {
        ...appState,
@@ -238,8 +137,6 @@ export const actionChangeStrokeColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "strokeColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@@ -280,8 +177,6 @@ export const actionChangeBackgroundColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "backgroundColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@@ -530,7 +425,24 @@ export const actionChangeOpacity = register({
 export const actionChangeFontSize = register({
  name: "changeFontSize",
  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value, value);
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            fontSize: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }
+
+        return el;
+      }),
+      appState: {
+        ...appState,
+        currentItemFontSize: value,
+      },
+      commitToHistory: true,
+    };
  },
  PanelComponent: ({ elements, appState, updateData }) => (
    <fieldset>
@@ -542,40 +454,27 @@ 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(
          elements,
          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.fontSize;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.fontSize;
-            }
-            return null;
-          },
+          (element) => isTextElement(element) && element.fontSize,
          appState.currentItemFontSize || DEFAULT_FONT_SIZE,
        )}
        onChange={(value) => updateData(value)}
@@ -584,71 +483,21 @@ export const actionChangeFontSize = register({
  ),
 });

-export const actionDecreaseFontSize = register({
-  name: "decreaseFontSize",
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, (element) =>
-      Math.round(
-        // get previous value before relative increase (doesn't work fully
-        // due to rounding and float precision issues)
-        (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize,
-      ),
-    );
-  },
-  keyTest: (event) => {
-    return (
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      // KEYS.COMMA needed for MacOS
-      (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA)
-    );
-  },
-});
-
-export const actionIncreaseFontSize = register({
-  name: "increaseFontSize",
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, (element) =>
-      Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
-    );
-  },
-  keyTest: (event) => {
-    return (
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      // KEYS.PERIOD needed for MacOS
-      (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD)
-    );
-  },
-});
-
 export const actionChangeFontFamily = register({
  name: "changeFontFamily",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              {
-                fontFamily: value,
-              },
-            );
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
-            return newElement;
-          }
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            fontFamily: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }

-          return oldElement;
-        },
-        true,
-      ),
+        return el;
+      }),
      appState: {
        ...appState,
        currentItemFontFamily: value,
@@ -688,16 +537,7 @@ export const actionChangeFontFamily = register({
          value={getFormValue(
            elements,
            appState,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.fontFamily;
-              }
-              const boundTextElement = getBoundTextElement(element);
-              if (boundTextElement) {
-                return boundTextElement.fontFamily;
-              }
-              return null;
-            },
+            (element) => isTextElement(element) && element.fontFamily,
            appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
          )}
          onChange={(value) => updateData(value)}
@@ -711,27 +551,17 @@ export const actionChangeTextAlign = register({
  name: "changeTextAlign",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { textAlign: value },
-            );
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
-            return newElement;
-          }
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            textAlign: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }

-          return oldElement;
-        },
-        true,
-      ),
+        return el;
+      }),
      appState: {
        ...appState,
        currentItemTextAlign: value,
@@ -739,119 +569,38 @@ 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",
-  perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { verticalAlign: value },
-            );
-
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
-            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;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.verticalAlign;
-            }
-            return null;
-          })}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
+  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) => isTextElement(element) && element.textAlign,
+          appState.currentItemTextAlign,
+        )}
+        onChange={(value) => updateData(value)}
+      />
+    </fieldset>
+  ),
 });

 export const actionChangeSharpness = register({
@@ -1,7 +1,7 @@
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { getNonDeletedElements } from "../element";

 export const actionSelectAll = register({
  name: "selectAll",
@@ -15,10 +15,7 @@ export const actionSelectAll = register({
          ...appState,
          editingGroupId: null,
          selectedElementIds: elements.reduce((map, element) => {
-            if (
-              !element.isDeleted &&
-              !(isTextElement(element) && element.containerId)
-            ) {
+            if (!element.isDeleted) {
              map[element.id] = true;
            }
            return map;
@@ -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);
-  });
-});
@@ -12,7 +12,6 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getContainerElement } from "../element/textElement";

 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -56,18 +55,13 @@ export const actionPasteStyles = register({
            opacity: pastedElement?.opacity,
            roughness: pastedElement?.roughness,
          });
-          if (isTextElement(newElement) && isTextElement(element)) {
+          if (isTextElement(newElement)) {
            mutateElement(newElement, {
              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
            });
-
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(newElement),
-              appState,
-            );
+            redrawTextBoundingBox(newElement);
          }
          return newElement;
        }
@@ -1,44 +0,0 @@
-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,
-    };
-  },
-});
@@ -17,7 +17,6 @@ export {
  actionChangeFontSize,
  actionChangeFontFamily,
  actionChangeTextAlign,
-  actionChangeVerticalAlign,
 } from "./actionProperties";

 export {
@@ -81,5 +80,3 @@ export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";

 export { actionToggleStats } from "./actionToggleStats";
-export { actionUnbindText } from "./actionUnbindText";
-export { actionLink } from "../element/Hyperlink";
@@ -10,31 +10,6 @@ import {
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { MODES } from "../constants";
-import { trackEvent } from "../analytics";
-
-const trackAction = (
-  action: Action,
-  source: "ui" | "keyboard" | "api",
-  value: any,
-) => {
-  if (action.trackEvent !== false) {
-    try {
-      if (action.trackEvent === true) {
-        trackEvent(
-          action.name,
-          source,
-          typeof value === "number" || typeof value === "string"
-            ? String(value)
-            : undefined,
-        );
-      } else {
-        action.trackEvent?.(action, source, value);
-      }
-    } catch (error) {
-      console.error("error while logging action:", error);
-    }
-  }
-};

 export class ActionManager implements ActionsManagerInterface {
  actions = {} as ActionsManagerInterface["actions"];
@@ -90,15 +65,9 @@ export class ActionManager implements ActionsManagerInterface {
          ),
      );

-    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)) {
@@ -106,8 +75,6 @@ export class ActionManager implements ActionsManagerInterface {
      }
    }

-    trackAction(action, "keyboard", null);
-
    event.preventDefault();
    this.updater(
      data[0].perform(
@@ -129,7 +96,6 @@ export class ActionManager implements ActionsManagerInterface {
        this.app,
      ),
    );
-    trackAction(action, "api", null);
  }

  /**
@@ -156,8 +122,6 @@ export class ActionManager implements ActionsManagerInterface {
            this.app,
          ),
        );
-
-        trackAction(action, "ui", formState);
      };

      return (
@@ -2,9 +2,7 @@ import { Action } from "./types";

 export let actions: readonly Action[] = [];

-export const register = <T extends Action>(action: T) => {
+export const register = (action: Action): Action => {
  actions = actions.concat(action);
-  return action as T & {
-    keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];
-  };
+  return action;
 };
@@ -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"
@@ -27,9 +25,7 @@ export type ShortcutName = SubtypeOf<
  | "addToLibrary"
  | "viewMode"
  | "flipHorizontal"
-  | "flipVertical"
-  | "hyperlink"
->;
+  | "flipVertical";

 const shortcutMap: Record<ShortcutName, string[]> = {
  cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -66,11 +62,10 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  flipHorizontal: [getShortcutKey("Shift+H")],
  flipVertical: [getShortcutKey("Shift+V")],
  viewMode: [getShortcutKey("Alt+R")],
-  hyperlink: [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] : "";
 };
@@ -82,7 +82,6 @@ export type ActionName =
  | "zoomToSelection"
  | "changeFontFamily"
  | "changeTextAlign"
-  | "changeVerticalAlign"
  | "toggleFullScreen"
  | "toggleShortcuts"
  | "group"
@@ -102,11 +101,7 @@ export type ActionName =
  | "flipVertical"
  | "viewMode"
  | "exportWithDarkMode"
-  | "toggleTheme"
-  | "increaseFontSize"
-  | "decreaseFontSize"
-  | "unbindText"
-  | "hyperlink";
+  | "toggleTheme";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -126,20 +121,12 @@ export interface Action {
    appState: AppState,
    elements: readonly ExcalidrawElement[],
  ) => boolean;
-  contextItemLabel?:
-    | string
-    | ((
-        elements: readonly ExcalidrawElement[],
-        appState: Readonly<AppState>,
-      ) => string);
+  contextItemLabel?: string;
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
-  trackEvent?:
-    | boolean
-    | ((action: Action, type: "ui" | "keyboard" | "api", value: any) => void);
 }

 export interface ActionsManagerInterface {
@@ -1,7 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
 import { Box, getCommonBoundingBox } from "./element/bounds";
-import { getMaximumGroups } from "./groups";

 export interface Alignment {
  position: "start" | "center" | "end";
@@ -31,6 +30,28 @@ export const alignElements = (
  });
 };

+export const getMaximumGroups = (
+  elements: ExcalidrawElement[],
+): ExcalidrawElement[][] => {
+  const groups: Map<String, ExcalidrawElement[]> = new Map<
+    String,
+    ExcalidrawElement[]
+  >();
+
+  elements.forEach((element: ExcalidrawElement) => {
+    const groupId =
+      element.groupIds.length === 0
+        ? element.id
+        : element.groupIds[element.groupIds.length - 1];
+
+    const currentGroupMembers = groups.get(groupId) || [];
+
+    groups.set(groupId, [...currentGroupMembers, element]);
+  });
+
+  return Array.from(groups.values());
+};
+
 const calculateTranslation = (
  group: ExcalidrawElement[],
  selectionBoundingBox: Box,
@@ -3,16 +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) => {
-        window.gtag("event", action, {
+    ? (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.info("Track Event", category, action, label, value);
+        // console.info("Track Event", category, name, label, value);
      };
@@ -43,8 +43,6 @@ export const getDefaultAppState = (): Omit<
    editingLinearElement: null,
    elementLocked: false,
    elementType: "selection",
-    penMode: false,
-    penDetected: false,
    errorMessage: null,
    exportBackground: true,
    exportScale: defaultExportScale,
@@ -79,12 +77,9 @@ export const getDefaultAppState = (): Omit<
    toastMessage: null,
    viewBackgroundColor: oc.white,
    zenModeEnabled: false,
-    zoom: {
-      value: 1 as NormalizedZoomValue,
-    },
+    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
    viewModeEnabled: false,
    pendingImageElement: null,
-    showHyperlinkPopup: false,
  };
 };

@@ -132,8 +127,6 @@ const APP_STATE_STORAGE_CONF = (<
  editingLinearElement: { browser: false, 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 },
@@ -175,7 +168,6 @@ const APP_STATE_STORAGE_CONF = (<
  zoom: { browser: true, export: false, server: false },
  viewModeEnabled: { browser: false, export: false, server: false },
  pendingImageElement: { browser: false, export: false, server: false },
-  showHyperlinkPopup: { browser: false, export: false, server: false },
 });

 const _clearAppStateForStorage = <
@@ -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,7 +161,7 @@ const commonProps = {
  strokeSharpness: "sharp",
  strokeStyle: "solid",
  strokeWidth: 1,
-  verticalAlign: VERTICAL_ALIGN.MIDDLE,
+  verticalAlign: "middle",
 } as const;

 const getChartDimentions = (spreadsheet: Spreadsheet) => {
@@ -58,8 +58,7 @@ export const copyToClipboard = async (
  appState: AppState,
  files: BinaryFiles,
 ) => {
-  // select binded text elements when copying
-  const selectedElements = getSelectedElements(elements, appState, true);
+  const selectedElements = getSelectedElements(elements, appState);
  const contents: ElementsClipboard = {
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
    elements: selectedElements,
@@ -124,7 +123,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,
@@ -19,7 +19,6 @@ import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";

 export const SelectedShapeActions = ({
  appState,
@@ -36,15 +35,6 @@ export const SelectedShapeActions = ({
    getNonDeletedElements(elements),
    appState,
  );
-
-  let isSingleElementBoundContainer = false;
-  if (
-    targetElements.length === 2 &&
-    (hasBoundTextElement(targetElements[0]) ||
-      hasBoundTextElement(targetElements[1]))
-  ) {
-    isSingleElementBoundContainer = true;
-  }
  const isEditing = Boolean(appState.editingElement);
  const isMobile = useIsMobile();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";
@@ -110,10 +100,6 @@ export const SelectedShapeActions = ({
        </>
      )}

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

-      {targetElements.length > 1 && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && (
        <fieldset>
          <legend>{t("labels.align")}</legend>
          <div className="buttonList">
@@ -164,15 +150,14 @@ export const SelectedShapeActions = ({
          </div>
        </fieldset>
      )}
-      {!isEditing && targetElements.length > 0 && (
+      {!isMobile && !isEditing && targetElements.length > 0 && (
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
-            {!isMobile && renderAction("duplicateSelection")}
-            {!isMobile && renderAction("deleteSelectedElements")}
+            {renderAction("duplicateSelection")}
+            {renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
-            {targetElements.length === 1 && renderAction("hyperlink")}
          </div>
        </fieldset>
      )}
@@ -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>
@@ -3,22 +3,15 @@ import OpenColor from "open-color";
 import "./Card.scss";

 export const Card: React.FC<{
-  color: keyof OpenColor | "primary";
+  color: keyof OpenColor;
 }> = ({ children, color }) => {
  return (
    <div
      className="Card"
      style={{
-        ["--card-color" as any]:
-          color === "primary" ? "var(--color-primary)" : OpenColor[color][7],
-        ["--card-color-darker" as any]:
-          color === "primary"
-            ? "var(--color-primary-darker)"
-            : OpenColor[color][8],
-        ["--card-color-darkest" as any]:
-          color === "primary"
-            ? "var(--color-primary-darkest)"
-            : OpenColor[color][9],
+        ["--card-color" as any]: OpenColor[color][7],
+        ["--card-color-darker" as any]: OpenColor[color][8],
+        ["--card-color-darkest" as any]: OpenColor[color][9],
      }}
    >
      {children}
@@ -6,14 +6,14 @@ import "./CheckboxItem.scss";

 export const CheckboxItem: React.FC<{
  checked: boolean;
-  onChange: (checked: boolean, event: React.MouseEvent) => void;
+  onChange: (checked: boolean) => void;
  className?: string;
 }> = ({ children, checked, onChange, className }) => {
  return (
    <div
      className={clsx("Checkbox", className, { "is-checked": checked })}
      onClick={(event) => {
-        onChange(!checked, event);
+        onChange(!checked);
        (
          (event.currentTarget as HTMLDivElement).querySelector(
            ".Checkbox-box",
@@ -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}
@@ -11,7 +11,6 @@ import {
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";

 export type ContextMenuOption = "separator" | Action;

@@ -22,7 +21,6 @@ type ContextMenuProps = {
  left: number;
  actionManager: ActionManager;
  appState: Readonly<AppState>;
-  elements: readonly NonDeletedExcalidrawElement[];
 };

 const ContextMenu = ({
@@ -32,7 +30,6 @@ const ContextMenu = ({
  left,
  actionManager,
  appState,
-  elements,
 }: ContextMenuProps) => {
  return (
    <Popover
@@ -40,10 +37,6 @@ const ContextMenu = ({
      top={top}
      left={left}
      fitInViewport={true}
-      offsetLeft={appState.offsetLeft}
-      offsetTop={appState.offsetTop}
-      viewportWidth={appState.width}
-      viewportHeight={appState.height}
    >
      <ul
        className="context-menu"
@@ -55,14 +48,9 @@ const ContextMenu = ({
          }

          const actionName = option.name;
-          let label = "";
-          if (option.contextItemLabel) {
-            if (typeof option.contextItemLabel === "function") {
-              label = t(option.contextItemLabel(elements, appState));
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
+          const label = option.contextItemLabel
+            ? t(option.contextItemLabel)
+            : "";
          return (
            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
              <button
@@ -109,7 +97,6 @@ type ContextMenuParams = {
  actionManager: ContextMenuProps["actionManager"];
  appState: Readonly<AppState>;
  container: HTMLElement;
-  elements: readonly NonDeletedExcalidrawElement[];
 };

 const handleClose = (container: HTMLElement) => {
@@ -138,7 +125,6 @@ export default {
          onCloseRequest={() => handleClose(params.container)}
          actionManager={params.actionManager}
          appState={params.appState}
-          elements={params.elements}
        />,
        getContextMenuNode(params.container),
      );
@@ -154,7 +154,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                <Shortcut
                  label={t("toolBar.freedraw")}
-                  shortcuts={["Shift + P", "X", "7"]}
+                  shortcuts={["Shift+P", "7"]}
                />
                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
                <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
@@ -205,10 +205,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("helpDialog.preventBinding")}
                  shortcuts={[getShortcutKey("CtrlOrCmd")]}
                />
-                <Shortcut
-                  label={t("toolBar.link")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+K")]}
-                />
              </ShortcutIsland>
              <ShortcutIsland caption={t("helpDialog.view")}>
                <Shortcut
@@ -264,18 +260,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.multiSelect")}
                  shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
                />
-                <Shortcut
-                  label={t("helpDialog.deepSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.deepBoxSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`),
-                  ]}
-                />
                <Shortcut
                  label={t("labels.moveCanvas")}
                  shortcuts={[
@@ -398,14 +382,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.showBackground")}
                  shortcuts={[getShortcutKey("G")]}
                />
-                <Shortcut
-                  label={t("labels.decreaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
-                />
-                <Shortcut
-                  label={t("labels.increaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+>")]}
-                />
              </ShortcutIsland>
            </Column>
          </Columns>
@@ -7,7 +7,6 @@ import { AppState } from "../types";
 import {
  isImageElement,
  isLinearElement,
-  isTextBindableContainer,
  isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
@@ -61,6 +60,15 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    return t("hints.rotate");
  }

+  if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
+    if (appState.editingLinearElement) {
+      return appState.editingLinearElement.activePointIndex
+        ? t("hints.lineEditor_pointSelected")
+        : t("hints.lineEditor_nothingSelected");
+    }
+    return t("hints.lineEditor_info");
+  }
+
  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
    return t("hints.text_selected");
  }
@@ -69,31 +77,8 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    return t("hints.text_editing");
  }

-  if (elementType === "selection") {
-    if (
-      appState.draggingElement?.type === "selection" &&
-      !appState.editingElement &&
-      !appState.editingLinearElement
-    ) {
-      return t("hints.deepBoxSelect");
-    }
-    if (!selectedElements.length && !isMobile) {
-      return t("hints.canvasPanning");
-    }
-  }
-
-  if (selectedElements.length === 1) {
-    if (isLinearElement(selectedElements[0])) {
-      if (appState.editingLinearElement) {
-        return appState.editingLinearElement.selectedPointsIndices
-          ? t("hints.lineEditor_pointSelected")
-          : t("hints.lineEditor_nothingSelected");
-      }
-      return t("hints.lineEditor_info");
-    }
-    if (isTextBindableContainer(selectedElements[0])) {
-      return t("hints.bindTextToElement");
-    }
+  if (elementType === "selection" && !selectedElements.length && !isMobile) {
+    return t("hints.canvasPanning");
  }

  return null;
@@ -22,7 +22,7 @@
    align-items: center;
    justify-content: center;

-    &:focus-visible {
+    &:focus {
      outline: transparent;
      background-color: var(--button-gray-2);
      & svg {
@@ -102,7 +102,7 @@ const ImageExportModal = ({
  const { exportBackground, viewBackgroundColor } = appState;

  const exportedElements = exportSelected
-    ? getSelectedElements(elements, appState, true)
+    ? getSelectedElements(elements, appState)
    : elements;

  useEffect(() => {
@@ -3,7 +3,7 @@
    --padding: 0;
    background-color: var(--island-bg-color);
    box-shadow: var(--shadow-island);
-    border-radius: var(--border-radius-lg);
+    border-radius: 4px;
    padding: calc(var(--padding) * var(--space-factor));
    position: relative;
    transition: box-shadow 0.5s ease-in-out;
@@ -19,6 +19,7 @@ import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
 import { Island } from "./Island";
+import "./LayerUI.scss";
 import { LoadingMessage } from "./LoadingMessage";
 import { LockButton } from "./LockButton";
 import { MobileMenu } from "./MobileMenu";
@@ -34,10 +35,6 @@ import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
 import { LibraryMenu } from "./LibraryMenu";

-import "./LayerUI.scss";
-import "./Toolbar.scss";
-import { PenModeButton } from "./PenModeButton";
-
 interface LayerUIProps {
  actionManager: ActionManager;
  appState: AppState;
@@ -47,7 +44,6 @@ interface LayerUIProps {
  elements: readonly NonDeletedExcalidrawElement[];
  onCollabButtonClick?: () => void;
  onLockToggle: () => void;
-  onPenModeToggle: () => void;
  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
  zenModeEnabled: boolean;
  showExitZenModeBtn: boolean;
@@ -78,7 +74,6 @@ const LayerUI = ({
  elements,
  onCollabButtonClick,
  onLockToggle,
-  onPenModeToggle,
  onInsertElements,
  zenModeEnabled,
  showExitZenModeBtn,
@@ -238,7 +233,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`,
@@ -273,7 +268,7 @@ const LayerUI = ({

  const libraryMenu = appState.isLibraryOpen ? (
    <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState, true)}
+      pendingElements={getSelectedElements(elements, appState)}
      onClose={closeLibrary}
      onInsertShape={onInsertElements}
      onAddToLibrary={deselectItems}
@@ -310,19 +305,7 @@ const LayerUI = ({
            <Section heading="shapes">
              {(heading) => (
                <Stack.Col gap={4} align="start">
-                  <Stack.Row
-                    gap={1}
-                    className={clsx("App-toolbar-container", {
-                      "zen-mode": zenModeEnabled,
-                    })}
-                  >
-                    <PenModeButton
-                      zenModeEnabled={zenModeEnabled}
-                      checked={appState.penMode}
-                      onChange={onPenModeToggle}
-                      title={t("toolBar.penMode")}
-                      penDetected={appState.penDetected}
-                    />
+                  <Stack.Row gap={1}>
                    <LockButton
                      zenModeEnabled={zenModeEnabled}
                      checked={appState.elementLocked}
@@ -331,9 +314,7 @@ const LayerUI = ({
                    />
                    <Island
                      padding={1}
-                      className={clsx("App-toolbar", {
-                        "zen-mode": zenModeEnabled,
-                      })}
+                      className={clsx({ "zen-mode": zenModeEnabled })}
                    >
                      <HintViewer
                        appState={appState}
@@ -508,7 +489,6 @@ const LayerUI = ({
        setAppState={setAppState}
        onCollabButtonClick={onCollabButtonClick}
        onLockToggle={onLockToggle}
-        onPenModeToggle={onPenModeToggle}
        canvas={canvas}
        isCollaborating={isCollaborating}
        renderCustomFooter={renderCustomFooter}
@@ -16,18 +16,18 @@ const LIBRARY_ICON = (
 export const LibraryButton: React.FC<{
  appState: AppState;
  setAppState: React.Component<any, AppState>["setState"];
-  isMobile?: boolean;
-}> = ({ appState, setAppState, isMobile }) => {
+}> = ({ appState, setAppState }) => {
  return (
    <label
      className={clsx(
-        "ToolIcon ToolIcon_type_floating ToolIcon__library",
+        "ToolIcon ToolIcon_type_floating ToolIcon__library zen-mode-visibility",
        `ToolIcon_size_medium`,
        {
-          "is-mobile": isMobile,
+          "zen-mode-visibility--hidden": appState.zenModeEnabled,
        },
      )}
      title={`${capitalizeString(t("toolBar.library"))} — 0`}
+      style={{ marginInlineStart: "var(--space-factor)" }}
    >
      <input
        className="ToolIcon_type_checkbox"
@@ -18,7 +18,6 @@ import "./LibraryMenu.scss";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { EVENT } from "../constants";
 import { KEYS } from "../keys";
-import { arrayToMap } from "../utils";

 const useOnClickOutside = (
  ref: RefObject<HTMLElement>,
@@ -237,10 +236,6 @@ export const LibraryMenu = ({
    ],
  );

-  const [lastSelectedItem, setLastSelectedItem] = useState<
-    LibraryItem["id"] | null
-  >(null);
-
  return loadingState === "preloading" ? null : (
    <Island padding={1} ref={ref} className="layer-ui__library">
      {showPublishLibraryDialog && (
@@ -276,44 +271,10 @@ export const LibraryMenu = ({
          files={files}
          id={id}
          selectedItems={selectedItems}
-          onToggle={(id, event) => {
-            const shouldSelect = !selectedItems.includes(id);
-
-            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]);
-              }
-              setLastSelectedItem(id);
+          onToggle={(id) => {
+            if (!selectedItems.includes(id)) {
+              setSelectedItems([...selectedItems, id]);
            } else {
-              setLastSelectedItem(null);
              setSelectedItems(selectedItems.filter((_id) => _id !== id));
            }
          }}
@@ -21,7 +21,6 @@ import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";

 import "./LibraryMenuItems.scss";
-import { VERSIONS } from "../constants";

 const LibraryMenuItems = ({
  libraryItems,
@@ -52,7 +51,7 @@ const LibraryMenuItems = ({
  library: Library;
  id: string;
  selectedItems: LibraryItem["id"][];
-  onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
+  onToggle: (id: LibraryItem["id"]) => void;
  onPublish: () => void;
  resetLibrary: () => void;
 }) => {
@@ -213,8 +212,10 @@ const LibraryMenuItems = ({
          onClick={params.onClick || (() => {})}
          id={params.item?.id || null}
          selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={(id, event) => {
-            onToggle(id, event);
+          onToggle={() => {
+            if (params.item?.id) {
+              onToggle(params.item.id);
+            }
          }}
        />
      </Stack.Col>
@@ -292,9 +293,7 @@ const LibraryMenuItems = ({
        <a
          href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
            window.name || "_blank"
-          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
-            VERSIONS.excalidrawLibrary
-          }`}
+          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}`}
          target="_excalidraw_libraries"
        >
          {t("labels.libraries")}
@@ -27,8 +27,6 @@

  .library-unit__dragger {
    display: flex;
-    align-items: center;
-    justify-content: center;
    height: 100%;
    width: 100%;
  }
@@ -101,13 +99,8 @@
    margin-top: -10px;
    pointer-events: none;
  }
-  .library-unit:hover .library-unit__adder {
-    fill: $oc-blue-7;
-  }
-  .library-unit:active .library-unit__adder {
-    animation: none;
-    transform: scale(0.8);
-    fill: $oc-black;
+  .library-unit--hover .library-unit__adder {
+    color: $oc-blue-7;
  }

  .library-unit__active {
@@ -8,15 +8,12 @@ import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";

+// fa-plus
 const PLUS_ICON = (
  <svg viewBox="0 0 1792 1792">
    <path
-      d="M1600 736v192c0 26.667-9.33 49.333-28 68-18.67 18.67-41.33 28-68 28h-416v416c0 26.67-9.33 49.33-28 68s-41.33 28-68 28H800c-26.667 0-49.333-9.33-68-28s-28-41.33-28-68v-416H288c-26.667 0-49.333-9.33-68-28-18.667-18.667-28-41.333-28-68V736c0-26.667 9.333-49.333 28-68s41.333-28 68-28h416V224c0-26.667 9.333-49.333 28-68s41.333-28 68-28h192c26.67 0 49.33 9.333 68 28s28 41.333 28 68v416h416c26.67 0 49.33 9.333 68 28s28 41.333 28 68Z"
-      style={{
-        stroke: "#fff",
-        strokeWidth: 140,
-      }}
-      transform="translate(0 64)"
+      fill="currentColor"
+      d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"
    />
  </svg>
 );
@@ -36,7 +33,7 @@ export const LibraryUnit = ({
  isPending?: boolean;
  onClick: () => void;
  selected: boolean;
-  onToggle: (id: string, event: React.MouseEvent) => void;
+  onToggle: (id: string) => void;
 }) => {
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
@@ -87,17 +84,7 @@ export const LibraryUnit = ({
        })}
        ref={ref}
        draggable={!!elements}
-        onClick={
-          !!elements || !!isPending
-            ? (event) => {
-                if (id && event.shiftKey) {
-                  onToggle(id, event);
-                } else {
-                  onClick();
-                }
-              }
-            : undefined
-        }
+        onClick={!!elements || !!isPending ? onClick : undefined}
        onDragStart={(event) => {
          setIsHovered(false);
          event.dataTransfer.setData(
@@ -110,7 +97,7 @@ export const LibraryUnit = ({
      {id && elements && (isHovered || isMobile || selected) && (
        <CheckboxItem
          checked={selected}
-          onChange={(checked, event) => onToggle(id, event)}
+          onChange={() => onToggle(id)}
          className="library-unit__checkbox"
        />
      )}
@@ -10,7 +10,6 @@ type LockIconProps = {
  checked: boolean;
  onChange?(): void;
  zenModeEnabled?: boolean;
-  isMobile?: boolean;
 };

 const DEFAULT_SIZE: ToolButtonSize = "medium";
@@ -43,10 +42,10 @@ export const LockButton = (props: LockIconProps) => {
  return (
    <label
      className={clsx(
-        "ToolIcon ToolIcon__lock ToolIcon_type_floating",
+        "ToolIcon ToolIcon__lock ToolIcon_type_floating zen-mode-visibility",
        `ToolIcon_size_${DEFAULT_SIZE}`,
        {
-          "is-mobile": props.isMobile,
+          "zen-mode-visibility--hidden": props.zenModeEnabled,
        },
      )}
      title={`${props.title} — Q`}
@@ -17,7 +17,6 @@ import { LockButton } from "./LockButton";
 import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
-import { PenModeButton } from "./PenModeButton";

 type MobileMenuProps = {
  appState: AppState;
@@ -29,7 +28,6 @@ type MobileMenuProps = {
  libraryMenu: JSX.Element | null;
  onCollabButtonClick?: () => void;
  onLockToggle: () => void;
-  onPenModeToggle: () => void;
  canvas: HTMLCanvasElement | null;
  isCollaborating: boolean;
  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
@@ -52,7 +50,6 @@ export const MobileMenu = ({
  setAppState,
  onCollabButtonClick,
  onLockToggle,
-  onPenModeToggle,
  canvas,
  isCollaborating,
  renderCustomFooter,
@@ -67,8 +64,8 @@ export const MobileMenu = ({
        <Section heading="shapes">
          {(heading) => (
            <Stack.Col gap={4} align="center">
-              <Stack.Row gap={1} className="App-toolbar-container">
-                <Island padding={1} className="App-toolbar">
+              <Stack.Row gap={1}>
+                <Island padding={1}>
                  {heading}
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
@@ -88,20 +85,8 @@ export const MobileMenu = ({
                  checked={appState.elementLocked}
                  onChange={onLockToggle}
                  title={t("toolBar.lock")}
-                  isMobile
-                />
-                <LibraryButton
-                  appState={appState}
-                  setAppState={setAppState}
-                  isMobile
-                />
-                <PenModeButton
-                  checked={appState.penMode}
-                  onChange={onPenModeToggle}
-                  title={t("toolBar.penMode")}
-                  isMobile
-                  penDetected={appState.penDetected}
                />
+                <LibraryButton appState={appState} setAppState={setAppState} />
              </Stack.Row>
              {libraryMenu}
            </Stack.Col>
@@ -1,91 +0,0 @@
-import "./ToolIcon.scss";
-
-import clsx from "clsx";
-import { ToolButtonSize } from "./ToolButton";
-
-type PenModeIconProps = {
-  title?: string;
-  name?: string;
-  checked: boolean;
-  onChange?(): void;
-  zenModeEnabled?: boolean;
-  isMobile?: boolean;
-  penDetected: boolean;
-};
-
-const DEFAULT_SIZE: ToolButtonSize = "medium";
-
-const ICONS = {
-  CHECKED: (
-    <svg
-      width="205"
-      height="205"
-      viewBox="0 0 205 205"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="m35 195-25-29.17V50h50v115l-25 30" />
-      <path d="M10 40V10h50v30H10" />
-      <path d="M125 145h70v50h-70" />
-      <path d="M190 145v-30l-10-20h-40l-10 20v30h15v-30l5-5h20l5 5v30h15" />
-    </svg>
-  ),
-  UNCHECKED: (
-    <svg
-      width="205"
-      height="205"
-      viewBox="0 0 205 205"
-      xmlns="http://www.w3.org/2000/svg"
-      className="unlocked-icon rtl-mirror"
-    >
-      <path d="m35 195-25-29.17V50h50v115l-25 30" />
-      <path d="M10 40V10h50v30H10" />
-      <path d="M125 145h70v50h-70" />
-      <path d="M145 145v-30l-10-20H95l-10 20v30h15v-30l5-5h20l5 5v30h15" />
-    </svg>
-  ),
-};
-
-export const PenModeButton = (props: PenModeIconProps) => {
-  if (!props.penDetected) {
-    if (props.isMobile) {
-      return null;
-    }
-    return (
-      <label
-        className={clsx(
-          "ToolIcon ToolIcon__penMode ToolIcon_type_floating",
-          `ToolIcon_size_${DEFAULT_SIZE}`,
-          {
-            "is-mobile": props.isMobile,
-          },
-        )}
-      >
-        <div className="ToolIcon__icon ToolIcon__hidden" />
-      </label>
-    );
-  }
-  return (
-    <label
-      className={clsx(
-        "ToolIcon ToolIcon__penMode ToolIcon_type_floating",
-        `ToolIcon_size_${DEFAULT_SIZE}`,
-        {
-          "is-mobile": props.isMobile,
-        },
-      )}
-      title={`${props.title}`}
-    >
-      <input
-        className="ToolIcon_type_checkbox"
-        type="checkbox"
-        name={props.name}
-        onChange={props.onChange}
-        checked={props.checked}
-        aria-label={props.title}
-      />
-      <div className="ToolIcon__icon">
-        {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}
-      </div>
-    </label>
-  );
-};
@@ -8,10 +8,6 @@ type Props = {
  children?: React.ReactNode;
  onCloseRequest?(event: PointerEvent): void;
  fitInViewport?: boolean;
-  offsetLeft?: number;
-  offsetTop?: number;
-  viewportWidth?: number;
-  viewportHeight?: number;
 };

 export const Popover = ({
@@ -20,10 +16,6 @@ export const Popover = ({
  top,
  onCloseRequest,
  fitInViewport = false,
-  offsetLeft = 0,
-  offsetTop = 0,
-  viewportWidth = window.innerWidth,
-  viewportHeight = window.innerHeight,
 }: Props) => {
  const popoverRef = useRef<HTMLDivElement>(null);

@@ -32,14 +24,17 @@ export const Popover = ({
    if (fitInViewport && popoverRef.current) {
      const element = popoverRef.current;
      const { x, y, width, height } = element.getBoundingClientRect();
-      if (x + width - offsetLeft > viewportWidth) {
+
+      const viewportWidth = window.innerWidth;
+      if (x + width > viewportWidth) {
        element.style.left = `${viewportWidth - width}px`;
      }
-      if (y + height - offsetTop > viewportHeight) {
+      const viewportHeight = window.innerHeight;
+      if (y + height > viewportHeight) {
        element.style.top = `${viewportHeight - height}px`;
      }
    }
-  }, [fitInViewport, viewportWidth, viewportHeight, offsetLeft, offsetTop]);
+  }, [fitInViewport]);

  useEffect(() => {
    if (onCloseRequest) {
@@ -1,5 +1,5 @@
 import { ReactNode, useCallback, useEffect, useState } from "react";
-import OpenColor from "open-color";
+import oc from "open-color";

 import { Dialog } from "./Dialog";
 import { t } from "../i18n";
@@ -7,19 +7,16 @@ import { t } from "../i18n";
 import { ToolButton } from "./ToolButton";

 import { AppState, LibraryItems, LibraryItem } from "../types";
-import { exportToCanvas } from "../packages/utils";
-import {
-  EXPORT_DATA_TYPES,
-  EXPORT_SOURCE,
-  MIME_TYPES,
-  VERSIONS,
-} from "../constants";
+import { exportToBlob } from "../packages/utils";
+import { EXPORT_DATA_TYPES, EXPORT_SOURCE } from "../constants";
 import { ExportedLibraryData } from "../data/types";

 import "./PublishLibrary.scss";
+import { ExcalidrawElement } from "../element/types";
+import { newElement } from "../element";
+import { mutateElement } from "../element/mutateElement";
+import { getCommonBoundingBox } from "../element/bounds";
 import SingleLibraryItem from "./SingleLibraryItem";
-import { canvasToBlob, resizeImageFile } from "../data/blob";
-import { chunk } from "../utils";

 interface PublishLibraryDataParams {
  authorName: string;
@@ -58,75 +55,6 @@ const importPublishLibDataFromStorage = () => {
  return null;
 };

-const generatePreviewImage = async (libraryItems: LibraryItems) => {
-  const MAX_ITEMS_PER_ROW = 6;
-  const BOX_SIZE = 128;
-  const BOX_PADDING = Math.round(BOX_SIZE / 16);
-  const BORDER_WIDTH = Math.max(Math.round(BOX_SIZE / 64), 2);
-
-  const rows = chunk(libraryItems, MAX_ITEMS_PER_ROW);
-
-  const canvas = document.createElement("canvas");
-
-  canvas.width =
-    rows[0].length * BOX_SIZE +
-    (rows[0].length + 1) * (BOX_PADDING * 2) -
-    BOX_PADDING * 2;
-  canvas.height =
-    rows.length * BOX_SIZE +
-    (rows.length + 1) * (BOX_PADDING * 2) -
-    BOX_PADDING * 2;
-
-  const ctx = canvas.getContext("2d")!;
-
-  ctx.fillStyle = OpenColor.white;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  // draw items
-  // ---------------------------------------------------------------------------
-  for (const [index, item] of libraryItems.entries()) {
-    const itemCanvas = await exportToCanvas({
-      elements: item.elements,
-      files: null,
-      maxWidthOrHeight: BOX_SIZE,
-    });
-
-    const { width, height } = itemCanvas;
-
-    // draw item
-    // -------------------------------------------------------------------------
-    const rowOffset =
-      Math.floor(index / MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
-    const colOffset =
-      (index % MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
-
-    ctx.drawImage(
-      itemCanvas,
-      colOffset + (BOX_SIZE - width) / 2 + BOX_PADDING,
-      rowOffset + (BOX_SIZE - height) / 2 + BOX_PADDING,
-    );
-
-    // draw item border
-    // -------------------------------------------------------------------------
-    ctx.lineWidth = BORDER_WIDTH;
-    ctx.strokeStyle = OpenColor.gray[4];
-    ctx.strokeRect(
-      colOffset + BOX_PADDING / 2,
-      rowOffset + BOX_PADDING / 2,
-      BOX_SIZE + BOX_PADDING,
-      BOX_SIZE + BOX_PADDING,
-    );
-  }
-
-  return await resizeImageFile(
-    new File([await canvasToBlob(canvas)], "preview", { type: MIME_TYPES.png }),
-    {
-      outputType: MIME_TYPES.jpg,
-      maxWidthOrHeight: 5000,
-    },
-  );
-};
-
 const PublishLibrary = ({
  onClose,
  libraryItems,
@@ -201,12 +129,59 @@ const PublishLibrary = ({
      setIsSubmitting(false);
      return;
    }
+    const elements: ExcalidrawElement[] = [];
+    const prevBoundingBox = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+    clonedLibItems.forEach((libItem) => {
+      const boundingBox = getCommonBoundingBox(libItem.elements);
+      const width = boundingBox.maxX - boundingBox.minX + 30;
+      const height = boundingBox.maxY - boundingBox.minY + 30;
+      const offset = {
+        x: prevBoundingBox.maxX - boundingBox.minX,
+        y: prevBoundingBox.maxY - boundingBox.minY,
+      };

-    const previewImage = await generatePreviewImage(clonedLibItems);
+      const itemsWithUpdatedCoords = libItem.elements.map((element) => {
+        element = mutateElement(element, {
+          x: element.x + offset.x + 15,
+          y: element.y + offset.y + 15,
+        });
+        return element;
+      });
+      const items = [
+        ...itemsWithUpdatedCoords,
+        newElement({
+          type: "rectangle",
+          width,
+          height,
+          x: prevBoundingBox.maxX,
+          y: prevBoundingBox.maxY,
+          strokeColor: "#ced4da",
+          backgroundColor: "transparent",
+          strokeStyle: "solid",
+          opacity: 100,
+          roughness: 0,
+          strokeSharpness: "sharp",
+          fillStyle: "solid",
+          strokeWidth: 1,
+        }),
+      ];
+      elements.push(...items);
+      prevBoundingBox.maxX = prevBoundingBox.maxX + width + 30;
+    });
+    const png = await exportToBlob({
+      elements,
+      mimeType: "image/png",
+      appState: {
+        ...appState,
+        viewBackgroundColor: oc.white,
+        exportBackground: true,
+      },
+      files: null,
+    });

    const libContent: ExportedLibraryData = {
      type: EXPORT_DATA_TYPES.excalidrawLibrary,
-      version: VERSIONS.excalidrawLibrary,
+      version: 2,
      source: EXPORT_SOURCE,
      libraryItems: clonedLibItems,
    };
@@ -215,8 +190,7 @@ const PublishLibrary = ({

    const formData = new FormData();
    formData.append("excalidrawLib", lib);
-    formData.append("previewImage", previewImage);
-    formData.append("previewImageType", previewImage.type);
+    formData.append("excalidrawPng", png!);
    formData.append("title", libraryData.name);
    formData.append("authorName", libraryData.authorName);
    formData.append("githubHandle", libraryData.githubHandle);
@@ -8,7 +8,17 @@
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
+    border-radius: var(--space-factor);
    user-select: none;
+
+    background-color: var(--button-gray-1);
+
+    &:hover {
+      background-color: var(--button-gray-2);
+    }
+    &:active {
+      background-color: var(--button-gray-3);
+    }
  }

  .ToolIcon--plain {
@@ -19,20 +29,6 @@
    }
  }

-  .ToolIcon_type_radio,
-  .ToolIcon_type_checkbox {
-    & + .ToolIcon__icon {
-      background-color: var(--button-gray-1);
-
-      &:hover {
-        background-color: var(--button-gray-2);
-      }
-      &:active {
-        background-color: var(--button-gray-3);
-      }
-    }
-  }
-
  .ToolIcon__icon {
    width: 2.5rem;
    height: 2.5rem;
@@ -42,11 +38,7 @@
    justify-content: center;
    align-items: center;

-    border-radius: var(--border-radius-lg);
-
-    & + .ToolIcon__label {
-      margin-inline-start: 0;
-    }
+    border-radius: var(--space-factor);

    svg {
      position: relative;
@@ -54,6 +46,10 @@
      fill: var(--icon-fill-color);
      color: var(--icon-fill-color);
    }
+
+    & + .ToolIcon__label {
+      margin-inline-start: 0;
+    }
  }

  .ToolIcon__label {
@@ -83,7 +79,7 @@
    margin: 0;
    font-size: inherit;

-    &:focus-visible {
+    &:focus {
      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }

@@ -125,7 +121,7 @@
      }
    }

-    &:focus-visible + .ToolIcon__icon {
+    &:focus + .ToolIcon__icon {
      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }

@@ -145,6 +141,10 @@
      background-color: transparent;
    }

+    &:focus {
+      box-shadow: none;
+    }
+
    .ToolIcon__icon {
      background-color: var(--button-gray-1);
      &:hover {
@@ -159,6 +159,13 @@
    }
  }

+  .ToolIcon.ToolIcon__lock {
+    margin-inline-end: var(--space-factor);
+    &.ToolIcon_type_floating {
+      margin-left: 0.1rem;
+    }
+  }
+
  .ToolIcon__keybinding {
    position: absolute;
    bottom: 2px;
@@ -219,10 +226,6 @@
      margin-inline-end: 0;
      top: 60px;
    }
-    .ToolIcon.ToolIcon__penMode {
-      margin-inline-end: 0;
-      top: 140px;
-    }
  }

  .unlocked-icon {
@@ -1,124 +0,0 @@
-@import "open-color/open-color.scss";
-
-@mixin toolbarButtonColorStates {
-  .ToolIcon_type_radio,
-  .ToolIcon_type_checkbox {
-    & + .ToolIcon__icon:active {
-      background: var(--color-primary-light);
-    }
-    &:checked + .ToolIcon__icon {
-      background: var(--color-primary);
-      --icon-fill-color: #{$oc-white};
-      --keybinding-color: #{$oc-white};
-    }
-    &:checked + .ToolIcon__icon:active {
-      background: var(--color-primary-darker);
-    }
-  }
-
-  .ToolIcon__keybinding {
-    bottom: 4px;
-    right: 4px;
-  }
-}
-
-.excalidraw {
-  .App-toolbar-container {
-    .ToolIcon_type_floating {
-      @include toolbarButtonColorStates;
-
-      &:not(.is-mobile) {
-        .ToolIcon__icon {
-          padding: 1px;
-          background-color: var(--island-bg-color);
-          box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 15%);
-          border-radius: 50%;
-          transition: box-shadow 0.5s ease, transform 0.5s ease;
-        }
-      }
-
-      .ToolIcon_type_radio,
-      .ToolIcon_type_checkbox {
-        &:focus-within + .ToolIcon__icon {
-          // override for custom floating button shadow
-          box-shadow: 0 0 0 2px var(--focus-highlight-color);
-        }
-      }
-    }
-
-    .ToolIcon__hidden {
-      box-shadow: none !important;
-      background-color: transparent !important;
-      pointer-events: none !important;
-    }
-
-    .ToolIcon.ToolIcon__lock {
-      margin-inline-end: var(--space-factor);
-      &.ToolIcon_type_floating {
-        margin-left: 0.1rem;
-      }
-    }
-
-    .ToolIcon__library {
-      margin-inline-start: var(--space-factor);
-    }
-
-    &.zen-mode {
-      .ToolIcon_type_floating {
-        .ToolIcon__icon {
-          box-shadow: none;
-          transform: scale(0.9);
-        }
-        .ToolIcon_type_checkbox:not(:checked):not(:hover):not(:active) {
-          & + .ToolIcon__icon {
-            svg {
-              fill: $oc-gray-5;
-              color: $oc-gray-5;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .App-toolbar {
-    border-radius: var(--border-radius-lg);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 15%);
-
-    .ToolIcon {
-      &:hover {
-        --icon-fill-color: var(
-          --color-primary-contrast-offset,
-          var(--color-primary)
-        );
-        --keybinding-color: var(
-          --color-primary-contrast-offset,
-          var(--color-primary)
-        );
-      }
-      &:active {
-        --icon-fill-color: #{$oc-gray-9};
-        --keybinding-color: #{$oc-gray-9};
-      }
-
-      .ToolIcon__icon {
-        background: transparent;
-        border-radius: var(--border-radius-lg);
-      }
-
-      @include toolbarButtonColorStates;
-    }
-
-    &.zen-mode {
-      .ToolIcon__keybinding,
-      .HintViewer {
-        display: none;
-      }
-    }
-  }
-
-  &.theme--dark .App-toolbar .ToolIcon:active {
-    --icon-fill-color: #{$oc-gray-3};
-    --keybinding-color: #{$oc-gray-3};
-  }
-}
@@ -29,6 +29,7 @@
 // wraps the element we want to apply the tooltip to
 .excalidraw-tooltip-wrapper {
  display: flex;
+  height: 100%;
 }

 .excalidraw-tooltip-icon {
@@ -2,7 +2,7 @@ import "./Tooltip.scss";

 import React, { useEffect } from "react";

-export const getTooltipDiv = () => {
+const getTooltipDiv = () => {
  const existingDiv = document.querySelector<HTMLDivElement>(
    ".excalidraw-tooltip",
  );
@@ -15,50 +15,6 @@ export const getTooltipDiv = () => {
  return div;
 };

-export const updateTooltipPosition = (
-  tooltip: HTMLDivElement,
-  item: {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  },
-  position: "bottom" | "top" = "bottom",
-) => {
-  const tooltipRect = tooltip.getBoundingClientRect();
-
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-
-  const margin = 5;
-
-  let left = item.left + item.width / 2 - tooltipRect.width / 2;
-  if (left < 0) {
-    left = margin;
-  } else if (left + tooltipRect.width >= viewportWidth) {
-    left = viewportWidth - tooltipRect.width - margin;
-  }
-
-  let top: number;
-
-  if (position === "bottom") {
-    top = item.top + item.height + margin;
-    if (top + tooltipRect.height >= viewportHeight) {
-      top = item.top - tooltipRect.height - margin;
-    }
-  } else {
-    top = item.top - tooltipRect.height - margin;
-    if (top < 0) {
-      top = item.top + item.height + margin;
-    }
-  }
-
-  Object.assign(tooltip.style, {
-    top: `${top}px`,
-    left: `${left}px`,
-  });
-};
-
 const updateTooltip = (
  item: HTMLDivElement,
  tooltip: HTMLDivElement,
@@ -71,27 +27,49 @@ const updateTooltip = (

  tooltip.textContent = label;

-  const itemRect = item.getBoundingClientRect();
-  updateTooltipPosition(tooltip, itemRect);
+  const {
+    x: itemX,
+    bottom: itemBottom,
+    top: itemTop,
+    width: itemWidth,
+  } = item.getBoundingClientRect();
+
+  const { width: labelWidth, height: labelHeight } =
+    tooltip.getBoundingClientRect();
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  const margin = 5;
+
+  const left = itemX + itemWidth / 2 - labelWidth / 2;
+  const offsetLeft =
+    left + labelWidth >= viewportWidth ? left + labelWidth - viewportWidth : 0;
+
+  const top = itemBottom + margin;
+  const offsetTop =
+    top + labelHeight >= viewportHeight
+      ? itemBottom - itemTop + labelHeight + margin * 2
+      : 0;
+
+  Object.assign(tooltip.style, {
+    top: `${top - offsetTop}px`,
+    left: `${left - offsetLeft}px`,
+  });
 };

 type TooltipProps = {
  children: React.ReactNode;
  label: string;
  long?: boolean;
-  style?: React.CSSProperties;
 };

-export const Tooltip = ({
-  children,
-  label,
-  long = false,
-  style,
-}: TooltipProps) => {
+export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
  useEffect(() => {
    return () =>
      getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
  }, []);
+
  return (
    <div
      className="excalidraw-tooltip-wrapper"
@@ -106,7 +84,6 @@ export const Tooltip = ({
      onPointerLeave={() =>
        getTooltipDiv().classList.remove("excalidraw-tooltip--visible")
      }
-      style={style}
    >
      {children}
    </div>
@@ -7,10 +7,6 @@
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
-
-    &:empty {
-      display: none;
-    }
  }

  .UserList > * {
@@ -15,9 +15,8 @@ import { THEME } from "../constants";

 const activeElementColor = (theme: Theme) =>
  theme === THEME.LIGHT ? oc.orange[4] : oc.orange[9];
-
-const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
-
+const iconFillColor = (theme: Theme) =>
+  theme === THEME.LIGHT ? oc.black : oc.gray[4];
 const handlerColor = (theme: Theme) =>
  theme === THEME.LIGHT ? oc.white : "#1e1e1e";

@@ -885,40 +884,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"
@@ -926,11 +891,3 @@ export const publishIcon = createIcon(
  />,
  { width: 640, height: 512 },
 );
-
-export const editIcon = createIcon(
-  <path
-    fill="currentColor"
-    d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"
-  ></path>,
-  { width: 640, height: 512 },
-);
@@ -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 = {
@@ -63,8 +61,6 @@ export const ENV = {

 export const CLASSES = {
  SHAPE_ACTIONS_MENU: "App-menu__left",
-  SHAPE_ACTIONS_MOBILE_MENU: "App-mobile-menu",
-  MOBILE_TOOLBAR: "App-toolbar-content",
 };

 // 1-based in case we ever do `if(element.fontFamily)`
@@ -110,6 +106,10 @@ export const EXPORT_DATA_TYPES = {

 export const EXPORT_SOURCE = window.location.origin;

+export const STORAGE_KEYS = {
+  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
+} as const;
+
 // time in milliseconds
 export const IMAGE_RENDER_TIMEOUT = 500;
 export const TAP_TWICE_TIMEOUT = 300;
@@ -119,7 +119,6 @@ export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
-export const HYPERLINK_TOOLTIP_DELAY = 300;

 // Report a user inactive after IDLE_THRESHOLD milliseconds
 export const IDLE_THRESHOLD = 60_000;
@@ -163,7 +162,8 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px

-export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
+export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_JPG = 10000;
+export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_OTHER = 1440;

 export const ALLOWED_IMAGE_MIME_TYPES = [
  MIME_TYPES.png,
@@ -177,16 +177,3 @@ export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 export const SVG_NS = "http://www.w3.org/2000/svg";

 export const ENCRYPTION_KEY_BITS = 128;
-
-export const VERSIONS = {
-  excalidraw: 2,
-  excalidrawLibrary: 2,
-} as const;
-
-export const BOUND_TEXT_PADDING = 5;
-
-export const VERTICAL_ALIGN = {
-  TOP: "top",
-  MIDDLE: "middle",
-  BOTTOM: "bottom",
-};
@@ -180,7 +180,7 @@
  }

  .buttonList label:focus-within,
-  input:focus-visible {
+  input:focus {
    outline: transparent;
    box-shadow: 0 0 0 2px var(--focus-highlight-color);
  }
@@ -190,14 +190,14 @@
    user-select: none;
    background-color: var(--button-gray-1);
    border: 0;
-    border-radius: var(--border-radius-md);
+    border-radius: 4px;
    margin: 0.125rem 0;
    padding: 0.25rem;
    white-space: nowrap;

    cursor: pointer;

-    &:focus-visible {
+    &:focus {
      outline: transparent;
      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }
@@ -217,16 +217,14 @@

  .active,
  .buttonList label.active {
-    background-color: var(--color-primary);
-
-    --icon-fill-color: #{$oc-white};
+    background-color: var(--button-gray-2);

    &:hover {
-      background-color: var(--color-primary-darker);
+      background-color: var(--button-gray-2);
    }

    &:active {
-      background-color: var(--color-primary-darkest);
+      background-color: var(--button-gray-3);
    }
  }

@@ -236,7 +234,7 @@
      justify-content: center;
      align-items: center;
      svg {
-        width: 35px;
+        width: 36px;
        height: 14px;
        padding: 2px;
        opacity: 0.6;
@@ -313,7 +311,7 @@
  }

  .App-menu_top {
-    grid-template-columns: auto max-content auto;
+    grid-template-columns: 1fr auto 1fr;
    grid-gap: 4px;
    align-items: flex-start;
    cursor: default;
@@ -12,7 +12,7 @@
  --dialog-border-color: #{$oc-gray-6};
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #{$oc-blue-2};
-  --icon-fill-color: #{$oc-gray-9};
+  --icon-fill-color: #{$oc-black};
  --icon-green-fill-color: #{$oc-green-9};
  --default-bg-color: #{$oc-white};
  --input-bg-color: #{$oc-white};
@@ -32,19 +32,10 @@
  --sar: env(safe-area-inset-right);
  --sat: env(safe-area-inset-top);
  --select-highlight-color: #{$oc-blue-5};
-  --shadow-island: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 12%);
-
+  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
  --space-factor: 0.25rem;
  --text-primary-color: #{$oc-gray-8};

-  --color-primary: #6965db;
-  --color-primary-darker: #5b57d1;
-  --color-primary-darkest: #4a47b1;
-  --color-primary-light: #e2e1fc;
-
-  --border-radius-md: 0.375rem;
-  --border-radius-lg: 0.5rem;
-
  &.theme--dark {
    background: $oc-black;

@@ -80,12 +71,7 @@
    --popup-text-color: #{$oc-gray-4};
    --popup-text-inverted-color: #2c2c2c;
    --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 1px 1px 5px #{transparentize($oc-black, 0.7)};
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
    --text-primary-color: #{$oc-gray-4};
-
-    --color-primary: #5650f0;
-    --color-primary-darker: #4b46d8;
-    --color-primary-darkest: #3e39be;
-    --color-primary-light: #3f3d64;
  }
 }
@@ -271,6 +271,8 @@ export const resizeImageFile = async (
    };
  }

+  const fileType = file.type;
+
  if (!isSupportedImageFile(file)) {
    throw new Error(t("errors.unsupportedFileType"));
  }
@@ -279,7 +281,7 @@ export const resizeImageFile = async (
    [await reduce.toBlob(file, { max: opts.maxWidthOrHeight })],
    file.name,
    {
-      type: opts.outputType || file.type,
+      type: fileType,
    },
  );
 };
@@ -234,19 +234,7 @@ const splitBuffers = (concatenatedBuffer: Uint8Array) => {

  let cursor = 0;

-  // first chunk is the version
-  const version = dataView(
-    concatenatedBuffer,
-    NEXT_CHUNK_SIZE_DATAVIEW_BYTES,
-    cursor,
-  );
-  // If version is outside of the supported versions, throw an error.
-  // This usually means the buffer wasn't encoded using this API, so we'd only
-  // waste compute.
-  if (version > CONCAT_BUFFERS_VERSION) {
-    throw new Error(`invalid version ${version}`);
-  }
-
+  // first chunk is the version (ignored for now)
  cursor += VERSION_DATAVIEW_BYTES;

  while (true) {
@@ -1,8 +1,11 @@
-import decodePng from "png-chunks-extract";
+import extractPngChunks from "png-chunks-extract";
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
 import { stringToBase64, encode, decode, base64ToString } from "./encode";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import { PngChunk } from "../types";
+
+export { extractPngChunks };

 // -----------------------------------------------------------------------------
 // PNG
@@ -28,7 +31,9 @@ const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
 export const getTEXtChunk = async (
  blob: Blob,
 ): Promise<{ keyword: string; text: string } | null> => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+  const chunks = extractPngChunks(
+    new Uint8Array(await blobToArrayBuffer(blob)),
+  );
  const metadataChunk = chunks.find((chunk) => chunk.name === "tEXt");
  if (metadataChunk) {
    return tEXt.decode(metadataChunk.data);
@@ -36,6 +41,28 @@ export const getTEXtChunk = async (
  return null;
 };

+export const findPngChunk = (
+  chunks: PngChunk[],
+  name: PngChunk["name"],
+  /** this makes the search stop before IDAT chunk (before which most
+   * metadata chunks reside). This is a perf optim. */
+  breakBeforeIDAT = true,
+) => {
+  let i = 0;
+  const len = chunks.length;
+  while (i <= len) {
+    const chunk = chunks[i];
+    if (chunk.name === name) {
+      return chunk;
+    }
+    if (breakBeforeIDAT && chunk.name === "IDAT") {
+      return null;
+    }
+    i++;
+  }
+  return null;
+};
+
 export const encodePngMetadata = async ({
  blob,
  metadata,
@@ -43,7 +70,9 @@ export const encodePngMetadata = async ({
  blob: Blob;
  metadata: string;
 }) => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+  const chunks = extractPngChunks(
+    new Uint8Array(await blobToArrayBuffer(blob)),
+  );

  const metadataChunk = tEXt.encode(
    MIME_TYPES.excalidraw,
@@ -1,11 +1,6 @@
 import { fileOpen, fileSave } from "./filesystem";
 import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
-import {
-  EXPORT_DATA_TYPES,
-  EXPORT_SOURCE,
-  MIME_TYPES,
-  VERSIONS,
-} from "../constants";
+import { EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES } from "../constants";
 import { clearElementsForDatabase, clearElementsForExport } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems } from "../types";
@@ -47,7 +42,7 @@ export const serializeAsJSON = (
 ): string => {
  const data: ExportedDataState = {
    type: EXPORT_DATA_TYPES.excalidraw,
-    version: VERSIONS.excalidraw,
+    version: 2,
    source: EXPORT_SOURCE,
    elements:
      type === "local"
@@ -126,7 +121,7 @@ export const isValidLibrary = (json: any) => {
 export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
  const data: ExportedLibraryData = {
    type: EXPORT_DATA_TYPES.excalidrawLibrary,
-    version: VERSIONS.excalidrawLibrary,
+    version: 2,
    source: EXPORT_SOURCE,
    libraryItems,
  };
@@ -10,7 +10,11 @@ import {
  NormalizedZoomValue,
 } from "../types";
 import { ImportedDataState } from "./types";
-import { getNormalizedDimensions, isInvisiblySmallElement } from "../element";
+import {
+  getElementMap,
+  getNormalizedDimensions,
+  isInvisiblySmallElement,
+} from "../element";
 import { isLinearElementType } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
@@ -22,8 +26,6 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp } from "../utils";
-import { arrayToMap } from "../utils";

 type RestoredAppState = Omit<
  AppState,
@@ -64,10 +66,7 @@ const restoreElementWithProperties = <
  T extends ExcalidrawElement,
  K extends Pick<T, keyof Omit<Required<T>, keyof ExcalidrawElement>>,
 >(
-  element: Required<T> & {
-    /** @deprecated */
-    boundElementIds?: readonly ExcalidrawElement["id"][];
-  },
+  element: Required<T>,
  extra: Pick<
    T,
    // This extra Pick<T, keyof K> ensure no excess properties are passed.
@@ -101,11 +100,7 @@ const restoreElementWithProperties = <
    strokeSharpness:
      element.strokeSharpness ??
      (isLinearElementType(element.type) ? "round" : "sharp"),
-    boundElements: element.boundElementIds
-      ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
-      : element.boundElements ?? [],
-    updated: element.updated ?? getUpdatedTimestamp(),
-    link: element.link ?? null,
+    boundElementIds: element.boundElementIds ?? [],
  };

  return {
@@ -136,8 +131,6 @@ const restoreElement = (
        baseline: element.baseline,
        textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
        verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
-        containerId: element.containerId ?? null,
-        originalText: element.originalText || element.text,
      });
    case "freedraw": {
      return restoreElementWithProperties(element, {
@@ -211,14 +204,14 @@ export const restoreElements = (
  /** NOTE doesn't serve for reconciliation */
  localElements: readonly ExcalidrawElement[] | null | undefined,
 ): ExcalidrawElement[] => {
-  const localElementsMap = localElements ? arrayToMap(localElements) : null;
+  const localElementsMap = localElements ? getElementMap(localElements) : null;
  return (elements || []).reduce((elements, element) => {
    // filtering out selection, which is legacy, no longer kept in elements,
    // and causing issues if retained
    if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
      let migratedElement: ExcalidrawElement | null = restoreElement(element);
      if (migratedElement) {
-        const localElement = localElementsMap?.get(element.id);
+        const localElement = localElementsMap?.[element.id];
        if (localElement && localElement.version > migratedElement.version) {
          migratedElement = bumpVersion(migratedElement, localElement.version);
        }
@@ -262,6 +255,7 @@ export const restoreAppState = (
      typeof appState.zoom === "number"
        ? {
            value: appState.zoom as NormalizedZoomValue,
+            translation: defaultAppState.zoom.translation,
          }
        : appState.zoom || defaultAppState.zoom,
  };
@@ -1,7 +1,6 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
 import type { cleanAppStateForExport } from "../appState";
-import { VERSIONS } from "../constants";

 export interface ExportedDataState {
  type: string;
@@ -25,7 +24,7 @@ export interface ImportedDataState {

 export interface ExportedLibraryData {
  type: string;
-  version: typeof VERSIONS.excalidrawLibrary;
+  version: 2;
  source: string;
  libraryItems: LibraryItems;
 }
@@ -1,7 +1,17 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { getMaximumGroups } from "./groups";
-import { getCommonBoundingBox } from "./element/bounds";
+import { getCommonBounds } from "./element";
+
+interface Box {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  midX: number;
+  midY: number;
+  width: number;
+  height: number;
+}

 export interface Distribution {
  space: "between";
@@ -88,3 +98,39 @@ export const distributeElements = (
    );
  });
 };
+
+export const getMaximumGroups = (
+  elements: ExcalidrawElement[],
+): ExcalidrawElement[][] => {
+  const groups: Map<String, ExcalidrawElement[]> = new Map<
+    String,
+    ExcalidrawElement[]
+  >();
+
+  elements.forEach((element: ExcalidrawElement) => {
+    const groupId =
+      element.groupIds.length === 0
+        ? element.id
+        : element.groupIds[element.groupIds.length - 1];
+
+    const currentGroupMembers = groups.get(groupId) || [];
+
+    groups.set(groupId, [...currentGroupMembers, element]);
+  });
+
+  return Array.from(groups.values());
+};
+
+const getCommonBoundingBox = (elements: ExcalidrawElement[]): Box => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+    midX: (minX + maxX) / 2,
+    midY: (minY + maxY) / 2,
+  };
+};
@@ -1,74 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw-hyperlinkContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: absolute;
-  box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
-  z-index: 100;
-  background: var(--island-bg-color);
-  border-radius: var(--border-radius-md);
-  box-sizing: border-box;
-  // to account for LS due to rendering icons after new link created
-  min-height: 42px;
-
-  &-input,
-  button {
-    z-index: 100;
-  }
-
-  &-input,
-  &-link {
-    height: 24px;
-    padding: 0 8px;
-    line-height: 24px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    font-family: var(--ui-font);
-  }
-
-  &-input {
-    width: 18rem;
-    border: none;
-    background-color: transparent;
-    color: var(--text-primary-color);
-
-    outline: none;
-    border: none;
-    box-shadow: none !important;
-  }
-
-  &-link {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 15rem;
-  }
-
-  button {
-    color: $oc-blue-6;
-    background-color: transparent !important;
-    font-weight: 500;
-    &.excalidraw-hyperlinkContainer--remove {
-      color: $oc-red-9;
-    }
-  }
-
-  .d-none {
-    display: none;
-  }
-
-  &--remove .ToolIcon__icon svg {
-    color: $oc-red-6;
-  }
-
-  .ToolIcon__icon {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  &__buttons {
-    flex: 0 0 auto;
-  }
-}
@@ -1,465 +0,0 @@
-import { AppState, ExcalidrawProps, Point } from "../types";
-import {
-  getShortcutKey,
-  sceneCoordsToViewportCoords,
-  viewportCoordsToSceneCoords,
-  wrapEvent,
-} from "../utils";
-import { mutateElement } from "./mutateElement";
-import { NonDeletedExcalidrawElement } from "./types";
-
-import { register } from "../actions/register";
-import { ToolButton } from "../components/ToolButton";
-import { editIcon, link, trash } from "../components/icons";
-import { t } from "../i18n";
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import clsx from "clsx";
-import { KEYS } from "../keys";
-import { DEFAULT_LINK_SIZE } from "../renderer/renderElement";
-import { rotate } from "../math";
-import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
-import { Bounds } from "./bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
-import { getSelectedElements } from "../scene";
-import { isPointHittingElementBoundingBox } from "./collision";
-import { getElementAbsoluteCoords } from "./";
-
-import "./Hyperlink.scss";
-import { trackEvent } from "../analytics";
-
-const CONTAINER_WIDTH = 320;
-const SPACE_BOTTOM = 85;
-const CONTAINER_PADDING = 5;
-const CONTAINER_HEIGHT = 42;
-const AUTO_HIDE_TIMEOUT = 500;
-
-export const EXTERNAL_LINK_IMG = document.createElement("img");
-EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
-  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`,
-)}`;
-
-let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
-
-export const Hyperlink = ({
-  element,
-  appState,
-  setAppState,
-  onLinkOpen,
-}: {
-  element: NonDeletedExcalidrawElement;
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-  onLinkOpen: ExcalidrawProps["onLinkOpen"];
-}) => {
-  const linkVal = element.link || "";
-
-  const [inputVal, setInputVal] = useState(linkVal);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isEditing = appState.showHyperlinkPopup === "editor" || !linkVal;
-
-  const handleSubmit = useCallback(() => {
-    if (!inputRef.current) {
-      return;
-    }
-
-    const link = normalizeLink(inputRef.current.value);
-
-    if (!element.link && link) {
-      trackEvent("hyperlink", "create");
-    }
-
-    mutateElement(element, { link });
-    setAppState({ showHyperlinkPopup: "info" });
-  }, [element, setAppState]);
-
-  useLayoutEffect(() => {
-    return () => {
-      handleSubmit();
-    };
-  }, [handleSubmit]);
-
-  useEffect(() => {
-    let timeoutId: number | null = null;
-    const handlePointerMove = (event: PointerEvent) => {
-      if (isEditing) {
-        return;
-      }
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      const shouldHide = shouldHideLinkPopup(element, appState, [
-        event.clientX,
-        event.clientY,
-      ]) as boolean;
-      if (shouldHide) {
-        timeoutId = window.setTimeout(() => {
-          setAppState({ showHyperlinkPopup: false });
-        }, AUTO_HIDE_TIMEOUT);
-      }
-    };
-    window.addEventListener(EVENT.POINTER_MOVE, handlePointerMove, false);
-    return () => {
-      window.removeEventListener(EVENT.POINTER_MOVE, handlePointerMove, false);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [appState, element, isEditing, setAppState]);
-
-  const handleRemove = useCallback(() => {
-    trackEvent("hyperlink", "delete");
-    mutateElement(element, { link: null });
-    if (isEditing) {
-      inputRef.current!.value = "";
-    }
-    setAppState({ showHyperlinkPopup: false });
-  }, [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
-  ) {
-    return null;
-  }
-  return (
-    <div
-      className="excalidraw-hyperlinkContainer"
-      style={{
-        top: `${y}px`,
-        left: `${x}px`,
-        width: CONTAINER_WIDTH,
-        padding: CONTAINER_PADDING,
-      }}
-    >
-      {isEditing ? (
-        <input
-          className={clsx("excalidraw-hyperlinkContainer-input")}
-          placeholder="Type or paste your link here"
-          ref={inputRef}
-          value={inputVal}
-          onChange={(event) => setInputVal(event.target.value)}
-          autoFocus
-          onKeyDown={(event) => {
-            event.stopPropagation();
-            // prevent cmd/ctrl+k shortcut when editing link
-            if (event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K) {
-              event.preventDefault();
-            }
-            if (event.key === KEYS.ENTER || event.key === KEYS.ESCAPE) {
-              handleSubmit();
-            }
-          }}
-        />
-      ) : (
-        <a
-          href={element.link || ""}
-          className={clsx("excalidraw-hyperlinkContainer-link", {
-            "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}
-        </a>
-      )}
-      <div className="excalidraw-hyperlinkContainer__buttons">
-        {!isEditing && (
-          <ToolButton
-            type="button"
-            title={t("buttons.edit")}
-            aria-label={t("buttons.edit")}
-            label={t("buttons.edit")}
-            onClick={onEdit}
-            className="excalidraw-hyperlinkContainer--edit"
-            icon={editIcon}
-          />
-        )}
-
-        {linkVal && (
-          <ToolButton
-            type="button"
-            title={t("buttons.remove")}
-            aria-label={t("buttons.remove")}
-            label={t("buttons.remove")}
-            onClick={handleRemove}
-            className="excalidraw-hyperlinkContainer--remove"
-            icon={trash}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-const getCoordsForPopover = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-) => {
-  const [x1, y1] = getElementAbsoluteCoords(element);
-  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
-    { sceneX: x1 + element.width / 2, sceneY: y1 },
-    appState,
-  );
-  const x = viewportX - appState.offsetLeft - CONTAINER_WIDTH / 2;
-  const y = viewportY - appState.offsetTop - SPACE_BOTTOM;
-  return { x, y };
-};
-
-export const normalizeLink = (link: string) => {
-  link = link.trim();
-  if (link) {
-    // prefix with protocol if not fully-qualified
-    if (!link.includes("://") && !/^[[\\/]/.test(link)) {
-      link = `https://${link}`;
-    }
-  }
-  return link;
-};
-
-export const isLocalLink = (link: string | null) => {
-  return !!(link?.includes(location.origin) || link?.startsWith("/"));
-};
-
-export const actionLink = register({
-  name: "hyperlink",
-  perform: (elements, appState) => {
-    if (appState.showHyperlinkPopup === "editor") {
-      return false;
-    }
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        showHyperlinkPopup: "editor",
-        openMenu: null,
-      },
-      commitToHistory: true,
-    };
-  },
-  trackEvent: (action, source) => {
-    trackEvent("hyperlink", "edit", source);
-  },
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
-  contextItemLabel: (elements, appState) =>
-    getContextMenuLabel(elements, appState),
-  contextItemPredicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return selectedElements.length === 1;
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      <ToolButton
-        type="button"
-        icon={link}
-        aria-label={t(getContextMenuLabel(elements, appState))}
-        title={`${t("labels.link.label")} - ${getShortcutKey("CtrlOrCmd+K")}`}
-        onClick={() => updateData(null)}
-        selected={selectedElements.length === 1 && !!selectedElements[0].link}
-      />
-    );
-  },
-});
-
-export const getContextMenuLabel = (
-  elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
-) => {
-  const selectedElements = getSelectedElements(elements, appState);
-  const label = selectedElements[0]!.link
-    ? "labels.link.edit"
-    : "labels.link.create";
-  return label;
-};
-export const getLinkHandleFromCoords = (
-  [x1, y1, x2, y2]: Bounds,
-  angle: number,
-  appState: AppState,
-): [x: number, y: number, width: number, height: number] => {
-  const size = DEFAULT_LINK_SIZE;
-  const linkWidth = size / appState.zoom.value;
-  const linkHeight = size / appState.zoom.value;
-  const linkMarginY = size / appState.zoom.value;
-  const centerX = (x1 + x2) / 2;
-  const centerY = (y1 + y2) / 2;
-  const centeringOffset = (size - 8) / (2 * appState.zoom.value);
-  const dashedLineMargin = 4 / appState.zoom.value;
-
-  // Same as `ne` resize handle
-  const x = x2 + dashedLineMargin - centeringOffset;
-  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
-
-  const [rotatedX, rotatedY] = rotate(
-    x + linkWidth / 2,
-    y + linkHeight / 2,
-    centerX,
-    centerY,
-    angle,
-  );
-  return [
-    rotatedX - linkWidth / 2,
-    rotatedY - linkHeight / 2,
-    linkWidth,
-    linkHeight,
-  ];
-};
-
-export const isPointHittingLinkIcon = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-  [x, y]: Point,
-  isMobile: boolean,
-) => {
-  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(
-    [x1, y1, x2, y2],
-    element.angle,
-    appState,
-  );
-  const hitLink =
-    x > linkX - threshold &&
-    x < linkX + threshold + linkWidth &&
-    y > linkY - threshold &&
-    y < linkY + linkHeight + threshold;
-  return hitLink;
-};
-
-let HYPERLINK_TOOLTIP_TIMEOUT_ID: number | null = null;
-export const showHyperlinkTooltip = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-) => {
-  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
-    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
-  }
-  HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(
-    () => renderTooltip(element, appState),
-    HYPERLINK_TOOLTIP_DELAY,
-  );
-};
-
-const renderTooltip = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-) => {
-  if (!element.link) {
-    return;
-  }
-
-  const tooltipDiv = getTooltipDiv();
-
-  tooltipDiv.classList.add("excalidraw-tooltip--visible");
-  tooltipDiv.style.maxWidth = "20rem";
-  tooltipDiv.textContent = element.link;
-
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-
-  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
-    [x1, y1, x2, y2],
-    element.angle,
-    appState,
-  );
-
-  const linkViewportCoords = sceneCoordsToViewportCoords(
-    { sceneX: linkX, sceneY: linkY },
-    appState,
-  );
-
-  updateTooltipPosition(
-    tooltipDiv,
-    {
-      left: linkViewportCoords.x,
-      top: linkViewportCoords.y,
-      width: linkWidth,
-      height: linkHeight,
-    },
-    "top",
-  );
-  trackEvent("hyperlink", "tooltip", "link-icon");
-
-  IS_HYPERLINK_TOOLTIP_VISIBLE = true;
-};
-export const hideHyperlinkToolip = () => {
-  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
-    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
-  }
-  if (IS_HYPERLINK_TOOLTIP_VISIBLE) {
-    IS_HYPERLINK_TOOLTIP_VISIBLE = false;
-    getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
-  }
-};
-
-export const shouldHideLinkPopup = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-  [clientX, clientY]: Point,
-): Boolean => {
-  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
-    { clientX, clientY },
-    appState,
-  );
-
-  const threshold = 15 / appState.zoom.value;
-  // hitbox to prevent hiding when hovered in element bounding box
-  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
-  ) {
-    return false;
-  }
-  // hit box to prevent hiding when hovered around popover within threshold
-  const { x: popoverX, y: popoverY } = getCoordsForPopover(element, appState);
-
-  if (
-    clientX >= popoverX - threshold &&
-    clientX <= popoverX + CONTAINER_WIDTH + CONTAINER_PADDING * 2 + threshold &&
-    clientY >= popoverY - threshold &&
-    clientY <= popoverY + threshold + CONTAINER_PADDING * 2 + CONTAINER_HEIGHT
-  ) {
-    return false;
-  }
-  return true;
-};
@@ -8,11 +8,7 @@ import {
 } from "./types";
 import { getElementAtPosition } from "../scene";
 import { AppState } from "../types";
-import {
-  isBindableElement,
-  isBindingElement,
-  isLinearElement,
-} from "./typeChecks";
+import { isBindableElement, isBindingElement } from "./typeChecks";
 import {
  bindingBorderTest,
  distanceToBindableElement,
@@ -24,7 +20,7 @@ import {
 import { mutateElement } from "./mutateElement";
 import Scene from "../scene/Scene";
 import { LinearElementEditor } from "./linearElementEditor";
-import { arrayToMap, tupleToCoors } from "../utils";
+import { tupleToCoors } from "../utils";
 import { KEYS } from "../keys";

 export type SuggestedBinding =
@@ -78,9 +74,8 @@ export const bindOrUnbindLinearElement = (
    .getNonDeletedElements(onlyUnbound)
    .forEach((element) => {
      mutateElement(element, {
-        boundElements: element.boundElements?.filter(
-          (element) =>
-            element.type !== "arrow" || element.id !== linearElement.id,
+        boundElementIds: element.boundElementIds?.filter(
+          (id) => id !== linearElement.id,
        ),
      });
    });
@@ -185,16 +180,11 @@ const bindLinearElement = (
      ...calculateFocusAndGap(linearElement, hoveredElement, startOrEnd),
    } as PointBinding,
  });
-
-  const boundElementsMap = arrayToMap(hoveredElement.boundElements || []);
-  if (!boundElementsMap.has(linearElement.id)) {
-    mutateElement(hoveredElement, {
-      boundElements: (hoveredElement.boundElements || []).concat({
-        id: linearElement.id,
-        type: "arrow",
-      }),
-    });
-  }
+  mutateElement(hoveredElement, {
+    boundElementIds: Array.from(
+      new Set([...(hoveredElement.boundElementIds ?? []), linearElement.id]),
+    ),
+  });
 };

 // Don't bind both ends of a simple segment
@@ -294,56 +284,52 @@ export const updateBoundElements = (
    newSize?: { width: number; height: number };
  },
 ) => {
-  const boundLinearElements = (changedElement.boundElements ?? []).filter(
-    (el) => el.type === "arrow",
-  );
-  if (boundLinearElements.length === 0) {
+  const boundElementIds = changedElement.boundElementIds ?? [];
+  if (boundElementIds.length === 0) {
    return;
  }
  const { newSize, simultaneouslyUpdated } = options ?? {};
  const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
    simultaneouslyUpdated,
  );
-  Scene.getScene(changedElement)!
-    .getNonDeletedElements(boundLinearElements.map((el) => el.id))
-    .forEach((element) => {
-      if (!isLinearElement(element)) {
-        return;
-      }
-
-      const bindableElement = changedElement as ExcalidrawBindableElement;
-      // In case the boundElements are stale
-      if (!doesNeedUpdate(element, bindableElement)) {
-        return;
-      }
-      const startBinding = maybeCalculateNewGapWhenScaling(
-        bindableElement,
-        element.startBinding,
-        newSize,
-      );
-      const endBinding = maybeCalculateNewGapWhenScaling(
-        bindableElement,
-        element.endBinding,
-        newSize,
-      );
-      // `linearElement` is being moved/scaled already, just update the binding
-      if (simultaneouslyUpdatedElementIds.has(element.id)) {
-        mutateElement(element, { startBinding, endBinding });
-        return;
-      }
-      updateBoundPoint(
-        element,
-        "start",
-        startBinding,
-        changedElement as ExcalidrawBindableElement,
-      );
-      updateBoundPoint(
-        element,
-        "end",
-        endBinding,
-        changedElement as ExcalidrawBindableElement,
-      );
-    });
+  (
+    Scene.getScene(changedElement)!.getNonDeletedElements(
+      boundElementIds,
+    ) as NonDeleted<ExcalidrawLinearElement>[]
+  ).forEach((linearElement) => {
+    const bindableElement = changedElement as ExcalidrawBindableElement;
+    // In case the boundElementIds are stale
+    if (!doesNeedUpdate(linearElement, bindableElement)) {
+      return;
+    }
+    const startBinding = maybeCalculateNewGapWhenScaling(
+      bindableElement,
+      linearElement.startBinding,
+      newSize,
+    );
+    const endBinding = maybeCalculateNewGapWhenScaling(
+      bindableElement,
+      linearElement.endBinding,
+      newSize,
+    );
+    // `linearElement` is being moved/scaled already, just update the binding
+    if (simultaneouslyUpdatedElementIds.has(linearElement.id)) {
+      mutateElement(linearElement, { startBinding, endBinding });
+      return;
+    }
+    updateBoundPoint(
+      linearElement,
+      "start",
+      startBinding,
+      changedElement as ExcalidrawBindableElement,
+    );
+    updateBoundPoint(
+      linearElement,
+      "end",
+      endBinding,
+      changedElement as ExcalidrawBindableElement,
+    );
+  });
 };

 const doesNeedUpdate = (
@@ -415,17 +401,10 @@ const updateBoundPoint = (
      newEdgePoint = intersections[0];
    }
  }
-  LinearElementEditor.movePoints(
+  LinearElementEditor.movePoint(
    linearElement,
-    [
-      {
-        index: edgePointIndex,
-        point: LinearElementEditor.pointFromAbsoluteCoords(
-          linearElement,
-          newEdgePoint,
-        ),
-      },
-    ],
+    edgePointIndex,
+    LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint),
    { [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding },
  );
 };
@@ -573,11 +552,11 @@ export const fixBindingsAfterDuplication = (
  const allBindableElementIds: Set<ExcalidrawElement["id"]> = new Set();
  const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
  oldElements.forEach((oldElement) => {
-    const { boundElements } = oldElement;
-    if (boundElements != null && boundElements.length > 0) {
-      boundElements.forEach((boundElement) => {
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {
-          allBoundElementIds.add(boundElement.id);
+    const { boundElementIds } = oldElement;
+    if (boundElementIds != null && boundElementIds.length > 0) {
+      boundElementIds.forEach((boundElementId) => {
+        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElementId)) {
+          allBoundElementIds.add(boundElementId);
        }
      });
      allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id)!);
@@ -621,16 +600,12 @@ export const fixBindingsAfterDuplication = (
  sceneElements
    .filter(({ id }) => allBindableElementIds.has(id))
    .forEach((bindableElement) => {
-      const { boundElements } = bindableElement;
-      if (boundElements != null && boundElements.length > 0) {
+      const { boundElementIds } = bindableElement;
+      if (boundElementIds != null && boundElementIds.length > 0) {
        mutateElement(bindableElement, {
-          boundElements: boundElements.map((boundElement) =>
-            oldIdToDuplicatedId.has(boundElement.id)
-              ? {
-                  id: oldIdToDuplicatedId.get(boundElement.id)!,
-                  type: boundElement.type,
-                }
-              : boundElement,
+          boundElementIds: boundElementIds.map(
+            (boundElementId) =>
+              oldIdToDuplicatedId.get(boundElementId) ?? boundElementId,
          ),
        });
      }
@@ -663,9 +638,9 @@ export const fixBindingsAfterDeletion = (
  const boundElementIds: Set<ExcalidrawElement["id"]> = new Set();
  deletedElements.forEach((deletedElement) => {
    if (isBindableElement(deletedElement)) {
-      deletedElement.boundElements?.forEach((element) => {
-        if (!deletedElementIds.has(element.id)) {
-          boundElementIds.add(element.id);
+      deletedElement.boundElementIds?.forEach((id) => {
+        if (!deletedElementIds.has(id)) {
+          boundElementIds.add(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]);
@@ -520,24 +520,11 @@ export interface Box {
  minY: number;
  maxX: number;
  maxY: number;
-  midX: number;
-  midY: number;
-  width: number;
-  height: number;
 }

 export const getCommonBoundingBox = (
  elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[],
 ): Box => {
  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  return {
-    minX,
-    minY,
-    maxX,
-    maxY,
-    width: maxX - minX,
-    height: maxY - minY,
-    midX: (minX + maxX) / 2,
-    midY: (minY + maxY) / 2,
-  };
+  return { minX, minY, maxX, maxY };
 };
@@ -24,7 +24,6 @@ import {
  NonDeleted,
  ExcalidrawFreeDrawElement,
  ExcalidrawImageElement,
-  ExcalidrawLinearElement,
 } from "./types";

 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@@ -32,9 +31,7 @@ import { Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
-import { hasBoundTextElement, isImageElement } from "./typeChecks";
-import { isTextElement } from ".";
-import { isTransparent } from "../utils";
+import { isImageElement } from "./typeChecks";

 const isElementDraggableFromInside = (
  element: NonDeletedExcalidrawElement,
@@ -46,8 +43,9 @@ const isElementDraggableFromInside = (
  if (element.type === "freedraw") {
    return true;
  }
-  const isDraggableFromInside =
-    !isTransparent(element.backgroundColor) || hasBoundTextElement(element);
+
+  const isDraggableFromInside = element.backgroundColor !== "transparent";
+
  if (element.type === "line") {
    return isDraggableFromInside && isPathALoop(element.points);
  }
@@ -85,18 +83,20 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
  );
 };

-export const isHittingElementNotConsideringBoundingBox = (
+const isHittingElementNotConsideringBoundingBox = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
  point: Point,
 ): boolean => {
  const threshold = 10 / appState.zoom.value;

-  const check = isTextElement(element)
-    ? isStrictlyInside
-    : isElementDraggableFromInside(element)
-    ? isInsideCheck
-    : isNearCheck;
+  const check =
+    element.type === "text"
+      ? isStrictlyInside
+      : isElementDraggableFromInside(element)
+      ? isInsideCheck
+      : isNearCheck;
+
  return hitTestPointAgainstElement({ element, point, threshold, check });
 };

@@ -105,7 +105,7 @@ const isElementSelected = (
  element: NonDeleted<ExcalidrawElement>,
 ) => appState.selectedElementIds[element.id];

-export const isPointHittingElementBoundingBox = (
+const isPointHittingElementBoundingBox = (
  element: NonDeleted<ExcalidrawElement>,
  [x, y]: Point,
  threshold: number,
@@ -362,14 +362,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 +384,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 +634,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 +822,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 +836,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 +897,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;
@@ -3,85 +3,47 @@ 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 { isSelectedViaGroup } from "../groups";
+import { PointerDownState } from "../types";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
  selectedElements: NonDeletedExcalidrawElement[],
  pointerX: number,
  pointerY: number,
+  scene: Scene,
  lockDirection: boolean = false,
  distanceX: number = 0,
  distanceY: number = 0,
-  appState: AppState,
 ) => {
  const [x1, y1] = getCommonBounds(selectedElements);
  const offset = { x: pointerX - x1, y: pointerY - y1 };
  selectedElements.forEach((element) => {
-    updateElementCoords(
-      lockDirection,
-      distanceX,
-      distanceY,
-      pointerDownState,
-      element,
-      offset,
-    );
-    // update coords of bound text only if we're dragging the container directly
-    // (we don't drag the group that it's part of)
-    if (
-      // container isn't part of any group
-      // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-      !element.groupIds.length ||
-      // container is part of a group, but we're dragging the container directly
-      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
-    ) {
-      const textElement = getBoundTextElement(element);
-      if (textElement) {
-        updateElementCoords(
-          lockDirection,
-          distanceX,
-          distanceY,
-          pointerDownState,
-          textElement,
-          offset,
-        );
-      }
+    let x: number;
+    let y: number;
+    if (lockDirection) {
+      const lockX = lockDirection && distanceX < distanceY;
+      const lockY = lockDirection && distanceX > distanceY;
+      const original = pointerDownState.originalElements.get(element.id);
+      x = lockX && original ? original.x : element.x + offset.x;
+      y = lockY && original ? original.y : element.y + offset.y;
+    } else {
+      x = element.x + offset.x;
+      y = element.y + offset.y;
    }
+
+    mutateElement(element, {
+      x,
+      y,
+    });
+
    updateBoundElements(element, {
      simultaneouslyUpdated: selectedElements,
    });
  });
 };

-const updateElementCoords = (
-  lockDirection: boolean,
-  distanceX: number,
-  distanceY: number,
-  pointerDownState: PointerDownState,
-  element: NonDeletedExcalidrawElement,
-  offset: { x: number; y: number },
-) => {
-  let x: number;
-  let y: number;
-  if (lockDirection) {
-    const lockX = lockDirection && distanceX < distanceY;
-    const lockY = lockDirection && distanceX > distanceY;
-    const original = pointerDownState.originalElements.get(element.id);
-    x = lockX && original ? original.x : element.x + offset.x;
-    y = lockY && original ? original.y : element.y + offset.y;
-  } else {
-    x = element.x + offset.x;
-    y = element.y + offset.y;
-  }
-
-  mutateElement(element, {
-    x,
-    y,
-  });
-};
 export const getDragOffsetXY = (
  selectedElements: NonDeletedExcalidrawElement[],
  x: number,
@@ -3,6 +3,7 @@
 // -----------------------------------------------------------------------------

 import { MIME_TYPES, SVG_NS } from "../constants";
+import { getDataURL } from "../data/blob";
 import { t } from "../i18n";
 import { AppClassProperties, DataURL, BinaryFiles } from "../types";
 import { isInitializedImageElement } from "./typeChecks";
@@ -109,3 +110,81 @@ export const normalizeSVG = async (SVGString: string) => {
    return svg.outerHTML;
  }
 };
+
+/**
+ * To improve perf, uses `createImageBitmap` is available. But there are
+ * quality issues across browsers, so don't use this API where quality matters.
+ */
+export const speedyImageToCanvas = async (imageFile: Blob | File) => {
+  let imageSrc: HTMLImageElement | ImageBitmap;
+  if (
+    typeof ImageBitmap !== "undefined" &&
+    ImageBitmap.prototype &&
+    ImageBitmap.prototype.close &&
+    window.createImageBitmap
+  ) {
+    imageSrc = await window.createImageBitmap(imageFile);
+  } else {
+    imageSrc = await loadHTMLImageElement(await getDataURL(imageFile));
+  }
+  const { width, height } = imageSrc;
+
+  const canvas = document.createElement("canvas");
+  canvas.height = height;
+  canvas.width = width;
+  const context = canvas.getContext("2d")!;
+  context.drawImage(imageSrc, 0, 0, width, height);
+
+  if (typeof ImageBitmap !== "undefined" && imageSrc instanceof ImageBitmap) {
+    imageSrc.close();
+  }
+
+  return { canvas, context, width, height };
+};
+
+/**
+ * Does its best at figuring out if an image (PNG) has any (semi)transparent
+ * pixels. If not PNG, always returns false.
+ */
+export const hasTransparentPixels = async (imageFile: Blob | File) => {
+  if (imageFile.type !== MIME_TYPES.png) {
+    return false;
+  }
+
+  const { findPngChunk, extractPngChunks } = await import("../data/image");
+
+  const buffer = await imageFile.arrayBuffer();
+  const chunks = extractPngChunks(new Uint8Array(buffer));
+
+  // early exit if tRNS not found and IHDR states no support for alpha
+  // -----------------------------------------------------------------------
+
+  const IHDR = findPngChunk(chunks, "IHDR");
+
+  if (
+    IHDR &&
+    IHDR.data[9] !== 4 &&
+    IHDR.data[9] !== 6 &&
+    !findPngChunk(chunks, "tRNS")
+  ) {
+    return false;
+  }
+
+  // otherwise loop through pixels to check if there's any actually
+  // (semi)transparent pixel
+  // -----------------------------------------------------------------------
+
+  const { width, height, context } = await speedyImageToCanvas(imageFile);
+  {
+    const { data } = context.getImageData(0, 0, width, height);
+    const len = data.byteLength;
+    let i = 3;
+    while (i <= len) {
+      if (data[i] !== 255) {
+        return true;
+      }
+      i += 4;
+    }
+  }
+  return false;
+};
@@ -59,6 +59,15 @@ export {
 } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";

+export const getElementMap = (elements: readonly ExcalidrawElement[]) =>
+  elements.reduce(
+    (acc: { [key: string]: ExcalidrawElement }, element: ExcalidrawElement) => {
+      acc[element.id] = element;
+      return acc;
+    },
+    {},
+  );
+
 export const getSceneVersion = (elements: readonly ExcalidrawElement[]) =>
  elements.reduce((acc, el) => acc + el.version, 0);

@@ -25,19 +25,11 @@ export class LinearElementEditor {
  public elementId: ExcalidrawElement["id"] & {
    _brand: "excalidrawLinearElementId";
  };
-  /** indices */
-  public selectedPointsIndices: readonly number[] | null;
-
-  public pointerDownState: Readonly<{
-    prevSelectedPointsIndices: readonly number[] | null;
-    /** index */
-    lastClickedPoint: number;
-  }>;
-
+  public activePointIndex: number | null;
  /** whether you're dragging a point */
  public isDragging: boolean;
  public lastUncommittedPoint: Point | null;
-  public pointerOffset: Readonly<{ x: number; y: number }>;
+  public pointerOffset: { x: number; y: number };
  public startBindingElement: ExcalidrawBindableElement | null | "keep";
  public endBindingElement: ExcalidrawBindableElement | null | "keep";

@@ -48,16 +40,12 @@ export class LinearElementEditor {
    Scene.mapElementToScene(this.elementId, scene);
    LinearElementEditor.normalizePoints(element);

-    this.selectedPointsIndices = null;
+    this.activePointIndex = null;
    this.lastUncommittedPoint = null;
    this.isDragging = false;
    this.pointerOffset = { x: 0, y: 0 };
    this.startBindingElement = "keep";
    this.endBindingElement = "keep";
-    this.pointerDownState = {
-      prevSelectedPointsIndices: null,
-      lastClickedPoint: -1,
-    };
  }

  // ---------------------------------------------------------------------------
@@ -78,58 +66,6 @@ export class LinearElementEditor {
    return null;
  }

-  static handleBoxSelection(
-    event: PointerEvent,
-    appState: AppState,
-    setState: React.Component<any, AppState>["setState"],
-  ) {
-    if (
-      !appState.editingLinearElement ||
-      appState.draggingElement?.type !== "selection"
-    ) {
-      return false;
-    }
-    const { editingLinearElement } = appState;
-    const { selectedPointsIndices, elementId } = editingLinearElement;
-
-    const element = LinearElementEditor.getElement(elementId);
-    if (!element) {
-      return false;
-    }
-
-    const [selectionX1, selectionY1, selectionX2, selectionY2] =
-      getElementAbsoluteCoords(appState.draggingElement);
-
-    const pointsSceneCoords =
-      LinearElementEditor.getPointsGlobalCoordinates(element);
-
-    const nextSelectedPoints = pointsSceneCoords.reduce(
-      (acc: number[], point, index) => {
-        if (
-          (point[0] >= selectionX1 &&
-            point[0] <= selectionX2 &&
-            point[1] >= selectionY1 &&
-            point[1] <= selectionY2) ||
-          (event.shiftKey && selectedPointsIndices?.includes(index))
-        ) {
-          acc.push(index);
-        }
-
-        return acc;
-      },
-      [],
-    );
-
-    setState({
-      editingLinearElement: {
-        ...editingLinearElement,
-        selectedPointsIndices: nextSelectedPoints.length
-          ? nextSelectedPoints
-          : null,
-      },
-    });
-  }
-
  /** @returns whether point was dragged */
  static handlePointDragging(
    appState: AppState,
@@ -138,27 +74,21 @@ export class LinearElementEditor {
    scenePointerY: number,
    maybeSuggestBinding: (
      element: NonDeleted<ExcalidrawLinearElement>,
-      pointSceneCoords: { x: number; y: number }[],
+      startOrEnd: "start" | "end",
    ) => void,
  ): boolean {
    if (!appState.editingLinearElement) {
      return false;
    }
    const { editingLinearElement } = appState;
-    const { selectedPointsIndices, elementId, isDragging } =
-      editingLinearElement;
+    const { activePointIndex, elementId, isDragging } = editingLinearElement;

    const element = LinearElementEditor.getElement(elementId);
    if (!element) {
      return false;
    }

-    // point that's being dragged (out of all selected points)
-    const draggingPoint = element.points[
-      editingLinearElement.pointerDownState.lastClickedPoint
-    ] as [number, number] | undefined;
-
-    if (selectedPointsIndices && draggingPoint) {
+    if (activePointIndex != null && activePointIndex > -1) {
      if (isDragging === false) {
        setState({
          editingLinearElement: {
@@ -168,79 +98,18 @@ export class LinearElementEditor {
        });
      }

-      const newDraggingPointPosition = LinearElementEditor.createPointAt(
+      const newPoint = LinearElementEditor.createPointAt(
        element,
        scenePointerX - editingLinearElement.pointerOffset.x,
        scenePointerY - editingLinearElement.pointerOffset.y,
        appState.gridSize,
      );
-
-      const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
-      const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
-
-      LinearElementEditor.movePoints(
-        element,
-        selectedPointsIndices.map((pointIndex) => {
-          const newPointPosition =
-            pointIndex ===
-            editingLinearElement.pointerDownState.lastClickedPoint
-              ? LinearElementEditor.createPointAt(
-                  element,
-                  scenePointerX - editingLinearElement.pointerOffset.x,
-                  scenePointerY - editingLinearElement.pointerOffset.y,
-                  appState.gridSize,
-                )
-              : ([
-                  element.points[pointIndex][0] + deltaX,
-                  element.points[pointIndex][1] + deltaY,
-                ] as const);
-          return {
-            index: pointIndex,
-            point: newPointPosition,
-            isDragging:
-              pointIndex ===
-              editingLinearElement.pointerDownState.lastClickedPoint,
-          };
-        }),
-      );
-
-      // suggest bindings for first and last point if selected
+      LinearElementEditor.movePoint(element, activePointIndex, newPoint);
      if (isBindingElement(element)) {
-        const coords: { x: number; y: number }[] = [];
-
-        const firstSelectedIndex = selectedPointsIndices[0];
-        if (firstSelectedIndex === 0) {
-          coords.push(
-            tupleToCoors(
-              LinearElementEditor.getPointGlobalCoordinates(
-                element,
-                element.points[0],
-              ),
-            ),
-          );
-        }
-
-        const lastSelectedIndex =
-          selectedPointsIndices[selectedPointsIndices.length - 1];
-        if (lastSelectedIndex === element.points.length - 1) {
-          coords.push(
-            tupleToCoors(
-              LinearElementEditor.getPointGlobalCoordinates(
-                element,
-                element.points[lastSelectedIndex],
-              ),
-            ),
-          );
-        }
-
-        if (coords.length) {
-          maybeSuggestBinding(element, coords);
-        }
+        maybeSuggestBinding(element, activePointIndex === 0 ? "start" : "end");
      }
-
      return true;
    }
-
    return false;
  }

@@ -249,79 +118,45 @@ export class LinearElementEditor {
    editingLinearElement: LinearElementEditor,
    appState: AppState,
  ): LinearElementEditor {
-    const { elementId, selectedPointsIndices, isDragging, pointerDownState } =
-      editingLinearElement;
+    const { elementId, activePointIndex, isDragging } = editingLinearElement;
    const element = LinearElementEditor.getElement(elementId);
    if (!element) {
      return editingLinearElement;
    }

-    const bindings: Partial<
-      Pick<
-        InstanceType<typeof LinearElementEditor>,
-        "startBindingElement" | "endBindingElement"
-      >
-    > = {};
-
-    if (isDragging && selectedPointsIndices) {
-      for (const selectedPoint of selectedPointsIndices) {
-        if (
-          selectedPoint === 0 ||
-          selectedPoint === element.points.length - 1
-        ) {
-          if (isPathALoop(element.points, appState.zoom.value)) {
-            LinearElementEditor.movePoints(element, [
-              {
-                index: selectedPoint,
-                point:
-                  selectedPoint === 0
-                    ? element.points[element.points.length - 1]
-                    : element.points[0],
-              },
-            ]);
-          }
-
-          const bindingElement = isBindingEnabled(appState)
-            ? getHoveredElementForBinding(
-                tupleToCoors(
-                  LinearElementEditor.getPointAtIndexGlobalCoordinates(
-                    element,
-                    selectedPoint!,
-                  ),
-                ),
-                Scene.getScene(element)!,
-              )
-            : null;
-
-          bindings[
-            selectedPoint === 0 ? "startBindingElement" : "endBindingElement"
-          ] = bindingElement;
-        }
+    let binding = {};
+    if (
+      isDragging &&
+      (activePointIndex === 0 || activePointIndex === element.points.length - 1)
+    ) {
+      if (isPathALoop(element.points, appState.zoom.value)) {
+        LinearElementEditor.movePoint(
+          element,
+          activePointIndex,
+          activePointIndex === 0
+            ? element.points[element.points.length - 1]
+            : element.points[0],
+        );
      }
+      const bindingElement = isBindingEnabled(appState)
+        ? getHoveredElementForBinding(
+            tupleToCoors(
+              LinearElementEditor.getPointAtIndexGlobalCoordinates(
+                element,
+                activePointIndex!,
+              ),
+            ),
+            Scene.getScene(element)!,
+          )
+        : null;
+      binding = {
+        [activePointIndex === 0 ? "startBindingElement" : "endBindingElement"]:
+          bindingElement,
+      };
    }
-
    return {
      ...editingLinearElement,
-      ...bindings,
-      // if clicking without previously dragging a point(s), and not holding
-      // shift, deselect all points except the one clicked. If holding shift,
-      // toggle the point.
-      selectedPointsIndices:
-        isDragging || event.shiftKey
-          ? !isDragging &&
-            event.shiftKey &&
-            pointerDownState.prevSelectedPointsIndices?.includes(
-              pointerDownState.lastClickedPoint,
-            )
-            ? selectedPointsIndices &&
-              selectedPointsIndices.filter(
-                (pointIndex) =>
-                  pointIndex !== pointerDownState.lastClickedPoint,
-              )
-            : selectedPointsIndices
-          : selectedPointsIndices?.includes(pointerDownState.lastClickedPoint)
-          ? [pointerDownState.lastClickedPoint]
-          : selectedPointsIndices,
+      ...binding,
      isDragging: false,
      pointerOffset: { x: 0, y: 0 },
    };
@@ -371,12 +206,7 @@ export class LinearElementEditor {
      setState({
        editingLinearElement: {
          ...appState.editingLinearElement,
-          pointerDownState: {
-            prevSelectedPointsIndices:
-              appState.editingLinearElement.selectedPointsIndices,
-            lastClickedPoint: -1,
-          },
-          selectedPointsIndices: [element.points.length - 1],
+          activePointIndex: element.points.length - 1,
          lastUncommittedPoint: null,
          endBindingElement: getHoveredElementForBinding(
            scenePointer,
@@ -401,7 +231,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).
@@ -429,28 +259,10 @@ export class LinearElementEditor {
        element.angle,
      );

-    const nextSelectedPointsIndices =
-      clickedPointIndex > -1 || event.shiftKey
-        ? event.shiftKey ||
-          appState.editingLinearElement.selectedPointsIndices?.includes(
-            clickedPointIndex,
-          )
-          ? normalizeSelectedPoints([
-              ...(appState.editingLinearElement.selectedPointsIndices || []),
-              clickedPointIndex,
-            ])
-          : [clickedPointIndex]
-        : null;
-
    setState({
      editingLinearElement: {
        ...appState.editingLinearElement,
-        pointerDownState: {
-          prevSelectedPointsIndices:
-            appState.editingLinearElement.selectedPointsIndices,
-          lastClickedPoint: clickedPointIndex,
-        },
-        selectedPointsIndices: nextSelectedPointsIndices,
+        activePointIndex: clickedPointIndex > -1 ? clickedPointIndex : null,
        pointerOffset: targetPoint
          ? {
              x: scenePointer.x - targetPoint[0],
@@ -480,7 +292,7 @@ export class LinearElementEditor {

    if (!event.altKey) {
      if (lastPoint === lastUncommittedPoint) {
-        LinearElementEditor.deletePoints(element, [points.length - 1]);
+        LinearElementEditor.movePoint(element, points.length - 1, "delete");
      }
      return { ...editingLinearElement, lastUncommittedPoint: null };
    }
@@ -493,14 +305,13 @@ export class LinearElementEditor {
    );

    if (lastPoint === lastUncommittedPoint) {
-      LinearElementEditor.movePoints(element, [
-        {
-          index: element.points.length - 1,
-          point: newPoint,
-        },
-      ]);
+      LinearElementEditor.movePoint(
+        element,
+        element.points.length - 1,
+        newPoint,
+      );
    } else {
-      LinearElementEditor.addPoints(element, [{ point: newPoint }]);
+      LinearElementEditor.movePoint(element, "new", newPoint);
    }

    return {
@@ -509,21 +320,6 @@ export class LinearElementEditor {
    };
  }

-  /** scene coords */
-  static getPointGlobalCoordinates(
-    element: NonDeleted<ExcalidrawLinearElement>,
-    point: Point,
-  ) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const cx = (x1 + x2) / 2;
-    const cy = (y1 + y2) / 2;
-
-    let { x, y } = element;
-    [x, y] = rotate(x + point[0], y + point[1], cx, cy, element.angle);
-    return [x, y] as const;
-  }
-
-  /** scene coords */
  static getPointsGlobalCoordinates(
    element: NonDeleted<ExcalidrawLinearElement>,
  ) {
@@ -643,122 +439,22 @@ export class LinearElementEditor {
    mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
  }

-  static duplicateSelectedPoints(appState: AppState) {
-    if (!appState.editingLinearElement) {
-      return false;
-    }
-
-    const { selectedPointsIndices, elementId } = appState.editingLinearElement;
-
-    const element = LinearElementEditor.getElement(elementId);
-
-    if (!element || selectedPointsIndices === null) {
-      return false;
-    }
-
-    const { points } = element;
-
-    const nextSelectedIndices: number[] = [];
-
-    let pointAddedToEnd = false;
-    let indexCursor = -1;
-    const nextPoints = points.reduce((acc: Point[], point, index) => {
-      ++indexCursor;
-      acc.push(point);
-
-      const isSelected = selectedPointsIndices.includes(index);
-      if (isSelected) {
-        const nextPoint = points[index + 1];
-
-        if (!nextPoint) {
-          pointAddedToEnd = true;
-        }
-        acc.push(
-          nextPoint
-            ? [(point[0] + nextPoint[0]) / 2, (point[1] + nextPoint[1]) / 2]
-            : [point[0], point[1]],
-        );
-
-        nextSelectedIndices.push(indexCursor + 1);
-        ++indexCursor;
-      }
-
-      return acc;
-    }, []);
-
-    mutateElement(element, { points: nextPoints });
-
-    // temp hack to ensure the line doesn't move when adding point to the end,
-    // potentially expanding the bounding box
-    if (pointAddedToEnd) {
-      const lastPoint = element.points[element.points.length - 1];
-      LinearElementEditor.movePoints(element, [
-        {
-          index: element.points.length - 1,
-          point: [lastPoint[0] + 30, lastPoint[1] + 30],
-        },
-      ]);
-    }
-
-    return {
-      appState: {
-        ...appState,
-        editingLinearElement: {
-          ...appState.editingLinearElement,
-          selectedPointsIndices: nextSelectedIndices,
-        },
-      },
-    };
-  }
-
-  static deletePoints(
+  static movePointByOffset(
    element: NonDeleted<ExcalidrawLinearElement>,
-    pointIndices: readonly number[],
+    pointIndex: number,
+    offset: { x: number; y: number },
  ) {
-    let offsetX = 0;
-    let offsetY = 0;
-
-    const isDeletingOriginPoint = pointIndices.includes(0);
-
-    // if deleting first point, make the next to be [0,0] and recalculate
-    // positions of the rest with respect to it
-    if (isDeletingOriginPoint) {
-      const firstNonDeletedPoint = element.points.find((point, idx) => {
-        return !pointIndices.includes(idx);
-      });
-      if (firstNonDeletedPoint) {
-        offsetX = firstNonDeletedPoint[0];
-        offsetY = firstNonDeletedPoint[1];
-      }
-    }
-
-    const nextPoints = element.points.reduce((acc: Point[], point, idx) => {
-      if (!pointIndices.includes(idx)) {
-        acc.push(
-          !acc.length ? [0, 0] : [point[0] - offsetX, point[1] - offsetY],
-        );
-      }
-      return acc;
-    }, []);
-
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    const [x, y] = element.points[pointIndex];
+    LinearElementEditor.movePoint(element, pointIndex, [
+      x + offset.x,
+      y + offset.y,
+    ]);
  }

-  static addPoints(
+  static movePoint(
    element: NonDeleted<ExcalidrawLinearElement>,
-    targetPoints: { point: Point }[],
-  ) {
-    const offsetX = 0;
-    const offsetY = 0;
-
-    const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
-  }
-
-  static movePoints(
-    element: NonDeleted<ExcalidrawLinearElement>,
-    targetPoints: { index: number; point: Point; isDragging?: boolean }[],
+    pointIndex: number | "new",
+    targetPosition: Point | "delete",
    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
  ) {
    const { points } = element;
@@ -771,50 +467,49 @@ export class LinearElementEditor {
    let offsetX = 0;
    let offsetY = 0;

-    const selectedOriginPoint = targetPoints.find(({ index }) => index === 0);
+    let nextPoints: (readonly [number, number])[];
+    if (targetPosition === "delete") {
+      // remove point
+      if (pointIndex === "new") {
+        throw new Error("invalid args in movePoint");
+      }
+      nextPoints = points.slice();
+      nextPoints.splice(pointIndex, 1);
+      if (pointIndex === 0) {
+        // if deleting first point, make the next to be [0,0] and recalculate
+        // positions of the rest with respect to it
+        offsetX = nextPoints[0][0];
+        offsetY = nextPoints[0][1];
+        nextPoints = nextPoints.map((point, idx) => {
+          if (idx === 0) {
+            return [0, 0];
+          }
+          return [point[0] - offsetX, point[1] - offsetY];
+        });
+      }
+    } else if (pointIndex === "new") {
+      nextPoints = [...points, targetPosition];
+    } else {
+      const deltaX = targetPosition[0] - points[pointIndex][0];
+      const deltaY = targetPosition[1] - points[pointIndex][1];
+      nextPoints = points.map((point, idx) => {
+        if (idx === pointIndex) {
+          if (idx === 0) {
+            offsetX = deltaX;
+            offsetY = deltaY;
+            return point;
+          }
+          offsetX = 0;
+          offsetY = 0;

-    if (selectedOriginPoint) {
-      offsetX =
-        selectedOriginPoint.point[0] - points[selectedOriginPoint.index][0];
-      offsetY =
-        selectedOriginPoint.point[1] - points[selectedOriginPoint.index][1];
+          return [point[0] + deltaX, point[1] + deltaY] as const;
+        }
+        return offsetX || offsetY
+          ? ([point[0] - offsetX, point[1] - offsetY] as const)
+          : point;
+      });
    }

-    const nextPoints = points.map((point, idx) => {
-      const selectedPointData = targetPoints.find((p) => p.index === idx);
-      if (selectedPointData) {
-        if (selectedOriginPoint) {
-          return point;
-        }
-
-        const deltaX =
-          selectedPointData.point[0] - points[selectedPointData.index][0];
-        const deltaY =
-          selectedPointData.point[1] - points[selectedPointData.index][1];
-
-        return [point[0] + deltaX, point[1] + deltaY] as const;
-      }
-      return offsetX || offsetY
-        ? ([point[0] - offsetX, point[1] - offsetY] as const)
-        : point;
-    });
-
-    LinearElementEditor._updatePoints(
-      element,
-      nextPoints,
-      offsetX,
-      offsetY,
-      otherUpdates,
-    );
-  }
-
-  private static _updatePoints(
-    element: NonDeleted<ExcalidrawLinearElement>,
-    nextPoints: readonly Point[],
-    offsetX: number,
-    offsetY: number,
-    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
-  ) {
    const nextCoords = getElementPointsCoords(
      element,
      nextPoints,
@@ -822,7 +517,7 @@ export class LinearElementEditor {
    );
    const prevCoords = getElementPointsCoords(
      element,
-      element.points,
+      points,
      element.strokeSharpness || "round",
    );
    const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
@@ -841,13 +536,3 @@ export class LinearElementEditor {
    });
  }
 }
-
-const normalizeSelectedPoints = (
-  points: (number | null)[],
-): number[] | null => {
-  let nextPoints = [
-    ...new Set(points.filter((p) => p !== null && p !== -1)),
-  ] as number[];
-  nextPoints = nextPoints.sort((a, b) => a - b);
-  return nextPoints.length ? nextPoints : null;
-};
@@ -4,7 +4,6 @@ import Scene from "../scene/Scene";
 import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
 import { Point } from "../types";
-import { getUpdatedTimestamp } from "../utils";

 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
  Partial<TElement>,
@@ -93,7 +92,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(

  element.version++;
  element.versionNonce = randomInteger();
-  element.updated = getUpdatedTimestamp();

  if (informMutation) {
    Scene.getScene(element)?.informMutation();
@@ -128,14 +126,13 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
  return {
    ...element,
    ...updates,
-    updated: getUpdatedTimestamp(),
    version: element.version + 1,
    versionNonce: randomInteger(),
  };
 };

 /**
- * Mutates element, bumping `version`, `versionNonce`, and `updated`.
+ * Mutates element and updates `version` & `versionNonce`.
 *
 * NOTE: does not trigger re-render.
 */
@@ -145,6 +142,5 @@ export const bumpVersion = (
 ) => {
  element.version = (version ?? element.version) + 1;
  element.versionNonce = randomInteger();
-  element.updated = getUpdatedTimestamp();
  return element;
 };
@@ -11,30 +11,26 @@ import {
  Arrowhead,
  ExcalidrawFreeDrawElement,
  FontFamilyValues,
-  ExcalidrawRectangleElement,
 } from "../element/types";
-import { getFontString, getUpdatedTimestamp, isTestEnv } from "../utils";
+import { measureText, getFontString } from "../utils";
 import { randomInteger, randomId } from "../random";
-import { mutateElement, newElementWith } from "./mutateElement";
+import { newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
 import { AppState } from "../types";
 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";

 type ElementConstructorOpts = MarkOptional<
-  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
+  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted">,
  | "width"
  | "height"
  | "angle"
  | "groupIds"
-  | "boundElements"
+  | "boundElementIds"
  | "seed"
  | "version"
  | "versionNonce"
-  | "link"
 >;

 const _newElementBase = <T extends ExcalidrawElement>(
@@ -54,38 +50,32 @@ const _newElementBase = <T extends ExcalidrawElement>(
    angle = 0,
    groupIds = [],
    strokeSharpness,
-    boundElements = null,
-    link = null,
+    boundElementIds = null,
    ...rest
  }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
-) => {
-  const element = {
-    id: rest.id || randomId(),
-    type,
-    x,
-    y,
-    width,
-    height,
-    angle,
-    strokeColor,
-    backgroundColor,
-    fillStyle,
-    strokeWidth,
-    strokeStyle,
-    roughness,
-    opacity,
-    groupIds,
-    strokeSharpness,
-    seed: rest.seed ?? randomInteger(),
-    version: rest.version || 1,
-    versionNonce: rest.versionNonce ?? 0,
-    isDeleted: false as false,
-    boundElements,
-    updated: getUpdatedTimestamp(),
-    link,
-  };
-  return element;
-};
+) => ({
+  id: rest.id || randomId(),
+  type,
+  x,
+  y,
+  width,
+  height,
+  angle,
+  strokeColor,
+  backgroundColor,
+  fillStyle,
+  strokeWidth,
+  strokeStyle,
+  roughness,
+  opacity,
+  groupIds,
+  strokeSharpness,
+  seed: rest.seed ?? randomInteger(),
+  version: rest.version || 1,
+  versionNonce: rest.versionNonce ?? 0,
+  isDeleted: false as false,
+  boundElementIds,
+});

 export const newElement = (
  opts: {
@@ -123,7 +113,6 @@ export const newTextElement = (
    fontFamily: FontFamilyValues;
    textAlign: TextAlign;
    verticalAlign: VerticalAlign;
-    containerId?: ExcalidrawRectangleElement["id"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
  const metrics = measureText(opts.text, getFontString(opts));
@@ -141,8 +130,6 @@ export const newTextElement = (
      width: metrics.width,
      height: metrics.height,
      baseline: metrics.baseline,
-      containerId: opts.containerId || null,
-      originalText: opts.text,
    },
    {},
  );
@@ -159,29 +146,18 @@ const getAdjustedDimensions = (
  height: number;
  baseline: number;
 } => {
-  let maxWidth = null;
-  const container = getContainerElement(element);
-  if (container) {
-    maxWidth = container.width - BOUND_TEXT_PADDING * 2;
-  }
  const {
    width: nextWidth,
    height: nextHeight,
    baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element), maxWidth);
+  } = measureText(nextText, getFontString(element));
  const { textAlign, verticalAlign } = element;
+
  let x: number;
  let y: number;
-  if (
-    textAlign === "center" &&
-    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
-    !element.containerId
-  ) {
-    const prevMetrics = measureText(
-      element.text,
-      getFontString(element),
-      maxWidth,
-    );
+
+  if (textAlign === "center" && verticalAlign === "middle") {
+    const prevMetrics = measureText(element.text, getFontString(element));
    const offsets = getTextElementPositionOffsets(element, {
      width: nextWidth - prevMetrics.width,
      height: nextHeight - prevMetrics.height,
@@ -218,21 +194,6 @@ const getAdjustedDimensions = (
    );
  }

-  // make sure container dimensions are set properly when
-  // text editor overflows beyond viewport dimensions
-  if (container) {
-    let height = container.height;
-    let width = container.width;
-    if (nextHeight > height - BOUND_TEXT_PADDING * 2) {
-      height = nextHeight + BOUND_TEXT_PADDING * 2;
-    }
-    if (nextWidth > width - BOUND_TEXT_PADDING * 2) {
-      width = nextWidth + BOUND_TEXT_PADDING * 2;
-    }
-    if (height !== container.height || width !== container.width) {
-      mutateElement(container, { height, width });
-    }
-  }
  return {
    width: nextWidth,
    height: nextHeight,
@@ -244,26 +205,12 @@ const getAdjustedDimensions = (

 export const updateTextElement = (
  element: ExcalidrawTextElement,
-  {
-    text,
-    isDeleted,
-    originalText,
-  }: {
-    text: string;
-    isDeleted?: boolean;
-    originalText: string;
-  },
+  { text, isDeleted }: { text: string; isDeleted?: boolean },
 ): ExcalidrawTextElement => {
-  const container = getContainerElement(element);
-  if (container) {
-    text = wrapText(text, getFontString(element), container.width);
-  }
-  const dimensions = getAdjustedDimensions(element, text);
  return newElementWith(element, {
    text,
-    originalText,
    isDeleted: isDeleted ?? element.isDeleted,
-    ...dimensions,
+    ...getAdjustedDimensions(element, text),
  });
 };

@@ -377,7 +324,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
  overrides?: Partial<TElement>,
 ): TElement => {
  let copy: TElement = deepCopyElement(element);
-  if (isTestEnv()) {
+  if (process.env.NODE_ENV === "test") {
    copy.id = `${copy.id}_copy`;
    // `window.h` may not be defined in some unit tests
    if (
@@ -390,7 +337,6 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
  } else {
    copy.id = randomId();
  }
-  copy.updated = getUpdatedTimestamp();
  copy.seed = randomInteger();
  copy.groupIds = getNewGroupIdsForDuplication(
    copy.groupIds,
@@ -1,4 +1,4 @@
-import { BOUND_TEXT_PADDING, SHIFT_LOCKING_ANGLE } from "../constants";
+import { SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";

 import {
@@ -25,7 +25,7 @@ import {
 } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
-import { getFontString } from "../utils";
+import { measureText, getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import {
  TransformHandleType,
@@ -33,15 +33,6 @@ import {
  TransformHandleDirection,
 } from "./transformHandles";
 import { Point, PointerDownState } from "../types";
-import Scene from "../scene/Scene";
-import {
-  getApproxMinLineHeight,
-  getApproxMinLineWidth,
-  getBoundTextElement,
-  getBoundTextElementId,
-  handleBindTextResize,
-  measureText,
-} from "./textElement";

 export const normalizeAngle = (angle: number): number => {
  if (angle >= 2 * Math.PI) {
@@ -106,7 +97,7 @@ export const transformElements = (
      updateBoundElements(element);
    } else if (transformHandleType) {
      resizeSingleElement(
-        pointerDownState.originalElements,
+        pointerDownState.originalElements.get(element.id) as typeof element,
        shouldMaintainAspectRatio,
        element,
        transformHandleType,
@@ -163,11 +154,6 @@ const rotateSingleElement = (
  }
  angle = normalizeAngle(angle);
  mutateElement(element, { angle });
-  const boundTextElementId = getBoundTextElementId(element);
-  if (boundTextElementId) {
-    const textElement = Scene.getScene(element)!.getElement(boundTextElementId);
-    mutateElement(textElement!, { angle });
-  }
 };

 // used in DEV only
@@ -286,7 +272,6 @@ const measureFontSizeFromWH = (
  const metrics = measureText(
    element.text,
    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.containerId ? element.width : null,
  );
  return {
    size: nextFontSize,
@@ -397,7 +382,7 @@ const resizeSingleTextElement = (
 };

 export const resizeSingleElement = (
-  originalElements: PointerDownState["originalElements"],
+  stateAtResizeStart: NonDeletedExcalidrawElement,
  shouldMaintainAspectRatio: boolean,
  element: NonDeletedExcalidrawElement,
  transformHandleDirection: TransformHandleDirection,
@@ -405,7 +390,6 @@ export const resizeSingleElement = (
  pointerX: number,
  pointerY: number,
 ) => {
-  const stateAtResizeStart = originalElements.get(element.id)!;
  // Gets bounds corners
  const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
    stateAtResizeStart,
@@ -429,7 +413,6 @@ export const resizeSingleElement = (
    element.width,
    element.height,
  );
-
  const boundsCurrentWidth = esx2 - esx1;
  const boundsCurrentHeight = esy2 - esy1;

@@ -440,9 +423,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;
  }
@@ -455,7 +435,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;
@@ -485,37 +464,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,
@@ -628,10 +576,6 @@ export const resizeSingleElement = (
      newSize: { width: resizedElement.width, height: resizedElement.height },
    });
    mutateElement(element, resizedElement);
-    if (boundTextElement && boundTextFont) {
-      mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
-    }
-    handleBindTextResize(element, transformHandleDirection);
  }
 };

@@ -702,26 +646,8 @@ 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)) {
+        if (element.type === "text") {
          const nextFont = measureFontSizeFromWH(element, width, height);
          if (nextFont === null) {
            return null;
@@ -764,15 +690,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);
-        }
      });
    }
  }
@@ -811,16 +728,6 @@ const rotateMultipleElements = (
      y: element.y + (rotatedCY - cy),
      angle: normalizeAngle(centerAngle + origAngle),
    });
-    const boundTextElementId = getBoundTextElementId(element);
-    if (boundTextElementId) {
-      const textElement =
-        Scene.getScene(element)!.getElement(boundTextElementId)!;
-      mutateElement(textElement, {
-        x: textElement.x + (rotatedCX - cx),
-        y: textElement.y + (rotatedCY - cy),
-        angle: normalizeAngle(centerAngle + origAngle),
-      });
-    }
  });
 };

@@ -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);
@@ -1,140 +0,0 @@
-import { wrapText } from "./textElement";
-import { FontString } from "./types";
-
-describe("Test wrapText", () => {
-  const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
-
-  describe("When text doesn't contain new lines", () => {
-    const text = "Hello whats up";
-    [
-      {
-        desc: "break all words when width of each word is less than container width",
-        width: 90,
-        res: `Hello 
-whats 
-up`,
-      },
-      {
-        desc: "break all characters when width of each character is less than container width",
-        width: 25,
-        res: `H
-e
-l
-l
-o
-w
-h
-a
-t
-s
-u
-p`,
-      },
-      {
-        desc: "break words as per the width",
-
-        width: 150,
-        res: `Hello whats 
-up`,
-      },
-      {
-        desc: "fit the container",
-
-        width: 250,
-        res: "Hello whats up",
-      },
-    ].forEach((data) => {
-      it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-  describe("When text contain new lines", () => {
-    const text = `Hello
-whats up`;
-    [
-      {
-        desc: "break all words when width of each word is less than container width",
-        width: 90,
-        res: `Hello
-whats 
-up`,
-      },
-      {
-        desc: "break all characters when width of each character is less than container width",
-        width: 25,
-        res: `H
-e
-l
-l
-o
-w
-h
-a
-t
-s
-u
-p`,
-      },
-      {
-        desc: "break words as per the width",
-
-        width: 150,
-        res: `Hello
-whats up`,
-      },
-      {
-        desc: "fit the container",
-
-        width: 250,
-        res: `Hello
-whats up`,
-      },
-    ].forEach((data) => {
-      it(`should respect new lines and ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-  describe("When text is long", () => {
-    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
-    [
-      {
-        desc: "fit characters of long string as per container width",
-        width: 170,
-        res: `hellolongtextth
-isiswhatsupwith
-youIamtypingggg
-gandtypinggg 
-break it now`,
-      },
-
-      {
-        desc: "fit characters of long string as per container width and break words as per the width",
-
-        width: 130,
-        res: `hellolongte
-xtthisiswha
-tsupwithyou
-Iamtypinggg
-ggandtyping
-gg break it
-now`,
-      },
-      {
-        desc: "fit the long text when container width is greater than text length and move the rest to next line",
-
-        width: 600,
-        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg 
-break it now`,
-      },
-    ].forEach((data) => {
-      it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-});
@@ -1,478 +1,12 @@
-import { getFontString, arrayToMap, isTestEnv } from "../utils";
-import {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  ExcalidrawTextElementWithContainer,
-  FontString,
-  NonDeletedExcalidrawElement,
-} from "./types";
+import { measureText, getFontString } from "../utils";
+import { ExcalidrawTextElement } from "./types";
 import { mutateElement } from "./mutateElement";
-import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
-import { MaybeTransformHandleType } from "./transformHandles";
-import Scene from "../scene/Scene";
-import { AppState } from "../types";
-import { isTextElement } from ".";
-
-export const redrawTextBoundingBox = (
-  element: ExcalidrawTextElement,
-  container: ExcalidrawElement | null,
-  appState: AppState,
-) => {
-  const maxWidth = container
-    ? container.width - BOUND_TEXT_PADDING * 2
-    : undefined;
-  let text = element.text;
-
-  if (container) {
-    text = wrapText(
-      element.originalText,
-      getFontString(element),
-      container.width,
-    );
-  }
-  const metrics = measureText(
-    element.originalText,
-    getFontString(element),
-    maxWidth,
-  );
-
-  let coordY = element.y;
-  // Resize container and vertically center align the text
-  if (container) {
-    let nextHeight = container.height;
-
-    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;
-      }
-    }
-    mutateElement(container, { height: nextHeight });
-  }

+export const redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
+  const metrics = measureText(element.text, getFontString(element));
  mutateElement(element, {
    width: metrics.width,
    height: metrics.height,
    baseline: metrics.baseline,
-    y: coordY,
-    text,
  });
 };
-
-export const bindTextToShapeAfterDuplication = (
-  sceneElements: ExcalidrawElement[],
-  oldElements: ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-): void => {
-  const sceneElementMap = arrayToMap(sceneElements) as Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement
-  >;
-  oldElements.forEach((element) => {
-    const newElementId = oldIdToDuplicatedId.get(element.id) as string;
-    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,
-          });
-        }
-      }
-    }
-  });
-};
-
-export const handleBindTextResize = (
-  element: 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,
-            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,
-        });
-      }
-
-      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
-export const measureText = (
-  text: string,
-  font: FontString,
-  maxWidth?: number | null,
-) => {
-  text = text
-    .split("\n")
-    // replace empty lines with single space because leading/trailing empty
-    // lines would be stripped from computation
-    .map((x) => x || " ")
-    .join("\n");
-  const container = document.createElement("div");
-  container.style.position = "absolute";
-  container.style.whiteSpace = "pre";
-  container.style.font = font;
-  container.style.minHeight = "1em";
-  if (maxWidth) {
-    const lineHeight = getApproxLineHeight(font);
-    container.style.width = `${String(maxWidth)}px`;
-    container.style.maxWidth = `${String(maxWidth)}px`;
-    container.style.overflow = "hidden";
-    container.style.wordBreak = "break-word";
-    container.style.lineHeight = `${String(lineHeight)}px`;
-    container.style.whiteSpace = "pre-wrap";
-  }
-  document.body.appendChild(container);
-  container.innerText = text;
-
-  const span = document.createElement("span");
-  span.style.display = "inline-block";
-  span.style.overflow = "hidden";
-  span.style.width = "1px";
-  span.style.height = "1px";
-  container.appendChild(span);
-  // Baseline is important for positioning text on canvas
-  const baseline = span.offsetTop + span.offsetHeight;
-  const width = container.offsetWidth;
-
-  const height = container.offsetHeight;
-  document.body.removeChild(container);
-
-  return { width, height, baseline };
-};
-
-const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
-const cacheApproxLineHeight: { [key: FontString]: number } = {};
-
-export const getApproxLineHeight = (font: FontString) => {
-  if (cacheApproxLineHeight[font]) {
-    return cacheApproxLineHeight[font];
-  }
-  cacheApproxLineHeight[font] = measureText(DUMMY_TEXT, font, null).height;
-  return cacheApproxLineHeight[font];
-};
-
-let canvas: HTMLCanvasElement | undefined;
-const getTextWidth = (text: string, font: FontString) => {
-  if (!canvas) {
-    canvas = document.createElement("canvas");
-  }
-  const canvas2dContext = canvas.getContext("2d")!;
-  canvas2dContext.font = font;
-
-  const metrics = canvas2dContext.measureText(text);
-  // since in test env the canvas measureText algo
-  // doesn't measure text and instead just returns number of
-  // characters hence we assume that each letteris 10px
-  if (isTestEnv()) {
-    return metrics.width * 10;
-  }
-
-  return metrics.width;
-};
-
-export const wrapText = (
-  text: string,
-  font: FontString,
-  containerWidth: number,
-) => {
-  const maxWidth = containerWidth - BOUND_TEXT_PADDING * 2;
-
-  const lines: Array<string> = [];
-  const originalLines = text.split("\n");
-  const spaceWidth = getTextWidth(" ", font);
-  originalLines.forEach((originalLine) => {
-    const words = originalLine.split(" ");
-    // This means its newline so push it
-    if (words.length === 1 && words[0] === "") {
-      lines.push(words[0]);
-    } else {
-      let currentLine = "";
-      let currentLineWidthTillNow = 0;
-
-      let index = 0;
-      while (index < words.length) {
-        const currentWordWidth = getTextWidth(words[index], font);
-
-        // Start breaking longer words exceeding max width
-        if (currentWordWidth >= maxWidth) {
-          // push current line since the current word exceeds the max width
-          // so will be appended in next line
-          if (currentLine) {
-            lines.push(currentLine);
-          }
-          currentLine = "";
-          currentLineWidthTillNow = 0;
-          while (words[index].length > 0) {
-            const currentChar = words[index][0];
-            const width = charWidth.calculate(currentChar, font);
-            currentLineWidthTillNow += width;
-            words[index] = words[index].slice(1);
-
-            if (currentLineWidthTillNow >= maxWidth) {
-              // only remove last trailing space which we have added when joining words
-              if (currentLine.slice(-1) === " ") {
-                currentLine = currentLine.slice(0, -1);
-              }
-              lines.push(currentLine);
-              currentLine = currentChar;
-              currentLineWidthTillNow = width;
-              if (currentLineWidthTillNow === maxWidth) {
-                currentLine = "";
-                currentLineWidthTillNow = 0;
-              }
-            } else {
-              currentLine += currentChar;
-            }
-          }
-          // push current line if appending space exceeds max width
-          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-            lines.push(currentLine);
-            currentLine = "";
-            currentLineWidthTillNow = 0;
-          } else {
-            // space needs to be appended before next word
-            // as currentLine contains chars which couldn't be appended
-            // to previous line
-            currentLine += " ";
-            currentLineWidthTillNow += spaceWidth;
-          }
-
-          index++;
-        } else {
-          // Start appending words in a line till max width reached
-          while (currentLineWidthTillNow < maxWidth && index < words.length) {
-            const word = words[index];
-            currentLineWidthTillNow = getTextWidth(currentLine + word, font);
-
-            if (currentLineWidthTillNow >= maxWidth) {
-              lines.push(currentLine);
-              currentLineWidthTillNow = 0;
-              currentLine = "";
-
-              break;
-            }
-            index++;
-            currentLine += `${word} `;
-
-            // Push the word if appending space exceeds max width
-            if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-              lines.push(currentLine.slice(0, -1));
-              currentLine = "";
-              currentLineWidthTillNow = 0;
-              break;
-            }
-          }
-          if (currentLineWidthTillNow === maxWidth) {
-            currentLine = "";
-            currentLineWidthTillNow = 0;
-          }
-        }
-      }
-      if (currentLine) {
-        // only remove last trailing space which we have added when joining words
-        if (currentLine.slice(-1) === " ") {
-          currentLine = currentLine.slice(0, -1);
-        }
-        lines.push(currentLine);
-      }
-    }
-  });
-  return lines.join("\n");
-};
-
-export const charWidth = (() => {
-  const cachedCharWidth: { [key: FontString]: Array<number> } = {};
-
-  const calculate = (char: string, font: FontString) => {
-    const ascii = char.charCodeAt(0);
-    if (!cachedCharWidth[font]) {
-      cachedCharWidth[font] = [];
-    }
-    if (!cachedCharWidth[font][ascii]) {
-      const width = getTextWidth(char, font);
-      cachedCharWidth[font][ascii] = width;
-    }
-
-    return cachedCharWidth[font][ascii];
-  };
-
-  const getCache = (font: FontString) => {
-    return cachedCharWidth[font];
-  };
-  return {
-    calculate,
-    getCache,
-  };
-})();
-export const getApproxMinLineWidth = (font: FontString) => {
-  const maxCharWidth = getMaxCharWidth(font);
-  if (maxCharWidth === 0) {
-    return (
-      measureText(DUMMY_TEXT.split("").join("\n"), font).width +
-      BOUND_TEXT_PADDING * 2
-    );
-  }
-  return maxCharWidth + BOUND_TEXT_PADDING * 2;
-};
-
-export const getApproxMinLineHeight = (font: FontString) => {
-  return getApproxLineHeight(font) + BOUND_TEXT_PADDING * 2;
-};
-
-export const getMinCharWidth = (font: FontString) => {
-  const cache = charWidth.getCache(font);
-  if (!cache) {
-    return 0;
-  }
-  const cacheWithOutEmpty = cache.filter((val) => val !== undefined);
-
-  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();
-  const batchLength = 6;
-  let index = 0;
-  let widthTillNow = 0;
-  let str = "";
-  while (widthTillNow <= width) {
-    const batch = dummyText.substr(index, index + batchLength);
-    str += batch;
-    widthTillNow += getTextWidth(str, font);
-    if (index === dummyText.length - 1) {
-      index = 0;
-    }
-    index = index + batchLength;
-  }
-
-  while (widthTillNow > width) {
-    str = str.substr(0, str.length - 1);
-    widthTillNow = getTextWidth(str, font);
-  }
-  return str.length;
-};
-
-export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
-  return container?.boundElements?.length
-    ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
-        null
-    : null;
-};
-
-export const getBoundTextElement = (element: ExcalidrawElement | null) => {
-  if (!element) {
-    return null;
-  }
-  const boundTextElementId = getBoundTextElementId(element);
-  if (boundTextElementId) {
-    return (
-      (Scene.getScene(element)?.getElement(
-        boundTextElementId,
-      ) as ExcalidrawTextElementWithContainer) || null
-    );
-  }
-  return null;
-};
-
-export const getContainerElement = (
-  element:
-    | (ExcalidrawElement & { containerId: ExcalidrawElement["id"] | null })
-    | null,
-) => {
-  if (!element) {
-    return null;
-  }
-  if (element.containerId) {
-    return Scene.getScene(element)?.getElement(element.containerId) || null;
-  }
-  return null;
-};
@@ -1,749 +1,169 @@
 import ReactDOM from "react-dom";
 import ExcalidrawApp from "../excalidraw-app";
-import { GlobalTestState, render, screen } from "../tests/test-utils";
-import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { CODES, KEYS } from "../keys";
-import { fireEvent } from "../tests/test-utils";
-import { queryByText } from "@testing-library/react";
+import { render } from "../tests/test-utils";
+import { Pointer, UI } from "../tests/helpers/ui";
+import { KEYS } from "../keys";

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

 const tab = "    ";
-const mouse = new Pointer("mouse");

 describe("textWysiwyg", () => {
-  describe("start text editing", () => {
-    const { h } = window;
-    beforeEach(async () => {
-      await render(<ExcalidrawApp />);
-      h.elements = [];
-    });
+  let textarea: HTMLTextAreaElement;
+  beforeEach(async () => {
+    await render(<ExcalidrawApp />);

-    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];
+    const element = UI.createElement("text");

-      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);
-    });
+    new Pointer("mouse").clickOn(element);
+    textarea = document.querySelector(
+      ".excalidraw-textEditorContainer > textarea",
+    )!;
  });

-  describe("Test container-unbound text", () => {
-    const { h } = window;
+  it("should add a tab at the start of the first line", () => {
+    const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
+    textarea.value = "Line#1\nLine#2";
+    // cursor: "|Line#1\nLine#2"
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = 0;
+    textarea.dispatchEvent(event);

-    let textarea: HTMLTextAreaElement;
-    let textElement: ExcalidrawTextElement;
-    beforeEach(async () => {
-      await render(<ExcalidrawApp />);
-
-      textElement = UI.createElement("text");
-
-      mouse.clickOn(textElement);
-      textarea = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      )!;
-    });
-
-    it("should add a tab at the start of the first line", () => {
-      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
-      textarea.value = "Line#1\nLine#2";
-      // cursor: "|Line#1\nLine#2"
-      textarea.selectionStart = 0;
-      textarea.selectionEnd = 0;
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`${tab}Line#1\nLine#2`);
-      // cursor: "    |Line#1\nLine#2"
-      expect(textarea.selectionStart).toEqual(4);
-      expect(textarea.selectionEnd).toEqual(4);
-    });
-
-    it("should add a tab at the start of the second line", () => {
-      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
-      textarea.value = "Line#1\nLine#2";
-      // cursor: "Line#1\nLin|e#2"
-      textarea.selectionStart = 10;
-      textarea.selectionEnd = 10;
-
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`Line#1\n${tab}Line#2`);
-
-      // cursor: "Line#1\n    Lin|e#2"
-      expect(textarea.selectionStart).toEqual(14);
-      expect(textarea.selectionEnd).toEqual(14);
-    });
-
-    it("should add a tab at the start of the first and second line", () => {
-      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
-      textarea.value = "Line#1\nLine#2\nLine#3";
-      // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
-      textarea.selectionStart = 2;
-      textarea.selectionEnd = 9;
-
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`${tab}Line#1\n${tab}Line#2\nLine#3`);
-
-      // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
-      expect(textarea.selectionStart).toEqual(6);
-      expect(textarea.selectionEnd).toEqual(17);
-    });
-
-    it("should remove a tab at the start of the first line", () => {
-      const event = new KeyboardEvent("keydown", {
-        key: KEYS.TAB,
-        shiftKey: true,
-      });
-      textarea.value = `${tab}Line#1\nLine#2`;
-      // cursor: "|    Line#1\nLine#2"
-      textarea.selectionStart = 0;
-      textarea.selectionEnd = 0;
-
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`Line#1\nLine#2`);
-
-      // cursor: "|Line#1\nLine#2"
-      expect(textarea.selectionStart).toEqual(0);
-      expect(textarea.selectionEnd).toEqual(0);
-    });
-
-    it("should remove a tab at the start of the second line", () => {
-      const event = new KeyboardEvent("keydown", {
-        key: KEYS.TAB,
-        shiftKey: true,
-      });
-      // cursor: "Line#1\n    Lin|e#2"
-      textarea.value = `Line#1\n${tab}Line#2`;
-      textarea.selectionStart = 15;
-      textarea.selectionEnd = 15;
-
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`Line#1\nLine#2`);
-      // cursor: "Line#1\nLin|e#2"
-      expect(textarea.selectionStart).toEqual(11);
-      expect(textarea.selectionEnd).toEqual(11);
-    });
-
-    it("should remove a tab at the start of the first and second line", () => {
-      const event = new KeyboardEvent("keydown", {
-        key: KEYS.TAB,
-        shiftKey: true,
-      });
-      // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
-      textarea.value = `${tab}Line#1\n${tab}Line#2\nLine#3`;
-      textarea.selectionStart = 6;
-      textarea.selectionEnd = 17;
-
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`Line#1\nLine#2\nLine#3`);
-      // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
-      expect(textarea.selectionStart).toEqual(2);
-      expect(textarea.selectionEnd).toEqual(9);
-    });
-
-    it("should remove a tab at the start of the second line and cursor stay on this line", () => {
-      const event = new KeyboardEvent("keydown", {
-        key: KEYS.TAB,
-        shiftKey: true,
-      });
-      // cursor: "Line#1\n  |  Line#2"
-      textarea.value = `Line#1\n${tab}Line#2`;
-      textarea.selectionStart = 9;
-      textarea.selectionEnd = 9;
-      textarea.dispatchEvent(event);
-
-      // cursor: "Line#1\n|Line#2"
-      expect(textarea.selectionStart).toEqual(7);
-      // expect(textarea.selectionEnd).toEqual(7);
-    });
-
-    it("should remove partial tabs", () => {
-      const event = new KeyboardEvent("keydown", {
-        key: KEYS.TAB,
-        shiftKey: true,
-      });
-      // cursor: "Line#1\n  Line#|2"
-      textarea.value = `Line#1\n  Line#2`;
-      textarea.selectionStart = 15;
-      textarea.selectionEnd = 15;
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`Line#1\nLine#2`);
-    });
-
-    it("should remove nothing", () => {
-      const event = new KeyboardEvent("keydown", {
-        key: KEYS.TAB,
-        shiftKey: true,
-      });
-      // cursor: "Line#1\n  Li|ne#2"
-      textarea.value = `Line#1\nLine#2`;
-      textarea.selectionStart = 9;
-      textarea.selectionEnd = 9;
-      textarea.dispatchEvent(event);
-
-      expect(textarea.value).toEqual(`Line#1\nLine#2`);
-    });
-
-    it("should resize text via shortcuts while in wysiwyg", () => {
-      textarea.value = "abc def";
-      const origFontSize = textElement.fontSize;
-      textarea.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: KEYS.CHEVRON_RIGHT,
-          ctrlKey: true,
-          shiftKey: true,
-        }),
-      );
-      expect(textElement.fontSize).toBe(origFontSize * 1.1);
-
-      textarea.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          key: KEYS.CHEVRON_LEFT,
-          ctrlKey: true,
-          shiftKey: true,
-        }),
-      );
-      expect(textElement.fontSize).toBe(origFontSize);
-    });
-
-    it("zooming via keyboard should zoom canvas", () => {
-      expect(h.state.zoom.value).toBe(1);
-      textarea.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          code: CODES.MINUS,
-          ctrlKey: true,
-        }),
-      );
-      expect(h.state.zoom.value).toBe(0.9);
-      textarea.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          code: CODES.NUM_SUBTRACT,
-          ctrlKey: true,
-        }),
-      );
-      expect(h.state.zoom.value).toBe(0.8);
-      textarea.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          code: CODES.NUM_ADD,
-          ctrlKey: true,
-        }),
-      );
-      expect(h.state.zoom.value).toBe(0.9);
-      textarea.dispatchEvent(
-        new KeyboardEvent("keydown", {
-          code: CODES.EQUAL,
-          ctrlKey: true,
-        }),
-      );
-      expect(h.state.zoom.value).toBe(1);
-    });
+    expect(textarea.value).toEqual(`${tab}Line#1\nLine#2`);
+    // cursor: "    |Line#1\nLine#2"
+    expect(textarea.selectionStart).toEqual(4);
+    expect(textarea.selectionEnd).toEqual(4);
  });

-  describe("Test container-bound text", () => {
-    let rectangle: any;
-    const { h } = window;
+  it("should add a tab at the start of the second line", () => {
+    const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
+    textarea.value = "Line#1\nLine#2";
+    // cursor: "Line#1\nLin|e#2"
+    textarea.selectionStart = 10;
+    textarea.selectionEnd = 10;

-    const DUMMY_HEIGHT = 240;
-    const DUMMY_WIDTH = 160;
-    const APPROX_LINE_HEIGHT = 25;
-    const INITIAL_WIDTH = 10;
+    textarea.dispatchEvent(event);

-    beforeAll(() => {
-      jest
-        .spyOn(textElementUtils, "getApproxLineHeight")
-        .mockReturnValue(APPROX_LINE_HEIGHT);
+    expect(textarea.value).toEqual(`Line#1\n${tab}Line#2`);
+
+    // cursor: "Line#1\n    Lin|e#2"
+    expect(textarea.selectionStart).toEqual(14);
+    expect(textarea.selectionEnd).toEqual(14);
+  });
+
+  it("should add a tab at the start of the first and second line", () => {
+    const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
+    textarea.value = "Line#1\nLine#2\nLine#3";
+    // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
+    textarea.selectionStart = 2;
+    textarea.selectionEnd = 9;
+
+    textarea.dispatchEvent(event);
+
+    expect(textarea.value).toEqual(`${tab}Line#1\n${tab}Line#2\nLine#3`);
+
+    // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
+    expect(textarea.selectionStart).toEqual(6);
+    expect(textarea.selectionEnd).toEqual(17);
+  });
+
+  it("should remove a tab at the start of the first line", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: KEYS.TAB,
+      shiftKey: true,
    });
+    textarea.value = `${tab}Line#1\nLine#2`;
+    // cursor: "|    Line#1\nLine#2"
+    textarea.selectionStart = 0;
+    textarea.selectionEnd = 0;

-    beforeEach(async () => {
-      await render(<ExcalidrawApp />);
-      h.elements = [];
+    textarea.dispatchEvent(event);

-      rectangle = UI.createElement("rectangle", {
-        x: 10,
-        y: 20,
-        width: 90,
-        height: 75,
-      });
+    expect(textarea.value).toEqual(`Line#1\nLine#2`);
+
+    // cursor: "|Line#1\nLine#2"
+    expect(textarea.selectionStart).toEqual(0);
+    expect(textarea.selectionEnd).toEqual(0);
+  });
+
+  it("should remove a tab at the start of the second line", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: KEYS.TAB,
+      shiftKey: true,
    });
+    // cursor: "Line#1\n    Lin|e#2"
+    textarea.value = `Line#1\n${tab}Line#2`;
+    textarea.selectionStart = 15;
+    textarea.selectionEnd = 15;

-    it("should bind text to container when double clicked on center", async () => {
-      expect(h.elements.length).toBe(1);
-      expect(h.elements[0].id).toBe(rectangle.id);
+    textarea.dispatchEvent(event);

-      mouse.doubleClickAt(
-        rectangle.x + rectangle.width / 2,
-        rectangle.y + rectangle.height / 2,
-      );
-      expect(h.elements.length).toBe(2);
+    expect(textarea.value).toEqual(`Line#1\nLine#2`);
+    // cursor: "Line#1\nLin|e#2"
+    expect(textarea.selectionStart).toEqual(11);
+    expect(textarea.selectionEnd).toEqual(11);
+  });

-      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.type).toBe("text");
-      expect(text.containerId).toBe(rectangle.id);
-      mouse.down();
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
-
-      await new Promise((r) => setTimeout(r, 0));
-      editor.blur();
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
+  it("should remove a tab at the start of the first and second line", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: KEYS.TAB,
+      shiftKey: true,
    });
+    // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
+    textarea.value = `${tab}Line#1\n${tab}Line#2\nLine#3`;
+    textarea.selectionStart = 6;
+    textarea.selectionEnd = 17;

-    it("should bind text to container when clicked on container and enter pressed", async () => {
-      expect(h.elements.length).toBe(1);
-      expect(h.elements[0].id).toBe(rectangle.id);
+    textarea.dispatchEvent(event);

-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
+    expect(textarea.value).toEqual(`Line#1\nLine#2\nLine#3`);
+    // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
+    expect(textarea.selectionStart).toEqual(2);
+    expect(textarea.selectionEnd).toEqual(9);
+  });

-      expect(h.elements.length).toBe(2);
-
-      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.type).toBe("text");
-      expect(text.containerId).toBe(rectangle.id);
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      await new Promise((r) => setTimeout(r, 0));
-
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
-      editor.blur();
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
+  it("should remove a tab at the start of the second line and cursor stay on this line", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: KEYS.TAB,
+      shiftKey: true,
    });
+    // cursor: "Line#1\n  |  Line#2"
+    textarea.value = `Line#1\n${tab}Line#2`;
+    textarea.selectionStart = 9;
+    textarea.selectionEnd = 9;
+    textarea.dispatchEvent(event);

-    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];
+    // cursor: "Line#1\n|Line#2"
+    expect(textarea.selectionStart).toEqual(7);
+    // expect(textarea.selectionEnd).toEqual(7);
+  });

-      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 remove partial tabs", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: KEYS.TAB,
+      shiftKey: true,
    });
+    // cursor: "Line#1\n  Line#|2"
+    textarea.value = `Line#1\n  Line#2`;
+    textarea.selectionStart = 15;
+    textarea.selectionEnd = 15;
+    textarea.dispatchEvent(event);

-    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);
+    expect(textarea.value).toEqual(`Line#1\nLine#2`);
+  });

-      mouse.doubleClickAt(
-        rectangle.x + rectangle.width / 2,
-        rectangle.y + rectangle.height / 2,
-      );
-      mouse.down();
-
-      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      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(text.fontFamily).toEqual(FONT_FAMILY.Virgil);
-      UI.clickTool("text");
-
-      mouse.clickAt(
-        rectangle.x + rectangle.width / 2,
-        rectangle.y + rectangle.height / 2,
-      );
-      mouse.down();
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      editor.select();
-      fireEvent.click(screen.getByTitle(/code/i));
-
-      await new Promise((r) => setTimeout(r, 0));
-      editor.blur();
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Cascadia);
-
-      //undo
-      Keyboard.withModifierKeys({ ctrl: true }, () => {
-        Keyboard.keyPress(KEYS.Z);
-      });
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Virgil);
-
-      //redo
-      Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
-        Keyboard.keyPress(KEYS.Z);
-      });
-      expect(
-        (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Cascadia);
+  it("should remove nothing", () => {
+    const event = new KeyboardEvent("keydown", {
+      key: KEYS.TAB,
+      shiftKey: true,
    });
+    // cursor: "Line#1\n  Li|ne#2"
+    textarea.value = `Line#1\nLine#2`;
+    textarea.selectionStart = 9;
+    textarea.selectionEnd = 9;
+    textarea.dispatchEvent(event);

-    it("should wrap text and vertcially center align once text submitted", async () => {
-      jest
-        .spyOn(textElementUtils, "measureText")
-        .mockImplementation((text, font, maxWidth) => {
-          let width = INITIAL_WIDTH;
-          let height = APPROX_LINE_HEIGHT;
-          let baseline = 10;
-          if (!text) {
-            return {
-              width,
-              height,
-              baseline,
-            };
-          }
-          baseline = 30;
-          width = DUMMY_WIDTH;
-          if (text === "Hello \nWorld!") {
-            height = APPROX_LINE_HEIGHT * 2;
-          }
-          if (maxWidth) {
-            width = maxWidth;
-            // To capture cases where maxWidth passed is initial width
-            // due to which the text is not wrapped correctly
-            if (maxWidth === INITIAL_WIDTH) {
-              height = DUMMY_HEIGHT;
-            }
-          }
-          return {
-            width,
-            height,
-            baseline,
-          };
-        });
-
-      expect(h.elements.length).toBe(1);
-
-      Keyboard.keyDown(KEYS.ENTER);
-      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      // mock scroll height
-      jest
-        .spyOn(editor, "scrollHeight", "get")
-        .mockImplementation(() => APPROX_LINE_HEIGHT * 2);
-
-      fireEvent.change(editor, {
-        target: {
-          value: "Hello World!",
-        },
-      });
-
-      editor.dispatchEvent(new Event("input"));
-
-      await new Promise((cb) => setTimeout(cb, 0));
-      editor.blur();
-      text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.text).toBe("Hello \nWorld!");
-      expect(text.originalText).toBe("Hello World!");
-      expect(text.y).toBe(
-        rectangle.y + rectangle.height / 2 - (APPROX_LINE_HEIGHT * 2) / 2,
-      );
-      expect(text.x).toBe(rectangle.x + BOUND_TEXT_PADDING);
-      expect(text.height).toBe(APPROX_LINE_HEIGHT * 2);
-      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
-
-      // Edit and text by removing second line and it should
-      // still vertically align correctly
-      mouse.select(rectangle);
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      fireEvent.change(editor, {
-        target: {
-          value: "Hello",
-        },
-      });
-
-      // mock scroll height
-      jest
-        .spyOn(editor, "scrollHeight", "get")
-        .mockImplementation(() => APPROX_LINE_HEIGHT);
-      editor.style.height = "25px";
-      editor.dispatchEvent(new Event("input"));
-
-      await new Promise((r) => setTimeout(r, 0));
-
-      editor.blur();
-      text = h.elements[1] as ExcalidrawTextElementWithContainer;
-
-      expect(text.text).toBe("Hello");
-      expect(text.originalText).toBe("Hello");
-      expect(text.y).toBe(
-        rectangle.y + rectangle.height / 2 - APPROX_LINE_HEIGHT / 2,
-      );
-      expect(text.x).toBe(rectangle.x + BOUND_TEXT_PADDING);
-      expect(text.height).toBe(APPROX_LINE_HEIGHT);
-      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
-    });
-
-    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);
-
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
-
-      expect(h.elements.length).toBe(2);
-
-      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      expect(text.containerId).toBe(rectangle.id);
-
-      const editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-
-      await new Promise((r) => setTimeout(r, 0));
-
-      fireEvent.change(editor, { target: { value: "Hello World!" } });
-      editor.blur();
-      expect(rectangle.boundElements).toStrictEqual([
-        { id: text.id, type: "text" },
-      ]);
-      mouse.reset();
-      UI.clickTool("selection");
-      mouse.clickAt(10, 20);
-      mouse.down();
-      mouse.up();
-      fireEvent.contextMenu(GlobalTestState.canvas, {
-        button: 2,
-        clientX: 20,
-        clientY: 30,
-      });
-      const contextMenu = document.querySelector(".context-menu");
-      fireEvent.click(queryByText(contextMenu as HTMLElement, "Unbind text")!);
-      expect(h.elements[0].boundElements).toEqual([]);
-      expect((h.elements[1] as ExcalidrawTextElement).containerId).toEqual(
-        null,
-      );
-    });
+    expect(textarea.value).toEqual(`Line#1\nLine#2`);
  });
 });
@@ -1,32 +1,10 @@
 import { CODES, KEYS } from "../keys";
-import {
-  isWritableElement,
-  getFontString,
-  getFontFamilyString,
-  isTestEnv,
-} from "../utils";
+import { isWritableElement, getFontString } from "../utils";
 import Scene from "../scene/Scene";
-import { isBoundToContainer, isTextElement } from "./typeChecks";
-import { CLASSES, BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
-import {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  ExcalidrawLinearElement,
-} from "./types";
+import { isTextElement } from "./typeChecks";
+import { CLASSES } from "../constants";
+import { ExcalidrawElement } from "./types";
 import { AppState } from "../types";
-import { mutateElement } from "./mutateElement";
-import {
-  getApproxLineHeight,
-  getBoundTextElementId,
-  getContainerElement,
-  wrapText,
-} from "./textElement";
-import {
-  actionDecreaseFontSize,
-  actionIncreaseFontSize,
-} from "../actions/actionProperties";
-import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
-import App from "../components/App";

 const normalizeText = (text: string) => {
  return (
@@ -44,194 +22,82 @@ const getTransform = (
  angle: number,
  appState: AppState,
  maxWidth: number,
-  maxHeight: number,
 ) => {
-  const { zoom } = appState;
+  const { zoom, offsetTop, offsetLeft } = appState;
  const degree = (180 * angle) / Math.PI;
-  let translateX = (width * (zoom.value - 1)) / 2;
-  let translateY = (height * (zoom.value - 1)) / 2;
+  // offsets must be multiplied by 2 to account for the division by 2 of
+  // the whole expression afterwards
+  let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
+  const translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
  if (width > maxWidth && zoom.value !== 1) {
-    translateX = (maxWidth * (zoom.value - 1)) / 2;
-  }
-  if (height > maxHeight && zoom.value !== 1) {
-    translateY = (maxHeight * (zoom.value - 1)) / 2;
+    translateX = (maxWidth / 2) * (zoom.value - 1);
  }
  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };

 export const textWysiwyg = ({
  id,
+  appState,
  onChange,
  onSubmit,
  getViewportCoords,
  element,
  canvas,
  excalidrawContainer,
-  app,
 }: {
  id: ExcalidrawElement["id"];
+  appState: AppState;
  onChange?: (text: string) => void;
-  onSubmit: (data: {
-    text: string;
-    viaKeyboard: boolean;
-    originalText: string;
-  }) => void;
+  onSubmit: (data: { text: string; viaKeyboard: boolean }) => void;
  getViewportCoords: (x: number, y: number) => [number, number];
-  element: ExcalidrawTextElement;
+  element: ExcalidrawElement;
  canvas: HTMLCanvasElement | null;
  excalidrawContainer: HTMLDivElement | null;
-  app: App;
 }) => {
-  const textPropertiesUpdated = (
-    updatedElement: ExcalidrawTextElement,
-    editable: HTMLTextAreaElement,
-  ) => {
-    const currentFont = editable.style.fontFamily.replace(/"/g, "");
-    if (
-      getFontFamilyString({ fontFamily: updatedElement.fontFamily }) !==
-      currentFont
-    ) {
-      return true;
-    }
-    if (`${updatedElement.fontSize}px` !== editable.style.fontSize) {
-      return true;
-    }
-    return false;
-  };
-  let originalContainerHeight: number;
-
  const updateWysiwygStyle = () => {
-    const appState = app.state;
-    const updatedElement = Scene.getScene(element)?.getElement(
-      id,
-    ) as ExcalidrawTextElement;
-    const { textAlign, verticalAlign } = updatedElement;
-
-    const approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
+    const updatedElement = Scene.getScene(element)?.getElement(id);
    if (updatedElement && isTextElement(updatedElement)) {
-      let coordX = updatedElement.x;
-      let coordY = updatedElement.y;
-      const container = getContainerElement(updatedElement);
-      let maxWidth = updatedElement.width;
+      const [viewportX, viewportY] = getViewportCoords(
+        updatedElement.x,
+        updatedElement.y,
+      );
+      const { textAlign, angle } = updatedElement;

-      let maxHeight = updatedElement.height;
-      let width = updatedElement.width;
-      // Set to element height by default since that's
-      // what is going to be used for unbounded text
-      let height = updatedElement.height;
-      if (container && updatedElement.containerId) {
-        const propertiesUpdated = textPropertiesUpdated(
-          updatedElement,
-          editable,
+      editable.value = updatedElement.text;
+
+      const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n");
+      const lineHeight = updatedElement.height / lines.length;
+      const maxWidth =
+        (appState.offsetLeft + appState.width - viewportX - 8) /
+          appState.zoom.value -
+        // margin-right of parent if any
+        Number(
+          getComputedStyle(
+            excalidrawContainer?.parentNode as Element,
+          ).marginRight.slice(0, -2),
        );
-        // using editor.style.height to get the accurate height of text editor
-        const editorHeight = Number(editable.style.height.slice(0, -2));
-        if (editorHeight > 0) {
-          height = editorHeight;
-        }
-        if (propertiesUpdated) {
-          originalContainerHeight = container.height;

-          // update height of the editor after properties updated
-          height = updatedElement.height;
-        }
-        if (!originalContainerHeight) {
-          originalContainerHeight = container.height;
-        }
-        maxWidth = container.width - BOUND_TEXT_PADDING * 2;
-        maxHeight = container.height - BOUND_TEXT_PADDING * 2;
-        width = maxWidth;
-        // The coordinates of text box set a distance of
-        // 5px to preserve padding
-        coordX = container.x + BOUND_TEXT_PADDING;
-        // autogrow container height if text exceeds
-        if (height > maxHeight) {
-          const diff = Math.min(height - maxHeight, approxLineHeight);
-          mutateElement(container, { height: container.height + diff });
-          return;
-        } else if (
-          // autoshrink container height until original container height
-          // is reached when text is removed
-          container.height > originalContainerHeight &&
-          height < maxHeight
-        ) {
-          const diff = Math.min(maxHeight - height, approxLineHeight);
-          mutateElement(container, { height: container.height - diff });
-        }
-        // Start pushing text upward until a diff of 30px (padding)
-        // 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;
-          }
-        }
-      }
-      const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
-      const initialSelectionStart = editable.selectionStart;
-      const initialSelectionEnd = editable.selectionEnd;
-      const initialLength = editable.value.length;
-      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
-        : updatedElement.height / lines.length;
-      if (!container) {
-        maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
-      }
-
-      // Make sure text editor height doesn't go beyond viewport
-      const editorMaxHeight =
-        (appState.height - viewportY) / appState.zoom.value;
-      const angle = container ? container.angle : updatedElement.angle;
      Object.assign(editable.style, {
        font: getFontString(updatedElement),
        // must be defined *after* font ¯\_(ツ)_/¯
        lineHeight: `${lineHeight}px`,
-        width: `${width}px`,
-        height: `${height}px`,
+        width: `${updatedElement.width}px`,
+        height: `${updatedElement.height}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
        transform: getTransform(
-          width,
-          height,
+          updatedElement.width,
+          updatedElement.height,
          angle,
          appState,
          maxWidth,
-          editorMaxHeight,
        ),
        textAlign,
-        verticalAlign,
        color: updatedElement.strokeColor,
        opacity: updatedElement.opacity / 100,
        filter: "var(--theme-filter)",
        maxWidth: `${maxWidth}px`,
-        maxHeight: `${editorMaxHeight}px`,
      });
-      // For some reason updating font attribute doesn't set font family
-      // hence updating font family explicitly for test environment
-      if (isTestEnv()) {
-        editable.style.fontFamily = getFontFamilyString(updatedElement);
-      }
-      mutateElement(updatedElement, { x: coordX, y: coordY });
    }
  };

@@ -244,13 +110,6 @@ export const textWysiwyg = ({
  editable.wrap = "off";
  editable.classList.add("excalidraw-wysiwyg");

-  let whiteSpace = "pre";
-  let wordBreak = "normal";
-
-  if (isBoundToContainer(element)) {
-    whiteSpace = "pre-wrap";
-    wordBreak = "break-word";
-  }
  Object.assign(editable.style, {
    position: "absolute",
    display: "inline-block",
@@ -263,72 +122,23 @@ export const textWysiwyg = ({
    resize: "none",
    background: "transparent",
    overflow: "hidden",
+    // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
+    whiteSpace: "pre",
    // must be specified because in dark mode canvas creates a stacking context
    zIndex: "var(--zIndex-wysiwyg)",
-    wordBreak,
-    // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
-    whiteSpace,
-    overflowWrap: "break-word",
  });
+
  updateWysiwygStyle();

  if (onChange) {
    editable.oninput = () => {
-      const updatedElement = Scene.getScene(element)?.getElement(
-        id,
-      ) as ExcalidrawTextElement;
-      const font = getFontString(updatedElement);
-      // using scrollHeight here since we need to calculate
-      // number of lines so cannot use editable.style.height
-      // 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
-      // first line as well as setting height to "auto"
-      // doubles the height as soon as user starts typing
-      if (isBoundToContainer(element) && lines > 1) {
-        let height = "auto";
-
-        if (lines === 2) {
-          const container = getContainerElement(element);
-          const actualLineCount = wrapText(
-            editable.value,
-            font,
-            container!.width,
-          ).split("\n").length;
-
-          // This is browser behaviour when setting height to "auto"
-          // It sets the height needed for 2 lines even if actual
-          // line count is 1 as mentioned above as well
-          // hence reducing the height by half if actual line count is 1
-          // so single line aligns vertically when deleting
-          if (actualLineCount === 1) {
-            height = `${editable.scrollHeight / 2}px`;
-          }
-        }
-        editable.style.height = height;
-        editable.style.height = `${editable.scrollHeight}px`;
-      }
      onChange(normalizeText(editable.value));
    };
  }

  editable.onkeydown = (event) => {
    event.stopPropagation();
-
-    if (!event.shiftKey && actionZoomIn.keyTest(event)) {
-      event.preventDefault();
-      app.actionManager.executeAction(actionZoomIn);
-      updateWysiwygStyle();
-    } else if (!event.shiftKey && actionZoomOut.keyTest(event)) {
-      event.preventDefault();
-      app.actionManager.executeAction(actionZoomOut);
-      updateWysiwygStyle();
-    } else if (actionDecreaseFontSize.keyTest(event)) {
-      app.actionManager.executeAction(actionDecreaseFontSize);
-    } else if (actionIncreaseFontSize.keyTest(event)) {
-      app.actionManager.executeAction(actionIncreaseFontSize);
-    } else if (event.key === KEYS.ESCAPE) {
+    if (event.key === KEYS.ESCAPE) {
      event.preventDefault();
      submittedViaKeyboard = true;
      handleSubmit();
@@ -364,7 +174,7 @@ export const textWysiwyg = ({
    const linesStartIndices = getSelectedLinesStartIndices();

    let value = editable.value;
-    linesStartIndices.forEach((startIndex: number) => {
+    linesStartIndices.forEach((startIndex) => {
      const startValue = value.slice(0, startIndex);
      const endValue = value.slice(startIndex);

@@ -422,7 +232,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;
@@ -464,43 +274,9 @@ export const textWysiwyg = ({
    // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
    // wysiwyg on update
    cleanup();
-    const updateElement = Scene.getScene(element)?.getElement(
-      element.id,
-    ) as ExcalidrawTextElement;
-    if (!updateElement) {
-      return;
-    }
-    let text = editable.value;
-    const container = getContainerElement(updateElement);
-
-    if (container) {
-      text = updateElement.text;
-      if (editable.value) {
-        const boundTextElementId = getBoundTextElementId(container);
-        if (!boundTextElementId || boundTextElementId !== element.id) {
-          mutateElement(container, {
-            boundElements: (container.boundElements || []).concat({
-              type: "text",
-              id: element.id,
-            }),
-          });
-        }
-      } else {
-        mutateElement(container, {
-          boundElements: container.boundElements?.filter(
-            (ele) =>
-              !isTextElement(
-                ele as ExcalidrawTextElement | ExcalidrawLinearElement,
-              ),
-          ),
-        });
-      }
-    }
-
    onSubmit({
-      text,
+      text: normalizeText(editable.value),
      viaKeyboard: submittedViaKeyboard,
-      originalText: editable.value,
    });
  };

@@ -529,75 +305,27 @@ export const textWysiwyg = ({
    editable.remove();
  };

-  const bindBlurEvent = (event?: MouseEvent) => {
+  const bindBlurEvent = () => {
    window.removeEventListener("pointerup", bindBlurEvent);
    // Deferred so that the pointerdown that initiates the wysiwyg doesn't
    // trigger the blur on ensuing pointerup.
    // Also to handle cases such as picking a color which would trigger a blur
    // in that same tick.
-    const target = event?.target;
-
-    const isTargetColorPicker =
-      target instanceof HTMLInputElement &&
-      target.closest(".color-picker-input") &&
-      isWritableElement(target);
-
-    const isShapeActionsPanel =
-      (target instanceof HTMLElement || target instanceof SVGElement) &&
-      (target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) ||
-        target.closest(`.${CLASSES.SHAPE_ACTIONS_MOBILE_MENU}`) ||
-        target.closest(`.${CLASSES.MOBILE_TOOLBAR}`));
-
    setTimeout(() => {
-      editable.onblur = () => {
-        app.setState({
-          toastMessage:
-            target instanceof HTMLElement
-              ? target.tagName ?? "no tagName"
-              : "not an HTMLElement",
-        });
-        if (isShapeActionsPanel) {
-          return;
-        }
-        app.setState({
-          toastMessage: "debug: onblur",
-        });
-        handleSubmit();
-      };
-      if (target && (isTargetColorPicker || isShapeActionsPanel)) {
-        target.onblur = () => {
-          editable.focus();
-        };
-      }
+      editable.onblur = handleSubmit;
      // case: clicking on the same property → no change → no update → no focus
-      if (!isTargetColorPicker) {
-        editable.focus();
-      }
+      editable.focus();
    });
  };

  // prevent blur when changing properties from the menu
  const onPointerDown = (event: MouseEvent) => {
-    const isTargetColorPicker =
-      event.target instanceof HTMLInputElement &&
-      event.target.closest(".color-picker-input") &&
-      isWritableElement(event.target);
-    const isShapeActionsPanel =
+    if (
      (event.target instanceof HTMLElement ||
        event.target instanceof SVGElement) &&
-      (event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) ||
-        event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MOBILE_MENU}`) ||
-        event.target.closest(`.${CLASSES.MOBILE_TOOLBAR}`));
-    if (
-      ((event.target instanceof HTMLElement ||
-        event.target instanceof SVGElement) &&
-        isShapeActionsPanel &&
-        !isWritableElement(event.target)) ||
-      isTargetColorPicker
+      event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
+      !isWritableElement(event.target)
    ) {
-      app.setState({
-        toastMessage: "debug: onPointerDown",
-      });
      editable.onblur = null;
      window.addEventListener("pointerup", bindBlurEvent);
      // handle edge-case where pointerup doesn't fire e.g. due to user
@@ -609,12 +337,7 @@ export const textWysiwyg = ({
  // handle updates of textElement properties of editing element
  const unbindUpdate = Scene.getScene(element)!.addCallback(() => {
    updateWysiwygStyle();
-    const isColorPickerActive = !!document.activeElement?.closest(
-      ".color-picker-input",
-    );
-    if (!isColorPickerActive) {
-      editable.focus();
-    }
+    editable.focus();
  });

  // ---------------------------------------------------------------------------
@@ -3,7 +3,6 @@ import { ExcalidrawElement, PointerType } from "./types";
 import { getElementAbsoluteCoords, Bounds } from "./bounds";
 import { rotate } from "../math";
 import { Zoom } from "../types";
-import { isTextElement } from ".";

 export type TransformHandleDirection =
  | "n"
@@ -243,7 +242,7 @@ export const getTransformHandles = (
        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
      }
    }
-  } else if (isTextElement(element)) {
+  } else if (element.type === "text") {
    omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
  }

@@ -7,8 +7,6 @@ import {
  ExcalidrawFreeDrawElement,
  InitializedExcalidrawImageElement,
  ExcalidrawImageElement,
-  ExcalidrawTextElementWithContainer,
-  ExcalidrawTextContainer,
 } from "./types";

 export const isGenericElement = (
@@ -87,20 +85,7 @@ export const isBindableElement = (
    (element.type === "rectangle" ||
      element.type === "diamond" ||
      element.type === "ellipse" ||
-      element.type === "image" ||
-      (element.type === "text" && !element.containerId))
-  );
-};
-
-export const isTextBindableContainer = (
-  element: ExcalidrawElement | null,
-): element is ExcalidrawTextContainer => {
-  return (
-    element != null &&
-    (element.type === "rectangle" ||
-      element.type === "diamond" ||
-      element.type === "ellipse" ||
-      element.type === "image")
+      element.type === "text")
  );
 };

@@ -115,20 +100,3 @@ export const isExcalidrawElement = (element: any): boolean => {
    element?.type === "line"
  );
 };
-
-export const hasBoundTextElement = (
-  element: ExcalidrawElement | null,
-): element is ExcalidrawBindableElement => {
-  return (
-    isBindableElement(element) &&
-    !!element.boundElements?.some(({ type }) => type === "text")
-  );
-};
-
-export const isBoundToContainer = (
-  element: ExcalidrawElement | null,
-): element is ExcalidrawTextElementWithContainer => {
-  return (
-    element !== null && isTextElement(element) && element.containerId !== null
-  );
-};
@@ -1,5 +1,5 @@
 import { Point } from "../types";
-import { FONT_FAMILY, THEME, VERTICAL_ALIGN } from "../constants";
+import { FONT_FAMILY, THEME } from "../constants";

 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid";
@@ -12,9 +12,7 @@ export type PointerType = "mouse" | "pen" | "touch";
 export type StrokeSharpness = "round" | "sharp";
 export type StrokeStyle = "solid" | "dashed" | "dotted";
 export type TextAlign = "left" | "center" | "right";
-
-type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
-export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
+export type VerticalAlign = "top" | "middle";

 type _ExcalidrawElementBase = Readonly<{
  id: string;
@@ -45,16 +43,8 @@ type _ExcalidrawElementBase = Readonly<{
  /** List of groups the element belongs to.
      Ordered from deepest to shallowest. */
  groupIds: readonly GroupId[];
-  /** other elements that are bound to this element */
-  boundElements:
-    | readonly Readonly<{
-        id: ExcalidrawLinearElement["id"];
-        type: "arrow" | "text";
-      }>[]
-    | null;
-  /** epoch (ms) timestamp of last element update */
-  updated: number;
-  link: string | null;
+  /** Ids of (linear) elements that are bound to this element. */
+  boundElementIds: readonly ExcalidrawLinearElement["id"][] | null;
 }>;

 export type ExcalidrawSelectionElement = _ExcalidrawElementBase & {
@@ -124,8 +114,6 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
    baseline: number;
    textAlign: TextAlign;
    verticalAlign: VerticalAlign;
-    containerId: ExcalidrawGenericElement["id"] | null;
-    originalText: string;
  }>;

 export type ExcalidrawBindableElement =
@@ -135,16 +123,6 @@ export type ExcalidrawBindableElement =
  | ExcalidrawTextElement
  | ExcalidrawImageElement;

-export type ExcalidrawTextContainer =
-  | ExcalidrawRectangleElement
-  | ExcalidrawDiamondElement
-  | ExcalidrawEllipseElement
-  | ExcalidrawImageElement;
-
-export type ExcalidrawTextElementWithContainer = {
-  containerId: ExcalidrawTextContainer["id"];
-} & ExcalidrawTextElement;
-
 export type PointBinding = {
  elementId: ExcalidrawBindableElement["id"];
  focus: number;
@@ -4,8 +4,6 @@ export const INITIAL_SCENE_UPDATE_TIMEOUT = 5000;
 export const FILE_UPLOAD_TIMEOUT = 300;
 export const LOAD_IMAGES_TIMEOUT = 500;
 export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
-export const SYNC_BROWSER_TABS_TIMEOUT = 50;
-export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps

 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)
@@ -27,13 +25,3 @@ export const FIREBASE_STORAGE_PREFIXES = {
 };

 export const ROOM_ID_BYTES = 10;
-
-export const STORAGE_KEYS = {
-  LOCAL_STORAGE_ELEMENTS: "excalidraw",
-  LOCAL_STORAGE_APP_STATE: "excalidraw-state",
-  LOCAL_STORAGE_COLLAB: "excalidraw-collab",
-  LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG: "collabLinkForceLoadFlag",
-  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
-  VERSION_DATA_STATE: "version-dataState",
-  VERSION_FILES: "version-files",
-} as const;
@@ -16,20 +16,18 @@ import {
  withBatchedUpdates,
 } from "../../utils";
 import {
-  CURSOR_SYNC_TIMEOUT,
  FILE_UPLOAD_MAX_BYTES,
  FIREBASE_STORAGE_PREFIXES,
  INITIAL_SCENE_UPDATE_TIMEOUT,
  LOAD_IMAGES_TIMEOUT,
  SCENE,
-  STORAGE_KEYS,
  SYNC_FULL_SCENE_INTERVAL_MS,
 } from "../app_constants";
 import {
  generateCollaborationLinkData,
  getCollaborationLink,
-  getCollabServer,
  SocketUpdateDataSource,
+  SOCKET_SERVER,
 } from "../data";
 import {
  isSavedToFirebase,
@@ -41,6 +39,7 @@ import {
 import {
  importUsernameFromLocalStorage,
  saveUsernameToLocalStorage,
+  STORAGE_KEYS,
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
@@ -66,7 +65,6 @@ import {
  reconcileElements as _reconcileElements,
 } from "./reconciliation";
 import { decryptData } from "../../data/encryption";
-import { resetBrowserStateVersions } from "../data/tabSync";

 interface CollabState {
  modalIsShown: boolean;
@@ -88,7 +86,6 @@ export interface CollabAPI {
  onCollabButtonClick: CollabInstance["onCollabButtonClick"];
  broadcastElements: CollabInstance["broadcastElements"];
  fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
-  setUsername: (username: string) => void;
 }

 interface Props {
@@ -249,10 +246,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {

    this.saveCollabRoomToFirebase();
    if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
-      // hack to ensure that we prefer we disregard any new browser state
-      // that could have been saved in other tabs while we were collaborating
-      resetBrowserStateVersions();
-
      window.history.pushState({}, APP_NAME, window.location.origin);
      this.destroySocketClient();
      trackEvent("share", "room closed");
@@ -354,29 +347,32 @@ class CollabWrapper extends PureComponent<Props, CollabState> {

    this.isCollaborating = true;

-    const { default: socketIOClient } = await import(
+    const { default: socketIOClient }: any = await import(
      /* webpackChunkName: "socketIoClient" */ "socket.io-client"
    );

-    try {
-      const socketServerData = await getCollabServer();
+    this.portal.open(socketIOClient(SOCKET_SERVER), roomId, roomKey);

-      this.portal.socket = this.portal.open(
-        socketIOClient(socketServerData.url, {
-          transports: socketServerData.polling
-            ? ["websocket", "polling"]
-            : ["websocket"],
-        }),
-        roomId,
-        roomKey,
-      );
-    } catch (error: any) {
-      console.error(error);
-      this.setState({ errorMessage: error.message });
-      return null;
-    }
+    if (existingRoomLinkData) {
+      this.excalidrawAPI.resetScene();

-    if (!existingRoomLinkData) {
+      try {
+        const elements = await loadFromFirebase(
+          roomId,
+          roomKey,
+          this.portal.socket,
+        );
+        if (elements) {
+          scenePromise.resolve({
+            elements,
+            scrollToContent: true,
+          });
+        }
+      } catch (error: any) {
+        // log the error and move on. other peers will sync us the scene.
+        console.error(error);
+      }
+    } else {
      const elements = this.excalidrawAPI.getSceneElements().map((element) => {
        if (isImageElement(element) && element.status === "saved") {
          return newElementWith(element, { status: "pending" });
@@ -400,17 +396,14 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    }

    // fallback in case you're not alone in the room but still don't receive
-    // initial SCENE_INIT message
+    // initial SCENE_UPDATE message
    this.socketInitializationTimer = window.setTimeout(() => {
-      this.initializeRoom({
-        roomLinkData: existingRoomLinkData,
-        fetchScene: true,
-      });
+      this.initializeSocket();
      scenePromise.resolve(null);
    }, INITIAL_SCENE_UPDATE_TIMEOUT);

    // All socket listeners are moving to Portal
-    this.portal.socket.on(
+    this.portal.socket!.on(
      "client-broadcast",
      async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
        if (!this.portal.roomKey) {
@@ -428,7 +421,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
            return;
          case SCENE.INIT: {
            if (!this.portal.socketInitialized) {
-              this.initializeRoom({ fetchScene: false });
+              this.initializeSocket();
              const remoteElements = decryptedData.payload.elements;
              const reconciledElements = this.reconcileElements(remoteElements);
              this.handleRemoteSceneUpdate(reconciledElements, {
@@ -482,15 +475,12 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
      },
    );

-    this.portal.socket.on("first-in-room", async () => {
+    this.portal.socket!.on("first-in-room", () => {
      if (this.portal.socket) {
        this.portal.socket.off("first-in-room");
      }
-      const sceneData = await this.initializeRoom({
-        fetchScene: true,
-        roomLinkData: existingRoomLinkData,
-      });
-      scenePromise.resolve(sceneData);
+      this.initializeSocket();
+      scenePromise.resolve(null);
    });

    this.initializeIdleDetector();
@@ -502,45 +492,9 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    return scenePromise;
  };

-  private initializeRoom = async ({
-    fetchScene,
-    roomLinkData,
-  }:
-    | {
-        fetchScene: true;
-        roomLinkData: { roomId: string; roomKey: string } | null;
-      }
-    | { fetchScene: false; roomLinkData?: null }) => {
+  private initializeSocket = () => {
+    this.portal.socketInitialized = true;
    clearTimeout(this.socketInitializationTimer!);
-    if (fetchScene && roomLinkData && this.portal.socket) {
-      this.excalidrawAPI.resetScene();
-
-      try {
-        const elements = await loadFromFirebase(
-          roomLinkData.roomId,
-          roomLinkData.roomKey,
-          this.portal.socket,
-        );
-        if (elements) {
-          this.setLastBroadcastedOrReceivedSceneVersion(
-            getSceneVersion(elements),
-          );
-
-          return {
-            elements,
-            scrollToContent: true,
-          };
-        }
-      } catch (error: any) {
-        // log the error and move on. other peers will sync us the scene.
-        console.error(error);
-      } finally {
-        this.portal.socketInitialized = true;
-      }
-    } else {
-      this.portal.socketInitialized = true;
-    }
-    return null;
  };

  private reconcileElements = (
@@ -604,9 +558,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
      window.clearTimeout(this.idleTimeoutId);
      this.idleTimeoutId = null;
    }
-
    this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
-
    if (!this.activeIntervalId) {
      this.activeIntervalId = window.setInterval(
        this.reportActive,
@@ -681,18 +633,15 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    return this.excalidrawAPI.getSceneElementsIncludingDeleted();
  };

-  onPointerUpdate = throttle(
-    (payload: {
-      pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
-      button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
-      pointersMap: Gesture["pointers"];
-    }) => {
-      payload.pointersMap.size < 2 &&
-        this.portal.socket &&
-        this.portal.broadcastMouseLocation(payload);
-    },
-    CURSOR_SYNC_TIMEOUT,
-  );
+  onPointerUpdate = (payload: {
+    pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
+    button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
+    pointersMap: Gesture["pointers"];
+  }) => {
+    payload.pointersMap.size < 2 &&
+      this.portal.socket &&
+      this.portal.broadcastMouseLocation(payload);
+  };

  onIdleStateChange = (userState: UserIdleState) => {
    this.setState({ userState });
@@ -728,12 +677,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    this.setState({ modalIsShown: false });
  };

-  setUsername = (username: string) => {
-    this.setState({ username });
-  };
-
  onUsernameChange = (username: string) => {
-    this.setUsername(username);
+    this.setState({ username });
    saveUsernameToLocalStorage(username);
  };

@@ -767,7 +712,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    this.contextValue.broadcastElements = this.broadcastElements;
    this.contextValue.fetchImageFilesFromFirebase =
      this.fetchImageFilesFromFirebase;
-    this.contextValue.setUsername = this.setUsername;
    return this.contextValue;
  };

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dwelle	75e2d9e359	remove debug	2021-11-22 23:20:40 +01:00
dwelle	6592517122	import lazily	2021-11-22 22:11:10 +01:00
dwelle	bd953a6287	feat: compress non-transparent PNGs as JPGs and allow larger dimensions	2021-11-22 17:39:59 +01:00