feat: support image background editor [wip]

.env.development

@@ -4,19 +4,5 @@ REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
-# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
+REACT_APP_SOCKET_SERVER_URL=http://localhost:3000
-REACT_APP_WS_SERVER_URL=http://localhost:3002
-
-# set this only if using the collaboration workflow we use on excalidraw.com
-REACT_APP_PORTAL_URL=
-
 REACT_APP_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"}'
-
-# put these in your .env.local, or make sure you don't commit!
-# must be lowercase `true` when turned on
-#
-# whether to enable Service Workers in development
-REACT_APP_DEV_ENABLE_SW=
-# whether to disable live reload / HMR. Usuaully what you want to do when
-# debugging Service Workers.
-REACT_APP_DEV_DISABLE_LIVE_RELOAD=

.env.production

@@ -4,14 +4,8 @@ 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
+REACT_APP_SOCKET_SERVER_URL=https://oss-collab-us1.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_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
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
-
-REACT_APP_PLUS_APP=https://app.excalidraw.com

.github/dependabot.yml

@@ -0,0 +1,37 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"
+    reviewers:
+      - lipis
+    assignees:
+      - lipis
+    open-pull-requests-limit: 20
+
+  - package-ecosystem: npm
+    directory: /src/packages/excalidraw/
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"
+    reviewers:
+      - ad1992
+    assignees:
+      - ad1992
+    open-pull-requests-limit: 20
+
+  - package-ecosystem: npm
+    directory: /src/packages/utils/
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"
+    reviewers:
+      - ad1992
+    assignees:
+      - ad1992
+    open-pull-requests-limit: 20

.github/workflows/autorelease-excalidraw.yml

@@ -1,4 +1,4 @@
-name: Auto release excalidraw next
+name: Auto release @excalidraw/excalidraw-next
 on:
   push:
     branches:
@@ -23,5 +23,4 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Auto release
         run: |
-          yarn add @actions/core
           yarn autorelease

.github/workflows/autorelease-preview.yml

@@ -1,55 +0,0 @@
-name: Auto release excalidraw preview
-on:
-  issue_comment:
-    types: [created, edited]
-
-jobs:
-  Auto-release-excalidraw-preview:
-    name: Auto release preview
-    if: github.event.comment.body == '@excalibot trigger release' && 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 }}"

.github/workflows/build-packages.yml

@@ -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

.github/workflows/publish-docker.yml

@@ -10,16 +10,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout repository
+      - uses: actions/checkout@v2
-        uses: actions/checkout@v3
+      - uses: docker/build-push-action@v2
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Build and push
+          repository: excalidraw/excalidraw
-        uses: docker/build-push-action@v3
+          tag_with_ref: true
-        with:
+          tag_with_sha: true
-          context: .
-          push: true
-          tags: excalidraw/excalidraw:latest

.gitignore

@@ -19,10 +19,7 @@ logs
 node_modules
 npm-debug.log*
 package-lock.json
+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
-

README.md

@@ -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,47 +118,16 @@ 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
 
-##### Install the dependencies
+| Command            | Description                       |
-
+| ------------------ | --------------------------------- |
-```
+| `yarn`             | Install the dependencies          |
-yarn
+| `yarn start`       | Run the project                   |
-```
+| `yarn fix`         | Reformat all files with Prettier  |
-
+| `yarn test`        | Run tests                         |
-##### Run the project
+| `yarn test:update` | Update test snapshots             |
-
+| `yarn test:code`   | Test for formatting with Prettier |
-```
-yarn start
-```
-
-##### Reformat all files with Prettier
-
-```
-yarn fix
-```
-
-##### Run tests
-
-```
-yarn test
-```
-
-##### Update test snapshots
-
-```
-yarn test:update
-```
-
-##### Test for formatting with Prettier
-
-```
-yarn test:code
-```
 
 #### Docker Compose
 

dev-docs/.gitignore

@@ -1,20 +0,0 @@
-# Dependencies
-/node_modules
-
-# Production
-/build
-
-# Generated files
-.docusaurus
-.cache-loader
-
-# Misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

dev-docs/README.md

@@ -1,41 +0,0 @@
-# Website
-
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

dev-docs/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
-};

dev-docs/docs/codebase/overview.md

@@ -1,6 +0,0 @@
----
-sidebar_position: 1
-title: Overview
----
-
-In development. For now, refer to [excalidraw Readme](https://github.com/excalidraw/excalidraw/blob/master/README.md).

dev-docs/docs/get-started.md

@@ -1,8 +0,0 @@
----
-sidebar_position: 1
-title: Introduction
----
-
-Want to integrate Excalidraw into your app? Head over to the [package docs](/docs/package/overview).
-
-If you're looking into the Excalidraw codebase itself, start [here](/docs/codebase/overview).

dev-docs/docs/package/overview.md

@@ -1,6 +0,0 @@
----
-sidebar_position: 1
-title: Overview
----
-
-In development. For now, refer to [excalidraw package readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md).

dev-docs/docusaurus.config.js

@@ -1,121 +0,0 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
-
-/** @type {import('@docusaurus/types').Config} */
-const config = {
-  title: "Excalidraw developer docs",
-  tagline:
-    "For Excalidraw contributors or those integrating the Excalidraw editor",
-  url: "https://docs.excalidraw.com.com",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
-  organizationName: "Excalidraw", // Usually your GitHub org/user name.
-  projectName: "excalidraw", // Usually your repo name.
-
-  // Even if you don't use internalization, you can use this field to set useful
-  // metadata like html lang. For example, if your site is Chinese, you may want
-  // to replace "en" with "zh-Hans".
-  i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
-  },
-
-  presets: [
-    [
-      "classic",
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
-        docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
-          editUrl: "https://github.com/excalidraw/docs/tree/master/",
-        },
-        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
-        },
-      }),
-    ],
-  ],
-
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      navbar: {
-        title: "Excalidraw Docs",
-        logo: {
-          alt: "Excalidraw Logo",
-          src: "img/logo.svg",
-        },
-        items: [
-          {
-            type: "doc",
-            docId: "get-started",
-            position: "left",
-            label: "Get started",
-          },
-          {
-            to: "https://blog.excalidraw.com",
-            label: "Blog",
-            position: "left",
-          },
-          {
-            to: "https://github.com/excalidraw/excalidraw",
-            label: "GitHub",
-            position: "right",
-          },
-        ],
-      },
-      footer: {
-        style: "dark",
-        links: [
-          {
-            title: "Docs",
-            items: [
-              {
-                label: "Get Started",
-                to: "/docs/get-started",
-              },
-            ],
-          },
-          {
-            title: "Community",
-            items: [
-              {
-                label: "Discord",
-                href: "https://discord.gg/UexuTaE",
-              },
-              {
-                label: "Twitter",
-                href: "https://twitter.com/excalidraw",
-              },
-            ],
-          },
-          {
-            title: "More",
-            items: [
-              {
-                label: "Blog",
-                to: "https://blog.excalidraw.com",
-              },
-              {
-                label: "GitHub",
-                to: "https://github.com/excalidraw/excalidraw",
-              },
-            ],
-          },
-        ],
-        copyright: `Made with ❤️ Built with Docusaurus`,
-      },
-      prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
-      },
-    }),
-};
-
-module.exports = config;

dev-docs/package.json

@@ -1,46 +0,0 @@
-{
-  "name": "docs",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "docusaurus": "docusaurus",
-    "start": "docusaurus start --port 3003",
-    "build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
-  },
-  "dependencies": {
-    "@docusaurus/core": "2.0.0-rc.1",
-    "@docusaurus/preset-classic": "2.0.0-rc.1",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
-  },
-  "browserslist": {
-    "production": [
-      ">0.5%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "engines": {
-    "node": ">=16.14"
-  }
-}

dev-docs/sidebars.js

@@ -1,31 +0,0 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
-// @ts-check
-
-/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
-const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['hello'],
-    },
-  ],
-   */
-};
-
-module.exports = sidebars;

dev-docs/src/components/Homepage/index.js

@@ -1,62 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-const FeatureList = [
-  {
-    title: "Learn how Excalidraw works",
-    Svg: require("@site/static/img/undraw_innovative.svg").default,
-    description: (
-      <>Want to contribute to Excalidraw but got lost in the codebase?</>
-    ),
-  },
-  {
-    title: "Integrate Excalidraw",
-    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
-    description: (
-      <>
-        Want to build your own app powered by Excalidraw by don't know where to
-        start?
-      </>
-    ),
-  },
-  {
-    title: "Help us improve",
-    Svg: require("@site/static/img/undraw_add_files.svg").default,
-    description: (
-      <>
-        Are the docs missing something? Anything you had trouble understanding
-        or needs an explanation? Come contribute to the docs to make them even
-        better!
-      </>
-    ),
-  },
-];
-
-function Feature({ Svg, title, description }) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures() {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

dev-docs/src/components/Homepage/index.tsx

@@ -1,70 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import styles from "./styles.module.css";
-
-type FeatureItem = {
-  title: string;
-  Svg: React.ComponentType<React.ComponentProps<"svg">>;
-  description: JSX.Element;
-};
-
-const FeatureList: FeatureItem[] = [
-  {
-    title: "Easy to Use",
-    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: "Focus on What Matters",
-    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: "Powered by React",
-    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({ title, Svg, description }: FeatureItem) {
-  return (
-    <div className={clsx("col col--4")}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
-      </div>
-    </div>
-  );
-}
-
-export default function HomepageFeatures(): JSX.Element {
-  return (
-    <section className={styles.features}>
-      <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}

dev-docs/src/components/Homepage/styles.module.css

@@ -1,11 +0,0 @@
-.features {
-  display: flex;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
-}
-
-.featureSvg {
-  height: 200px;
-  width: 200px;
-}

dev-docs/src/css/custom.css

@@ -1,43 +0,0 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/* You can override the default Infima variables here. */
-:root {
-  --ifm-color-primary: #6965db;
-  --ifm-color-primary-dark: #5b57d1;
-  --ifm-color-primary-darker: #5b57d1;
-  --ifm-color-primary-darkest: #4a47b1;
-  --ifm-color-primary-light: #5b57d1;
-  --ifm-color-primary-lighter: #5b57d1;
-  --ifm-color-primary-lightest: #5b57d1;
-  --ifm-code-font-size: 95%;
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: #5650f0;
-  --ifm-color-primary-dark: #4b46d8;
-  --ifm-color-primary-darker: #4b46d8;
-  --ifm-color-primary-darkest: #3e39be;
-  --ifm-color-primary-light: #3f3d64;
-  --ifm-color-primary-lighter: #3f3d64;
-  --ifm-color-primary-lightest: #3f3d64;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
-[data-theme="dark"] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-[data-theme="dark"] .navbar__logo {
-  filter: invert(93%) hue-rotate(180deg);
-}

dev-docs/src/pages/index.js

@@ -1,42 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
-import HomepageFeatures from "@site/src/components/Homepage";
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/get-started"
-          >
-            Get started
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-export default function Home() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}

dev-docs/src/pages/index.module.css

@@ -1,27 +0,0 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-[data-theme="dark"] .heroBanner {
-  color: #fff;
-}
-
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

dev-docs/src/pages/index.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
-import Link from "@docusaurus/Link";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
-import HomepageFeatures from "@site/src/components/Homepage";
-
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <header className={clsx("hero hero--primary", styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/get-started"
-          >
-            Get started
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
-
-export default function Home() {
-  const { siteConfig } = useDocusaurusContext();
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
-    >
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
-    </Layout>
-  );
-}

dev-docs/src/pages/markdown-page.md

@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.

dev-docs/static/img/logo.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 80 180" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
-	<path d="M22.197 150.382c-4.179-3.359-10.618-9.051-15.702-13.946l-4.01-3.813.734-5.009c.396-2.732 1.13-8.083 1.582-11.839.508-3.757 1.017-7.286 1.186-7.798.226-.683 0-1.025-.621-1.025-1.073 0-1.13.285 1.807-9.107a617.602 617.602 0 0 1 2.203-7.229c.113-.398.565-.569 1.073-.398.508.227.791.683.621 1.081-.169.455.113.911.565 1.082.621.227.565.683-.395 2.333-1.525 2.562-5.422 24.419-5.648 31.477-.17 5.009-.17 5.066 1.92 7.912 2.033 2.789 6.721 7.001 13.951 12.351 2.033 1.537 4.067 3.245 4.631 3.814.848 1.024 1.243.74 8.36-6.887 4.123-4.383 8.698-8.88 10.166-10.018l2.711-2.049-2.089-4.44c-1.13-2.391-5.705-11.612-10.223-20.377-9.433-18.442-7.513-16.678-18.47-16.849l-7.117-.056-2.372-2.733c-2.485-2.903-2.824-3.984-1.638-5.805.452-.627.791-1.651.791-2.277 0-1.025.395-1.196 2.655-1.309 1.412-.057 2.711-.228 2.88-.399.17-.171.396-3.7.565-7.855l.226-7.513-3.784-8.197C2.485 39.844 0 33.583 0 31.533c0-1.081.226-1.992.452-1.992.565 0 .565.057 23.553 48.382 10.675 22.426 20.785 43.544 22.479 47.016 1.695 3.472 3.22 6.659 3.333 7.115.113.512-3.785 4.439-9.998 9.961-5.591 5.008-10.505 9.562-10.957 10.074-1.299 1.594-3.219 1.082-6.665-1.707Zm1.921-65.458c-2.599-5.066-2.712-5.123-9.828-5.464-6.27-.342-6.383-.285-6.383.911 0 .683-.226 1.593-.508 2.049-.339.512-.113 1.423.678 2.675l1.242 1.935h5.649c3.106.057 6.664.285 7.907.512 1.243.228 2.316.342 2.429.285.113-.057-.452-1.366-1.186-2.903Zm-4.745-9.107c-.452-1.195-1.638-3.7-2.598-5.578-1.581-3.188-1.751-3.301-2.146-1.992-.226.797-.396 3.13-.452 5.236-.057 4.155-.17 4.098 4.575 4.383l1.525.057-.904-2.106Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
-	<path d="M23.892 136.835c-1.017-.74-1.299-1.48-1.299-3.358 0-2.22.169-2.562 1.694-3.188 1.525-.626 1.92-.569 3.671.626 2.316 1.594 2.373 1.992.678 4.554-1.468 2.22-2.937 2.618-4.744 1.366Zm3.219-2.049c.904-1.594.339-2.789-1.355-2.789-1.525 0-2.203 1.536-1.356 3.073.678 1.253 1.977 1.139 2.711-.284ZM59.306 124.028c0-.285-.339-.569-.735-.569-.339 0-1.299-1.594-2.033-3.529-2.259-5.92-24.852-50.943-24.908-49.52 0 .74-.339 1.252-.904 1.252-.791 0-.904-.456-.565-2.675.339-2.562.113-3.131-7.907-18.841-4.519-8.936-9.376-18.271-10.788-20.775-1.469-2.619-2.598-5.465-2.711-6.66-.17-2.049.056-2.334 4.97-6.603 2.824-2.504 6.439-5.635 8.02-7.058C28.862 2.504 32.194-.114 33.098.057c1.356.228 22.31 22.369 22.367 23.622 0 .569-1.017 9.221-2.259 19.238-2.147 17.076-4.18 37.055-3.954 38.99.169 1.196-.678 7.229-1.299 9.847-.509 2.05-.283 2.903 3.784 12.238 2.372 5.521 5.479 12.295 6.834 15.027 1.299 2.732 2.429 5.123 2.429 5.294 0 .17-.395.284-.847.284-.452 0-.847-.228-.847-.569ZM46.315 81.509c.621-3.984 1.864-13.547 2.767-21.231 1.751-14.116 3.785-29.769 4.349-33.753.339-1.993.113-2.391-3.558-6.489-6.382-7.229-13.16-14.344-15.476-16.165l-2.146-1.708-11.014 10.359C11.07 21.971 10.223 22.939 10.844 24.077c.339.626 3.22 5.92 6.383 11.725 3.163 5.806 7.342 13.547 9.263 17.19 1.977 3.7 3.784 6.887 4.123 7.058.395.228.508-5.521.395-17.759-.226-18.271-.169-18.328 1.638-17.929.226 0 .396 9.221.396 20.434v20.377l5.93 11.953c3.276 6.603 5.987 11.896 6.1 11.84.113-.058.678-3.416 1.243-7.457Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
-</svg>

dev-docs/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": "."
-  }
-}

firebase-project/storage.rules

@@ -1,11 +1,12 @@
 rules_version = '2';
 service firebase.storage {
   match /b/{bucket}/o {
-    match /{files}/rooms/{room}/{file} {
+    match /{migrations} {
-    	allow get, write: if true;
+      match /{scenes}/{scene} {
-    }
+      	allow get, write: if true;
-    match /{files}/shareLinks/{shareLink}/{file} {
+        // redundant, but let's be explicit'
-    	allow get, write: if true;
+        allow list: if false;
+      }
     }
   }
 }

package.json

@@ -21,26 +21,23 @@
   "dependencies": {
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/jest-dom": "5.15.1",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "12.1.2",
-    "@tldraw/vec": "1.7.1",
+    "@tldraw/vec": "1.1.5",
-    "@types/jest": "27.4.0",
+    "@types/jest": "27.0.3",
     "@types/pica": "5.1.3",
-    "@types/react": "18.0.15",
+    "@types/react": "17.0.37",
-    "@types/react-dom": "18.0.6",
+    "@types/react-dom": "17.0.11",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.29.1",
+    "browser-fs-access": "0.23.0",
     "clsx": "1.1.1",
-    "cross-env": "7.0.3",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
-    "http-server": "14.1.1",
+    "i18next-browser-languagedetector": "6.1.2",
-    "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "image-blob-reduce": "3.0.1",
-    "jotai": "1.6.4",
     "lodash.throttle": "4.1.1",
-    "nanoid": "3.3.3",
+    "nanoid": "3.1.30",
     "open-color": "1.9.1",
     "pako": "1.0.11",
     "perfect-freehand": "1.0.16",
@@ -49,34 +46,35 @@
     "png-chunks-extract": "1.0.0",
     "points-on-curve": "0.2.0",
     "pwacompat": "2.0.17",
-    "react": "18.2.0",
+    "react": "17.0.2",
-    "react-dom": "18.2.0",
+    "react-dom": "17.0.2",
     "react-scripts": "4.0.3",
     "roughjs": "4.5.2",
-    "sass": "1.51.0",
+    "sass": "1.43.5",
     "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.7",
+    "@types/lodash.throttle": "4.1.6",
-    "@types/pako": "1.0.3",
+    "@types/pako": "1.0.2",
-    "@types/resize-observer-browser": "0.1.7",
+    "@types/resize-observer-browser": "0.1.6",
-    "chai": "4.3.6",
+    "chai": "4.3.4",
-    "dotenv": "16.0.1",
+    "dotenv": "10.0.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.3.1",
+    "firebase-tools": "9.23.0",
     "husky": "7.0.4",
-    "jest-canvas-mock": "2.4.0",
+    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.3.7",
+    "lint-staged": "12.1.2",
     "pepjs": "0.5.3",
-    "prettier": "2.6.2",
+    "prettier": "2.5.0",
-    "rewire": "6.0.0"
+    "rewire": "5.0.0"
   },
   "resolutions": {
-    "@typescript-eslint/typescript-estree": "5.10.2"
+    "@typescript-eslint/typescript-estree": "5.3.0"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -93,11 +91,10 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true react-scripts build",
+    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
-    "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
+    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build:prebuild": "node ./scripts/prebuild.js",
+    "build": "yarn build:app && yarn build:version",
-    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
@@ -107,7 +104,6 @@
     "prepare": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
-    "start:build": "npm run build && npx http-server build -a localhost -p 3001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
@@ -116,8 +112,6 @@
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --updateSnapshot --watchAll=false",
     "test": "yarn test:app",
-    "autorelease": "node scripts/autorelease.js",
+    "autorelease": "node scripts/autorelease.js"
-    "prerelease": "node scripts/prerelease.js",
-    "release": "node scripts/release.js"
   }
 }

public/index.html

@@ -52,25 +52,6 @@
       content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
 
-    <script>
-      // Redirect Excalidraw+ users which have auto-redirect enabled.
-      //
-      // Redirect only the bare root path, so link/room/library urls are not
-      // redirected.
-      //
-      // Putting into index.html for best performance (can't redirect on server
-      // due to location.hash checks).
-      if (
-        window.location.pathname === "/" &&
-        !window.location.hash &&
-        !window.location.search &&
-        // if its present redirect
-        document.cookie.includes("excplus-autoredirect=true")
-      ) {
-        window.location.href = "https://app.excalidraw.com";
-      }
-    </script>
-
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <!-- Excalidraw version -->
@@ -91,6 +72,12 @@
       crossorigin="anonymous"
     />
 
+    <link
+      href="%REACT_APP_SOCKET_SERVER_URL%/socket.io"
+      rel="preconnect"
+      crossorigin="anonymous"
+    />
+
     <link
       rel="manifest"
       href="manifest.json"
@@ -98,22 +85,6 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
-    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD === "true") { %>
-    <script>
-      {
-        const _WebSocket = window.WebSocket;
-        window.WebSocket = function (url) {
-          if (/ws:\/\/localhost:.+?\/sockjs-node/.test(url)) {
-            console.info(
-              "[!!!] Live reload is disabled via process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD [!!!]",
-            );
-          } else {
-            return new _WebSocket(url);
-          }
-        };
-      }
-    </script>
-    <% } %>
     <script>
       window.EXCALIDRAW_ASSET_PATH = "/";
       // setting this so that libraries installation reuses this window tab.
@@ -159,6 +130,26 @@
         user-select: none;
       }
 
+      .LoadingMessage {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .LoadingMessage span {
+        background-color: var(--button-gray-1);
+        border-radius: 5px;
+        padding: 0.8em 1.2em;
+        color: var(--popup-text-color);
+        font-size: 1.3em;
+      }
       #root {
         height: 100%;
         -webkit-touch-callout: none;
@@ -167,10 +158,8 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-      }
 
-      @media screen and (min-width: 1200px) {
+        @media screen and (min-width: 1200px) {
-        #root {
           -webkit-touch-callout: default;
           -webkit-user-select: auto;
           -khtml-user-select: auto;
@@ -187,6 +176,10 @@
     <header>
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
-    <div id="root"></div>
+    <div id="root">
+      <div class="LoadingMessage">
+        <span>Loading scene...</span>
+      </div>
+    </div>
   </body>
 </html>

scripts/autorelease.js

@@ -1,43 +1,32 @@
 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`;
 const pkg = require(excalidrawPackage);
-const isPreview = process.argv.slice(2)[0] === "preview";
 
 const getShortCommitHash = () => {
   return execSync("git rev-parse --short HEAD").toString().trim();
 };
 
 const publish = () => {
-  const tag = isPreview ? "preview" : "next";
-
   try {
     execSync(`yarn  --frozen-lockfile`);
     execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
     execSync(`yarn run build:umd`, { cwd: excalidrawDir });
-    execSync(`yarn --cwd ${excalidrawDir} publish --tag ${tag}`);
+    execSync(`yarn --cwd ${excalidrawDir} publish`);
-    console.info(`Published ${pkg.name}@${tag}🎉`);
-    core.setOutput(
-      "result",
-      `**Preview version has been shipped** :rocket:
-    You can use [@excalidraw/excalidraw@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw/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/;
 
@@ -48,25 +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
-  let version = `${pkg.version}-${getShortCommitHash()}`;
+  pkg.version = `${pkg.version}-${getShortCommitHash()}`;
-
+  pkg.name = "@excalidraw/excalidraw-next";
-  // update readme
-
-  if (isPreview) {
-    // use pullNumber-commithash as the version for preview
-    const pullRequestNumber = process.argv.slice(3)[0];
-    version = `${pkg.version}-${pullRequestNumber}-${getShortCommitHash()}`;
-  }
-  pkg.version = version;
-
   fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");
 
-  console.info("Publish in progress...");
+  // update readme
+  const data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
   publish();
 });

scripts/buildDocs.js

@@ -1,21 +0,0 @@
-const { exec } = require("child_process");
-
-// 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);
-    process.exit(1);
-  }
-  const changedFiles = stdout.trim().split("\n");
-
-  const docFiles = changedFiles.filter((file) => {
-    return file.indexOf("docs") >= 0;
-  });
-
-  if (!docFiles.length) {
-    console.info("Skipping building docs as no valid diff found");
-    process.exit(0);
-  }
-  // Exit code 1 to build the docs in ignoredBuildStep
-  process.exit(1);
-});

scripts/locales-coverage-description.js

@@ -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",
@@ -36,7 +35,6 @@ const crowdinMap = {
   "ru-RU": "en-ru",
   "si-LK": "en-silk",
   "sk-SK": "en-sk",
-  "sl-SI": "en-sl",
   "sv-SE": "en-sv",
   "ta-IN": "en-ta",
   "tr-TR": "en-tr",
@@ -44,12 +42,9 @@ 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",
-  "vi-vn": "en-vi",
-  "mr-in": "en-mr",
 };
 
 const flags = {
@@ -74,7 +69,6 @@ const flags = {
   "kab-KAB": "🏳",
   "kk-KZ": "🇰🇿",
   "ko-KR": "🇰🇷",
-  "lt-LT": "🇱🇹",
   "lv-LV": "🇱🇻",
   "my-MM": "🇲🇲",
   "nb-NO": "🇳🇴",
@@ -89,7 +83,6 @@ const flags = {
   "ru-RU": "🇷🇺",
   "si-LK": "🇱🇰",
   "sk-SK": "🇸🇰",
-  "sl-SI": "🇸🇮",
   "sv-SE": "🇸🇪",
   "ta-IN": "🇮🇳",
   "tr-TR": "🇹🇷",
@@ -97,9 +90,6 @@ const flags = {
   "zh-CN": "🇨🇳",
   "zh-HK": "🇭🇰",
   "zh-TW": "🇹🇼",
-  "eu-ES": "🇪🇦",
-  "vi-VN": "🇻🇳",
-  "mr-IN": "🇮🇳",
 };
 
 const languages = {
@@ -112,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",
@@ -125,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",
@@ -140,7 +128,6 @@ const languages = {
   "ru-RU": "Русский",
   "si-LK": "සිංහල",
   "sk-SK": "Slovenčina",
-  "sl-SI": "Slovenščina",
   "sv-SE": "Svenska",
   "ta-IN": "Tamil",
   "tr-TR": "Türkçe",
@@ -148,8 +135,6 @@ const languages = {
   "zh-CN": "简体中文",
   "zh-HK": "繁體中文 (香港)",
   "zh-TW": "繁體中文",
-  "vi-VN": "Tiếng Việt",
-  "mr-IN": "मराठी",
 };
 
 const percentages = fs.readFileSync(

scripts/prebuild.js

@@ -1,23 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-// for development purposes we want to have the service-worker.js file
-// accessible from the public folder. On build though, we need to compile it
-// and CRA expects that file to be in src/ folder.
-const moveServiceWorkerScript = () => {
-  const oldPath = path.resolve(__dirname, "../public/service-worker.js");
-  const newPath = path.resolve(__dirname, "../src/service-worker.js");
-
-  fs.rename(oldPath, newPath, (error) => {
-    if (error) {
-      throw error;
-    }
-    console.info("public/service-worker.js moved to src/");
-  });
-};
-
-// -----------------------------------------------------------------------------
-
-if (process.env.CI) {
-  moveServiceWorkerScript();
-}

scripts/prerelease.js

@@ -1,37 +0,0 @@
-const fs = require("fs");
-const util = require("util");
-const exec = util.promisify(require("child_process").exec);
-const updateChangelog = require("./updateChangelog");
-
-const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
-const excalidrawPackage = `${excalidrawDir}/package.json`;
-
-const updatePackageVersion = (nextVersion) => {
-  const pkg = require(excalidrawPackage);
-  pkg.version = nextVersion;
-  const content = `${JSON.stringify(pkg, null, 2)}\n`;
-  fs.writeFileSync(excalidrawPackage, content, "utf-8");
-};
-
-const prerelease = async (nextVersion) => {
-  try {
-    await updateChangelog(nextVersion);
-    updatePackageVersion(nextVersion);
-    await exec(`git add -u`);
-    await exec(
-      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
-    );
-
-    console.info("Done!");
-  } catch (error) {
-    console.error(error);
-    process.exit(1);
-  }
-};
-
-const nextVersion = process.argv.slice(2)[0];
-if (!nextVersion) {
-  console.error("Pass the next version to release!");
-  process.exit(1);
-}
-prerelease(nextVersion);

scripts/release.js

@@ -1,44 +1,39 @@
 const fs = require("fs");
-const { execSync } = require("child_process");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+const updateReadme = require("./updateReadme");
+const updateChangelog = require("./updateChangelog");
 
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
-const pkg = require(excalidrawPackage);
 
-const originalReadMe = fs.readFileSync(`${excalidrawDir}/README.md`, "utf8");
+const updatePackageVersion = (nextVersion) => {
-
+  const pkg = require(excalidrawPackage);
-const updateReadme = () => {
+  pkg.version = nextVersion;
-  const excalidrawIndex = originalReadMe.indexOf("### Excalidraw");
+  const content = `${JSON.stringify(pkg, null, 2)}\n`;
-
+  fs.writeFileSync(excalidrawPackage, content, "utf-8");
-  // remove note for stable readme
-  const data = originalReadMe.slice(excalidrawIndex);
-
-  // update readme
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
 };
 
-const publish = () => {
+const release = async (nextVersion) => {
   try {
-    execSync(`yarn  --frozen-lockfile`);
+    updateReadme();
-    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
+    await updateChangelog(nextVersion);
-    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
+    updatePackageVersion(nextVersion);
-    execSync(`yarn --cwd ${excalidrawDir} publish`);
+    await exec(`git add -u`);
+    await exec(
+      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
+    );
+    /* eslint-disable no-console */
+    console.log("Done!");
   } catch (error) {
     console.error(error);
     process.exit(1);
   }
 };
 
-const release = () => {
+const nextVersion = process.argv.slice(2)[0];
-  updateReadme();
+if (!nextVersion) {
-  console.info("Note for stable readme removed");
+  console.error("Pass the next version to release!");
-
+  process.exit(1);
-  publish();
+}
-  console.info(`Published ${pkg.version}!`);
+release(nextVersion);
-
-  // revert readme after release
-  fs.writeFileSync(`${excalidrawDir}/README.md`, originalReadMe, "utf8");
-  console.info("Readme reverted");
-};
-
-release();

scripts/updateChangelog.js

@@ -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]*)\)/);
+    const prNumber = commit.match(/\(#([0-9]*)\)/)[1];
-    if (prMatch) {
-      const prNumber = prMatch[1];
 
-      // return if the changelog already contains the pr number which would happen for package updates
+    // return if the changelog already contains the pr number which would happen for package updates
-      if (existingChangeLog.includes(prNumber)) {
+    if (existingChangeLog.includes(prNumber)) {
-        return;
+      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);
     }
+    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;
 };
 

scripts/updateReadme.js

@@ -0,0 +1,27 @@
+const fs = require("fs");
+
+const updateReadme = () => {
+  const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
+  let data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
+
+  // remove note for unstable release
+  data = data.replace(
+    /<!-- unstable-readme-start-->[\s\S]*?<!-- unstable-readme-end-->/,
+    "",
+  );
+
+  // replace "excalidraw-next" with "excalidraw"
+  data = data.replace(/excalidraw-next/g, "excalidraw");
+  data = data.trim();
+
+  const demoIndex = data.indexOf("### Demo");
+  const excalidrawNextNote =
+    "#### Note\n\n**If you don't want to wait for the next stable release and try out the unreleased changes you can use [@excalidraw/excalidraw-next](https://www.npmjs.com/package/@excalidraw/excalidraw-next).**\n\n";
+  // Add excalidraw next note to try out for unreleased changes
+  data = data.slice(0, demoIndex) + excalidrawNextNote + data.slice(demoIndex);
+
+  // update readme
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+};
+
+module.exports = updateReadme;

src/actions/actionAddToLibrary.ts

@@ -7,7 +7,6 @@ import { t } from "../i18n";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",
-  trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
@@ -25,9 +24,9 @@ export const actionAddToLibrary = register({
     }
 
     return app.library
-      .getLatestLibrary()
+      .loadLibrary()
       .then((items) => {
-        return app.library.setLibrary([
+        return app.library.saveLibrary([
           {
             id: randomId(),
             status: "unpublished",
@@ -42,7 +41,7 @@ export const actionAddToLibrary = register({
           commitToHistory: false,
           appState: {
             ...appState,
-            toast: { message: t("toast.addedToLibrary") },
+            toastMessage: t("toast.addedToLibrary"),
           },
         };
       })

src/actions/actionAlign.tsx

@@ -43,7 +43,6 @@ const alignSelectedElements = (
 
 export const actionAlignTop = register({
   name: "alignTop",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -73,7 +72,6 @@ export const actionAlignTop = register({
 
 export const actionAlignBottom = register({
   name: "alignBottom",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -103,7 +101,6 @@ export const actionAlignBottom = register({
 
 export const actionAlignLeft = register({
   name: "alignLeft",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -133,8 +130,6 @@ export const actionAlignLeft = register({
 
 export const actionAlignRight = register({
   name: "alignRight",
-  trackEvent: { category: "element" },
-
   perform: (elements, appState) => {
     return {
       appState,
@@ -164,8 +159,6 @@ export const actionAlignRight = register({
 
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
-  trackEvent: { category: "element" },
-
   perform: (elements, appState) => {
     return {
       appState,
@@ -191,7 +184,6 @@ export const actionAlignVerticallyCentered = register({
 
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,

src/actions/actionBoundText.tsx

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

src/actions/actionCanvas.tsx

@@ -1,5 +1,5 @@
 import { ColorPicker } from "../components/ColorPicker";
-import { eraser, zoomIn, zoomOut } from "../components/icons";
+import { zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { THEME, ZOOM_STEP } from "../constants";
@@ -9,26 +9,24 @@ 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, updateActiveTool } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
-import { getDefaultAppState, isEraserActive } from "../appState";
+import { getDefaultAppState } from "../appState";
 import ClearCanvas from "../components/ClearCanvas";
-import clsx from "clsx";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
-  trackEvent: false,
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
       commitToHistory: !!value.viewBackgroundColor,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ appState, updateData }) => {
     return (
       <div style={{ position: "relative" }}>
         <ColorPicker
@@ -41,8 +39,6 @@ export const actionChangeViewBackgroundColor = register({
             updateData({ openPopup: active ? "canvasColorPicker" : null })
           }
           data-testid="canvas-background-picker"
-          elements={elements}
-          appState={appState}
         />
       </div>
     );
@@ -51,7 +47,6 @@ export const actionChangeViewBackgroundColor = register({
 
 export const actionClearCanvas = register({
   name: "clearCanvas",
-  trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     app.imageCache.clear();
     return {
@@ -62,17 +57,12 @@ export const actionClearCanvas = register({
         ...getDefaultAppState(),
         files: {},
         theme: appState.theme,
-        penMode: appState.penMode,
+        elementLocked: appState.elementLocked,
-        penDetected: appState.penDetected,
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
         gridSize: appState.gridSize,
         showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,
-        activeTool:
-          appState.activeTool.type === "image"
-            ? { ...appState.activeTool, type: "selection" }
-            : appState.activeTool,
       },
       commitToHistory: true,
     };
@@ -83,19 +73,17 @@ export const actionClearCanvas = register({
 
 export const actionZoomIn = register({
   name: "zoomIn",
-  trackEvent: { category: "canvas" },
+  perform: (_elements, appState) => {
-  perform: (_elements, appState, _, app) => {
+    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(
+        zoom,
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
-          },
-          appState,
-        ),
       },
       commitToHistory: false,
     };
@@ -119,19 +107,18 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
-  trackEvent: { category: "canvas" },
+  perform: (_elements, appState) => {
-  perform: (_elements, appState, _, app) => {
+    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(
+        zoom,
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
-          },
-          appState,
-        ),
       },
       commitToHistory: false,
     };
@@ -155,18 +142,18 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
-  trackEvent: { category: "canvas" },
+  perform: (_elements, appState) => {
-  perform: (_elements, appState, _, app) => {
     return {
       appState: {
         ...appState,
-        ...getStateForZoom(
+        zoom: getNewZoom(
+          1 as NormalizedZoomValue,
+          appState.zoom,
+          { left: appState.offsetLeft, top: appState.offsetTop },
           {
-            viewportX: appState.width / 2 + appState.offsetLeft,
+            x: appState.width / 2,
-            viewportY: appState.height / 2 + appState.offsetTop,
+            y: appState.height / 2,
-            nextZoom: getNormalizedZoom(1),
           },
-          appState,
         ),
       },
       commitToHistory: false,
@@ -225,12 +212,14 @@ const zoomToFitElements = (
       ? getCommonBounds(selectedElements)
       : getCommonBounds(nonDeletedElements);
 
-  const newZoom = {
+  const zoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
-    value: zoomValueToFitBoundsOnViewport(commonBounds, {
+    width: appState.width,
-      width: appState.width,
+    height: appState.height,
-      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;
@@ -254,7 +243,6 @@ const zoomToFitElements = (
 
 export const actionZoomToSelected = register({
   name: "zoomToSelection",
-  trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, true),
   keyTest: (event) =>
     event.code === CODES.TWO &&
@@ -265,7 +253,6 @@ export const actionZoomToSelected = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
-  trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, false),
   keyTest: (event) =>
     event.code === CODES.ONE &&
@@ -276,7 +263,6 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
-  trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
     return {
       appState: {
@@ -299,49 +285,3 @@ export const actionToggleTheme = register({
   ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });
-
-export const actionErase = register({
-  name: "eraser",
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState) => {
-    let activeTool: AppState["activeTool"];
-
-    if (isEraserActive(appState)) {
-      activeTool = updateActiveTool(appState, {
-        ...(appState.activeTool.lastActiveToolBeforeEraser || {
-          type: "selection",
-        }),
-        lastActiveToolBeforeEraser: null,
-      });
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "eraser",
-        lastActiveToolBeforeEraser: appState.activeTool,
-      });
-    }
-
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        activeTool,
-      },
-      commitToHistory: true,
-    };
-  },
-  keyTest: (event) => event.key === KEYS.E,
-  PanelComponent: ({ elements, appState, updateData, data }) => (
-    <ToolButton
-      type="button"
-      icon={eraser}
-      className={clsx("eraser", { active: isEraserActive(appState) })}
-      title={`${t("toolBar.eraser")}-${getShortcutKey("E")}`}
-      aria-label={t("toolBar.eraser")}
-      onClick={() => {
-        updateData(null);
-      }}
-      size={data?.size || "medium"}
-    ></ToolButton>
-  ),
-});

src/actions/actionClipboard.tsx

@@ -1,23 +1,16 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import {
+import { copyToClipboard } from "../clipboard";
-  copyTextToSystemClipboard,
-  copyToClipboard,
-  probablySupportsClipboardWriteText,
-} from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { getNonDeletedElements } from "../element";
 import { t } from "../i18n";
 
 export const actionCopy = register({
   name: "copy",
-  trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
+    copyToClipboard(getNonDeletedElements(elements), appState, app.files);
-
-    copyToClipboard(selectedElements, appState, app.files);
 
     return {
       commitToHistory: false,
@@ -30,10 +23,9 @@ export const actionCopy = register({
 
 export const actionCut = register({
   name: "cut",
-  trackEvent: { category: "element" },
   perform: (elements, appState, data, app) => {
     actionCopy.perform(elements, appState, data, app);
-    return actionDeleteSelected.perform(elements, appState);
+    return actionDeleteSelected.perform(elements, appState, data, app);
   },
   contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
@@ -41,7 +33,6 @@ export const actionCut = register({
 
 export const actionCopyAsSvg = register({
   name: "copyAsSvg",
-  trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
@@ -82,7 +73,6 @@ export const actionCopyAsSvg = register({
 
 export const actionCopyAsPng = register({
   name: "copyAsPng",
-  trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
@@ -107,16 +97,14 @@ export const actionCopyAsPng = register({
       return {
         appState: {
           ...appState,
-          toast: {
+          toastMessage: t("toast.copyToClipboardAsPng", {
-            message: t("toast.copyToClipboardAsPng", {
+            exportSelection: selectedElements.length
-              exportSelection: selectedElements.length
+              ? t("toast.selection")
-                ? t("toast.selection")
+              : t("toast.canvas"),
-                : t("toast.canvas"),
+            exportColorScheme: appState.exportWithDarkMode
-              exportColorScheme: appState.exportWithDarkMode
+              ? t("buttons.darkMode")
-                ? t("buttons.darkMode")
+              : t("buttons.lightMode"),
-                : t("buttons.lightMode"),
+          }),
-            }),
-          },
         },
         commitToHistory: false,
       };
@@ -134,35 +122,3 @@ export const actionCopyAsPng = register({
   contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
-
-export const copyText = register({
-  name: "copyText",
-  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
-
-    const text = selectedElements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
-    copyTextToSystemClipboard(text);
-    return {
-      commitToHistory: false,
-    };
-  },
-  contextItemPredicate: (elements, appState) => {
-    return (
-      probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, true).some(isTextElement)
-    );
-  },
-  contextItemLabel: "labels.copyText",
-});

src/actions/actionDeleteSelected.tsx

@@ -12,7 +12,6 @@ import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import { isBoundToContainer } from "../element/typeChecks";
-import { updateActiveTool } from "../utils";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -59,7 +58,6 @@ const handleGroupEditingState = (
 
 export const actionDeleteSelected = register({
   name: "deleteSelectedElements",
-  trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState) => {
     if (appState.editingLinearElement) {
       const {
@@ -135,7 +133,7 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        activeTool: updateActiveTool(appState, { type: "selection" }),
+        elementType: "selection",
         multiElement: null,
       },
       commitToHistory: isSomeElementSelected(

src/actions/actionDistribute.tsx

@@ -3,11 +3,11 @@ import {
   DistributeVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { distributeElements, Distribution } from "../distribute";
+import { distributeElements, Distribution } from "../disitrubte";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+import { CODES } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
@@ -39,7 +39,6 @@ const distributeSelectedElements = (
 
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -50,8 +49,7 @@ export const distributeHorizontally = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) =>
+  keyTest: (event) => event.altKey && event.code === CODES.H,
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
@@ -69,7 +67,6 @@ export const distributeHorizontally = register({
 
 export const distributeVertically = register({
   name: "distributeVertically",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -80,8 +77,7 @@ export const distributeVertically = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) =>
+  keyTest: (event) => event.altKey && event.code === CODES.V,
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}

src/actions/actionDuplicateSelection.tsx

@@ -22,7 +22,6 @@ import { isBoundToContainer } from "../element/typeChecks";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {
@@ -128,15 +127,12 @@ const duplicateElements = (
       {
         ...appState,
         selectedGroupIds: {},
-        selectedElementIds: newElements.reduce(
+        selectedElementIds: newElements.reduce((acc, element) => {
-          (acc: Record<ExcalidrawElement["id"], true>, element) => {
+          if (!isBoundToContainer(element)) {
-            if (!isBoundToContainer(element)) {
+            acc[element.id] = true;
-              acc[element.id] = true;
+          }
-            }
+          return acc;
-            return acc;
+        }, {} as any),
-          },
-          {},
-        ),
       },
       getNonDeletedElements(finalElements),
     ),

src/actions/actionExport.tsx

@@ -1,3 +1,4 @@
+import { trackEvent } from "../analytics";
 import { load, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
@@ -7,7 +8,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useDevice } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@@ -22,8 +23,8 @@ import { Theme } from "../element/types";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
-  trackEvent: false,
   perform: (_elements, appState, value) => {
+    trackEvent("change", "title");
     return { appState: { ...appState, name: value }, commitToHistory: false };
   },
   PanelComponent: ({ appState, updateData, appProps }) => (
@@ -40,7 +41,6 @@ export const actionChangeProjectName = register({
 
 export const actionChangeExportScale = register({
   name: "changeExportScale",
-  trackEvent: { category: "export", action: "scale" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportScale: value },
@@ -89,7 +89,6 @@ export const actionChangeExportScale = register({
 
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
-  trackEvent: { category: "export", action: "toggleBackground" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportBackground: value },
@@ -108,7 +107,6 @@ export const actionChangeExportBackground = register({
 
 export const actionChangeExportEmbedScene = register({
   name: "changeExportEmbedScene",
-  trackEvent: { category: "export", action: "embedScene" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportEmbedScene: value },
@@ -130,7 +128,6 @@ export const actionChangeExportEmbedScene = register({
 
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
-  trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     const fileHandleExists = !!appState.fileHandle;
 
@@ -144,15 +141,13 @@ export const actionSaveToActiveFile = register({
         appState: {
           ...appState,
           fileHandle,
-          toast: fileHandleExists
+          toastMessage: fileHandleExists
-            ? {
+            ? fileHandle?.name
-                message: fileHandle?.name
+              ? t("toast.fileSavedToFilename").replace(
-                  ? t("toast.fileSavedToFilename").replace(
+                  "{filename}",
-                      "{filename}",
+                  `"${fileHandle.name}"`,
-                      `"${fileHandle.name}"`,
+                )
-                    )
+              : t("toast.fileSaved")
-                  : t("toast.fileSaved"),
-              }
             : null,
         },
       };
@@ -177,7 +172,6 @@ export const actionSaveToActiveFile = register({
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
-  trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     try {
       const { fileHandle } = await saveAsJSON(
@@ -206,7 +200,7 @@ export const actionSaveFileToDisk = register({
       icon={saveAs}
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDevice().isMobile}
+      showAriaLabel={useIsMobile()}
       hidden={!nativeFileSystemSupported}
       onClick={() => updateData(null)}
       data-testid="save-as-button"
@@ -216,7 +210,6 @@ export const actionSaveFileToDisk = register({
 
 export const actionLoadScene = register({
   name: "loadScene",
-  trackEvent: { category: "export" },
   perform: async (elements, appState, _, app) => {
     try {
       const {
@@ -250,7 +243,7 @@ export const actionLoadScene = register({
       icon={load}
       title={t("buttons.load")}
       aria-label={t("buttons.load")}
-      showAriaLabel={useDevice().isMobile}
+      showAriaLabel={useIsMobile()}
       onClick={updateData}
       data-testid="load-button"
     />
@@ -259,7 +252,6 @@ export const actionLoadScene = register({
 
 export const actionExportWithDarkMode = register({
   name: "exportWithDarkMode",
-  trackEvent: { category: "export", action: "toggleTheme" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportWithDarkMode: value },

src/actions/actionFinalize.tsx

@@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { updateActiveTool, resetCursor } from "../utils";
+import { resetCursor } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -13,13 +13,61 @@ import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
 } from "../element/binding";
-import { isBindingElement, isLinearElement } from "../element/typeChecks";
+import { isBindingElement } from "../element/typeChecks";
-import { AppState } from "../types";
+import { ExcalidrawImageElement } from "../element/types";
+import { imageFromImageData } from "../element/image";
 
 export const actionFinalize = register({
   name: "finalize",
-  trackEvent: false,
+  perform: (
-  perform: (elements, appState, _, { canvas, focusContainer, scene }) => {
+    elements,
+    appState,
+    _,
+    { canvas, focusContainer, imageCache, addFiles },
+  ) => {
+    if (appState.editingImageElement) {
+      const { elementId, imageData } = appState.editingImageElement;
+      const editingImageElement = elements.find((el) => el.id === elementId) as
+        | ExcalidrawImageElement
+        | undefined;
+      if (editingImageElement?.fileId) {
+        const cachedImageData = imageCache.get(editingImageElement.fileId);
+        if (cachedImageData) {
+          const { image, dataURL } = imageFromImageData(imageData);
+
+          imageCache.set(editingImageElement.fileId, {
+            ...cachedImageData,
+            image,
+          });
+
+          addFiles([
+            {
+              id: editingImageElement.fileId,
+              dataURL,
+              mimeType: cachedImageData.mimeType,
+              created: Date.now(),
+            },
+          ]);
+
+          return {
+            appState: {
+              ...appState,
+              editingImageElement: null,
+            },
+            commitToHistory: false,
+          };
+        }
+      }
+
+      return {
+        appState: {
+          ...appState,
+          editingImageElement: null,
+        },
+        commitToHistory: false,
+      };
+    }
+
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
@@ -40,7 +88,6 @@ export const actionFinalize = register({
               : undefined,
           appState: {
             ...appState,
-            cursorButton: "up",
             editingLinearElement: null,
           },
           commitToHistory: true,
@@ -50,12 +97,8 @@ export const actionFinalize = register({
 
     let newElements = elements;
 
-    const pendingImageElement =
+    if (appState.pendingImageElement) {
-      appState.pendingImageElementId &&
+      mutateElement(appState.pendingImageElement, { isDeleted: true }, false);
-      scene.getElement(appState.pendingImageElementId);
-
-    if (pendingImageElement) {
-      mutateElement(pendingImageElement, { isDeleted: true }, false);
     }
 
     if (window.document.activeElement instanceof HTMLElement) {
@@ -126,47 +169,27 @@ export const actionFinalize = register({
         );
       }
 
-      if (
+      if (!appState.elementLocked && appState.elementType !== "freedraw") {
-        !appState.activeTool.locked &&
-        appState.activeTool.type !== "freedraw"
-      ) {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
     }
 
     if (
-      (!appState.activeTool.locked &&
+      (!appState.elementLocked && appState.elementType !== "freedraw") ||
-        appState.activeTool.type !== "freedraw") ||
       !multiPointElement
     ) {
       resetCursor(canvas);
     }
 
-    let activeTool: AppState["activeTool"];
-    if (appState.activeTool.type === "eraser") {
-      activeTool = updateActiveTool(appState, {
-        ...(appState.activeTool.lastActiveToolBeforeEraser || {
-          type: "selection",
-        }),
-        lastActiveToolBeforeEraser: null,
-      });
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "selection",
-      });
-    }
-
     return {
       elements: newElements,
       appState: {
         ...appState,
-        cursorButton: "up",
+        elementType:
-        activeTool:
+          (appState.elementLocked || appState.elementType === "freedraw") &&
-          (appState.activeTool.locked ||
-            appState.activeTool.type === "freedraw") &&
           multiPointElement
-            ? appState.activeTool
+            ? appState.elementType
-            : activeTool,
+            : "selection",
         draggingElement: null,
         multiElement: null,
         editingElement: null,
@@ -174,30 +197,26 @@ export const actionFinalize = register({
         suggestedBindings: [],
         selectedElementIds:
           multiPointElement &&
-          !appState.activeTool.locked &&
+          !appState.elementLocked &&
-          appState.activeTool.type !== "freedraw"
+          appState.elementType !== "freedraw"
             ? {
                 ...appState.selectedElementIds,
                 [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
-        // To select the linear element when user has finished mutipoint editing
+        pendingImageElement: null,
-        selectedLinearElement:
-          multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(multiPointElement, scene)
-            : appState.selectedLinearElement,
-        pendingImageElementId: null,
       },
-      commitToHistory: appState.activeTool.type === "freedraw",
+      commitToHistory: appState.elementType === "freedraw",
     };
   },
   keyTest: (event, appState) =>
     (event.key === KEYS.ESCAPE &&
       (appState.editingLinearElement !== null ||
+        appState.editingImageElement !== null ||
         (!appState.draggingElement && appState.multiElement === null))) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
-  PanelComponent: ({ appState, updateData, data }) => (
+  PanelComponent: ({ appState, updateData }) => (
     <ToolButton
       type="button"
       icon={done}
@@ -205,7 +224,6 @@ export const actionFinalize = register({
       aria-label={t("buttons.done")}
       onClick={updateData}
       visible={appState.multiElement != null}
-      size={data?.size || "medium"}
     />
   ),
 });

src/actions/actionFlip.ts

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

src/actions/actionGroup.tsx

@@ -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) {
@@ -54,7 +53,6 @@ const enableActionGroup = (
 
 export const actionGroup = register({
   name: "group",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
@@ -148,18 +146,12 @@ export const actionGroup = register({
 
 export const actionUngroup = register({
   name: "ungroup",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const groupIds = getSelectedGroupIds(appState);
     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,
@@ -171,19 +163,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,
     };

src/actions/actionHistory.tsx

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

src/actions/actionImageEditing.tsx

@@ -0,0 +1,75 @@
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { ToolButton } from "../components/ToolButton";
+import { backgroundIcon } from "../components/icons";
+import { register } from "./register";
+import { getNonDeletedElements } from "../element";
+import { isInitializedImageElement } from "../element/typeChecks";
+import Scene from "../scene/Scene";
+
+export const actionEditImageAlpha = register({
+  name: "editImageAlpha",
+  perform: async (elements, appState, _, app) => {
+    if (appState.editingImageElement) {
+      return {
+        appState: {
+          ...appState,
+          editingImageElement: null,
+        },
+        commitToHistory: false,
+      };
+    }
+
+    const selectedElements = getSelectedElements(elements, appState);
+    const selectedElement = selectedElements[0];
+    if (
+      selectedElements.length === 1 &&
+      isInitializedImageElement(selectedElement)
+    ) {
+      const imgData = app.imageCache.get(selectedElement.fileId);
+      if (!imgData) {
+        return false;
+      }
+
+      const image = await imgData.image;
+      const { width, height } = image;
+
+      const canvas = document.createElement("canvas");
+      canvas.height = height;
+      canvas.width = width;
+      const context = canvas.getContext("2d")!;
+
+      context.drawImage(image, 0, 0, width, height);
+
+      const imageData = context.getImageData(0, 0, width, height);
+
+      Scene.mapElementToScene(selectedElement.id, app.scene);
+
+      return {
+        appState: {
+          ...appState,
+          editingImageElement: {
+            editorType: "alpha",
+            elementId: selectedElement.id,
+            origImageData: imageData,
+            imageData,
+            pointerDownState: { screenX: 0, screenY: 0, sampledPixel: null },
+          },
+        },
+        commitToHistory: false,
+      };
+    }
+    return false;
+  },
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <ToolButton
+      type="button"
+      icon={backgroundIcon}
+      label="Edit Image Alpha"
+      className={appState.editingImageElement ? "active" : ""}
+      title={"Edit image alpha"}
+      aria-label={"Edit image alpha"}
+      onClick={() => updateData(null)}
+      visible={isSomeElementSelected(getNonDeletedElements(elements), appState)}
+    />
+  ),
+});

src/actions/actionMenu.tsx

@@ -9,7 +9,6 @@ import { HelpIcon } from "../components/HelpIcon";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
-  trackEvent: { category: "menu" },
   perform: (_, appState) => ({
     appState: {
       ...appState,
@@ -30,7 +29,6 @@ export const actionToggleCanvasMenu = register({
 
 export const actionToggleEditMenu = register({
   name: "toggleEditMenu",
-  trackEvent: { category: "menu" },
   perform: (_elements, appState) => ({
     appState: {
       ...appState,
@@ -55,7 +53,6 @@ export const actionToggleEditMenu = register({
 
 export const actionFullScreen = register({
   name: "toggleFullScreen",
-  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
   perform: () => {
     if (!isFullScreen()) {
       allowFullScreen();
@@ -72,7 +69,6 @@ export const actionFullScreen = register({
 
 export const actionShortcuts = register({
   name: "toggleShortcuts",
-  trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {
     if (appState.showHelpDialog) {
       focusContainer();

src/actions/actionNavigate.tsx

@@ -1,4 +1,4 @@
-import { getClientColors } from "../clients";
+import { getClientColors, getClientInitials } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@@ -6,7 +6,6 @@ import { register } from "./register";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
-  trackEvent: { category: "collab" },
   perform: (_elements, appState, value) => {
     const point = value as Collaborator["pointer"];
     if (!point) {
@@ -31,18 +30,28 @@ export const actionGoToCollaborator = register({
     };
   },
   PanelComponent: ({ appState, updateData, data }) => {
-    const [clientId, collaborator] = data as [string, Collaborator];
+    const clientId: string | undefined = data?.id;
+    if (!clientId) {
+      return null;
+    }
+
+    const collaborator = appState.collaborators.get(clientId);
+
+    if (!collaborator) {
+      return null;
+    }
 
     const { background, stroke } = getClientColors(clientId, appState);
+    const shortName = getClientInitials(collaborator.username);
 
     return (
       <Avatar
         color={background}
         border={stroke}
         onClick={() => updateData(collaborator.pointer)}
-        name={collaborator.username || ""}
+      >
-        src={collaborator.avatarUrl}
+        {shortName}
-      />
+      </Avatar>
     );
   },
 });

src/actions/actionProperties.tsx

@@ -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 { newElementWith } from "../element/mutateElement";
-import {
+import { isLinearElement, isLinearElementType } from "../element/typeChecks";
-  getBoundTextElement,
-  getContainerElement,
-} from "../element/textElement";
-import {
-  isBoundToContainer,
-  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,94 +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));
-
-          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",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       ...(value.currentItemStrokeColor && {
-        elements: changeProperty(
+        elements: changeProperty(elements, appState, (el) => {
-          elements,
+          return hasStrokeColor(el.type)
-          appState,
+            ? newElementWith(el, {
-          (el) => {
+                strokeColor: value.currentItemStrokeColor,
-            return hasStrokeColor(el.type)
+              })
-              ? newElementWith(el, {
+            : el;
-                  strokeColor: value.currentItemStrokeColor,
+        }),
-                })
-              : el;
-          },
-          true,
-        ),
       }),
       appState: {
         ...appState,
@@ -235,8 +137,6 @@ export const actionChangeStrokeColor = register({
         setActive={(active) =>
           updateData({ openPopup: active ? "strokeColorPicker" : null })
         }
-        elements={elements}
-        appState={appState}
       />
     </>
   ),
@@ -244,7 +144,6 @@ export const actionChangeStrokeColor = register({
 
 export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       ...(value.currentItemBackgroundColor && {
@@ -278,8 +177,6 @@ export const actionChangeBackgroundColor = register({
         setActive={(active) =>
           updateData({ openPopup: active ? "backgroundColorPicker" : null })
         }
-        elements={elements}
-        appState={appState}
       />
     </>
   ),
@@ -287,7 +184,6 @@ export const actionChangeBackgroundColor = register({
 
 export const actionChangeFillStyle = register({
   name: "changeFillStyle",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -337,7 +233,6 @@ export const actionChangeFillStyle = register({
 
 export const actionChangeStrokeWidth = register({
   name: "changeStrokeWidth",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -385,7 +280,6 @@ export const actionChangeStrokeWidth = register({
 
 export const actionChangeSloppiness = register({
   name: "changeSloppiness",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -434,7 +328,6 @@ export const actionChangeSloppiness = register({
 
 export const actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -482,17 +375,12 @@ export const actionChangeStrokeStyle = register({
 
 export const actionChangeOpacity = register({
   name: "changeOpacity",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(
+      elements: changeProperty(elements, appState, (el) =>
-        elements,
+        newElementWith(el, {
-        appState,
+          opacity: value,
-        (el) =>
+        }),
-          newElementWith(el, {
-            opacity: value,
-          }),
-        true,
       ),
       appState: { ...appState, currentItemOpacity: value },
       commitToHistory: true,
@@ -507,6 +395,20 @@ export const actionChangeOpacity = register({
         max="100"
         step="10"
         onChange={(event) => updateData(+event.target.value)}
+        onWheel={(event) => {
+          event.stopPropagation();
+          const target = event.target as HTMLInputElement;
+          const STEP = 10;
+          const MAX = 100;
+          const MIN = 0;
+          const value = +target.value;
+
+          if (event.deltaY < 0 && value < MAX) {
+            updateData(value + STEP);
+          } else if (event.deltaY > 0 && value > MIN) {
+            updateData(value - STEP);
+          }
+        }}
         value={
           getFormValue(
             elements,
@@ -522,9 +424,25 @@ export const actionChangeOpacity = register({
 
 export const actionChangeFontSize = register({
   name: "changeFontSize",
-  trackEvent: false,
   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>
@@ -536,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) => {
+          (element) => isTextElement(element) && element.fontSize,
-            if (isTextElement(element)) {
-              return element.fontSize;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.fontSize;
-            }
-            return null;
-          },
           appState.currentItemFontSize || DEFAULT_FONT_SIZE,
         )}
         onChange={(value) => updateData(value)}
@@ -578,70 +483,21 @@ export const actionChangeFontSize = register({
   ),
 });
 
-export const actionDecreaseFontSize = register({
-  name: "decreaseFontSize",
-  trackEvent: false,
-  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",
-  trackEvent: false,
-  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",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(
+      elements: changeProperty(elements, appState, (el) => {
-        elements,
+        if (isTextElement(el)) {
-        appState,
+          const element: ExcalidrawTextElement = newElementWith(el, {
-        (oldElement) => {
+            fontFamily: value,
-          if (isTextElement(oldElement)) {
+          });
-            const newElement: ExcalidrawTextElement = newElementWith(
+          redrawTextBoundingBox(element);
-              oldElement,
+          return element;
-              {
+        }
-                fontFamily: value,
-              },
-            );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
 
-          return oldElement;
+        return el;
-        },
+      }),
-        true,
-      ),
       appState: {
         ...appState,
         currentItemFontFamily: value,
@@ -681,16 +537,7 @@ export const actionChangeFontFamily = register({
           value={getFormValue(
             elements,
             appState,
-            (element) => {
+            (element) => isTextElement(element) && element.fontFamily,
-              if (isTextElement(element)) {
-                return element.fontFamily;
-              }
-              const boundTextElement = getBoundTextElement(element);
-              if (boundTextElement) {
-                return boundTextElement.fontFamily;
-              }
-              return null;
-            },
             appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
           )}
           onChange={(value) => updateData(value)}
@@ -702,26 +549,19 @@ export const actionChangeFontFamily = register({
 
 export const actionChangeTextAlign = register({
   name: "changeTextAlign",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(
+      elements: changeProperty(elements, appState, (el) => {
-        elements,
+        if (isTextElement(el)) {
-        appState,
+          const element: ExcalidrawTextElement = newElementWith(el, {
-        (oldElement) => {
+            textAlign: value,
-          if (isTextElement(oldElement)) {
+          });
-            const newElement: ExcalidrawTextElement = newElementWith(
+          redrawTextBoundingBox(element);
-              oldElement,
+          return element;
-              { textAlign: value },
+        }
-            );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
 
-          return oldElement;
+        return el;
-        },
+      }),
-        true,
-      ),
       appState: {
         ...appState,
         currentItemTextAlign: value,
@@ -729,121 +569,42 @@ export const actionChangeTextAlign = register({
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ elements, appState, updateData }) => (
-    return (
+    <fieldset>
-      <fieldset>
+      <legend>{t("labels.textAlign")}</legend>
-        <legend>{t("labels.textAlign")}</legend>
+      <ButtonIconSelect<TextAlign | false>
-        <ButtonIconSelect<TextAlign | false>
+        group="text-align"
-          group="text-align"
+        options={[
-          options={[
+          {
-            {
+            value: "left",
-              value: "left",
+            text: t("labels.left"),
-              text: t("labels.left"),
+            icon: <TextAlignLeftIcon theme={appState.theme} />,
-              icon: <TextAlignLeftIcon theme={appState.theme} />,
+          },
-            },
+          {
-            {
+            value: "center",
-              value: "center",
+            text: t("labels.center"),
-              text: t("labels.center"),
+            icon: <TextAlignCenterIcon theme={appState.theme} />,
-              icon: <TextAlignCenterIcon theme={appState.theme} />,
+          },
-            },
+          {
-            {
+            value: "right",
-              value: "right",
+            text: t("labels.right"),
-              text: t("labels.right"),
+            icon: <TextAlignRightIcon theme={appState.theme} />,
-              icon: <TextAlignRightIcon theme={appState.theme} />,
+          },
-            },
+        ]}
-          ]}
+        value={getFormValue(
-          value={getFormValue(
+          elements,
-            elements,
+          appState,
-            appState,
+          (element) => isTextElement(element) && element.textAlign,
-            (element) => {
+          appState.currentItemTextAlign,
-              if (isTextElement(element)) {
+        )}
-                return element.textAlign;
+        onChange={(value) => updateData(value)}
-              }
+      />
-              const boundTextElement = getBoundTextElement(element);
+    </fieldset>
-              if (boundTextElement) {
+  ),
-                return boundTextElement.textAlign;
-              }
-              return null;
-            },
-            appState.currentItemTextAlign,
-          )}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
-});
-export const actionChangeVerticalAlign = register({
-  name: "changeVerticalAlign",
-  trackEvent: { category: "element" },
-  perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { verticalAlign: value },
-            );
-
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
-
-          return oldElement;
-        },
-        true,
-      ),
-      appState: {
-        ...appState,
-      },
-      commitToHistory: true,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <ButtonIconSelect<VerticalAlign | false>
-          group="text-align"
-          options={[
-            {
-              value: VERTICAL_ALIGN.TOP,
-              text: t("labels.alignTop"),
-              icon: <TextAlignTopIcon theme={appState.theme} />,
-            },
-            {
-              value: VERTICAL_ALIGN.MIDDLE,
-              text: t("labels.centerVertically"),
-              icon: <TextAlignMiddleIcon theme={appState.theme} />,
-            },
-            {
-              value: VERTICAL_ALIGN.BOTTOM,
-              text: t("labels.alignBottom"),
-              icon: <TextAlignBottomIcon theme={appState.theme} />,
-            },
-          ]}
-          value={getFormValue(elements, appState, (element) => {
-            if (isTextElement(element) && element.containerId) {
-              return element.verticalAlign;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.verticalAlign;
-            }
-            return null;
-          })}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
 });
 
 export const actionChangeSharpness = register({
   name: "changeSharpness",
-  trackEvent: false,
   perform: (elements, appState, value) => {
     const targetElements = getTargetElements(
       getNonDeletedElements(elements),
@@ -851,10 +612,10 @@ export const actionChangeSharpness = register({
     );
     const shouldUpdateForNonLinearElements = targetElements.length
       ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.activeTool.type);
+      : !isLinearElementType(appState.elementType);
     const shouldUpdateForLinearElements = targetElements.length
       ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.activeTool.type);
+      : isLinearElementType(appState.elementType);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
@@ -894,8 +655,8 @@ export const actionChangeSharpness = register({
           elements,
           appState,
           (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.activeTool.type) &&
+          (canChangeSharpness(appState.elementType) &&
-            (isLinearElementType(appState.activeTool.type)
+            (isLinearElementType(appState.elementType)
               ? appState.currentItemLinearStrokeSharpness
               : appState.currentItemStrokeSharpness)) ||
             null,
@@ -908,7 +669,6 @@ export const actionChangeSharpness = register({
 
 export const actionChangeArrowhead = register({
   name: "changeArrowhead",
-  trackEvent: false,
   perform: (
     elements,
     appState,

src/actions/actionSelectAll.ts

@@ -2,43 +2,27 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
 import { getNonDeletedElements, isTextElement } from "../element";
-import { ExcalidrawElement } from "../element/types";
-import { isLinearElement } from "../element/typeChecks";
-import { LinearElementEditor } from "../element/linearElementEditor";
 
 export const actionSelectAll = register({
   name: "selectAll",
-  trackEvent: { category: "canvas" },
+  perform: (elements, appState) => {
-  perform: (elements, appState, value, app) => {
     if (appState.editingLinearElement) {
       return false;
     }
-    const selectedElementIds = elements.reduce(
-      (map: Record<ExcalidrawElement["id"], true>, element) => {
-        if (
-          !element.isDeleted &&
-          !(isTextElement(element) && element.containerId) &&
-          !element.locked
-        ) {
-          map[element.id] = true;
-        }
-        return map;
-      },
-      {},
-    );
-
     return {
       appState: selectGroupsForSelectedElements(
         {
           ...appState,
-          selectedLinearElement:
-            // single linear element selected
-            Object.keys(selectedElementIds).length === 1 &&
-            isLinearElement(elements[0])
-              ? new LinearElementEditor(elements[0], app.scene)
-              : null,
           editingGroupId: null,
-          selectedElementIds,
+          selectedElementIds: elements.reduce((map, element) => {
+            if (
+              !element.isDeleted &&
+              !(isTextElement(element) && element.containerId)
+            ) {
+              map[element.id] = true;
+            }
+            return map;
+          }, {} as any),
         },
         getNonDeletedElements(elements),
       ),

src/actions/actionStyles.test.tsx

@@ -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)[0];
-    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);
-  });
-});

src/actions/actionStyles.ts

@@ -6,37 +6,27 @@ import {
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
 import { register } from "./register";
-import { newElementWith } from "../element/mutateElement";
+import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getBoundTextElement } from "../element/textElement";
-import { hasBoundTextElement } from "../element/typeChecks";
-import { getSelectedElements } from "../scene";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
 
 export const actionCopyStyles = register({
   name: "copyStyles",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
-    const elementsCopied = [];
     const element = elements.find((el) => appState.selectedElementIds[el.id]);
-    elementsCopied.push(element);
-    if (element && hasBoundTextElement(element)) {
-      const boundTextElement = getBoundTextElement(element);
-      elementsCopied.push(boundTextElement);
-    }
     if (element) {
-      copiedStyles = JSON.stringify(elementsCopied);
+      copiedStyles = JSON.stringify(element);
     }
     return {
       appState: {
         ...appState,
-        toast: { message: t("toast.copyStyles") },
+        toastMessage: t("toast.copyStyles"),
       },
       commitToHistory: false,
     };
@@ -48,64 +38,31 @@ export const actionCopyStyles = register({
 
 export const actionPasteStyles = register({
   name: "pasteStyles",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
-    const elementsCopied = JSON.parse(copiedStyles);
+    const pastedElement = JSON.parse(copiedStyles);
-    const pastedElement = elementsCopied[0];
-    const boundTextElement = elementsCopied[1];
     if (!isExcalidrawElement(pastedElement)) {
       return { elements, commitToHistory: false };
     }
-
-    const selectedElements = getSelectedElements(elements, appState, true);
-    const selectedElementIds = selectedElements.map((element) => element.id);
     return {
       elements: elements.map((element) => {
-        if (selectedElementIds.includes(element.id)) {
+        if (appState.selectedElementIds[element.id]) {
-          let elementStylesToCopyFrom = pastedElement;
+          const newElement = newElementWith(element, {
-          if (isTextElement(element) && element.containerId) {
+            backgroundColor: pastedElement?.backgroundColor,
-            elementStylesToCopyFrom = boundTextElement;
+            strokeWidth: pastedElement?.strokeWidth,
-          }
+            strokeColor: pastedElement?.strokeColor,
-          if (!elementStylesToCopyFrom) {
+            strokeStyle: pastedElement?.strokeStyle,
-            return element;
+            fillStyle: pastedElement?.fillStyle,
-          }
+            opacity: pastedElement?.opacity,
-          let newElement = newElementWith(element, {
+            roughness: pastedElement?.roughness,
-            backgroundColor: elementStylesToCopyFrom?.backgroundColor,
-            strokeWidth: elementStylesToCopyFrom?.strokeWidth,
-            strokeColor: elementStylesToCopyFrom?.strokeColor,
-            strokeStyle: elementStylesToCopyFrom?.strokeStyle,
-            fillStyle: elementStylesToCopyFrom?.fillStyle,
-            opacity: elementStylesToCopyFrom?.opacity,
-            roughness: elementStylesToCopyFrom?.roughness,
           });
-
           if (isTextElement(newElement)) {
-            newElement = newElementWith(newElement, {
+            mutateElement(newElement, {
-              fontSize: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
+              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily:
+              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
-                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
+              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
-              textAlign:
-                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
             });
-            let container = null;
+            redrawTextBoundingBox(newElement);
-            if (newElement.containerId) {
-              container =
-                selectedElements.find(
-                  (element) =>
-                    isTextElement(newElement) &&
-                    element.id === newElement.containerId,
-                ) || null;
-            }
-            redrawTextBoundingBox(newElement, container);
           }
-
-          if (newElement.type === "arrow") {
-            newElement = newElementWith(newElement, {
-              startArrowhead: elementStylesToCopyFrom.startArrowhead,
-              endArrowhead: elementStylesToCopyFrom.endArrowhead,
-            });
-          }
-
           return newElement;
         }
         return element;

src/actions/actionToggleGridMode.tsx

@@ -2,14 +2,12 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { trackEvent } from "../analytics";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.gridSize,
-  },
   perform(elements, appState) {
+    trackEvent("view", "mode", "grid");
     return {
       appState: {
         ...appState,

src/actions/actionToggleLock.ts

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

src/actions/actionToggleStats.tsx

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

src/actions/actionToggleViewMode.tsx

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

src/actions/actionToggleZenMode.tsx

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

src/actions/actionZindex.tsx

@@ -18,7 +18,6 @@ import {
 
 export const actionSendBackward = register({
   name: "sendBackward",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: moveOneLeft(elements, appState),
@@ -46,7 +45,6 @@ export const actionSendBackward = register({
 
 export const actionBringForward = register({
   name: "bringForward",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: moveOneRight(elements, appState),
@@ -74,7 +72,6 @@ export const actionBringForward = register({
 
 export const actionSendToBack = register({
   name: "sendToBack",
-  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: moveAllLeft(elements, appState),
@@ -109,8 +106,6 @@ export const actionSendToBack = register({
 
 export const actionBringToFront = register({
   name: "bringToFront",
-  trackEvent: { category: "element" },
-
   perform: (elements, appState) => {
     return {
       elements: moveAllRight(elements, appState),

src/actions/index.ts

@@ -17,7 +17,6 @@ export {
   actionChangeFontSize,
   actionChangeFontFamily,
   actionChangeTextAlign,
-  actionChangeVerticalAlign,
 } from "./actionProperties";
 
 export {
@@ -75,13 +74,10 @@ export {
   actionCut,
   actionCopyAsPng,
   actionCopyAsSvg,
-  copyText,
 } from "./actionClipboard";
 
 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";
 
 export { actionToggleStats } from "./actionToggleStats";
-export { actionUnbindText, actionBindText } from "./actionBoundText";
+export { actionEditImageAlpha } from "./actionImageEditing";
-export { actionLink } from "../element/Hyperlink";
-export { actionToggleLock } from "./actionToggleLock";

src/actions/manager.tsx

@@ -1,47 +1,18 @@
 import React from "react";
 import {
   Action,
+  ActionsManagerInterface,
   UpdaterFn,
   ActionName,
   ActionResult,
   PanelComponentProps,
-  ActionSource,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { MODES } from "../constants";
-import { trackEvent } from "../analytics";
 
-const trackAction = (
+export class ActionManager implements ActionsManagerInterface {
-  action: Action,
+  actions = {} as ActionsManagerInterface["actions"];
-  source: ActionSource,
-  appState: Readonly<AppState>,
-  elements: readonly ExcalidrawElement[],
-  app: AppClassProperties,
-  value: any,
-) => {
-  if (action.trackEvent) {
-    try {
-      if (typeof action.trackEvent === "object") {
-        const shouldTrack = action.trackEvent.predicate
-          ? action.trackEvent.predicate(appState, elements, value)
-          : true;
-        if (shouldTrack) {
-          trackEvent(
-            action.trackEvent.category,
-            action.trackEvent.action || action.name,
-            `${source} (${app.device.isMobile ? "mobile" : "desktop"})`,
-          );
-        }
-      }
-    } catch (error) {
-      console.error("error while logging action:", error);
-    }
-  }
-};
-
-export class ActionManager {
-  actions = {} as Record<ActionName, Action>;
 
   updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
 
@@ -94,15 +65,9 @@ export class ActionManager {
           ),
       );
 
-    if (data.length !== 1) {
+    if (data.length === 0) {
-      if (data.length > 1) {
-        console.warn("Canceling as multiple actions match this shortcut", data);
-      }
       return false;
     }
-
-    const action = data[0];
-
     const { viewModeEnabled } = this.getAppState();
     if (viewModeEnabled) {
       if (!Object.values(MODES).includes(data[0].name)) {
@@ -110,26 +75,27 @@ export class ActionManager {
       }
     }
 
-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-    const value = null;
-
-    trackAction(action, "keyboard", appState, elements, this.app, null);
-
     event.preventDefault();
-    event.stopPropagation();
+    this.updater(
-    this.updater(data[0].perform(elements, appState, value, this.app));
+      data[0].perform(
+        this.getElementsIncludingDeleted(),
+        this.getAppState(),
+        null,
+        this.app,
+      ),
+    );
     return true;
   }
 
-  executeAction(action: Action, source: ActionSource = "api") {
+  executeAction(action: Action) {
-    const elements = this.getElementsIncludingDeleted();
+    this.updater(
-    const appState = this.getAppState();
+      action.perform(
-    const value = null;
+        this.getElementsIncludingDeleted(),
-
+        this.getAppState(),
-    trackAction(action, source, appState, elements, this.app, value);
+        null,
-
+        this.app,
-    this.updater(action.perform(elements, appState, value, this.app));
+      ),
+    );
   }
 
   /**
@@ -147,11 +113,7 @@ export class ActionManager {
     ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
-      const elements = this.getElementsIncludingDeleted();
-      const appState = this.getAppState();
       const updateData = (formState?: any) => {
-        trackAction(action, "ui", appState, elements, this.app, formState);
-
         this.updater(
           action.perform(
             this.getElementsIncludingDeleted(),

src/actions/register.ts

@@ -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 & {
+  return action;
-    keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];
-  };
 };

src/actions/shortcuts.ts

@@ -1,10 +1,8 @@
 import { t } from "../i18n";
 import { isDarwin } from "../keys";
 import { getShortcutKey } from "../utils";
-import { ActionName } from "./types";
 
-export type ShortcutName = SubtypeOf<
+export type ShortcutName =
-  ActionName,
   | "cut"
   | "copy"
   | "paste"
@@ -27,10 +25,7 @@ export type ShortcutName = SubtypeOf<
   | "addToLibrary"
   | "viewMode"
   | "flipHorizontal"
-  | "flipVertical"
+  | "flipVertical";
-  | "hyperlink"
-  | "toggleLock"
->;
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -67,12 +62,10 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   flipHorizontal: [getShortcutKey("Shift+H")],
   flipVertical: [getShortcutKey("Shift+V")],
   viewMode: [getShortcutKey("Alt+R")],
-  hyperlink: [getShortcutKey("CtrlOrCmd+K")],
-  toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };
 
 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] : "";
 };

src/actions/types.ts

@@ -6,8 +6,7 @@ import {
   ExcalidrawProps,
   BinaryFiles,
 } from "../types";
-
+import { ToolButtonSize } from "../components/ToolButton";
-export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
 
 /** if false, the action should be prevented */
 export type ActionResult =
@@ -40,7 +39,6 @@ export type ActionName =
   | "paste"
   | "copyAsPng"
   | "copyAsSvg"
-  | "copyText"
   | "sendBackward"
   | "bringForward"
   | "sendToBack"
@@ -84,7 +82,6 @@ export type ActionName =
   | "zoomToSelection"
   | "changeFontFamily"
   | "changeTextAlign"
-  | "changeVerticalAlign"
   | "toggleFullScreen"
   | "toggleShortcuts"
   | "group"
@@ -105,20 +102,14 @@ export type ActionName =
   | "viewMode"
   | "exportWithDarkMode"
   | "toggleTheme"
-  | "increaseFontSize"
+  | "editImageAlpha";
-  | "decreaseFontSize"
-  | "unbindText"
-  | "hyperlink"
-  | "eraser"
-  | "bindText"
-  | "toggleLock";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
   appState: AppState;
   updateData: (formData?: any) => void;
   appProps: ExcalidrawProps;
-  data?: Record<string, any>;
+  data?: Partial<{ id: string; size: ToolButtonSize }>;
 };
 
 export interface Action {
@@ -131,34 +122,18 @@ export interface Action {
     appState: AppState,
     elements: readonly ExcalidrawElement[],
   ) => boolean;
-  contextItemLabel?:
+  contextItemLabel?: string;
-    | string
-    | ((
-        elements: readonly ExcalidrawElement[],
-        appState: Readonly<AppState>,
-      ) => string);
   contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
-  trackEvent:
+}
-    | false
+
-    | {
+export interface ActionsManagerInterface {
-        category:
+  actions: Record<ActionName, Action>;
-          | "toolbar"
+  registerAction: (action: Action) => void;
-          | "element"
+  handleKeyDown: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
-          | "canvas"
+  renderAction: (name: ActionName) => React.ReactElement | null;
-          | "export"
+  executeAction: (action: Action) => void;
-          | "history"
-          | "menu"
-          | "collab"
-          | "hyperlink";
-        action?: string;
-        predicate?: (
-          appState: Readonly<AppState>,
-          elements: readonly ExcalidrawElement[],
-          value: any,
-        ) => boolean;
-      };
 }

src/align.ts

@@ -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,

src/analytics.ts

@@ -3,20 +3,16 @@ export const trackEvent =
   process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
   typeof window !== "undefined" &&
   window.gtag
-    ? (category: string, action: string, label?: string, value?: number) => {
+    ? (category: string, name: string, label?: string, value?: number) => {
-        try {
+        window.gtag("event", name, {
-          window.gtag("event", action, {
+          event_category: category,
-            event_category: category,
+          event_label: label,
-            event_label: label,
+          value,
-            value,
+        });
-          });
-        } catch (error) {
-          console.error("error logging to ga", error);
-        }
       }
     : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
-    ? (category: string, action: string, label?: string, value?: number) => {}
+    ? (category: string, name: string, label?: string, value?: number) => {}
-    : (category: string, action: string, label?: string, value?: number) => {
+    : (category: string, name: string, label?: string, value?: number) => {
         // Uncomment the next line to track locally
-        // console.log("Track Event", { category, action, label, value });
+        // console.info("Track Event", category, name, label, value);
       };

src/appState.ts

@@ -41,14 +41,9 @@ export const getDefaultAppState = (): Omit<
     editingElement: null,
     editingGroupId: null,
     editingLinearElement: null,
-    activeTool: {
+    editingImageElement: null,
-      type: "selection",
+    elementLocked: false,
-      customType: null,
+    elementType: "selection",
-      locked: false,
-      lastActiveToolBeforeEraser: null,
-    },
-    penMode: false,
-    penDetected: false,
     errorMessage: null,
     exportBackground: true,
     exportScale: defaultExportScale,
@@ -58,7 +53,6 @@ export const getDefaultAppState = (): Omit<
     gridSize: null,
     isBindingEnabled: true,
     isLibraryOpen: false,
-    isLibraryMenuDocked: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -81,16 +75,12 @@ export const getDefaultAppState = (): Omit<
     showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
-    toast: null,
+    toastMessage: null,
     viewBackgroundColor: oc.white,
     zenModeEnabled: false,
-    zoom: {
+    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
-      value: 1 as NormalizedZoomValue,
-    },
     viewModeEnabled: false,
-    pendingImageElementId: null,
+    pendingImageElement: null,
-    showHyperlinkPopup: false,
-    selectedLinearElement: null,
   };
 };
 
@@ -136,9 +126,9 @@ const APP_STATE_STORAGE_CONF = (<
   editingElement: { browser: false, export: false, server: false },
   editingGroupId: { browser: true, export: false, server: false },
   editingLinearElement: { browser: false, export: false, server: false },
-  activeTool: { browser: true, export: false, server: false },
+  editingImageElement: { browser: false, export: false, server: false },
-  penMode: { browser: true, export: false, server: false },
+  elementLocked: { browser: true, export: false, server: false },
-  penDetected: { browser: true, export: false, server: false },
+  elementType: { browser: true, 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 },
@@ -148,8 +138,7 @@ const APP_STATE_STORAGE_CONF = (<
   gridSize: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
-  isLibraryOpen: { browser: true, export: false, server: false },
+  isLibraryOpen: { browser: false, export: false, server: false },
-  isLibraryMenuDocked: { browser: true, export: false, server: false },
   isLoading: { browser: false, export: false, server: false },
   isResizing: { browser: false, export: false, server: false },
   isRotating: { browser: false, export: false, server: false },
@@ -174,15 +163,13 @@ const APP_STATE_STORAGE_CONF = (<
   showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
-  toast: { browser: false, export: false, server: false },
+  toastMessage: { browser: false, export: false, server: false },
   viewBackgroundColor: { browser: true, export: true, server: true },
   width: { browser: false, export: false, server: false },
   zenModeEnabled: { browser: true, export: false, server: false },
   zoom: { browser: true, export: false, server: false },
   viewModeEnabled: { browser: false, export: false, server: false },
-  pendingImageElementId: { browser: false, export: false, server: false },
+  pendingImageElement: { browser: false, export: false, server: false },
-  showHyperlinkPopup: { browser: false, export: false, server: false },
-  selectedLinearElement: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <
@@ -220,9 +207,3 @@ export const cleanAppStateForExport = (appState: Partial<AppState>) => {
 export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
   return _clearAppStateForStorage(appState, "server");
 };
-
-export const isEraserActive = ({
-  activeTool,
-}: {
-  activeTool: AppState["activeTool"];
-}) => activeTool.type === "eraser";

src/charts.test.ts

@@ -1,121 +0,0 @@
-import {
-  Spreadsheet,
-  tryParseCells,
-  tryParseNumber,
-  VALID_SPREADSHEET,
-} from "./charts";
-
-describe("charts", () => {
-  describe("tryParseNumber", () => {
-    it.each<[string, number]>([
-      ["1", 1],
-      ["0", 0],
-      ["-1", -1],
-      ["0.1", 0.1],
-      [".1", 0.1],
-      ["1.", 1],
-      ["424.", 424],
-      ["$1", 1],
-      ["-.1", -0.1],
-      ["-$1", -1],
-      ["$-1", -1],
-    ])("should correctly identify %s as numbers", (given, expected) => {
-      expect(tryParseNumber(given)).toEqual(expected);
-    });
-
-    it.each<[string]>([["a"], ["$"], ["$a"], ["-$a"]])(
-      "should correctly identify %s as not a number",
-      (given) => {
-        expect(tryParseNumber(given)).toBeNull();
-      },
-    );
-  });
-
-  describe("tryParseCells", () => {
-    it("Successfully parses a spreadsheet", () => {
-      const spreadsheet = [
-        ["time", "value"],
-        ["01:00", "61"],
-        ["02:00", "-60"],
-        ["03:00", "85"],
-        ["04:00", "-67"],
-        ["05:00", "54"],
-        ["06:00", "95"],
-      ];
-
-      const result = tryParseCells(spreadsheet);
-
-      expect(result.type).toBe(VALID_SPREADSHEET);
-
-      const { title, labels, values } = (
-        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-      ).spreadsheet;
-
-      expect(title).toEqual("value");
-      expect(labels).toEqual([
-        "01:00",
-        "02:00",
-        "03:00",
-        "04:00",
-        "05:00",
-        "06:00",
-      ]);
-      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
-    });
-
-    it("Uses the second column as the label if it is not a number", () => {
-      const spreadsheet = [
-        ["time", "value"],
-        ["01:00", "61"],
-        ["02:00", "-60"],
-        ["03:00", "85"],
-        ["04:00", "-67"],
-        ["05:00", "54"],
-        ["06:00", "95"],
-      ];
-
-      const result = tryParseCells(spreadsheet);
-
-      expect(result.type).toBe(VALID_SPREADSHEET);
-
-      const { title, labels, values } = (
-        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-      ).spreadsheet;
-
-      expect(title).toEqual("value");
-      expect(labels).toEqual([
-        "01:00",
-        "02:00",
-        "03:00",
-        "04:00",
-        "05:00",
-        "06:00",
-      ]);
-      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
-    });
-
-    it("treats the first column as labels if both columns are numbers", () => {
-      const spreadsheet = [
-        ["time", "value"],
-        ["01", "61"],
-        ["02", "-60"],
-        ["03", "85"],
-        ["04", "-67"],
-        ["05", "54"],
-        ["06", "95"],
-      ];
-
-      const result = tryParseCells(spreadsheet);
-
-      expect(result.type).toBe(VALID_SPREADSHEET);
-
-      const { title, labels, values } = (
-        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-      ).spreadsheet;
-
-      expect(title).toEqual("value");
-      expect(labels).toEqual(["01", "02", "03", "04", "05", "06"]);
-      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
-    });
-  });
-});

src/charts.ts

@@ -1,10 +1,5 @@
 import colors from "./colors";
-import {
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, ENV } from "./constants";
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  ENV,
-  VERTICAL_ALIGN,
-} from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@@ -29,24 +24,18 @@ type ParseSpreadsheetResult =
   | { type: typeof NOT_SPREADSHEET; reason: string }
   | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };
 
-/**
+const tryParseNumber = (s: string): number | null => {
- * @private exported for testing
+  const match = /^[$€£¥₩]?([0-9,]+(\.[0-9]+)?)$/.exec(s);
- */
-export const tryParseNumber = (s: string): number | null => {
-  const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s);
   if (!match) {
     return null;
   }
-  return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
+  return parseFloat(match[1].replace(/,/g, ""));
 };
 
 const isNumericColumn = (lines: string[][], columnIndex: number) =>
   lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
 
-/**
+const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
- * @private exported for testing
- */
-export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
   const numCols = cells[0].length;
 
   if (numCols > 2) {
@@ -77,16 +66,13 @@ export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
     };
   }
 
-  const labelColumnNumeric = isNumericColumn(cells, 0);
+  const valueColumnIndex = isNumericColumn(cells, 0) ? 0 : 1;
-  const valueColumnNumeric = isNumericColumn(cells, 1);
 
-  if (!labelColumnNumeric && !valueColumnNumeric) {
+  if (!isNumericColumn(cells, valueColumnIndex)) {
     return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
   }
 
-  const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric
+  const labelColumnIndex = (valueColumnIndex + 1) % 2;
-    ? [0, 1]
-    : [1, 0];
   const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null;
   const rows = hasHeader ? cells.slice(1) : cells;
 
@@ -117,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
@@ -175,8 +161,7 @@ const commonProps = {
   strokeSharpness: "sharp",
   strokeStyle: "solid",
   strokeWidth: 1,
-  verticalAlign: VERTICAL_ALIGN.MIDDLE,
+  verticalAlign: "middle",
-  locked: false,
 } as const;
 
 const getChartDimentions = (spreadsheet: Spreadsheet) => {

src/clipboard.ts

@@ -2,16 +2,16 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
+import { getSelectedElements } from "./scene";
 import { AppState, BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
-import { isPromiseLike } from "./utils";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
-  elements: readonly NonDeletedExcalidrawElement[];
+  elements: ExcalidrawElement[];
   files: BinaryFiles | undefined;
 };
 
@@ -56,20 +56,19 @@ const clipboardContainsElements = (
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
-  files: BinaryFiles | null,
+  files: BinaryFiles,
 ) => {
   // select binded text elements when copying
+  const selectedElements = getSelectedElements(elements, appState, true);
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements,
+    elements: selectedElements,
-    files: files
+    files: selectedElements.reduce((acc, element) => {
-      ? elements.reduce((acc, element) => {
+      if (isInitializedImageElement(element) && files[element.fileId]) {
-          if (isInitializedImageElement(element) && files[element.fileId]) {
+        acc[element.fileId] = files[element.fileId];
-            acc[element.fileId] = files[element.fileId];
+      }
-          }
+      return acc;
-          return acc;
+    }, {} as BinaryFiles),
-        }, {} as BinaryFiles)
-      : undefined,
   };
   const json = JSON.stringify(contents);
   CLIPBOARD = json;
@@ -125,7 +124,7 @@ const getSystemClipboard = async (
 };
 
 /**
- * Attempts to parse clipboard. Prefers system clipboard.
+ * Attemps to parse clipboard. Prefers system clipboard.
  */
 export const parseClipboard = async (
   event: ClipboardEvent | null,
@@ -167,35 +166,10 @@ export const parseClipboard = async (
   }
 };
 
-export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
+export const copyBlobToClipboardAsPng = async (blob: Blob) => {
-  let promise;
+  await navigator.clipboard.write([
-  try {
+    new window.ClipboardItem({ [MIME_TYPES.png]: blob }),
-    // in Safari so far we need to construct the ClipboardItem synchronously
+  ]);
-    // (i.e. in the same tick) otherwise browser will complain for lack of
-    // user intent. Using a Promise ClipboardItem constructor solves this.
-    // https://bugs.webkit.org/show_bug.cgi?id=222262
-    //
-    // not await so that we can detect whether the thrown error likely relates
-    // to a lack of support for the Promise ClipboardItem constructor
-    promise = navigator.clipboard.write([
-      new window.ClipboardItem({
-        [MIME_TYPES.png]: blob,
-      }),
-    ]);
-  } catch (error: any) {
-    // if we're using a Promise ClipboardItem, let's try constructing
-    // with resolution value instead
-    if (isPromiseLike(blob)) {
-      await navigator.clipboard.write([
-        new window.ClipboardItem({
-          [MIME_TYPES.png]: await blob,
-        }),
-      ]);
-    } else {
-      throw error;
-    }
-  }
-  await promise;
 };
 
 export const copyTextToSystemClipboard = async (text: string | null) => {

src/components/Actions.tsx

@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useDevice } from "../components/App";
+import { useIsMobile } from "../components/App";
 import {
   canChangeSharpness,
   canHaveArrowheads,
@@ -15,59 +15,41 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import {
+import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
-  capitalizeString,
-  isTransparent,
-  updateActiveTool,
-  setCursorForShape,
-} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
-import { trackEvent } from "../analytics";
+import { isImageElement } from "../element/typeChecks";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
 
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  activeTool,
+  elementType,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  activeTool: AppState["activeTool"]["type"];
+  elementType: ExcalidrawElement["type"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
     appState,
   );
-
-  let isSingleElementBoundContainer = false;
-  if (
-    targetElements.length === 2 &&
-    (hasBoundTextElement(targetElements[0]) ||
-      hasBoundTextElement(targetElements[1]))
-  ) {
-    isSingleElementBoundContainer = true;
-  }
   const isEditing = Boolean(appState.editingElement);
-  const device = useDevice();
+  const isMobile = useIsMobile();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(activeTool) ||
+    hasBackground(elementType) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(activeTool) ||
+    hasBackground(elementType) ||
     targetElements.some((element) => hasBackground(element.type));
 
-  const showLinkIcon =
-    targetElements.length === 1 || isSingleElementBoundContainer;
-
   let commonSelectedType: string | null = targetElements[0]?.type || null;
 
   for (const element of targetElements) {
@@ -79,23 +61,23 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(activeTool) &&
+      {((hasStrokeColor(elementType) &&
-        activeTool !== "image" &&
+        elementType !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(activeTool) ||
+      {(hasStrokeWidth(elementType) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(activeTool === "freedraw" ||
+      {(elementType === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(activeTool) ||
+      {(hasStrokeStyle(elementType) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
@@ -103,12 +85,12 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(activeTool) ||
+      {(canChangeSharpness(elementType) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(activeTool) ||
+      {(hasText(elementType) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -119,15 +101,18 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {targetElements.some(
+      {(canHaveArrowheads(elementType) ||
-        (element) =>
-          hasBoundTextElement(element) || isBoundToContainer(element),
-      ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(activeTool) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}
 
+      <fieldset>
+        <div className="buttonList">
+          {targetElements.some((element) => isImageElement(element)) &&
+            renderAction("editImageAlpha")}
+        </div>
+      </fieldset>
+
       {renderAction("changeOpacity")}
 
       <fieldset>
@@ -140,7 +125,7 @@ export const SelectedShapeActions = ({
         </div>
       </fieldset>
 
-      {targetElements.length > 1 && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && (
         <fieldset>
           <legend>{t("labels.align")}</legend>
           <div className="buttonList">
@@ -173,15 +158,14 @@ export const SelectedShapeActions = ({
           </div>
         </fieldset>
       )}
-      {!isEditing && targetElements.length > 0 && (
+      {!isMobile && !isEditing && targetElements.length > 0 && (
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
-            {!device.isMobile && renderAction("duplicateSelection")}
+            {renderAction("duplicateSelection")}
-            {!device.isMobile && renderAction("deleteSelectedElements")}
+            {renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
-            {showLinkIcon && renderAction("hyperlink")}
           </div>
         </fieldset>
       )}
@@ -191,16 +175,14 @@ export const SelectedShapeActions = ({
 
 export const ShapesSwitcher = ({
   canvas,
-  activeTool,
+  elementType,
   setAppState,
   onImageAction,
-  appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  activeTool: AppState["activeTool"];
+  elementType: ExcalidrawElement["type"];
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
-  appState: AppState;
 }) => (
   <>
     {SHAPES.map(({ value, icon, key }, index) => {
@@ -215,37 +197,20 @@ export const ShapesSwitcher = ({
           key={value}
           type="radio"
           icon={icon}
-          checked={activeTool.type === value}
+          checked={elementType === value}
           name="editor-current-shape"
           title={`${capitalizeString(label)} — ${shortcut}`}
           keyBindingLabel={`${index + 1}`}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
           data-testid={value}
-          onPointerDown={({ pointerType }) => {
-            if (!appState.penDetected && pointerType === "pen") {
-              setAppState({
-                penDetected: true,
-                penMode: true,
-              });
-            }
-          }}
           onChange={({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
-            const nextActiveTool = updateActiveTool(appState, {
-              type: value,
-            });
             setAppState({
-              activeTool: nextActiveTool,
+              elementType: value,
               multiElement: null,
               selectedElementIds: {},
             });
-            setCursorForShape(canvas, {
+            setCursorForShape(canvas, value);
-              ...appState,
-              activeTool: nextActiveTool,
-            });
             if (value === "image") {
               onImageAction({ pointerType });
             }

src/components/Avatar.scss

@@ -12,11 +12,5 @@
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 500;
-
-    &-img {
-      width: 100%;
-      height: 100%;
-      border-radius: 100%;
-    }
   }
 }

src/components/Avatar.tsx

@@ -1,36 +1,20 @@
 import "./Avatar.scss";
 
-import React, { useState } from "react";
+import React from "react";
-import { getClientInitials } from "../clients";
 
 type AvatarProps = {
+  children: string;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
   border: string;
-  name: string;
-  src?: string;
 };
 
-export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
+export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
-  const shortName = getClientInitials(name);
+  <div
-  const [error, setError] = useState(false);
+    className="Avatar"
-  const loadImg = !error && src;
+    style={{ background: color, border: `1px solid ${border}` }}
-  const style = loadImg
+    onClick={onClick}
-    ? undefined
+  >
-    : { background: color, border: `1px solid ${border}` };
+    {children}
-  return (
+  </div>
-    <div className="Avatar" style={style} onClick={onClick}>
+);
-      {loadImg ? (
-        <img
-          className="Avatar-img"
-          src={src}
-          alt={shortName}
-          referrerPolicy="no-referrer"
-          onError={() => setError(true)}
-        />
-      ) : (
-        shortName
-      )}
-    </div>
-  );
-};

src/components/ButtonIconSelect.tsx

@@ -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>

src/components/Card.tsx

@@ -4,7 +4,6 @@ import "./Card.scss";
 
 export const Card: React.FC<{
   color: keyof OpenColor | "primary";
-  children?: React.ReactNode;
 }> = ({ children, color }) => {
   return (
     <div

src/components/CheckboxItem.tsx

@@ -8,7 +8,6 @@ export const CheckboxItem: React.FC<{
   checked: boolean;
   onChange: (checked: boolean, event: React.MouseEvent) => void;
   className?: string;
-  children?: React.ReactNode;
 }> = ({ children, checked, onChange, className }) => {
   return (
     <div

src/components/ClearCanvas.tsx

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

src/components/CollabButton.scss

@@ -18,15 +18,13 @@
       left: -5px;
     }
     min-width: 1em;
-    min-height: 1em;
-    line-height: 1;
     position: absolute;
     bottom: -5px;
     padding: 3px;
     border-radius: 50%;
     background-color: $oc-green-6;
     color: $oc-white;
-    font-size: 0.6em;
+    font-size: 0.7em;
-    font-family: "Cascadia";
+    font-family: var(--ui-font);
   }
 }

src/components/CollabButton.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useDevice } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { users } from "./icons";
 
 import "./CollabButton.scss";
@@ -26,9 +26,9 @@ const CollabButton = ({
         type="button"
         title={t("labels.liveCollaboration")}
         aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useDevice().isMobile}
+        showAriaLabel={useIsMobile()}
       >
-        {isCollaborating && (
+        {collaboratorCount > 0 && (
           <div className="CollabButton-collaborators">{collaboratorCount}</div>
         )}
       </ToolButton>

src/components/ColorPicker.scss

@@ -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;
   }

src/components/ColorPicker.tsx

@@ -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) {
@@ -128,119 +71,52 @@ const Picker = ({
   }, []);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    let handled = false;
+    if (event.key === KEYS.TAB) {
-    if (isArrowKey(event.key)) {
+      const { activeElement } = document;
-      handled = true;
+      if (event.shiftKey) {
+        if (activeElement === firstItem.current) {
+          colorInput.current?.focus();
+          event.preventDefault();
+        }
+      } else if (activeElement === colorInput.current) {
+        firstItem.current?.focus();
+        event.preventDefault();
+      }
+    } else if (isArrowKey(event.key)) {
       const { activeElement } = document;
       const isRTL = getLanguage().rtl;
-      let isCustom = false;
+      const index = Array.prototype.indexOf.call(
-      let index = Array.prototype.indexOf.call(
+        gallery!.current!.children,
-        gallery.current!.querySelector(".color-picker-content--default")
-          ?.children,
         activeElement,
       );
-      if (index === -1) {
+      if (index !== -1) {
-        index = Array.prototype.indexOf.call(
+        const length = gallery!.current!.children.length - (showInput ? 1 : 0);
-          gallery.current!.querySelector(".color-picker-content--canvas-colors")
-            ?.children,
-          activeElement,
-        );
-        if (index !== -1) {
-          isCustom = true;
-        }
-      }
-      const parentElement = isCustom
-        ? gallery.current?.querySelector(".color-picker-content--canvas-colors")
-        : gallery.current?.querySelector(".color-picker-content--default");
-
-      if (parentElement && index !== -1) {
-        const length = parentElement.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;
-        (parentElement.children[nextIndex] as HTMLElement | undefined)?.focus();
+        (gallery!.current!.children![nextIndex] as any).focus();
       }
       event.preventDefault();
     } else if (
       keyBindings.includes(event.key.toLowerCase()) &&
-      !event[KEYS.CTRL_OR_CMD] &&
-      !event.altKey &&
       !isWritableElement(event.target)
     ) {
-      handled = true;
       const index = keyBindings.indexOf(event.key.toLowerCase());
-      const isCustom = index >= MAX_DEFAULT_COLORS;
+      (gallery!.current!.children![index] as any).focus();
-      const parentElement = isCustom
-        ? gallery?.current?.querySelector(
-            ".color-picker-content--canvas-colors",
-          )
-        : gallery?.current?.querySelector(".color-picker-content--default");
-      const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (
-        parentElement?.children[actualIndex] as HTMLElement | undefined
-      )?.focus();
-
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
-      handled = true;
       event.preventDefault();
       onClose();
     }
-    if (handled) {
+    event.nativeEvent.stopImmediatePropagation();
-      event.nativeEvent.stopImmediatePropagation();
+    event.stopPropagation();
-      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 (
@@ -260,23 +136,43 @@ const Picker = ({
             gallery.current = el;
           }
         }}
-        // to allow focusing by clicking but not by tabbing
+        tabIndex={0}
-        tabIndex={-1}
       >
-        <div className="color-picker-content--default">
+        {colors.map((_color, i) => {
-          {renderColors(colors)}
+          const _colorWithoutHash = _color.replace("#", "");
-        </div>
+          return (
-        {!!customColors.length && (
+            <button
-          <div className="color-picker-content--canvas">
+              className="color-picker-swatch"
-            <span className="color-picker-content--canvas-title">
+              onClick={(event) => {
-              {t("labels.canvasColors")}
+                (event.currentTarget as HTMLButtonElement).focus();
-            </span>
+                onChange(_color);
-            <div className="color-picker-content--canvas-colors">
+              }}
-              {renderColors(customColors, true)}
+              title={`${t(`colors.${_colorWithoutHash}`)}${
-            </div>
+                !isTransparent(_color) ? ` (${_color})` : ""
-          </div>
+              } — ${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}
@@ -350,8 +246,6 @@ export const ColorPicker = ({
   label,
   isActive,
   setActive,
-  elements,
-  appState,
 }: {
   type: "canvasBackground" | "elementBackground" | "elementStroke";
   color: string | null;
@@ -359,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);
 
@@ -402,7 +294,6 @@ export const ColorPicker = ({
               label={label}
               showInput={false}
               type={type}
-              elements={elements}
             />
           </Popover>
         ) : null}

src/components/ContextMenu.tsx

@@ -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 = "";
+          const label = option.contextItemLabel
-          if (option.contextItemLabel) {
+            ? t(option.contextItemLabel)
-            if (typeof option.contextItemLabel === "function") {
+            : "";
-              label = t(option.contextItemLabel(elements, appState));
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
           return (
             <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
               <button
@@ -70,9 +58,7 @@ const ContextMenu = ({
                   dangerous: actionName === "deleteSelectedElements",
                   checkmark: option.checked?.(appState),
                 })}
-                onClick={() =>
+                onClick={() => actionManager.executeAction(option)}
-                  actionManager.executeAction(option, "contextMenu")
-                }
               >
                 <div className="context-menu-option__label">{label}</div>
                 <kbd className="context-menu-option__shortcut">
@@ -111,7 +97,6 @@ type ContextMenuParams = {
   actionManager: ContextMenuProps["actionManager"];
   appState: Readonly<AppState>;
   container: HTMLElement;
-  elements: readonly NonDeletedExcalidrawElement[];
 };
 
 const handleClose = (container: HTMLElement) => {
@@ -140,7 +125,6 @@ export default {
           onCloseRequest={() => handleClose(params.container)}
           actionManager={params.actionManager}
           appState={params.appState}
-          elements={params.elements}
         />,
         getContextMenuNode(params.container),
       );

src/components/Dialog.tsx

@@ -2,14 +2,13 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDevice } from "../components/App";
+import { useExcalidrawContainer, useIsMobile } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
-import { queryFocusableElements } from "../utils";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -65,6 +64,14 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
+  const queryFocusableElements = (node: HTMLElement) => {
+    const focusableElements = node.querySelectorAll<HTMLElement>(
+      "button, a, input, select, textarea, div[tabindex]",
+    );
+
+    return focusableElements ? Array.from(focusableElements) : [];
+  };
+
   const onClose = () => {
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
@@ -85,10 +92,9 @@ export const Dialog = (props: DialogProps) => {
           <button
             className="Modal__close"
             onClick={onClose}
-            title={t("buttons.close")}
             aria-label={t("buttons.close")}
           >
-            {useDevice().isMobile ? back : close}
+            {useIsMobile() ? back : close}
           </button>
         </h2>
         <div className="Dialog__content">{props.children}</div>

src/components/HelpDialog.tsx

@@ -139,7 +139,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
         <Section title={t("helpDialog.shortcuts")}>
           <Columns>
             <Column>
-              <ShortcutIsland caption={t("helpDialog.tools")}>
+              <ShortcutIsland caption={t("helpDialog.shapes")}>
                 <Shortcut
                   label={t("toolBar.selection")}
                   shortcuts={["V", "1"]}
@@ -149,20 +149,16 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   shortcuts={["R", "2"]}
                 />
                 <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
                 <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                 <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                 <Shortcut
                   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"]} />
                 <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
-                <Shortcut
-                  label={t("toolBar.eraser")}
-                  shortcuts={[getShortcutKey("E")]}
-                />
                 <Shortcut
                   label={t("helpDialog.editSelectedShape")}
                   shortcuts={[
@@ -209,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
@@ -268,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={[
@@ -363,10 +343,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                     getShortcutKey(`Alt+${t("helpDialog.drag")}`),
                   ]}
                 />
-                <Shortcut
-                  label={t("helpDialog.toggleElementLock")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+L")]}
-                />
                 <Shortcut
                   label={t("buttons.undo")}
                   shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
@@ -406,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>

src/components/HintViewer.tsx

@@ -11,7 +11,6 @@ import {
   isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
-import { isEraserActive } from "../appState";
 
 interface HintViewerProps {
   appState: AppState;
@@ -20,32 +19,25 @@ interface HintViewerProps {
 }
 
 const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
-  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
+  const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.isLibraryOpen) {
+  if (elementType === "arrow" || elementType === "line") {
-    return null;
-  }
-
-  if (isEraserActive(appState)) {
-    return t("hints.eraserRevert");
-  }
-  if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (!multiMode) {
       return t("hints.linearElement");
     }
     return t("hints.linearElementMulti");
   }
 
-  if (activeTool.type === "freedraw") {
+  if (elementType === "freedraw") {
     return t("hints.freeDraw");
   }
 
-  if (activeTool.type === "text") {
+  if (elementType === "text") {
     return t("hints.text");
   }
 
-  if (appState.activeTool.type === "image" && appState.pendingImageElementId) {
+  if (appState.elementType === "image" && appState.pendingImageElement) {
     return t("hints.placeImage");
   }
 
@@ -69,27 +61,6 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.rotate");
   }
 
-  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
-    return t("hints.text_selected");
-  }
-
-  if (appState.editingElement && isTextElement(appState.editingElement)) {
-    return t("hints.text_editing");
-  }
-
-  if (activeTool.type === "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) {
@@ -104,6 +75,18 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     }
   }
 
+  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
+    return t("hints.text_selected");
+  }
+
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
+    return t("hints.text_editing");
+  }
+
+  if (elementType === "selection" && !selectedElements.length && !isMobile) {
+    return t("hints.canvasPanning");
+  }
+
   return null;
 };
 

src/components/ImageExportDialog.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
+import { ActionsManagerInterface } from "../actions/types";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useDevice } from "./App";
+import { useIsMobile } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@@ -18,7 +19,6 @@ import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING } from "../constants";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { ActionManager } from "../actions/manager";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -58,7 +58,6 @@ const ExportButton: React.FC<{
   onClick: () => void;
   title: string;
   shade?: number;
-  children?: React.ReactNode;
 }> = ({ children, title, onClick, color, shade = 6 }) => {
   return (
     <button
@@ -91,7 +90,7 @@ const ImageExportModal = ({
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
@@ -171,9 +170,7 @@ const ImageExportModal = ({
         <Stack.Row gap={2}>
           {actionManager.renderAction("changeExportScale")}
         </Stack.Row>
-        <p style={{ marginLeft: "1em", userSelect: "none" }}>
+        <p style={{ marginLeft: "1em", userSelect: "none" }}>Scale</p>
-          {t("buttons.scale")}
-        </p>
       </div>
       <div
         style={{
@@ -232,7 +229,7 @@ export const ImageExportDialog = ({
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
@@ -253,7 +250,7 @@ export const ImageExportDialog = ({
         icon={exportImage}
         type="button"
         aria-label={t("buttons.exportImage")}
-        showAriaLabel={useDevice().isMobile}
+        showAriaLabel={useIsMobile()}
         title={t("buttons.exportImage")}
       />
       {modalIsShown && (