Merge remote-tracking branch 'origin/master' into aakansha-sm

fix
upload sourcemaps to cdn
2021-01-21 13:15:32 +05:30 · 2021-01-20 21:21:50 +05:30 · 2021-01-20 21:20:28 +05:30 · 2021-01-20 01:58:45 +05:30
178 changed files with 32318 additions and 24402 deletions
@@ -1,10 +1,10 @@
 *
-!.env
-!.eslintrc.json
-!.npmrc
-!.prettierrc
-!package.json
 !public/
 !src/
+!.npmrc
+!.eslintrc.json
+!.prettierrc
+!package-lock.json
+!package.json
 !tsconfig.json
-!yarn.lock
+!.env
@@ -2,7 +2,6 @@
  "extends": ["prettier", "react-app"],
  "plugins": ["prettier"],
  "rules": {
-    "@typescript-eslint/no-unused-vars": "warn",
    "curly": "warn",
    "dot-notation": "warn",
    "import/no-anonymous-default-export": "off",
@@ -23,6 +22,7 @@
    ],
    "no-unneeded-ternary": "warn",
    "no-unused-expressions": "warn",
+    "no-unused-vars": "warn",
    "no-useless-return": "warn",
    "no-var": "warn",
    "object-shorthand": "warn",
@@ -1,33 +1,36 @@
 version: 2
 updates:
  - package-ecosystem: npm
-    directory: /
+    directory: "/"
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
+    open-pull-requests-limit: 99
    reviewers:
      - lipis
    assignees:
      - lipis

  - package-ecosystem: npm
-    directory: /src/packages/excalidraw/
+    directory: "/src/packages/excalidraw/"
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
+    open-pull-requests-limit: 99
    reviewers:
      - ad1992
    assignees:
      - ad1992

  - package-ecosystem: npm
-    directory: /src/packages/utils/
+    directory: "/src/packages/utils/"
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
+    open-pull-requests-limit: 99
    reviewers:
      - ad1992
    assignees:
@@ -8,6 +8,7 @@ on:
 jobs:
  build-docker:
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1
      - run: docker build -t excalidraw .
@@ -7,23 +7,27 @@ on:
  pull_request:

 jobs:
-  packages:
+  build:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v1
+
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
+
      - name: Install dependencies
        run: |
-          yarn --frozen-lockfile
-          yarn --cwd src/packages/excalidraw
-          yarn --cwd src/packages/utils
+          npm ci
+          npm ci --prefix src/packages/excalidraw
+          npm ci --prefix src/packages/utils
+
      - name: Build @excalidraw/excalidraw
        run: |
-          yarn --cwd src/packages/excalidraw run pack
+          npm run pack --prefix src/packages/excalidraw
+
      - name: Build @excalidraw/utils
        run: |
-          yarn --cwd src/packages/utils run pack
+          npm run pack --prefix src/packages/utils
@@ -1,13 +1,8 @@
-name: Cancel previous runs
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-
+name: Cancel
+on: [push]
 jobs:
  cancel:
+    name: "Cancel Previous Runs"
    runs-on: ubuntu-latest
    timeout-minutes: 3
    steps:
@@ -1,22 +1,28 @@
 name: Lint

-on: pull_request
+on:
+  push:
+    branches:
+      - master
+  pull_request:

 jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1

-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x

      - name: Install and lint
        run: |
-          yarn --frozen-lockfile
-          yarn test:other
-          yarn test:code
-          yarn test:typecheck
+          npm ci
+          npm run test:other
+          npm run test:code
+          npm run test:typecheck
+        env:
+          CI: true
@@ -3,7 +3,7 @@ name: Build locales coverage
 on:
  push:
    branches:
-      - l10n_master
+      - "l10n_master"

 jobs:
  locales:
@@ -14,18 +14,18 @@ jobs:
        with:
          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}

-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x

      - name: Create report file
        run: |
-          yarn locales-coverage
+          npm run locales-coverage
          FILE_CHANGED=$(git diff src/locales/percentages.json)
          if [ ! -z "${FILE_CHANGED}" ]; then
-            git config --global user.name 'Excalidraw Bot'
-            git config --global user.email 'bot@excalidraw.com'
+            git config --global user.name 'Kostas Bariotis'
+            git config --global user.email 'konmpar@gmail.com'
            git add src/locales/percentages.json
            git commit -am "Auto commit: Calculate translation coverage"
            git push
@@ -33,7 +33,7 @@ jobs:
      - name: Construct comment body
        id: getCommentBody
        run: |
-          body=$(yarn locales-coverage:description | grep '^[^>]')
+          body=$(npm run locales-coverage:description | grep '^[^>]')
          body="${body//'%'/'%25'}"
          body="${body//$'\n'/'%0A'}"
          body="${body//$'\r'/'%0D'}"
@@ -1,4 +1,4 @@
-name: Semantic PR title
+name: "Semantic PR title"

 on:
  pull_request_target:
@@ -8,7 +8,7 @@ on:
      - synchronize

 jobs:
-  semantic:
+  main:
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@v3.0.0
@@ -1,4 +1,4 @@
-name: New Sentry production release
+name: New Sentry Production Release

 on:
  push:
@@ -6,23 +6,27 @@ on:
      - master

 jobs:
-  sentry:
+  release:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v1.0.0
+
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
+
      - name: Install and build
        run: |
-          yarn --frozen-lockfile
-          yarn build:app
+          npm ci
+          npm run build:app
        env:
          CI: true
+
      - name: Install Sentry
        run: |
          curl -sL https://sentry.io/get-cli/ | bash
+
      - name: Create new Sentry release
        run: |
          export SENTRY_RELEASE=$(sentry-cli releases propose-version)
@@ -1,17 +1,26 @@
 name: Tests

-on: pull_request
+on:
+  push:
+    branches:
+      - master
+  pull_request:

 jobs:
  test:
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v1
+
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
+
      - name: Install and test
        run: |
-          yarn --frozen-lockfile
-          yarn test:app
+          npm ci
+          npm run test:app
+        env:
+          CI: true
@@ -16,7 +16,7 @@ firebase
 logs
 node_modules
 npm-debug.log*
-package-lock.json
 static
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
@@ -0,0 +1,4 @@
+{
+  "proseWrap": "never",
+  "trailingComma": "all"
+}
@@ -19,7 +19,7 @@
 ### Option 2 - CodeSandbox

 1. Go to https://codesandbox.io/s/github/excalidraw/excalidraw
-1. Connect your GitHub account
+1. Connect your Github account
 1. Go to Git tab on left side
 1. Tap on `Fork Sandbox`
 1. Write your code
@@ -35,6 +35,7 @@ Make sure the title starts with a semantic prefix:

 - **feat**: A new feature
 - **fix**: A bug fix
+- **improvement**: An improvement to a current feature
 - **docs**: Documentation only changes
 - **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - **refactor**: A code change that neither fixes a bug nor adds a feature
@@ -2,13 +2,13 @@ FROM node:14-alpine AS build

 WORKDIR /opt/node_app

-COPY package.json yarn.lock ./
-RUN yarn --ignore-optional
+COPY package.json package-lock.json ./
+RUN npm i --no-optional

 ARG NODE_ENV=production

 COPY . .
-RUN yarn build:app:docker
+RUN npm run build:app:docker

 FROM nginx:1.17-alpine

@@ -2,7 +2,7 @@
  <a href="https://excalidraw.com">
    <img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams." />
  </a>
-  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end-to-end encrypted.</h3>
+  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end to end encrypted.</h3>
  <p>
    <a href="https://twitter.com/Excalidraw">
      <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+excalidraw&style=social&logo=twitter">
@@ -11,7 +11,6 @@
      <img src="https://badges.crowdin.net/excalidraw/localized.svg">
    </a>
  </p>
-  <p>Ask questions or hang out on our <a target="_blank" href="https://discord.gg/UexuTaE">discord.gg/UexuTaE</a>.</p>
 </div>

 ## Try it now
@@ -20,14 +19,6 @@ Go to [excalidraw.com](https://excalidraw.com) to start sketching.

 Read the latest news and updates on our [blog](https://blog.excalidraw.com). A good start is to see all the updates of [One Year of Excalidraw](https://blog.excalidraw.com/one-year-of-excalidraw/).

-## Supporting Excalidraw
-
-If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).
-
-[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
-
-<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>
-
 ## Documentation

 ### Shortcuts
@@ -50,7 +41,7 @@ Translations will be available on the app if they exceed a certain threshold of

 ### Create a collaboration session manually

-In order to create a session manually, you just need to generate a link of this form:
+In order to create a session manually you just need to generate a link of this form:

 ```
 https://excalidraw.com/#room=[0-9a-f]{20},[a-zA-Z0-9_-]{22}
@@ -70,28 +61,18 @@ The second set of digits is the encryption key. The Excalidraw server doesn’t

 Find a growing list of libraries containing assets for your drawings at [libraries.excalidraw.com](https://libraries.excalidraw.com).

-## Embedding Excalidraw in your App?
-
-Try out [`@excalidraw/excalidraw`](https://www.npmjs.com/package/@excalidraw/excalidraw). This package allows you to easily embed Excalidraw as a React component into your apps.
-
-## Development
+## Developement

 ### Code Sandbox

 - Go to https://codesandbox.io/s/github/excalidraw/excalidraw
-  - You may need to sign in with GitHub and reload the page
+  - You may need to sign in with Github and reload the page
 - You can start coding instantly, and even send PRs from there!

 ### Local Installation

 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

-#### Requirements
-
- [Node.js](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/getting-started/install)
- [Git](https://git-scm.com/downloads)
-
 #### Clone the repo

 ```bash
@@ -100,26 +81,26 @@ git clone https://github.com/excalidraw/excalidraw.git

 #### Commands

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

 #### Docker Compose

-You can use docker-compose to work on Excalidraw locally if you don't want to setup a Node.js env.
+You can use docker-compose to work on excalidraw locally if you don't want to setup a Node.js env.

 ```sh
 docker-compose up --build -d
 ```

-### Self-hosting
+### Self hosting

-We publish a Docker image with the Excalidraw client at [excalidraw/excalidraw](https://hub.docker.com/r/excalidraw/excalidraw). You can use it to self-host your own client under your own domain, on Kubernetes, AWS ECS, etc.
+We publish a Docker image with the Excalidraw client at [excalidraw/excalidraw](https://hub.docker.com/r/excalidraw/excalidraw). You can use it to self host your own client under your own domain, on Kubernetes, AWS ECS, etc.

 ```sh
 docker build -t excalidraw/excalidraw .
@@ -130,7 +111,7 @@ The Docker image is free of analytics and other tracking libraries.

 **At the moment, self-hosting your own instance doesn't support sharing or collaboration features.**

-We are working towards providing a full-fledged solution for self-hosting your own Excalidraw.
+We are working towards providing a full-fledged solution for self hosting your own Excalidraw.

 ## Contributing

@@ -18,7 +18,7 @@ services:
    volumes:
      - ./:/opt/node_app/app:delegated
      - ./package.json:/opt/node_app/package.json
-      - ./yarn.lock:/opt/node_app/yarn.lock
+      - ./package-lock.json:/opt/node_app/package-lock.json
      - notused:/opt/node_app/app/node_modules

 volumes:
@@ -21,5 +21,12 @@
        }
      ]
    }
+  ],
+  "redirects": [
+    {
+      "source": "/([^.]+)",
+      "destination": "/",
+      "statusCode": 301
+    }
  ]
 }
@@ -19,20 +19,21 @@
    ]
  },
  "dependencies": {
-    "@sentry/browser": "6.2.0",
-    "@sentry/integrations": "6.2.0",
+    "@sentry/browser": "5.30.0",
+    "@sentry/integrations": "5.30.0",
    "@testing-library/jest-dom": "5.11.9",
-    "@testing-library/react": "11.2.5",
+    "@testing-library/react": "11.2.3",
    "@types/jest": "26.0.20",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.1",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
    "@types/socket.io-client": "1.4.35",
-    "browser-fs-access": "0.14.0",
+    "browser-nativefs": "0.12.0",
    "clsx": "1.1.1",
-    "firebase": "8.2.9",
+    "firebase": "8.2.3",
    "i18next-browser-languagedetector": "6.0.1",
    "lodash.throttle": "4.1.1",
    "nanoid": "3.1.20",
+    "node-sass": "4.14.1",
    "open-color": "1.8.0",
    "pako": "1.0.11",
    "png-chunk-text": "1.0.0",
@@ -42,29 +43,26 @@
    "pwacompat": "2.0.17",
    "react": "17.0.1",
    "react-dom": "17.0.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "4.0.1",
    "roughjs": "4.3.1",
-    "sass": "1.32.8",
    "socket.io-client": "2.3.1",
-    "typescript": "4.1.5"
+    "typescript": "4.1.3"
  },
  "devDependencies": {
-    "@excalidraw/prettier-config": "1.0.2",
    "@types/lodash.throttle": "4.1.6",
    "@types/pako": "1.0.1",
-    "@types/resize-observer-browser": "0.1.5",
-    "eslint-config-prettier": "8.1.0",
+    "eslint-config-prettier": "7.1.0",
    "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.5.0",
+    "firebase-tools": "9.2.1",
    "husky": "4.3.8",
-    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "10.5.4",
+    "jest-canvas-mock": "2.3.0",
+    "lint-staged": "10.5.3",
    "pepjs": "0.5.3",
    "prettier": "2.2.1",
    "rewire": "5.0.0"
  },
  "engines": {
-    "node": ">=14.0.0"
+    "node": ">=12.0.0"
  },
  "homepage": ".",
  "husky": {
@@ -74,34 +72,33 @@
  },
  "jest": {
    "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-nativefs)/)"
    ],
    "resetMocks": false
  },
  "name": "excalidraw",
-  "prettier": "@excalidraw/prettier-config",
  "private": true,
  "scripts": {
    "build-node": "node ./scripts/build-node.js",
    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
    "build:version": "node ./scripts/build-version.js",
-    "build": "yarn build:app && yarn build:version",
+    "build": "npm run build:app && npm run build:version",
    "eject": "react-scripts eject",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
+    "fix:code": "npm run test:code -- --fix",
+    "fix:other": "npm run prettier -- --write",
+    "fix": "npm run fix:other && npm run fix:code",
    "locales-coverage": "node scripts/build-locales-coverage.js",
    "locales-coverage:description": "node scripts/locales-coverage-description.js",
    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "react-scripts start",
-    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
+    "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run test:app -- --watchAll=false",
    "test:app": "react-scripts test --passWithNoTests",
    "test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
-    "test:other": "yarn prettier --list-different",
+    "test:other": "npm run prettier -- --list-different",
    "test:typecheck": "tsc",
-    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
-    "test": "yarn test:app"
+    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
+    "test": "npm run test:app"
  }
 }
@@ -1,7 +1,7 @@
 /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
@font-face {
  font-family: "Virgil";
-  src: url("Virgil.woff2");
+  src: url("FG_Virgil.woff2");
  font-display: swap;
 }

@@ -57,10 +57,9 @@

    <!-- Excalidraw version -->
    <meta name="version" content="{version}" />
-
    <link
      rel="preload"
-      href="Virgil.woff2"
+      href="FG_Virgil.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
@@ -86,9 +85,7 @@
    />

    <link rel="stylesheet" href="fonts.css" type="text/css" />
-    <script>
-      window.EXCALIDRAW_ASSET_PATH = "/";
-    </script>
+
    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
    <script
      async
@@ -5,7 +5,7 @@

 // In order to run:
 //   npm install canvas # please do not check it in
-//   yarn build-node
+//   npm run build-node
 //   node build/static/js/build-node.js
 //   open test.png

@@ -18,7 +18,6 @@ const crowdinMap = {
  "id-ID": "en-id",
  "it-IT": "en-it",
  "ja-JP": "en-ja",
-  "kab-KAB": "en-kab",
  "ko-KR": "en-ko",
  "my-MM": "en-my",
  "nb-NO": "en-nb",
@@ -41,7 +40,7 @@ const crowdinMap = {
 const flags = {
  "ar-SA": "🇸🇦",
  "bg-BG": "🇧🇬",
-  "ca-ES": "🏳",
+  "ca-ES": "🇪🇸",
  "de-DE": "🇩🇪",
  "el-GR": "🇬🇷",
  "es-ES": "🇪🇸",
@@ -54,7 +53,6 @@ const flags = {
  "id-ID": "🇮🇩",
  "it-IT": "🇮🇹",
  "ja-JP": "🇯🇵",
-  "kab-KAB": "🏳",
  "ko-KR": "🇰🇷",
  "my-MM": "🇲🇲",
  "nb-NO": "🇳🇴",
@@ -90,7 +88,6 @@ const languages = {
  "id-ID": "Bahasa Indonesia",
  "it-IT": "Italiano",
  "ja-JP": "日本語",
-  "kab-KAB": "Taqbaylit",
  "ko-KR": "한국어",
  "my-MM": "Burmese",
  "nb-NO": "Norsk bokmål",
@@ -17,5 +17,6 @@ export const actionAddToLibrary = register({
    });
    return false;
  },
+  contextMenuOrder: 6,
  contextItemLabel: "labels.addToLibrary",
 });
@@ -3,7 +3,6 @@ import { getDefaultAppState } from "../appState";
 import { ColorPicker } from "../components/ColorPicker";
 import { resetZoom, trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
@@ -76,6 +75,8 @@ export const actionClearCanvas = register({
  ),
 });

+const ZOOM_STEP = 0.1;
+
 export const actionZoomIn = register({
  name: "zoomIn",
  perform: (_elements, appState) => {
@@ -1,114 +0,0 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-import { copyToClipboard } from "../clipboard";
-import { actionDeleteSelected } from "./actionDeleteSelected";
-import { getSelectedElements } from "../scene/selection";
-import { exportCanvas } from "../data/index";
-import { getNonDeletedElements } from "../element";
-import { t } from "../i18n";
-
-export const actionCopy = register({
-  name: "copy",
-  perform: (elements, appState) => {
-    copyToClipboard(getNonDeletedElements(elements), appState);
-
-    return {
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.copy",
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.C,
-});
-
-export const actionCut = register({
-  name: "cut",
-  perform: (elements, appState, data, app) => {
-    actionCopy.perform(elements, appState, data, app);
-    return actionDeleteSelected.perform(elements, appState, data, app);
-  },
-  contextItemLabel: "labels.cut",
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
-});
-
-export const actionCopyAsSvg = register({
-  name: "copyAsSvg",
-  perform: async (elements, appState, _data, app) => {
-    if (!app.canvas) {
-      return {
-        commitToHistory: false,
-      };
-    }
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    try {
-      await exportCanvas(
-        "clipboard-svg",
-        selectedElements.length
-          ? selectedElements
-          : getNonDeletedElements(elements),
-        appState,
-        app.canvas,
-        appState,
-      );
-      return {
-        commitToHistory: false,
-      };
-    } catch (error) {
-      console.error(error);
-      return {
-        appState: {
-          ...appState,
-          errorMessage: error.message,
-        },
-        commitToHistory: false,
-      };
-    }
-  },
-  contextItemLabel: "labels.copyAsSvg",
-});
-
-export const actionCopyAsPng = register({
-  name: "copyAsPng",
-  perform: async (elements, appState, _data, app) => {
-    if (!app.canvas) {
-      return {
-        commitToHistory: false,
-      };
-    }
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    try {
-      await exportCanvas(
-        "clipboard",
-        selectedElements.length
-          ? selectedElements
-          : getNonDeletedElements(elements),
-        appState,
-        app.canvas,
-        appState,
-      );
-      return {
-        appState: {
-          ...appState,
-          toastMessage: t("toast.copyToClipboardAsPng"),
-        },
-        commitToHistory: false,
-      };
-    } catch (error) {
-      console.error(error);
-      return {
-        appState: {
-          ...appState,
-          errorMessage: error.message,
-        },
-        commitToHistory: false,
-      };
-    }
-  },
-  contextItemLabel: "labels.copyAsPng",
-  keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
-});
@@ -136,6 +136,7 @@ export const actionDeleteSelected = register({
    };
  },
  contextItemLabel: "labels.delete",
+  contextMenuOrder: 999999,
  keyTest: (event) => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
@@ -5,7 +5,6 @@ import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
-import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -97,24 +96,9 @@ export const actionChangeShouldAddWatermark = register({
 export const actionSaveScene = register({
  name: "saveScene",
  perform: async (elements, appState, value) => {
-    const fileHandleExists = !!appState.fileHandle;
    try {
      const { fileHandle } = await saveAsJSON(elements, appState);
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          fileHandle,
-          toastMessage: fileHandleExists
-            ? fileHandle.name
-              ? t("toast.fileSavedToFilename").replace(
-                  "{filename}",
-                  `"${fileHandle.name}"`,
-                )
-              : t("toast.fileSaved")
-            : null,
-        },
-      };
+      return { commitToHistory: false, appState: { ...appState, fileHandle } };
    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
@@ -205,31 +189,3 @@ export const actionLoadScene = register({
    />
  ),
 });
-
-export const actionExportWithDarkMode = register({
-  name: "exportWithDarkMode",
-  perform: (_elements, appState, value) => {
-    return {
-      appState: { ...appState, exportWithDarkMode: value },
-      commitToHistory: false,
-    };
-  },
-  PanelComponent: ({ appState, updateData }) => (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "flex-end",
-        marginTop: "-45px",
-        marginBottom: "10px",
-      }}
-    >
-      <DarkModeToggle
-        value={appState.exportWithDarkMode ? "dark" : "light"}
-        onChange={(appearance: Appearence) => {
-          updateData(appearance === "dark");
-        }}
-        title={t("labels.toggleExportColorScheme")}
-      />
-    </div>
-  ),
-});
@@ -83,7 +83,7 @@ export const actionFinalize = register({
      // If the multi point line closes the loop,
      // set the last point to first point.
      // This ensures that loop remains closed at different scales.
-      const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
+      const isLoop = isPathALoop(multiPointElement.points);
      if (
        multiPointElement.type === "line" ||
        multiPointElement.type === "draw"
@@ -125,6 +125,7 @@ export const actionGroup = register({
      commitToHistory: true,
    };
  },
+  contextMenuOrder: 4,
  contextItemLabel: "labels.group",
  contextItemPredicate: (elements, appState) =>
    enableActionGroup(elements, appState),
@@ -173,6 +174,7 @@ export const actionUngroup = register({
  },
  keyTest: (event) =>
    event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
+  contextMenuOrder: 5,
  contextItemLabel: "labels.ungroup",
  contextItemPredicate: (elements, appState) =>
    getSelectedGroupIds(appState).length > 0,
@@ -6,7 +6,7 @@ import { t } from "../i18n";
 import { SceneHistory, HistoryEntry } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
-import { isWindows, KEYS } from "../keys";
+import { KEYS } from "../keys";
 import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
@@ -59,16 +59,16 @@ const writeData = (
  return { commitToHistory };
 };

+const testUndo = (shift: boolean) => (event: KeyboardEvent) =>
+  event[KEYS.CTRL_OR_CMD] && /z/i.test(event.key) && event.shiftKey === shift;
+
 type ActionCreator = (history: SceneHistory) => Action;

 export const createUndoAction: ActionCreator = (history) => ({
  name: "undo",
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.undoOnce()),
-  keyTest: (event) =>
-    event[KEYS.CTRL_OR_CMD] &&
-    event.key.toLowerCase() === KEYS.Z &&
-    !event.shiftKey,
+  keyTest: testUndo(false),
  PanelComponent: ({ updateData }) => (
    <ToolButton
      type="button"
@@ -84,11 +84,7 @@ export const createRedoAction: ActionCreator = (history) => ({
  name: "redo",
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.redoOnce()),
-  keyTest: (event) =>
-    (event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      event.key.toLowerCase() === KEYS.Z) ||
-    (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
+  keyTest: testUndo(true),
  PanelComponent: ({ updateData }) => (
    <ToolButton
      type="button"
@@ -74,7 +74,7 @@ export const actionShortcuts = register({
    return {
      appState: {
        ...appState,
-        showHelpDialog: !appState.showHelpDialog,
+        showHelpDialog: true,
      },
      commitToHistory: false,
    };
@@ -42,7 +42,7 @@ export const actionGoToCollaborator = register({
      return null;
    }

-    const { background, stroke } = getClientColors(clientId, appState);
+    const { background, stroke } = getClientColors(clientId);
    const shortName = getClientInitials(collaborator.username);

    return (
@@ -34,6 +34,7 @@ export const actionCopyStyles = register({
  contextItemLabel: "labels.copyStyles",
  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.C,
+  contextMenuOrder: 0,
 });

 export const actionPasteStyles = register({
@@ -73,4 +74,5 @@ export const actionPasteStyles = register({
  contextItemLabel: "labels.pasteStyles",
  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
+  contextMenuOrder: 1,
 });
@@ -1,22 +0,0 @@
-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",
-  perform(elements, appState) {
-    trackEvent("view", "mode", "grid");
-    return {
-      appState: {
-        ...appState,
-        gridSize: this.checked!(appState) ? null : GRID_SIZE,
-      },
-      commitToHistory: false,
-    };
-  },
-  checked: (appState: AppState) => appState.gridSize !== null,
-  contextItemLabel: "labels.showGrid",
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
-});
@@ -1,16 +0,0 @@
-import { register } from "./register";
-
-export const actionToggleStats = register({
-  name: "stats",
-  perform(elements, appState) {
-    return {
-      appState: {
-        ...appState,
-        showStats: !this.checked!(appState),
-      },
-      commitToHistory: false,
-    };
-  },
-  checked: (appState) => appState.showStats,
-  contextItemLabel: "stats.title",
-});
@@ -1,22 +0,0 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-import { trackEvent } from "../analytics";
-
-export const actionToggleViewMode = register({
-  name: "viewMode",
-  perform(elements, appState) {
-    trackEvent("view", "mode", "view");
-    return {
-      appState: {
-        ...appState,
-        viewModeEnabled: !this.checked!(appState),
-        selectedElementIds: {},
-      },
-      commitToHistory: false,
-    };
-  },
-  checked: (appState) => appState.viewModeEnabled,
-  contextItemLabel: "labels.viewMode",
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,
-});
@@ -1,22 +0,0 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-import { trackEvent } from "../analytics";
-
-export const actionToggleZenMode = register({
-  name: "zenMode",
-  perform(elements, appState) {
-    trackEvent("view", "mode", "zen");
-
-    return {
-      appState: {
-        ...appState,
-        zenModeEnabled: !this.checked!(appState),
-      },
-      commitToHistory: false,
-    };
-  },
-  checked: (appState) => appState.zenModeEnabled,
-  contextItemLabel: "buttons.zenMode",
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,
-});
@@ -65,15 +65,3 @@ export {
  distributeHorizontally,
  distributeVertically,
 } from "./actionDistribute";
-
-export {
-  actionCopy,
-  actionCut,
-  actionCopyAsPng,
-  actionCopyAsSvg,
-} from "./actionClipboard";
-
-export { actionToggleGridMode } from "./actionToggleGridMode";
-export { actionToggleZenMode } from "./actionToggleZenMode";
-
-export { actionToggleStats } from "./actionToggleStats";
@@ -3,16 +3,14 @@ import {
  Action,
  ActionsManagerInterface,
  UpdaterFn,
+  ActionFilterFn,
  ActionName,
  ActionResult,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppState, ExcalidrawProps } from "../types";
-import { MODES } from "../constants";
-
-// This is the <App> component, but for now we don't care about anything but its
-// `canvas` state.
-type App = { canvas: HTMLCanvasElement | null; props: ExcalidrawProps };
+import { AppState } from "../types";
+import { t } from "../i18n";
+import { ShortcutName } from "./shortcuts";

 export class ActionManager implements ActionsManagerInterface {
  actions = {} as ActionsManagerInterface["actions"];
@@ -20,14 +18,13 @@ export class ActionManager implements ActionsManagerInterface {
  updater: (actionResult: ActionResult | Promise<ActionResult>) => void;

  getAppState: () => Readonly<AppState>;
+
  getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
-  app: App;

  constructor(
    updater: UpdaterFn,
    getAppState: () => AppState,
    getElementsIncludingDeleted: () => readonly ExcalidrawElement[],
-    app: App,
  ) {
    this.updater = (actionResult) => {
      if (actionResult && "then" in actionResult) {
@@ -40,7 +37,6 @@ export class ActionManager implements ActionsManagerInterface {
    };
    this.getAppState = getAppState;
    this.getElementsIncludingDeleted = getElementsIncludingDeleted;
-    this.app = app;
  }

  registerAction(action: Action) {
@@ -67,12 +63,6 @@ export class ActionManager implements ActionsManagerInterface {
    if (data.length === 0) {
      return false;
    }
-    const { viewModeEnabled } = this.getAppState();
-    if (viewModeEnabled) {
-      if (!Object.values(MODES).includes(data[0].name)) {
-        return false;
-      }
-    }

    event.preventDefault();
    this.updater(
@@ -80,7 +70,6 @@ export class ActionManager implements ActionsManagerInterface {
        this.getElementsIncludingDeleted(),
        this.getAppState(),
        null,
-        this.app,
      ),
    );
    return true;
@@ -92,11 +81,43 @@ export class ActionManager implements ActionsManagerInterface {
        this.getElementsIncludingDeleted(),
        this.getAppState(),
        null,
-        this.app,
      ),
    );
  }

+  getContextMenuItems(actionFilter: ActionFilterFn = (action) => action) {
+    return Object.values(this.actions)
+      .filter(actionFilter)
+      .filter((action) => "contextItemLabel" in action)
+      .filter((action) =>
+        action.contextItemPredicate
+          ? action.contextItemPredicate(
+              this.getElementsIncludingDeleted(),
+              this.getAppState(),
+            )
+          : true,
+      )
+      .sort(
+        (a, b) =>
+          (a.contextMenuOrder !== undefined ? a.contextMenuOrder : 999) -
+          (b.contextMenuOrder !== undefined ? b.contextMenuOrder : 999),
+      )
+      .map((action) => ({
+        // take last bit of the label  "labels.<shortcutName>"
+        shortcutName: action.contextItemLabel?.split(".").pop() as ShortcutName,
+        label: action.contextItemLabel ? t(action.contextItemLabel) : "",
+        action: () => {
+          this.updater(
+            action.perform(
+              this.getElementsIncludingDeleted(),
+              this.getAppState(),
+              null,
+            ),
+          );
+        },
+      }));
+  }
+
  // Id is an attribute that we can use to pass in data like keys.
  // This is needed for dynamically generated action components
  // like the user list. We can use this key to extract more
@@ -111,7 +132,6 @@ export class ActionManager implements ActionsManagerInterface {
            this.getElementsIncludingDeleted(),
            this.getAppState(),
            formState,
-            this.app,
          ),
        );
      };
@@ -9,7 +9,7 @@ export type ShortcutName =
  | "copyStyles"
  | "pasteStyles"
  | "selectAll"
-  | "deleteSelectedElements"
+  | "delete"
  | "duplicateSelection"
  | "sendBackward"
  | "bringForward"
@@ -22,8 +22,7 @@ export type ShortcutName =
  | "gridMode"
  | "zenMode"
  | "stats"
-  | "addToLibrary"
-  | "viewMode";
+  | "addToLibrary";

 const shortcutMap: Record<ShortcutName, string[]> = {
  cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -32,7 +31,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  copyStyles: [getShortcutKey("CtrlOrCmd+Alt+C")],
  pasteStyles: [getShortcutKey("CtrlOrCmd+Alt+V")],
  selectAll: [getShortcutKey("CtrlOrCmd+A")],
-  deleteSelectedElements: [getShortcutKey("Del")],
+  delete: [getShortcutKey("Del")],
  duplicateSelection: [
    getShortcutKey("CtrlOrCmd+D"),
    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
@@ -57,7 +56,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  zenMode: [getShortcutKey("Alt+Z")],
  stats: [],
  addToLibrary: [],
-  viewMode: [getShortcutKey("Alt+R")],
 };

 export const getShortcutFromShortcutName = (name: ShortcutName) => {
@@ -16,18 +16,12 @@ type ActionFn = (
  elements: readonly ExcalidrawElement[],
  appState: Readonly<AppState>,
  formData: any,
-  app: { canvas: HTMLCanvasElement | null },
 ) => ActionResult | Promise<ActionResult>;

 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;

 export type ActionName =
-  | "copy"
-  | "cut"
-  | "paste"
-  | "copyAsPng"
-  | "copyAsSvg"
  | "sendBackward"
  | "bringForward"
  | "sendToBack"
@@ -35,9 +29,6 @@ export type ActionName =
  | "copyStyles"
  | "selectAll"
  | "pasteStyles"
-  | "gridMode"
-  | "zenMode"
-  | "stats"
  | "changeStrokeColor"
  | "changeBackgroundColor"
  | "changeFillStyle"
@@ -84,9 +75,7 @@ export type ActionName =
  | "alignVerticallyCentered"
  | "alignHorizontallyCentered"
  | "distributeHorizontally"
-  | "distributeVertically"
-  | "viewMode"
-  | "exportWithDarkMode";
+  | "distributeVertically";

 export interface Action {
  name: ActionName;
@@ -104,16 +93,19 @@ export interface Action {
    elements: readonly ExcalidrawElement[],
  ) => boolean;
  contextItemLabel?: string;
+  contextMenuOrder?: number;
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => boolean;
-  checked?: (appState: Readonly<AppState>) => boolean;
 }

 export interface ActionsManagerInterface {
  actions: Record<ActionName, Action>;
  registerAction: (action: Action) => void;
  handleKeyDown: (event: KeyboardEvent) => boolean;
+  getContextMenuItems: (
+    actionFilter: ActionFilterFn,
+  ) => { label: string; action: () => void }[];
  renderAction: (name: ActionName) => React.ReactElement | null;
 }
@@ -5,7 +5,7 @@ import {
  DEFAULT_TEXT_ALIGN,
 } from "./constants";
 import { t } from "./i18n";
-import { AppState, NormalizedZoomValue } from "./types";
+import { AppState, FlooredNumber, NormalizedZoomValue } from "./types";
 import { getDateTime } from "./utils";

 export const getDefaultAppState = (): Omit<
@@ -40,7 +40,6 @@ export const getDefaultAppState = (): Omit<
    errorMessage: null,
    exportBackground: true,
    exportEmbedScene: false,
-    exportWithDarkMode: false,
    fileHandle: null,
    gridSize: null,
    height: window.innerHeight,
@@ -57,8 +56,8 @@ export const getDefaultAppState = (): Omit<
    previousSelectedElementIds: {},
    resizingElement: null,
    scrolledOutside: false,
-    scrollX: 0,
-    scrollY: 0,
+    scrollX: 0 as FlooredNumber,
+    scrollY: 0 as FlooredNumber,
    selectedElementIds: {},
    selectedGroupIds: {},
    selectionElement: null,
@@ -73,7 +72,6 @@ export const getDefaultAppState = (): Omit<
    width: window.innerWidth,
    zenModeEnabled: false,
    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
-    viewModeEnabled: false,
  };
 };

@@ -119,7 +117,6 @@ const APP_STATE_STORAGE_CONF = (<
  errorMessage: { browser: false, export: false },
  exportBackground: { browser: true, export: false },
  exportEmbedScene: { browser: true, export: false },
-  exportWithDarkMode: { browser: true, export: false },
  fileHandle: { browser: false, export: false },
  gridSize: { browser: true, export: true },
  height: { browser: false, export: false },
@@ -154,7 +151,6 @@ const APP_STATE_STORAGE_CONF = (<
  width: { browser: false, export: false },
  zenModeEnabled: { browser: true, export: false },
  zoom: { browser: true, export: false },
-  viewModeEnabled: { browser: false, export: false },
 });

 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(
@@ -1,13 +1,6 @@
 import colors from "./colors";
-import { AppState } from "./types";

-export const getClientColors = (clientId: string, appState: AppState) => {
-  if (appState?.collaborators) {
-    const currentUser = appState.collaborators.get(clientId);
-    if (currentUser?.color) {
-      return currentUser.color;
-    }
-  }
+export const getClientColors = (clientId: string) => {
  // Naive way of getting an integer out of the clientId
  const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);

@@ -2,30 +2,8 @@ import { Point, simplify } from "points-on-curve";
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
-import clsx from "clsx";
-
-import {
-  actionAddToLibrary,
-  actionBringForward,
-  actionBringToFront,
-  actionCopy,
-  actionCopyAsPng,
-  actionCopyAsSvg,
-  actionCopyStyles,
-  actionCut,
-  actionDeleteSelected,
-  actionDuplicateSelection,
-  actionFinalize,
-  actionGroup,
-  actionPasteStyles,
-  actionSelectAll,
-  actionSendBackward,
-  actionSendToBack,
-  actionToggleGridMode,
-  actionToggleStats,
-  actionToggleZenMode,
-  actionUngroup,
-} from "../actions";
+import "../actions";
+import { actionDeleteSelected, actionFinalize } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
 import { actions } from "../actions/register";
@@ -40,6 +18,7 @@ import {
 } from "../clipboard";
 import {
  APP_NAME,
+  CANVAS_ONLY_ACTIONS,
  CURSOR_TYPE,
  DEFAULT_VERTICAL_ALIGN,
  DRAGGING_THRESHOLD,
@@ -51,13 +30,11 @@ import {
  LINE_CONFIRM_THRESHOLD,
  MIME_TYPES,
  POINTER_BUTTON,
-  SCROLL_TIMEOUT,
  TAP_TWICE_TIMEOUT,
  TEXT_TO_CENTER_SNAP_THRESHOLD,
  TOUCH_CTX_MENU_TIMEOUT,
-  ZOOM_STEP,
 } from "../constants";
-import { loadFromBlob } from "../data";
+import { exportCanvas, loadFromBlob } from "../data";
 import { isValidLibrary } from "../data/json";
 import { Library } from "../data/library";
 import { restore } from "../data/restore";
@@ -150,6 +127,7 @@ import {
  getSelectedElements,
  isOverScrollBars,
  isSomeElementSelected,
+  normalizeScroll,
 } from "../scene";
 import Scene from "../scene/Scene";
 import { SceneState, ScrollBars } from "../scene/types";
@@ -177,12 +155,10 @@ import {
  viewportCoordsToSceneCoords,
  withBatchedUpdates,
 } from "../utils";
-import { isMobile } from "../is-mobile";
-import ContextMenu, { ContextMenuOption } from "./ContextMenu";
+import ContextMenu from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
-import { actionToggleViewMode } from "../actions/actionToggleViewMode";

 const { history } = createHistory();

@@ -272,7 +248,6 @@ export type ExcalidrawImperativeAPI = {
  };
  setScrollToCenter: InstanceType<typeof App>["setScrollToCenter"];
  getSceneElements: InstanceType<typeof App>["getSceneElements"];
-  getAppState: () => InstanceType<typeof App>["state"];
  readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
  ready: true;
 };
@@ -299,9 +274,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      offsetLeft,
      offsetTop,
      excalidrawRef,
-      viewModeEnabled = false,
-      zenModeEnabled = false,
-      gridModeEnabled = false,
    } = props;
    this.state = {
      ...defaultAppState,
@@ -309,9 +281,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      width,
      height,
      ...this.getCanvasOffsets({ offsetLeft, offsetTop }),
-      viewModeEnabled,
-      zenModeEnabled,
-      gridSize: gridModeEnabled ? GRID_SIZE : null,
    };
    if (excalidrawRef) {
      const readyPromise =
@@ -329,7 +298,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        },
        setScrollToCenter: this.setScrollToCenter,
        getSceneElements: this.getSceneElements,
-        getAppState: () => this.state,
      } as const;
      if (typeof excalidrawRef === "function") {
        excalidrawRef(api);
@@ -344,7 +312,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.syncActionResult,
      () => this.state,
      () => this.scene.getElementsIncludingDeleted(),
-      this,
    );
    this.actionManager.registerAll(actions);

@@ -352,62 +319,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    this.actionManager.registerAction(createRedoAction(history));
  }

-  private renderCanvas() {
-    const canvasScale = window.devicePixelRatio;
-    const {
-      width: canvasDOMWidth,
-      height: canvasDOMHeight,
-      viewModeEnabled,
-    } = this.state;
-    const canvasWidth = canvasDOMWidth * canvasScale;
-    const canvasHeight = canvasDOMHeight * canvasScale;
-    if (viewModeEnabled) {
-      return (
-        <canvas
-          id="canvas"
-          style={{
-            width: canvasDOMWidth,
-            height: canvasDOMHeight,
-            cursor: "grabbing",
-          }}
-          width={canvasWidth}
-          height={canvasHeight}
-          ref={this.handleCanvasRef}
-          onContextMenu={this.handleCanvasContextMenu}
-          onPointerMove={this.handleCanvasPointerMove}
-          onPointerUp={this.removePointer}
-          onPointerCancel={this.removePointer}
-          onTouchMove={this.handleTouchMove}
-          onPointerDown={this.handleCanvasPointerDown}
-        >
-          {t("labels.drawingCanvas")}
-        </canvas>
-      );
-    }
-    return (
-      <canvas
-        id="canvas"
-        style={{
-          width: canvasDOMWidth,
-          height: canvasDOMHeight,
-        }}
-        width={canvasWidth}
-        height={canvasHeight}
-        ref={this.handleCanvasRef}
-        onContextMenu={this.handleCanvasContextMenu}
-        onPointerDown={this.handleCanvasPointerDown}
-        onDoubleClick={this.handleCanvasDoubleClick}
-        onPointerMove={this.handleCanvasPointerMove}
-        onPointerUp={this.removePointer}
-        onPointerCancel={this.removePointer}
-        onTouchMove={this.handleTouchMove}
-        onDrop={this.handleCanvasOnDrop}
-      >
-        {t("labels.drawingCanvas")}
-      </canvas>
-    );
-  }
-
  public render() {
    const {
      zenModeEnabled,
@@ -415,19 +326,20 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      height: canvasDOMHeight,
      offsetTop,
      offsetLeft,
-      viewModeEnabled,
    } = this.state;

    const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
+    const canvasScale = window.devicePixelRatio;
+
+    const canvasWidth = canvasDOMWidth * canvasScale;
+    const canvasHeight = canvasDOMHeight * canvasScale;

    const DEFAULT_PASTE_X = canvasDOMWidth / 2;
    const DEFAULT_PASTE_Y = canvasDOMHeight / 2;

    return (
      <div
-        className={clsx("excalidraw", {
-          "excalidraw--view-mode": viewModeEnabled,
-        })}
+        className="excalidraw"
        ref={this.excalidrawContainerRef}
        style={{
          width: canvasDOMWidth,
@@ -457,16 +369,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          isCollaborating={this.props.isCollaborating || false}
          onExportToBackend={onExportToBackend}
          renderCustomFooter={renderFooter}
-          viewModeEnabled={viewModeEnabled}
-          showExitZenModeBtn={
-            typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
-          }
        />
-        <div className="excalidraw-textEditorContainer" />
        {this.state.showStats && (
          <Stats
            appState={this.state}
-            setAppState={this.setAppState}
            elements={this.scene.getElements()}
            onClose={this.toggleStats}
          />
@@ -477,7 +383,28 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            clearToast={this.clearToast}
          />
        )}
-        <main>{this.renderCanvas()}</main>
+        <main>
+          <canvas
+            id="canvas"
+            style={{
+              width: canvasDOMWidth,
+              height: canvasDOMHeight,
+            }}
+            width={canvasWidth}
+            height={canvasHeight}
+            ref={this.handleCanvasRef}
+            onContextMenu={this.handleCanvasContextMenu}
+            onPointerDown={this.handleCanvasPointerDown}
+            onDoubleClick={this.handleCanvasDoubleClick}
+            onPointerMove={this.handleCanvasPointerMove}
+            onPointerUp={this.removePointer}
+            onPointerCancel={this.removePointer}
+            onTouchMove={this.handleTouchMove}
+            onDrop={this.handleCanvasOnDrop}
+          >
+            {t("labels.drawingCanvas")}
+          </canvas>
+        </main>
      </div>
    );
  }
@@ -517,23 +444,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        if (actionResult.commitToHistory) {
          history.resumeRecording();
        }
-
-        let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
-        let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
-        let gridSize = actionResult?.appState?.gridSize || null;
-
-        if (typeof this.props.viewModeEnabled !== "undefined") {
-          viewModeEnabled = this.props.viewModeEnabled;
-        }
-
-        if (typeof this.props.zenModeEnabled !== "undefined") {
-          zenModeEnabled = this.props.zenModeEnabled;
-        }
-
-        if (typeof this.props.gridModeEnabled !== "undefined") {
-          gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
-        }
-
        this.setState(
          (state) => ({
            ...actionResult.appState,
@@ -543,9 +453,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            height: state.height,
            offsetTop: state.offsetTop,
            offsetLeft: state.offsetLeft,
-            viewModeEnabled,
-            zenModeEnabled,
-            gridSize,
          }),
          () => {
            if (actionResult.syncHistory) {
@@ -672,24 +579,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    scene.appState = {
      ...scene.appState,
+      ...calculateScrollCenter(
+        scene.elements,
+        {
+          ...scene.appState,
+          width: this.state.width,
+          height: this.state.height,
+          offsetTop: this.state.offsetTop,
+          offsetLeft: this.state.offsetLeft,
+        },
+        null,
+      ),
      isLoading: false,
    };
-    if (initialData?.scrollToCenter) {
-      scene.appState = {
-        ...scene.appState,
-        ...calculateScrollCenter(
-          scene.elements,
-          {
-            ...scene.appState,
-            width: this.state.width,
-            height: this.state.height,
-            offsetTop: this.state.offsetTop,
-            offsetLeft: this.state.offsetLeft,
-          },
-          null,
-        ),
-      };
-    }

    this.resetHistory();
    this.syncActionResult({
@@ -733,6 +635,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }

    this.scene.addCallback(this.onSceneUpdated);
+
    this.addEventListeners();

    // optim to avoid extra render on init
@@ -799,16 +702,25 @@ class App extends React.Component<ExcalidrawProps, AppState> {
  }

  private addEventListeners() {
-    this.removeEventListeners();
    document.addEventListener(EVENT.COPY, this.onCopy);
+    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
+    document.addEventListener(EVENT.CUT, this.onCut);
+
    document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
    document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
    document.addEventListener(
      EVENT.MOUSE_MOVE,
      this.updateCurrentCursorPosition,
    );
+    window.addEventListener(EVENT.RESIZE, this.onResize, false);
+    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
+    window.addEventListener(EVENT.BLUR, this.onBlur, false);
+    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
+    window.addEventListener(EVENT.DROP, this.disableEvent, false);
+
    // rerender text elements on font load to fix #637 && #1553
    document.fonts?.addEventListener?.("loadingdone", this.onFontLoaded);
+
    // Safari-only desktop pinch zoom
    document.addEventListener(
      EVENT.GESTURE_START,
@@ -825,19 +737,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.onGestureEnd as any,
      false,
    );
-    if (this.state.viewModeEnabled) {
-      return;
-    }
-
-    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
-    document.addEventListener(EVENT.CUT, this.onCut);
-    document.addEventListener(EVENT.SCROLL, this.onScroll);
-
-    window.addEventListener(EVENT.RESIZE, this.onResize, false);
-    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
-    window.addEventListener(EVENT.BLUR, this.onBlur, false);
-    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-    window.addEventListener(EVENT.DROP, this.disableEvent, false);
  }

  componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) {
@@ -860,26 +759,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      });
    }

-    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
-      this.setState(
-        { viewModeEnabled: !!this.props.viewModeEnabled },
-        this.addEventListeners,
-      );
-    }
-
-    if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
-      this.addEventListeners();
-    }
-
-    if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {
-      this.setState({ zenModeEnabled: !!this.props.zenModeEnabled });
-    }
-
-    if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {
-      this.setState({
-        gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
-      });
-    }
    document
      .querySelector(".excalidraw")
      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@@ -919,7 +798,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    const pointerViewportCoords: SceneState["remotePointerViewportCoords"] = {};
    const remoteSelectedElementIds: SceneState["remoteSelectedElementIds"] = {};
    const pointerUsernames: { [id: string]: string } = {};
-    const pointerUserStates: { [id: string]: string } = {};
    this.state.collaborators.forEach((user, socketId) => {
      if (user.selectedElementIds) {
        for (const id of Object.keys(user.selectedElementIds)) {
@@ -935,9 +813,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      if (user.username) {
        pointerUsernames[socketId] = user.username;
      }
-      if (user.userState) {
-        pointerUserStates[socketId] = user.userState;
-      }
      pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
        {
          sceneX: user.pointer.x,
@@ -972,12 +847,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        remotePointerButton: cursorButton,
        remoteSelectedElementIds,
        remotePointerUsernames: pointerUsernames,
-        remotePointerUserStates: pointerUserStates,
        shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
      },
      {
        renderOptimizations: true,
-        renderScrollbars: !isMobile(),
      },
    );
    if (scrollBars) {
@@ -1006,10 +879,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }
  }

-  private onScroll = debounce(() => {
-    this.setState({ ...this.getCanvasOffsets() });
-  }, SCROLL_TIMEOUT);
-
  // Copy/paste

  private onCut = withBatchedUpdates((event: ClipboardEvent) => {
@@ -1037,6 +906,44 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    copyToClipboard(this.scene.getElements(), this.state);
  };

+  private copyToClipboardAsPng = async () => {
+    const elements = this.scene.getElements();
+
+    const selectedElements = getSelectedElements(elements, this.state);
+    try {
+      await exportCanvas(
+        "clipboard",
+        selectedElements.length ? selectedElements : elements,
+        this.state,
+        this.canvas!,
+        this.state,
+      );
+      this.setState({ toastMessage: t("toast.copyToClipboardAsPng") });
+    } catch (error) {
+      console.error(error);
+      this.setState({ errorMessage: error.message });
+    }
+  };
+
+  private copyToClipboardAsSvg = async () => {
+    const selectedElements = getSelectedElements(
+      this.scene.getElements(),
+      this.state,
+    );
+    try {
+      await exportCanvas(
+        "clipboard-svg",
+        selectedElements.length ? selectedElements : this.scene.getElements(),
+        this.state,
+        this.canvas!,
+        this.state,
+      );
+    } catch (error) {
+      console.error(error);
+      this.setState({ errorMessage: error.message });
+    }
+  };
+
  private static resetTapTwice() {
    didTapTwice = false;
  }
@@ -1239,14 +1146,24 @@ class App extends React.Component<ExcalidrawProps, AppState> {
  };

  toggleZenMode = () => {
-    this.actionManager.executeAction(actionToggleZenMode);
+    this.setState({
+      zenModeEnabled: !this.state.zenModeEnabled,
+    });
+  };
+
+  toggleGridMode = () => {
+    this.setState({
+      gridSize: this.state.gridSize ? null : GRID_SIZE,
+    });
  };

  toggleStats = () => {
    if (!this.state.showStats) {
      trackEvent("dialog", "stats");
    }
-    this.actionManager.executeAction(actionToggleStats);
+    this.setState({
+      showStats: !this.state.showStats,
+    });
  };

  setScrollToCenter = (remoteElements: readonly ExcalidrawElement[]) => {
@@ -1336,18 +1253,27 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      });
    }

-    if (this.actionManager.handleKeyDown(event)) {
-      return;
+    if (!event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z) {
+      this.toggleZenMode();
    }

-    if (this.state.viewModeEnabled) {
-      return;
+    if (event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE) {
+      this.toggleGridMode();
    }
-
    if (event[KEYS.CTRL_OR_CMD]) {
      this.setState({ isBindingEnabled: false });
    }

+    if (event.code === CODES.C && event.altKey && event.shiftKey) {
+      this.copyToClipboardAsPng();
+      event.preventDefault();
+      return;
+    }
+
+    if (this.actionManager.handleKeyDown(event)) {
+      return;
+    }
+
    if (event.code === CODES.NINE) {
      this.setState({ isLibraryOpen: !this.state.isLibraryOpen });
    }
@@ -1562,7 +1488,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    textWysiwyg({
      id: element.id,
      appState: this.state,
-      canvas: this.canvas,
      getViewportCoords: (x, y) => {
        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
          {
@@ -1853,8 +1778,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const scaleFactor = distance / gesture.initialDistance;

      this.setState(({ zoom, scrollX, scrollY, offsetLeft, offsetTop }) => ({
-        scrollX: scrollX + deltaX / zoom.value,
-        scrollY: scrollY + deltaY / zoom.value,
+        scrollX: normalizeScroll(scrollX + deltaX / zoom.value),
+        scrollY: normalizeScroll(scrollY + deltaY / zoom.value),
        zoom: getNewZoom(
          getNormalizedZoom(initialScale * scaleFactor),
          zoom,
@@ -1871,11 +1796,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    if (isHoldingSpace || isPanning || isDraggingScrollBar) {
      return;
    }
-
    const isPointerOverScrollBars = isOverScrollBars(
      currentScrollBars,
-      event.clientX - this.state.offsetLeft,
-      event.clientY - this.state.offsetTop,
+      event.clientX,
+      event.clientY,
    );
    const isOverScrollBar = isPointerOverScrollBars.isOverEither;
    if (!this.state.draggingElement && !this.state.multiElement) {
@@ -1969,7 +1893,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          points: points.slice(0, -1),
        });
      } else {
-        if (isPathALoop(points, this.state.zoom.value)) {
+        if (isPathALoop(points)) {
          document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
        }
        // update last uncommitted point
@@ -2156,16 +2080,14 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    lastPointerUp = onPointerUp;

-    if (!this.state.viewModeEnabled) {
-      window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
-      window.addEventListener(EVENT.POINTER_UP, onPointerUp);
-      window.addEventListener(EVENT.KEYDOWN, onKeyDown);
-      window.addEventListener(EVENT.KEYUP, onKeyUp);
-      pointerDownState.eventListeners.onMove = onPointerMove;
-      pointerDownState.eventListeners.onUp = onPointerUp;
-      pointerDownState.eventListeners.onKeyUp = onKeyUp;
-      pointerDownState.eventListeners.onKeyDown = onKeyDown;
-    }
+    window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
+    window.addEventListener(EVENT.POINTER_UP, onPointerUp);
+    window.addEventListener(EVENT.KEYDOWN, onKeyDown);
+    window.addEventListener(EVENT.KEYUP, onKeyUp);
+    pointerDownState.eventListeners.onMove = onPointerMove;
+    pointerDownState.eventListeners.onUp = onPointerUp;
+    pointerDownState.eventListeners.onKeyUp = onKeyUp;
+    pointerDownState.eventListeners.onKeyDown = onKeyDown;
  };

  private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
@@ -2215,8 +2137,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      !(
        gesture.pointers.size === 0 &&
        (event.button === POINTER_BUTTON.WHEEL ||
-          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
-          this.state.viewModeEnabled)
+          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
      )
    ) {
      return false;
@@ -2269,8 +2190,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      }

      this.setState({
-        scrollX: this.state.scrollX - deltaX / this.state.zoom.value,
-        scrollY: this.state.scrollY - deltaY / this.state.zoom.value,
+        scrollX: normalizeScroll(
+          this.state.scrollX - deltaX / this.state.zoom.value,
+        ),
+        scrollY: normalizeScroll(
+          this.state.scrollY - deltaY / this.state.zoom.value,
+        ),
      });
    });
    const teardown = withBatchedUpdates(
@@ -2331,8 +2256,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      ),
      scrollbars: isOverScrollBars(
        currentScrollBars,
-        event.clientX - this.state.offsetLeft,
-        event.clientY - this.state.offsetTop,
+        event.clientX,
+        event.clientY,
      ),
      // we need to duplicate because we'll be updating this state
      lastCoords: { ...origin },
@@ -2641,10 +2566,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const { multiElement } = this.state;

      // finalize if completing a loop
-      if (
-        multiElement.type === "line" &&
-        isPathALoop(multiElement.points, this.state.zoom.value)
-      ) {
+      if (multiElement.type === "line" && isPathALoop(multiElement.points)) {
        mutateElement(multiElement, {
          lastCommittedPoint:
            multiElement.points[multiElement.points.length - 1],
@@ -3087,7 +3009,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const x = event.clientX;
      const dx = x - pointerDownState.lastCoords.x;
      this.setState({
-        scrollX: this.state.scrollX - dx / this.state.zoom.value,
+        scrollX: normalizeScroll(
+          this.state.scrollX - dx / this.state.zoom.value,
+        ),
      });
      pointerDownState.lastCoords.x = x;
      return true;
@@ -3097,7 +3021,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const y = event.clientY;
      const dy = y - pointerDownState.lastCoords.y;
      this.setState({
-        scrollY: this.state.scrollY - dy / this.state.zoom.value,
+        scrollY: normalizeScroll(
+          this.state.scrollY - dy / this.state.zoom.value,
+        ),
      });
      pointerDownState.lastCoords.y = y;
      return true;
@@ -3690,90 +3616,52 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.state,
    );

-    const maybeGroupAction = actionGroup.contextItemPredicate!(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
-
-    const maybeUngroupAction = actionUngroup.contextItemPredicate!(
-      this.actionManager.getElementsIncludingDeleted(),
-      this.actionManager.getAppState(),
-    );
-
-    const separator = "separator";
-
-    const _isMobile = isMobile();
-
    const elements = this.scene.getElements();
    const element = this.getElementAtPosition(x, y);
-    const options: ContextMenuOption[] = [];
-    if (probablySupportsClipboardBlob && elements.length > 0) {
-      options.push(actionCopyAsPng);
-    }
-
-    if (probablySupportsClipboardWriteText && elements.length > 0) {
-      options.push(actionCopyAsSvg);
-    }
    if (!element) {
-      const viewModeOptions = [
-        ...options,
-        typeof this.props.gridModeEnabled === "undefined" &&
-          actionToggleGridMode,
-        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
-        typeof this.props.viewModeEnabled === "undefined" &&
-          actionToggleViewMode,
-        actionToggleStats,
-      ];
-
-      ContextMenu.push({
-        options: viewModeOptions,
-        top: clientY,
-        left: clientX,
-        actionManager: this.actionManager,
-        appState: this.state,
-      });
-
-      if (this.state.viewModeEnabled) {
-        return;
-      }
-
      ContextMenu.push({
        options: [
-          _isMobile &&
-            navigator.clipboard && {
-              name: "paste",
-              perform: (elements, appStates) => {
-                this.pasteFromClipboard(null);
-                return {
-                  commitToHistory: false,
-                };
-              },
-              contextItemLabel: "labels.paste",
-            },
-          _isMobile && navigator.clipboard && separator,
+          navigator.clipboard && {
+            shortcutName: "paste",
+            label: t("labels.paste"),
+            action: () => this.pasteFromClipboard(null),
+          },
          probablySupportsClipboardBlob &&
-            elements.length > 0 &&
-            actionCopyAsPng,
+            elements.length > 0 && {
+              shortcutName: "copyAsPng",
+              label: t("labels.copyAsPng"),
+              action: this.copyToClipboardAsPng,
+            },
          probablySupportsClipboardWriteText &&
-            elements.length > 0 &&
-            actionCopyAsSvg,
-          ((probablySupportsClipboardBlob && elements.length > 0) ||
-            (probablySupportsClipboardWriteText && elements.length > 0)) &&
-            separator,
-          actionSelectAll,
-          separator,
-          typeof this.props.gridModeEnabled === "undefined" &&
-            actionToggleGridMode,
-          typeof this.props.zenModeEnabled === "undefined" &&
-            actionToggleZenMode,
-          typeof this.props.viewModeEnabled === "undefined" &&
-            actionToggleViewMode,
-          actionToggleStats,
+            elements.length > 0 && {
+              shortcutName: "copyAsSvg",
+              label: t("labels.copyAsSvg"),
+              action: this.copyToClipboardAsSvg,
+            },
+          ...this.actionManager.getContextMenuItems((action) =>
+            CANVAS_ONLY_ACTIONS.includes(action.name),
+          ),
+          {
+            checked: this.state.gridSize !== null,
+            shortcutName: "gridMode",
+            label: t("labels.gridMode"),
+            action: this.toggleGridMode,
+          },
+          {
+            checked: this.state.zenModeEnabled,
+            shortcutName: "zenMode",
+            label: t("buttons.zenMode"),
+            action: this.toggleZenMode,
+          },
+          {
+            checked: this.state.showStats,
+            shortcutName: "stats",
+            label: t("stats.title"),
+            action: this.toggleStats,
+          },
        ],
        top: clientY,
        left: clientX,
-        actionManager: this.actionManager,
-        appState: this.state,
      });
      return;
    }
@@ -3782,55 +3670,39 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.setState({ selectedElementIds: { [element.id]: true } });
    }

-    if (this.state.viewModeEnabled) {
-      ContextMenu.push({
-        options: [navigator.clipboard && actionCopy, ...options],
-        top: clientY,
-        left: clientX,
-        actionManager: this.actionManager,
-        appState: this.state,
-      });
-      return;
-    }
-
    ContextMenu.push({
      options: [
-        _isMobile && actionCut,
-        _isMobile && navigator.clipboard && actionCopy,
-        _isMobile &&
-          navigator.clipboard && {
-            name: "paste",
-            perform: (elements, appStates) => {
-              this.pasteFromClipboard(null);
-              return {
-                commitToHistory: false,
-              };
-            },
-            contextItemLabel: "labels.paste",
-          },
-        _isMobile && separator,
-        ...options,
-        separator,
-        actionCopyStyles,
-        actionPasteStyles,
-        separator,
-        maybeGroupAction && actionGroup,
-        maybeUngroupAction && actionUngroup,
-        (maybeGroupAction || maybeUngroupAction) && separator,
-        actionAddToLibrary,
-        separator,
-        actionSendBackward,
-        actionBringForward,
-        actionSendToBack,
-        actionBringToFront,
-        separator,
-        actionDuplicateSelection,
-        actionDeleteSelected,
+        {
+          shortcutName: "cut",
+          label: t("labels.cut"),
+          action: this.cutAll,
+        },
+        navigator.clipboard && {
+          shortcutName: "copy",
+          label: t("labels.copy"),
+          action: this.copyAll,
+        },
+        navigator.clipboard && {
+          shortcutName: "paste",
+          label: t("labels.paste"),
+          action: () => this.pasteFromClipboard(null),
+        },
+        probablySupportsClipboardBlob && {
+          shortcutName: "copyAsPng",
+          label: t("labels.copyAsPng"),
+          action: this.copyToClipboardAsPng,
+        },
+        probablySupportsClipboardWriteText && {
+          shortcutName: "copyAsSvg",
+          label: t("labels.copyAsSvg"),
+          action: this.copyToClipboardAsSvg,
+        },
+        ...this.actionManager.getContextMenuItems(
+          (action) => !CANVAS_ONLY_ACTIONS.includes(action.name),
+        ),
      ],
      top: clientY,
      left: clientX,
-      actionManager: this.actionManager,
-      appState: this.state,
    });
  };

@@ -3861,15 +3733,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        }, 1000);
      }

-      let newZoom = this.state.zoom.value - delta / 100;
-      // increase zoom steps the more zoomed-in we are (applies to >100% only)
-      newZoom += Math.log10(Math.max(1, this.state.zoom.value)) * -sign;
-      // round to nearest step
-      newZoom = Math.round(newZoom * ZOOM_STEP * 100) / (ZOOM_STEP * 100);
-
      this.setState(({ zoom, offsetLeft, offsetTop }) => ({
        zoom: getNewZoom(
-          getNormalizedZoom(newZoom),
+          getNormalizedZoom(zoom.value - delta / 100),
          zoom,
          { left: offsetLeft, top: offsetTop },
          {
@@ -3892,14 +3758,14 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    if (event.shiftKey) {
      this.setState(({ zoom, scrollX }) => ({
        // on Mac, shift+wheel tends to result in deltaX
-        scrollX: scrollX - (deltaY || deltaX) / zoom.value,
+        scrollX: normalizeScroll(scrollX - (deltaY || deltaX) / zoom.value),
      }));
      return;
    }

    this.setState(({ zoom, scrollX, scrollY }) => ({
-      scrollX: scrollX - deltaX / zoom.value,
-      scrollY: scrollY - deltaY / zoom.value,
+      scrollX: normalizeScroll(scrollX - deltaX / zoom.value),
+      scrollY: normalizeScroll(scrollY - deltaY / zoom.value),
    }));
  });

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .Avatar {
@@ -1,11 +1,10 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .CollabButton.is-collaborating {
-    background-color: var(--button-special-active-bg-color);
+    background-color: var(--button-special-active-background-color);

-    .ToolIcon__icon svg,
-    .ToolIcon__label {
+    .ToolIcon__icon svg {
      color: var(--icon-green-fill-color);
    }
  }
@@ -25,8 +25,8 @@ const CollabButton = ({
        onClick={onClick}
        icon={users}
        type="button"
-        title={t("labels.liveCollaboration")}
-        aria-label={t("labels.liveCollaboration")}
+        title={t("buttons.roomDialog")}
+        aria-label={t("buttons.roomDialog")}
        showAriaLabel={useIsMobile()}
      >
        {collaboratorCount > 0 && (
@@ -1,10 +1,10 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .color-picker {
-    background: var(--popup-bg-color);
-    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
+    background: var(--popup-background-color);
+    border: 0px solid transparentize($oc-white, 0.75);
+    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
    border-radius: 4px;
    position: absolute;

@@ -24,11 +24,11 @@
  }

  .color-picker-triangle {
-    width: 0;
-    height: 0;
+    width: 0px;
+    height: 0px;
    border-style: solid;
-    border-width: 0 9px 10px;
-    border-color: transparent transparent var(--popup-bg-color);
+    border-width: 0px 9px 10px;
+    border-color: transparent transparent var(--popup-background-color);
    position: absolute;
    top: -10px;

@@ -84,12 +84,12 @@

  .color-picker-transparent {
    border-radius: 4px;
-    box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
+    box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
  }

  .color-picker-transparent,
@@ -104,11 +104,11 @@
    width: 1.875rem;

    :root[dir="ltr"] & {
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px 0px 0px 4px;
    }

    :root[dir="rtl"] & {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0px 4px 4px 0px;
    }

    color: var(--input-label-color);
@@ -144,7 +144,7 @@
  }

  .color-input-container:focus-within .color-picker-hash::after {
-    background: var(--input-bg-color);
+    background: var(--input-background-color);

    :root[dir="ltr"] & {
      right: -2px;
@@ -163,19 +163,19 @@
    width: 12ch; /* length of `transparent` + 1 */
    margin: 0;
    font-size: 1rem;
-    background-color: var(--input-bg-color);
-    color: var(--text-primary-color);
-    border: 0;
+    background-color: var(--input-background-color);
+    color: var(--text-color-primary);
+    border: 0px;
    outline: none;
    height: 1.75em;
-    box-shadow: var(--input-border-color) 0 0 0 1px inset;
+    box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;

    :root[dir="ltr"] & {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0px 4px 4px 0px;
    }

    :root[dir="rtl"] & {
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px 0px 0px 4px;
    }

    float: left;
@@ -228,7 +228,7 @@
  }

  .color-picker-type-elementBackground .color-picker-keybinding {
-    color: $oc-white;
+    color: #fff;
  }

  .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
@@ -241,10 +241,10 @@

  &.Appearance_dark {
    .color-picker-type-elementBackground .color-picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
    .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
  }
 }
@@ -1,18 +1,17 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .context-menu {
    position: relative;
    border-radius: 4px;
-    box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
+    box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
    padding: 0;
    list-style: none;
    user-select: none;
    margin: -0.25rem 0 0 0.125rem;
-    padding: 0.5rem 0;
-    background-color: var(--popup-secondary-bg-color);
+    padding: 0.25rem 0;
+    background-color: var(--popup-secondary-background-color);
    border: 1px solid var(--button-gray-3);
-    cursor: default;
  }

  .context-menu button {
@@ -61,12 +60,12 @@
  }

  .context-menu-option:hover {
-    color: var(--popup-bg-color);
+    color: var(--popup-background-color);
    background-color: var(--select-highlight-color);

    &.dangerous {
      .context-menu-option__label {
-        color: var(--popup-bg-color);
+        color: var(--popup-background-color);
      }
      background-color: $oc-red-6;
    }
@@ -89,9 +88,4 @@
      }
    }
  }
-
-  .context-menu-option-separator {
-    border: none;
-    border-top: 1px solid $oc-gray-5;
-  }
 }
@@ -2,36 +2,28 @@ import React from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import clsx from "clsx";
 import { Popover } from "./Popover";
-import { t } from "../i18n";

 import "./ContextMenu.scss";
 import {
  getShortcutFromShortcutName,
  ShortcutName,
 } from "../actions/shortcuts";
-import { Action } from "../actions/types";
-import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";

-export type ContextMenuOption = "separator" | Action;
+type ContextMenuOption = {
+  checked?: boolean;
+  shortcutName: ShortcutName;
+  label: string;
+  action(): void;
+};

-type ContextMenuProps = {
+type Props = {
  options: ContextMenuOption[];
  onCloseRequest?(): void;
  top: number;
  left: number;
-  actionManager: ActionManager;
-  appState: Readonly<AppState>;
 };

-const ContextMenu = ({
-  options,
-  onCloseRequest,
-  top,
-  left,
-  actionManager,
-  appState,
-}: ContextMenuProps) => {
+const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
  const isDarkTheme = !!document
    .querySelector(".excalidraw")
    ?.classList.contains("Appearance_dark");
@@ -51,34 +43,23 @@ const ContextMenu = ({
          className="context-menu"
          onContextMenu={(event) => event.preventDefault()}
        >
-          {options.map((option, idx) => {
-            if (option === "separator") {
-              return <hr key={idx} className="context-menu-option-separator" />;
-            }
-
-            const actionName = option.name;
-            const label = option.contextItemLabel
-              ? t(option.contextItemLabel)
-              : "";
-            return (
-              <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
-                <button
-                  className={clsx("context-menu-option", {
-                    dangerous: actionName === "deleteSelectedElements",
-                    checkmark: option.checked?.(appState),
-                  })}
-                  onClick={() => actionManager.executeAction(option)}
-                >
-                  <div className="context-menu-option__label">{label}</div>
-                  <kbd className="context-menu-option__shortcut">
-                    {actionName
-                      ? getShortcutFromShortcutName(actionName as ShortcutName)
-                      : ""}
-                  </kbd>
-                </button>
-              </li>
-            );
-          })}
+          {options.map(({ action, checked, shortcutName, label }, idx) => (
+            <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
+              <button
+                className={`context-menu-option 
+                ${shortcutName === "delete" ? "dangerous" : ""}
+                ${checked ? "checkmark" : ""}`}
+                onClick={action}
+              >
+                <div className="context-menu-option__label">{label}</div>
+                <kbd className="context-menu-option__shortcut">
+                  {shortcutName
+                    ? getShortcutFromShortcutName(shortcutName)
+                    : ""}
+                </kbd>
+              </button>
+            </li>
+          ))}
        </ul>
      </Popover>
    </div>
@@ -97,10 +78,8 @@ const getContextMenuNode = (): HTMLDivElement => {

 type ContextMenuParams = {
  options: (ContextMenuOption | false | null | undefined)[];
-  top: ContextMenuProps["top"];
-  left: ContextMenuProps["left"];
-  actionManager: ContextMenuProps["actionManager"];
-  appState: Readonly<AppState>;
+  top: number;
+  left: number;
 };

 const handleClose = () => {
@@ -122,8 +101,6 @@ export default {
          left={params.left}
          options={options}
          onCloseRequest={handleClose}
-          actionManager={params.actionManager}
-          appState={params.appState}
        />,
        getContextMenuNode(),
      );
@@ -10,18 +10,13 @@ export type Appearence = "light" | "dark";
 export const DarkModeToggle = (props: {
  value: Appearence;
  onChange: (value: Appearence) => void;
-  title?: string;
 }) => {
-  const title = props.title
-    ? props.title
-    : props.value === "dark"
-    ? t("buttons.lightMode")
-    : t("buttons.darkMode");
-
  return (
    <label
      className={`ToolIcon ToolIcon_type_floating ToolIcon_size_M`}
-      title={title}
+      title={
+        props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
+      }
    >
      <input
        className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
@@ -30,7 +25,11 @@ export const DarkModeToggle = (props: {
          props.onChange(event.target.checked ? "dark" : "light")
        }
        checked={props.value === "dark"}
-        aria-label={title}
+        aria-label={
+          props.value === "dark"
+            ? t("buttons.lightMode")
+            : t("buttons.darkMode")
+        }
      />
      <div className="ToolIcon__icon">
        {props.value === "light" ? ICONS.MOON : ICONS.SUN}
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .Dialog {
@@ -45,7 +45,7 @@
      position: sticky;
      top: 0;
      padding: calc(var(--space-factor) * 2);
-      background: var(--island-bg-color);
+      background: var(--bg-color-island);
      font-size: 1.25em;

      box-sizing: border-box;
@@ -1,6 +1,5 @@
 import clsx from "clsx";
-import React, { useEffect } from "react";
-import { useCallbackRefState } from "../hooks/useCallbackRefState";
+import React, { useCallback, useEffect, useState } from "react";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { KEYS } from "../keys";
@@ -9,6 +8,14 @@ import { back, close } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";

+const useRefState = <T,>() => {
+  const [refValue, setRefValue] = useState<T | null>(null);
+  const refCallback = useCallback((value: T) => {
+    setRefValue(value);
+  }, []);
+  return [refValue, refCallback] as const;
+};
+
 export const Dialog = (props: {
  children: React.ReactNode;
  className?: string;
@@ -17,7 +24,7 @@ export const Dialog = (props: {
  title: React.ReactNode;
  autofocus?: boolean;
 }) => {
-  const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
+  const [islandNode, setIslandNode] = useRefState<HTMLDivElement>();

  useEffect(() => {
    if (!islandNode) {
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .ExportDialog__preview {
@@ -19,9 +19,6 @@ import { ToolButton } from "./ToolButton";
 const scales = [1, 2, 3];
 const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;

-const supportsContextFilters =
-  "filter" in document.createElement("canvas").getContext("2d")!;
-
 export const ErrorCanvasPreview = () => {
  return (
    <div>
@@ -131,8 +128,6 @@ const ExportModal = ({
  return (
    <div className="ExportDialog">
      <div className="ExportDialog__preview" ref={previewRef} />
-      {supportsContextFilters &&
-        actionManager.renderAction("exportWithDarkMode")}
      <Stack.Col gap={2} align="center">
        <div className="ExportDialog__actions">
          <Stack.Row gap={2}>
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .HelpDialog h3 {
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18n";
-import { isDarwin, isWindows } from "../keys";
+import { isDarwin } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
@@ -224,13 +224,9 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  shortcuts={[getShortcutKey("Alt+Z")]}
                />
                <Shortcut
-                  label={t("labels.showGrid")}
+                  label={t("labels.gridMode")}
                  shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
                />
-                <Shortcut
-                  label={t("labels.viewMode")}
-                  shortcuts={[getShortcutKey("Alt+R")]}
-                />
              </ShortcutIsland>
            </Column>
            <Column>
@@ -332,14 +328,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                />
                <Shortcut
                  label={t("buttons.redo")}
-                  shortcuts={
-                    isWindows
-                      ? [
-                          getShortcutKey("CtrlOrCmd+Y"),
-                          getShortcutKey("CtrlOrCmd+Shift+Z"),
-                        ]
-                      : [getShortcutKey("CtrlOrCmd+Shift+Z")]
-                  }
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
                />
                <Shortcut
                  label={t("labels.group")}
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 // this is loosely based on the longest hint text
 $wide-viewport-width: 1000px;
@@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;

    > span {
      padding: 0.2rem 0.4rem;
-      background-color: var(--overlay-bg-color);
+      background-color: var(--overlay-background-color);
      border-radius: 4px;
    }
  }
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .picker-container {
@@ -8,9 +8,9 @@
  }

  .picker {
-    background: var(--popup-bg-color);
-    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
+    background: var(--popup-background-color);
+    border: 0px solid transparentize($oc-white, 0.75);
+    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
    border-radius: 4px;
    position: absolute;
  }
@@ -56,8 +56,8 @@
  }

  .picker-triangle {
-    width: 0;
-    height: 0;
+    width: 0px;
+    height: 0px;
    position: relative;
    top: -10px;
    :root[dir="ltr"] & {
@@ -73,7 +73,7 @@
      content: "";
      position: absolute;
      border-style: solid;
-      border-width: 0 9px 10px;
+      border-width: 0px 9px 10px;
      border-color: transparent transparent transparentize($oc-black, 0.9);
      top: -1px;
    }
@@ -82,8 +82,8 @@
      content: "";
      position: absolute;
      border-style: solid;
-      border-width: 0 9px 10px;
-      border-color: transparent transparent var(--popup-bg-color);
+      border-width: 0px 9px 10px;
+      border-color: transparent transparent var(--popup-background-color);
    }
  }

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

  .picker-type-elementBackground .picker-keybinding {
-    color: $oc-white;
+    color: #fff;
  }

  .picker-swatch[aria-label="transparent"] .picker-keybinding {
@@ -134,10 +134,10 @@

  &.Appearance_dark {
    .picker-type-elementBackground .picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
    .picker-swatch[aria-label="transparent"] .picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
  }
 }
@@ -1,7 +1,12 @@
 import React from "react";

 import { LoadingMessage } from "./LoadingMessage";
-import { defaultLang, Language, languages, setLanguage } from "../i18n";
+import {
+  defaultLang,
+  Language,
+  languages,
+  setLanguageFirstTime,
+} from "../i18n";

 interface Props {
  langCode: Language["code"];
@@ -18,7 +23,7 @@ export class InitializeApp extends React.Component<Props, State> {
    const currentLang =
      languages.find((lang) => lang.code === this.props.langCode) ||
      defaultLang;
-    await setLanguage(currentLang);
+    await setLanguageFirstTime(currentLang);
    this.setState({
      isLoading: false,
    });
@@ -1,7 +1,7 @@
 .excalidraw {
  .Island {
    --padding: 0;
-    background-color: var(--island-bg-color);
+    background-color: var(--bg-color-island);
    backdrop-filter: saturate(100%) blur(10px);
    box-shadow: var(--shadow-island);
    border-radius: 4px;
@@ -19,9 +19,9 @@
      }

      a {
-        margin-inline-start: auto;
+        margin-left: auto;
        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
-        padding-inline-end: 18px;
+        padding-right: 18px;
        white-space: nowrap;
      }
    }
@@ -38,8 +38,6 @@
  }

  .layer-ui__wrapper {
-    z-index: var(--zIndex-layerUI);
-
    .encrypted-icon {
      position: relative;
      margin-inline-start: 15px;
@@ -73,7 +71,7 @@
    &__footer {
      position: absolute;
      z-index: 100;
-      bottom: 0;
+      bottom: 0px;

      :root[dir="ltr"] & {
        right: 0;
@@ -94,7 +92,7 @@
      }

      :root[dir="ltr"] &.transition-right {
-        transform: translate(999px, 0);
+        transform: translate(999px, 0px);
      }

      :root[dir="rtl"] &.transition-left {
@@ -11,7 +11,7 @@ import { CLASSES } from "../constants";
 import { exportCanvas } from "../data";
 import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
 import { Library } from "../data/library";
-import { isTextElement, showSelectedShapeActions } from "../element";
+import { showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -27,7 +27,7 @@ import { ExportCB, ExportDialog } from "./ExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { GitHubCorner } from "./GitHubCorner";
 import { HintViewer } from "./HintViewer";
-import { exportFile, load, shield, trash } from "./icons";
+import { exportFile, load, shield } from "./icons";
 import { Island } from "./Island";
 import "./LayerUI.scss";
 import { LibraryUnit } from "./LibraryUnit";
@@ -52,7 +52,6 @@ interface LayerUIProps {
  onLockToggle: () => void;
  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
  zenModeEnabled: boolean;
-  showExitZenModeBtn: boolean;
  toggleZenMode: () => void;
  langCode: Language["code"];
  isCollaborating: boolean;
@@ -62,7 +61,6 @@ interface LayerUIProps {
    canvas: HTMLCanvasElement | null,
  ) => void;
  renderCustomFooter?: (isMobile: boolean) => JSX.Element;
-  viewModeEnabled: boolean;
 }

 const useOnClickOutside = (
@@ -100,7 +98,6 @@ const LibraryMenuItems = ({
  onInsertShape,
  pendingElements,
  setAppState,
-  setLibraryItems,
 }: {
  library: LibraryItems;
  pendingElements: LibraryItem;
@@ -108,7 +105,6 @@ const LibraryMenuItems = ({
  onInsertShape: (elements: LibraryItem) => void;
  onAddToLibrary: (elements: LibraryItem) => void;
  setAppState: React.Component<any, AppState>["setState"];
-  setLibraryItems: (library: LibraryItems) => void;
 }) => {
  const isMobile = useIsMobile();
  const numCells = library.length + (pendingElements.length > 0 ? 1 : 0);
@@ -152,19 +148,6 @@ const LibraryMenuItems = ({
            });
        }}
      />
-      <ToolButton
-        key="reset"
-        type="button"
-        title={t("buttons.resetLibrary")}
-        aria-label={t("buttons.resetLibrary")}
-        icon={trash}
-        onClick={() => {
-          if (window.confirm(t("alerts.resetLibrary"))) {
-            Library.resetLibrary();
-            setLibraryItems([]);
-          }
-        }}
-      />

      <a href="https://libraries.excalidraw.com" target="_excalidraw_libraries">
        {t("labels.libraries")}
@@ -296,7 +279,6 @@ const LibraryMenu = ({
          onInsertShape={onInsertShape}
          pendingElements={pendingElements}
          setAppState={setAppState}
-          setLibraryItems={setLibraryItems}
        />
      )}
    </Island>
@@ -313,12 +295,10 @@ const LayerUI = ({
  onLockToggle,
  onInsertElements,
  zenModeEnabled,
-  showExitZenModeBtn,
  toggleZenMode,
  isCollaborating,
  onExportToBackend,
  renderCustomFooter,
-  viewModeEnabled,
 }: LayerUIProps) => {
  const isMobile = useIsMobile();

@@ -378,28 +358,6 @@ const LayerUI = ({
    );
  };

-  const renderViewModeCanvasActions = () => {
-    return (
-      <Section
-        heading="canvasActions"
-        className={clsx("zen-mode-transition", {
-          "transition-left": zenModeEnabled,
-        })}
-      >
-        {/* the zIndex ensures this menu has higher stacking order,
-         see https://github.com/excalidraw/excalidraw/pull/1445 */}
-        <Island padding={2} style={{ zIndex: 1 }}>
-          <Stack.Col gap={4}>
-            <Stack.Row gap={1} justifyContent="space-between">
-              {actionManager.renderAction("saveScene")}
-              {actionManager.renderAction("saveAsScene")}
-              {renderExportDialog()}
-            </Stack.Row>
-          </Stack.Col>
-        </Island>
-      </Section>
-    );
-  };
  const renderCanvasActions = () => (
    <Section
      heading="canvasActions"
@@ -442,15 +400,7 @@ const LayerUI = ({
        "transition-left": zenModeEnabled,
      })}
    >
-      <Island
-        className={CLASSES.SHAPE_ACTIONS_MENU}
-        padding={2}
-        style={{
-          // we want to make sure this doesn't overflow so substracting 200
-          // which is approximately height of zoom footer and top left menu items with some buffer
-          maxHeight: `${appState.height - 200}px`,
-        }}
-      >
+      <Island className={CLASSES.SHAPE_ACTIONS_MENU} padding={2}>
        <SelectedShapeActions
          appState={appState}
          elements={elements}
@@ -498,59 +448,54 @@ const LayerUI = ({
            gap={4}
            className={clsx({ "disable-pointerEvents": zenModeEnabled })}
          >
-            {viewModeEnabled
-              ? renderViewModeCanvasActions()
-              : renderCanvasActions()}
+            {renderCanvasActions()}
            {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
          </Stack.Col>
-          {!viewModeEnabled && (
-            <Section heading="shapes">
-              {(heading) => (
-                <Stack.Col gap={4} align="start">
-                  <Stack.Row gap={1}>
-                    <Island
-                      padding={1}
-                      className={clsx({ "zen-mode": zenModeEnabled })}
-                    >
-                      <HintViewer appState={appState} elements={elements} />
-                      {heading}
-                      <Stack.Row gap={1}>
-                        <ShapesSwitcher
-                          elementType={appState.elementType}
-                          setAppState={setAppState}
-                          isLibraryOpen={appState.isLibraryOpen}
-                        />
-                      </Stack.Row>
-                    </Island>
-                    <LockIcon
-                      zenModeEnabled={zenModeEnabled}
-                      checked={appState.elementLocked}
-                      onChange={onLockToggle}
-                      title={t("toolBar.lock")}
-                    />
-                  </Stack.Row>
-                  {libraryMenu}
-                </Stack.Col>
-              )}
-            </Section>
-          )}
+          <Section heading="shapes">
+            {(heading) => (
+              <Stack.Col gap={4} align="start">
+                <Stack.Row gap={1}>
+                  <Island
+                    padding={1}
+                    className={clsx({ "zen-mode": zenModeEnabled })}
+                  >
+                    <HintViewer appState={appState} elements={elements} />
+                    {heading}
+                    <Stack.Row gap={1}>
+                      <ShapesSwitcher
+                        elementType={appState.elementType}
+                        setAppState={setAppState}
+                        isLibraryOpen={appState.isLibraryOpen}
+                      />
+                    </Stack.Row>
+                  </Island>
+                  <LockIcon
+                    zenModeEnabled={zenModeEnabled}
+                    checked={appState.elementLocked}
+                    onChange={onLockToggle}
+                    title={t("toolBar.lock")}
+                  />
+                </Stack.Row>
+                {libraryMenu}
+              </Stack.Col>
+            )}
+          </Section>
          <UserList
            className={clsx("zen-mode-transition", {
              "transition-right": zenModeEnabled,
            })}
          >
-            {appState.collaborators.size > 0 &&
-              Array.from(appState.collaborators)
-                // Collaborator is either not initialized or is actually the current user.
-                .filter(([_, client]) => Object.keys(client).length !== 0)
-                .map(([clientId, client]) => (
-                  <Tooltip
-                    label={client.username || "Unknown user"}
-                    key={clientId}
-                  >
-                    {actionManager.renderAction("goToCollaborator", clientId)}
-                  </Tooltip>
-                ))}
+            {Array.from(appState.collaborators)
+              // Collaborator is either not initialized or is actually the current user.
+              .filter(([_, client]) => Object.keys(client).length !== 0)
+              .map(([clientId, client]) => (
+                <Tooltip
+                  label={client.username || "Unknown user"}
+                  key={clientId}
+                >
+                  {actionManager.renderAction("goToCollaborator", clientId)}
+                </Tooltip>
+              ))}
          </UserList>
        </div>
      </FixedSideContainer>
@@ -579,20 +524,6 @@ const LayerUI = ({
    );
  };

-  const renderGitHubCorner = () => {
-    return (
-      <aside
-        className={clsx(
-          "layer-ui__wrapper__github-corner zen-mode-transition",
-          {
-            "transition-right": zenModeEnabled,
-          },
-        )}
-      >
-        <GitHubCorner appearance={appState.appearance} />
-      </aside>
-    );
-  };
  const renderFooter = () => (
    <footer role="contentinfo" className="layer-ui__wrapper__footer">
      <div
@@ -605,12 +536,24 @@ const LayerUI = ({
      </div>
      <button
        className={clsx("disable-zen-mode", {
-          "disable-zen-mode--visible": showExitZenModeBtn,
+          "disable-zen-mode--visible": zenModeEnabled,
        })}
        onClick={toggleZenMode}
      >
        {t("buttons.exitZenMode")}
      </button>
+      {appState.scrolledOutside && (
+        <button
+          className="scroll-back-to-content"
+          onClick={() => {
+            setAppState({
+              ...calculateScrollCenter(elements, appState, canvas),
+            });
+          }}
+        >
+          {t("buttons.scrollBackToContent")}
+        </button>
+      )}
    </footer>
  );

@@ -656,35 +599,26 @@ const LayerUI = ({
        canvas={canvas}
        isCollaborating={isCollaborating}
        renderCustomFooter={renderCustomFooter}
-        viewModeEnabled={viewModeEnabled}
      />
    </>
  ) : (
-    <div
-      className={clsx("layer-ui__wrapper", {
-        "disable-pointerEvents":
-          appState.draggingElement ||
-          appState.resizingElement ||
-          (appState.editingElement && !isTextElement(appState.editingElement)),
-      })}
-    >
+    <div className="layer-ui__wrapper">
      {dialogs}
      {renderFixedSideContainer()}
      {renderBottomAppMenu()}
-      {renderGitHubCorner()}
-      {renderFooter()}
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
+      {
+        <aside
+          className={clsx(
+            "layer-ui__wrapper__github-corner zen-mode-transition",
+            {
+              "transition-right": zenModeEnabled,
+            },
+          )}
        >
-          {t("buttons.scrollBackToContent")}
-        </button>
-      )}
+          <GitHubCorner appearance={appState.appearance} />
+        </aside>
+      }
+      {renderFooter()}
    </div>
  );
 };
@@ -29,7 +29,6 @@ type MobileMenuProps = {
  canvas: HTMLCanvasElement | null;
  isCollaborating: boolean;
  renderCustomFooter?: (isMobile: boolean) => JSX.Element;
-  viewModeEnabled: boolean;
 };

 export const MobileMenu = ({
@@ -44,166 +43,121 @@ export const MobileMenu = ({
  canvas,
  isCollaborating,
  renderCustomFooter,
-  viewModeEnabled,
-}: MobileMenuProps) => {
-  const renderToolbar = () => {
-    return (
-      <FixedSideContainer side="top" className="App-top-bar">
-        <Section heading="shapes">
-          {(heading) => (
-            <Stack.Col gap={4} align="center">
-              <Stack.Row gap={1}>
-                <Island padding={1}>
-                  {heading}
-                  <Stack.Row gap={1}>
-                    <ShapesSwitcher
-                      elementType={appState.elementType}
-                      setAppState={setAppState}
-                      isLibraryOpen={appState.isLibraryOpen}
-                    />
-                  </Stack.Row>
-                </Island>
-                <LockIcon
-                  checked={appState.elementLocked}
-                  onChange={onLockToggle}
-                  title={t("toolBar.lock")}
-                />
-              </Stack.Row>
-              {libraryMenu}
-            </Stack.Col>
-          )}
-        </Section>
-        <HintViewer appState={appState} elements={elements} />
-      </FixedSideContainer>
-    );
-  };
-
-  const renderAppToolbar = () => {
-    if (viewModeEnabled) {
-      return (
-        <div className="App-toolbar-content">
-          {actionManager.renderAction("toggleCanvasMenu")}
-        </div>
-      );
-    }
-    return (
-      <div className="App-toolbar-content">
-        {actionManager.renderAction("toggleCanvasMenu")}
-        {actionManager.renderAction("toggleEditMenu")}
-        {actionManager.renderAction("undo")}
-        {actionManager.renderAction("redo")}
-        {actionManager.renderAction(
-          appState.multiElement ? "finalize" : "duplicateSelection",
-        )}
-        {actionManager.renderAction("deleteSelectedElements")}
-      </div>
-    );
-  };
-
-  const renderCanvasActions = () => {
-    if (viewModeEnabled) {
-      return (
-        <>
-          {actionManager.renderAction("saveScene")}
-          {actionManager.renderAction("saveAsScene")}
-          {exportButton}
-        </>
-      );
-    }
-    return (
-      <>
-        {actionManager.renderAction("loadScene")}
-        {actionManager.renderAction("saveScene")}
-        {actionManager.renderAction("saveAsScene")}
-        {exportButton}
-        {actionManager.renderAction("clearCanvas")}
-        {onCollabButtonClick && (
-          <CollabButton
-            isCollaborating={isCollaborating}
-            collaboratorCount={appState.collaborators.size}
-            onClick={onCollabButtonClick}
-          />
-        )}
-        {
-          <BackgroundPickerAndDarkModeToggle
-            actionManager={actionManager}
-            appState={appState}
-            setAppState={setAppState}
-          />
-        }
-      </>
-    );
-  };
-  return (
-    <>
-      {!viewModeEnabled && renderToolbar()}
-      <div
-        className="App-bottom-bar"
-        style={{
-          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-          marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-          marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        }}
-      >
-        <Island padding={0}>
-          {appState.openMenu === "canvas" ? (
-            <Section className="App-mobile-menu" heading="canvasActions">
-              <div className="panelColumn">
-                <Stack.Col gap={4}>
-                  {renderCanvasActions()}
-                  {renderCustomFooter?.(true)}
-                  {appState.collaborators.size > 0 && (
-                    <fieldset>
-                      <legend>{t("labels.collaborators")}</legend>
-                      <UserList mobile>
-                        {Array.from(appState.collaborators)
-                          // Collaborator is either not initialized or is actually the current user.
-                          .filter(
-                            ([_, client]) => Object.keys(client).length !== 0,
-                          )
-                          .map(([clientId, client]) => (
-                            <React.Fragment key={clientId}>
-                              {actionManager.renderAction(
-                                "goToCollaborator",
-                                clientId,
-                              )}
-                            </React.Fragment>
-                          ))}
-                      </UserList>
-                    </fieldset>
-                  )}
-                </Stack.Col>
-              </div>
-            </Section>
-          ) : appState.openMenu === "shape" &&
-            !viewModeEnabled &&
-            showSelectedShapeActions(appState, elements) ? (
-            <Section className="App-mobile-menu" heading="selectedShapeActions">
-              <SelectedShapeActions
-                appState={appState}
-                elements={elements}
-                renderAction={actionManager.renderAction}
-                elementType={appState.elementType}
+}: MobileMenuProps) => (
+  <>
+    <FixedSideContainer side="top">
+      <Section heading="shapes">
+        {(heading) => (
+          <Stack.Col gap={4} align="center">
+            <Stack.Row gap={1}>
+              <Island padding={1}>
+                {heading}
+                <Stack.Row gap={1}>
+                  <ShapesSwitcher
+                    elementType={appState.elementType}
+                    setAppState={setAppState}
+                    isLibraryOpen={appState.isLibraryOpen}
+                  />
+                </Stack.Row>
+              </Island>
+              <LockIcon
+                checked={appState.elementLocked}
+                onChange={onLockToggle}
+                title={t("toolBar.lock")}
              />
-            </Section>
-          ) : null}
-          <footer className="App-toolbar">
-            {renderAppToolbar()}
-            {appState.scrolledOutside && !appState.openMenu && (
-              <button
-                className="scroll-back-to-content"
-                onClick={() => {
-                  setAppState({
-                    ...calculateScrollCenter(elements, appState, canvas),
-                  });
-                }}
-              >
-                {t("buttons.scrollBackToContent")}
-              </button>
+            </Stack.Row>
+            {libraryMenu}
+          </Stack.Col>
+        )}
+      </Section>
+      <HintViewer appState={appState} elements={elements} />
+    </FixedSideContainer>
+    <div
+      className="App-bottom-bar"
+      style={{
+        marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+        marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+        marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+      }}
+    >
+      <Island padding={0}>
+        {appState.openMenu === "canvas" ? (
+          <Section className="App-mobile-menu" heading="canvasActions">
+            <div className="panelColumn">
+              <Stack.Col gap={4}>
+                {actionManager.renderAction("loadScene")}
+                {actionManager.renderAction("saveScene")}
+                {actionManager.renderAction("saveAsScene")}
+                {exportButton}
+                {actionManager.renderAction("clearCanvas")}
+                {onCollabButtonClick && (
+                  <CollabButton
+                    isCollaborating={isCollaborating}
+                    collaboratorCount={appState.collaborators.size}
+                    onClick={onCollabButtonClick}
+                  />
+                )}
+                <BackgroundPickerAndDarkModeToggle
+                  actionManager={actionManager}
+                  appState={appState}
+                  setAppState={setAppState}
+                />
+                {renderCustomFooter?.(true)}
+                <fieldset>
+                  <legend>{t("labels.collaborators")}</legend>
+                  <UserList mobile>
+                    {Array.from(appState.collaborators)
+                      // Collaborator is either not initialized or is actually the current user.
+                      .filter(([_, client]) => Object.keys(client).length !== 0)
+                      .map(([clientId, client]) => (
+                        <React.Fragment key={clientId}>
+                          {actionManager.renderAction(
+                            "goToCollaborator",
+                            clientId,
+                          )}
+                        </React.Fragment>
+                      ))}
+                  </UserList>
+                </fieldset>
+              </Stack.Col>
+            </div>
+          </Section>
+        ) : appState.openMenu === "shape" &&
+          showSelectedShapeActions(appState, elements) ? (
+          <Section className="App-mobile-menu" heading="selectedShapeActions">
+            <SelectedShapeActions
+              appState={appState}
+              elements={elements}
+              renderAction={actionManager.renderAction}
+              elementType={appState.elementType}
+            />
+          </Section>
+        ) : null}
+        <footer className="App-toolbar">
+          <div className="App-toolbar-content">
+            {actionManager.renderAction("toggleCanvasMenu")}
+            {actionManager.renderAction("toggleEditMenu")}
+            {actionManager.renderAction("undo")}
+            {actionManager.renderAction("redo")}
+            {actionManager.renderAction(
+              appState.multiElement ? "finalize" : "duplicateSelection",
            )}
-          </footer>
-        </Island>
-      </div>
-    </>
-  );
-};
+            {actionManager.renderAction("deleteSelectedElements")}
+          </div>
+          {appState.scrolledOutside && !appState.openMenu && (
+            <button
+              className="scroll-back-to-content"
+              onClick={() => {
+                setAppState({
+                  ...calculateScrollCenter(elements, appState, canvas),
+                });
+              }}
+            >
+              {t("buttons.scrollBackToContent")}
+            </button>
+          )}
+        </footer>
+      </Island>
+    </div>
+  </>
+);
@@ -1,13 +1,8 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
-  &.excalidraw-modal-container {
-    position: absolute;
-    z-index: 10;
-  }
-
  .Modal {
-    position: absolute;
+    position: fixed;
    top: 0;
    left: 0;
    right: 0;
@@ -20,7 +15,7 @@
  }

  .Modal__background {
-    position: absolute;
+    position: fixed;
    top: 0;
    left: 0;
    right: 0;
@@ -44,10 +39,10 @@
    overflow-y: auto;

    // for modals, reset blurry bg
-    background: var(--island-bg-color);
+    background: var(--bg-color-island);
    backdrop-filter: none;

-    border: 1px solid var(--dialog-border-color);
+    border: 1px solid var(--dialog-border);
    box-shadow: 0 2px 10px transparentize($oc-black, 0.75);
    border-radius: 6px;

@@ -87,7 +82,7 @@
    }

    .Modal__content {
-      position: absolute;
+      position: fixed;
      top: 0;
      left: 0;
      right: 0;
@@ -54,7 +54,7 @@ const useBodyRoot = () => {
      ?.classList.contains("Appearance_dark");
    const div = document.createElement("div");

-    div.classList.add("excalidraw", "excalidraw-modal-container");
+    div.classList.add("excalidraw");

    if (isDarkTheme) {
      div.classList.add("Appearance_dark");
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .PasteChartDialog {
@@ -1,6 +1,14 @@
 .excalidraw {
  .popover {
-    position: fixed;
+    position: absolute;
    z-index: 10;
  }
+
+  .popover .cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
 }
@@ -1,53 +1,51 @@
-@import "../css/variables.module";
+@import "../css/_variables";

-.excalidraw {
-  .Stats {
-    position: absolute;
-    top: 64px;
-    right: 12px;
-    font-size: 12px;
-    z-index: 999;
+.Stats {
+  position: fixed;
+  top: 64px;
+  right: 12px;
+  font-size: 12px;
+  z-index: 999;

-    h3 {
-      margin: 0 24px 8px 0;
-      white-space: nowrap;
-    }
+  h3 {
+    margin: 0 24px 8px 0;
+    white-space: nowrap;
+  }

-    .close {
-      float: right;
-      height: 16px;
-      width: 16px;
-      cursor: pointer;
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    table {
+  .close {
+    float: right;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    svg {
      width: 100%;
-      th {
-        border-bottom: 1px solid var(--input-border-color);
-        padding: 4px;
-      }
-      tr {
-        td:nth-child(2) {
-          min-width: 24px;
-          text-align: right;
-        }
-      }
+      height: 100%;
    }
+  }

-    :root[dir="rtl"] & {
-      left: 12px;
-      right: initial;
-
-      h3 {
-        margin: 0 0 8px 24px;
-      }
-      .close {
-        float: left;
+  table {
+    width: 100%;
+    th {
+      border-bottom: 1px solid var(--input-border-color);
+      padding: 4px;
+    }
+    tr {
+      td:nth-child(2) {
+        min-width: 24px;
+        text-align: right;
      }
    }
  }
+
+  :root[dir="rtl"] & {
+    left: 12px;
+    right: initial;
+
+    h3 {
+      margin: 0 0 8px 24px;
+    }
+    .close {
+      float: left;
+    }
+  }
 }
@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { copyTextToSystemClipboard } from "../clipboard";
-import { DEFAULT_VERSION } from "../constants";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import {
@@ -11,7 +9,7 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { getTargetElements } from "../scene";
 import { AppState } from "../types";
-import { debounce, getVersion, nFormatter } from "../utils";
+import { debounce, nFormatter } from "../utils";
 import { close } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
@@ -27,7 +25,6 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {

 export const Stats = (props: {
  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
  elements: readonly NonDeletedExcalidrawElement[];
  onClose: () => void;
 }) => {
@@ -53,17 +50,6 @@ export const Stats = (props: {
    return null;
  }

-  const version = getVersion();
-  let hash;
-  let timestamp;
-
-  if (version !== DEFAULT_VERSION) {
-    timestamp = version.slice(0, 16).replace("T", " ");
-    hash = version.slice(21);
-  } else {
-    timestamp = t("stats.versionNotAvailable");
-  }
-
  return (
    <div className="Stats">
      <Island padding={2}>
@@ -170,28 +156,6 @@ export const Stats = (props: {
                </td>
              </tr>
            )}
-            <tr>
-              <th colSpan={2}>{t("stats.version")}</th>
-            </tr>
-            <tr>
-              <td
-                colSpan={2}
-                style={{ textAlign: "center", cursor: "pointer" }}
-                onClick={async () => {
-                  try {
-                    await copyTextToSystemClipboard(getVersion());
-                    props.setAppState({
-                      toastMessage: t("toast.copyToClipboard"),
-                    });
-                  } catch {}
-                }}
-                title={t("stats.versionCopy")}
-              >
-                {timestamp}
-                <br />
-                {hash}
-              </td>
-            </tr>
          </tbody>
        </table>
      </Island>
@@ -1,19 +1,19 @@
-@import "../css/variables.module";
+@import "../css/_variables.scss";

 .excalidraw {
  .TextInput {
-    color: var(--text-primary-color);
+    color: var(--text-color-primary);
    display: inline-block;
    border: 1.5px solid var(--button-gray-1);
    line-height: 1;
    padding: 0.75rem;
    white-space: nowrap;
    border-radius: var(--space-factor);
-    background-color: var(--input-bg-color);
+    background-color: var(--input-background-color);

    &:not(:focus) {
      &:hover {
-        background-color: var(--input-hover-bg-color);
+        background-color: var(--input-hover-background-color);
      }
    }

@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";

 .excalidraw {
  .Toast {
@@ -11,7 +11,7 @@
    left: 50%;
    margin-left: -150px;
    padding: 4px 0;
-    position: absolute;
+    position: fixed;
    text-align: center;
    width: 300px;
    z-index: 999999;
@@ -1,5 +1,5 @@
@import "open-color/open-color.scss";
-@import "../css/variables.module";
+@import "../css/variables";

 .excalidraw {
  .ToolIcon {
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/_variables";
 .excalidraw {
  .Tooltip {
    position: relative;
@@ -48,7 +48,15 @@
    }
  }

-  .Tooltip:hover .Tooltip__label {
+  // the following 3 rules ensure that the tooltip doesn't show (nor affect
+  // the cursor) when you drag over when you draw on canvas, but at the same
+  // time it still works when clicking on the link/shield
+
+  body:active & .Tooltip:not(:hover) {
+    pointer-events: none;
+  }
+
+  body:not(:active) & .Tooltip:hover .Tooltip__label {
    visibility: visible;
  }

@@ -1,10 +1,9 @@
 import { FontFamily } from "./element/types";
-import cssVariables from "./css/variables.module.scss";

 export const APP_NAME = "Excalidraw";

-export const DRAGGING_THRESHOLD = 10; // px
-export const LINE_CONFIRM_THRESHOLD = 8; // px
+export const DRAGGING_THRESHOLD = 10; // 10px
+export const LINE_CONFIRM_THRESHOLD = 10; // 10px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
@@ -47,8 +46,6 @@ export enum EVENT {
  TOUCH_START = "touchstart",
  TOUCH_END = "touchend",
  HASHCHANGE = "hashchange",
-  VISIBILITY_CHANGE = "visibilitychange",
-  SCROLL = "scroll",
 }

 export const ENV = {
@@ -93,20 +90,4 @@ export const TAP_TWICE_TIMEOUT = 300;
 export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
-export const VERSION_TIMEOUT = 30000;
-export const SCROLL_TIMEOUT = 500;
-
-export const ZOOM_STEP = 0.1;
-
-// Report a user inactive after IDLE_THRESHOLD milliseconds
-export const IDLE_THRESHOLD = 60_000;
-// Report a user active each ACTIVE_THRESHOLD milliseconds
-export const ACTIVE_THRESHOLD = 3_000;
-
-export const MODES = {
-  VIEW: "viewMode",
-  ZEN: "zenMode",
-  GRID: "gridMode",
-};
-
-export const APPEARANCE_FILTER = cssVariables.appearanceFilter;
+export const VERSION_TIMEOUT = 15000;
@@ -1,42 +0,0 @@
-import React from "react";
-
-export const createInverseContext = <T extends unknown = null>(
-  initialValue: T,
-) => {
-  const Context = React.createContext(initialValue) as React.Context<T> & {
-    _updateProviderValue?: (value: T) => void;
-  };
-
-  class InverseConsumer extends React.Component {
-    state = { value: initialValue };
-    constructor(props: any) {
-      super(props);
-      Context._updateProviderValue = (value: T) => this.setState({ value });
-    }
-    render() {
-      return (
-        <Context.Provider value={this.state.value}>
-          {this.props.children}
-        </Context.Provider>
-      );
-    }
-  }
-
-  class InverseProvider extends React.Component<{ value: T }> {
-    componentDidMount() {
-      Context._updateProviderValue?.(this.props.value);
-    }
-    componentDidUpdate() {
-      Context._updateProviderValue?.(this.props.value);
-    }
-    render() {
-      return <Context.Consumer>{() => this.props.children}</Context.Consumer>;
-    }
-  }
-
-  return {
-    Context,
-    Consumer: InverseConsumer,
-    Provider: InverseProvider,
-  };
-};
@@ -2,9 +2,3 @@

 // keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
-$appearance-filter: "invert(93%) hue-rotate(180deg)";
-
-:export {
-  isMobileQuery: unquote($is-mobile-query);
-  appearanceFilter: unquote($appearance-filter);
-}
@@ -1,15 +1,10 @@
-@import "./variables.module";
+@import "./_variables";
@import "./theme";

-:root {
-  --zIndex-canvas: 1;
-  --zIndex-wysiwyg: 2;
-  --zIndex-layerUI: 3;
-}
-
 .excalidraw {
-  color: var(--text-primary-color);
+  color: var(--text-color-primary);
  display: flex;
+  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
@@ -35,8 +30,6 @@
    image-rendering: pixelated; // chromium
    // NOTE: must be declared *after* the above
    image-rendering: -moz-crisp-edges; // FF
-
-    z-index: var(--zIndex-canvas);
  }

  &.Appearance_dark {
@@ -50,10 +43,10 @@
  }

  .FixedSideContainer {
-    padding-top: var(--sat, 0);
-    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0);
+    padding-top: var(--sat, 0px);
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
  }

  .panelRow {
@@ -71,7 +64,7 @@
      margin-top: 0.333rem;
      margin-bottom: 0.333rem;
      font-size: 0.75rem;
-      color: var(--text-primary-color);
+      color: var(--text-color-primary);
      font-weight: bold;
      display: block;
    }
@@ -223,13 +216,6 @@
    }
  }

-  .App-top-bar {
-    z-index: var(--zIndex-layerUI);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
  .App-bottom-bar {
    position: absolute;
    top: 0;
@@ -237,10 +223,10 @@
    left: 0;
    right: 0;
    --bar-padding: calc(4 * var(--space-factor));
-    padding-top: #{"max(var(--bar-padding), var(--sat,0))"};
-    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0);
+    padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
    z-index: 4;
    display: flex;
    align-items: flex-end;
@@ -257,7 +243,7 @@
      pointer-events: initial;

      .panelColumn {
-        padding: 8px 8px 0 8px;
+        padding: 8px 8px 0px 8px;
      }
    }
  }
@@ -296,7 +282,7 @@
    pointer-events: none !important;
  }

-  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
+  .App-menu_top > * {
    pointer-events: all;
  }

@@ -337,7 +323,7 @@
    }
  }

-  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_bottom > * {
+  .App-menu_bottom > * {
    pointer-events: all;
  }

@@ -361,6 +347,7 @@

  .App-menu__left {
    overflow-y: auto;
+    max-height: calc(100vh - 236px);
  }

  .dropdown-select {
@@ -432,7 +419,7 @@

  .scroll-back-to-content {
    color: var(--popup-text-color);
-    position: absolute;
+    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
@@ -460,7 +447,7 @@
      display: none;
    }
    .scroll-back-to-content {
-      bottom: calc(80px + var(--sab, 0));
+      bottom: calc(80px + var(--sab, 0px));
      z-index: -1;
    }
  }
@@ -505,13 +492,6 @@
    pointer-events: none !important;
  }

-  &.excalidraw--view-mode {
-    .App-menu {
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-
  @media print {
    .App-bottom-bar,
    .FixedSideContainer,
@@ -1,44 +1,43 @@
@import "open-color/open-color.scss";
-@import "./variables.module.scss";

 :root {
-  --appearance-filter: none;
-  --button-destructive-bg-color: #{$oc-red-1};
-  --button-destructive-color: #{$oc-red-9};
+  --bg-color-island: rgba(255, 255, 255, 0.9);
+  --popup-background-color: #{$oc-white};
+  --space-factor: 0.25rem;
  --button-gray-1: #{$oc-gray-2};
  --button-gray-2: #{$oc-gray-4};
  --button-gray-3: #{$oc-gray-5};
-  --button-special-active-bg-color: #{$oc-green-0};
-  --dialog-border-color: #{$oc-gray-6};
-  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-  --focus-highlight-color: #{$oc-blue-2};
+  --input-border-color: #{$oc-gray-3};
+  --input-background-color: #{$oc-white};
+  --input-hover-background-color: #{$oc-gray-1};
+  --input-label-color: #{$oc-gray-7};
  --icon-fill-color: #{$oc-black};
  --icon-green-fill-color: #{$oc-green-9};
-  --input-bg-color: #{$oc-white};
-  --input-border-color: #{$oc-gray-3};
-  --input-hover-bg-color: #{$oc-gray-1};
-  --input-label-color: #{$oc-gray-7};
-  --island-bg-color: rgba(255, 255, 255, 0.9);
  --keybinding-color: #{$oc-gray-5};
-  --link-color: #{$oc-blue-7};
-  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
-  --popup-bg-color: #{$oc-white};
-  --popup-secondary-bg-color: #{$oc-gray-1};
-  --popup-text-color: #{$oc-black};
-  --popup-text-inverted-color: #{$oc-white};
+  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
-  --sat: env(safe-area-inset-top);
-  --select-highlight-color: #{$oc-blue-5};
+  --text-color-primary: #{$oc-gray-8};
  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
-  --space-factor: 0.25rem;
-  --text-primary-color: #{$oc-gray-8};
+  --overlay-background-color: #{transparentize($oc-white, 0.12)};
+  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
+  --focus-highlight-color: #{$oc-blue-2};
+  --select-highlight-color: #{$oc-blue-5};
+  --appearance-filter: none;
+  --button-special-active-background-color: #{$oc-green-0};
+  --button-destructive-color: #{$oc-red-9};
+  --button-destructive-background-color: #{$oc-red-1};
+  --popup-secondary-background-color: #{$oc-gray-1};
+  --popup-text-color: #{$oc-black};
+  --popup-text-inverted-color: #{$oc-white};
+  --dialog-border: #{$oc-gray-6};
+  --link-color: #{$oc-blue-7};
 }

 .excalidraw {
  &.Appearance_dark {
-    background: $oc-black;
+    background: #000;

    &.Appearance_dark-background-none {
      background: none;
@@ -46,31 +45,31 @@
  }

  &.Appearance_dark {
-    --appearance-filter: #{$appearance-filter};
-    --button-destructive-bg-color: #5a0000;
-    --button-destructive-color: #{$oc-red-3};
+    --text-color-primary: #{$oc-gray-4};
+    --bg-color-island: #1e1e1e;
+    --popup-background-color: #2c2c2c;
    --button-gray-1: #363636;
    --button-gray-2: #272727;
    --button-gray-3: #222;
-    --button-special-active-bg-color: #204624;
-    --dialog-border-color: #{$oc-gray-9};
-    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-    --focus-highlight-color: #{$oc-blue-6};
+    --input-border-color: #2e2e2e;
+    --input-background-color: #121212;
+    --input-hover-background-color: #181818;
+    --input-label-color: #{$oc-gray-2};
    --icon-fill-color: #{$oc-gray-4};
    --icon-green-fill-color: #{$oc-green-4};
-    --input-bg-color: #121212;
-    --input-border-color: #2e2e2e;
-    --input-hover-bg-color: #181818;
-    --input-label-color: #{$oc-gray-2};
-    --island-bg-color: #1e1e1e;
    --keybinding-color: #{$oc-gray-6};
-    --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
-    --popup-bg-color: #2c2c2c;
-    --popup-secondary-bg-color: #222;
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --overlay-background-color: rgba(30, 30, 30, 0.88);
+    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
+    --focus-highlight-color: #{$oc-blue-6};
+    --select-highlight-color: #{$oc-blue-4};
+    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --button-special-active-background-color: #204624;
+    --button-destructive-color: #{$oc-red-3};
+    --button-destructive-background-color: #5a0000;
+    --popup-secondary-background-color: #222;
    --popup-text-color: #{$oc-gray-4};
    --popup-text-inverted-color: #2c2c2c;
-    --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
-    --text-primary-color: #{$oc-gray-4};
+    --dialog-border: #{$oc-gray-9};
  }
 }
@@ -1,4 +1,4 @@
-import { fileSave } from "browser-fs-access";
+import { fileSave } from "browser-nativefs";
 import {
  copyCanvasToClipboardAsPng,
  copyTextToSystemClipboard,
@@ -41,7 +41,6 @@ export const exportCanvas = async (
  if (type === "svg" || type === "clipboard-svg") {
    const tempSvg = exportToSvg(elements, {
      exportBackground,
-      exportWithDarkMode: appState.exportWithDarkMode,
      viewBackgroundColor,
      exportPadding,
      scale,
@@ -1,4 +1,4 @@
-import { fileOpen, fileSave } from "browser-fs-access";
+import { fileOpen, fileSave } from "browser-nativefs";
 import { cleanAppStateForExport } from "../appState";
 import { MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
@@ -141,7 +141,7 @@ export const restoreElements = (
  }, [] as ExcalidrawElement[]);
 };

-export const restoreAppState = (
+const restoreAppState = (
  appState: ImportedDataState["appState"],
  localAppState: Partial<AppState> | null,
 ): AppState => {
@@ -15,7 +15,6 @@ export interface ImportedDataState {
  source?: string;
  elements?: DataState["elements"] | null;
  appState?: Partial<DataState["appState"]> | null;
-  scrollToCenter?: boolean;
 }

 export interface LibraryData {
@@ -129,7 +129,7 @@ export class LinearElementEditor {
      isDragging &&
      (activePointIndex === 0 || activePointIndex === element.points.length - 1)
    ) {
-      if (isPathALoop(element.points, appState.zoom.value)) {
+      if (isPathALoop(element.points)) {
        LinearElementEditor.movePoint(
          element,
          activePointIndex,
@@ -7,8 +7,7 @@ export const showSelectedShapeActions = (
  elements: readonly NonDeletedExcalidrawElement[],
 ) =>
  Boolean(
-    !appState.viewModeEnabled &&
-      (appState.editingElement ||
-        getSelectedElements(elements, appState).length ||
-        appState.elementType !== "selection"),
+    appState.editingElement ||
+      getSelectedElements(elements, appState).length ||
+      appState.elementType !== "selection",
  );
@@ -38,7 +38,6 @@ export const textWysiwyg = ({
  onSubmit,
  getViewportCoords,
  element,
-  canvas,
 }: {
  id: ExcalidrawElement["id"];
  appState: AppState;
@@ -46,7 +45,6 @@ export const textWysiwyg = ({
  onSubmit: (text: string) => void;
  getViewportCoords: (x: number, y: number) => [number, number];
  element: ExcalidrawElement;
-  canvas: HTMLCanvasElement | null;
 }) => {
  const updateWysiwygStyle = () => {
    const updatedElement = Scene.getScene(element)?.getElement(id);
@@ -91,6 +89,9 @@ export const textWysiwyg = ({
  editable.dataset.type = "wysiwyg";
  // prevent line wrapping on Safari
  editable.wrap = "off";
+  editable.className = `excalidraw ${
+    appState.appearance === "dark" ? "Appearance_dark" : ""
+  }`;

  Object.assign(editable.style, {
    position: "fixed",
@@ -106,8 +107,6 @@ export const textWysiwyg = ({
    overflow: "hidden",
    // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
    whiteSpace: "pre",
-    // must be specified because in dark mode canvas creates a stacking context
-    zIndex: "var(--zIndex-wysiwyg)",
  });

  updateWysiwygStyle();
@@ -153,10 +152,6 @@ export const textWysiwyg = ({
    editable.oninput = null;
    editable.onkeydown = null;

-    if (observer) {
-      observer.disconnect();
-    }
-
    window.removeEventListener("resize", updateWysiwygStyle);
    window.removeEventListener("wheel", stopEvent, true);
    window.removeEventListener("pointerdown", onPointerDown);
@@ -165,7 +160,7 @@ export const textWysiwyg = ({

    unbindUpdate();

-    editable.remove();
+    document.body.removeChild(editable);
  };

  const rebindBlur = () => {
@@ -203,27 +198,15 @@ export const textWysiwyg = ({
  let isDestroyed = false;

  editable.onblur = handleSubmit;
-
-  // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
-  // is preferred so we catch changes from host, where window may not resize.
-  let observer: ResizeObserver | null = null;
-  if (canvas && "ResizeObserver" in window) {
-    observer = new window.ResizeObserver(() => {
-      updateWysiwygStyle();
-    });
-    observer.observe(canvas);
-  } else {
-    window.addEventListener("resize", updateWysiwygStyle);
-  }
-
+  // reposition wysiwyg in case of window resize. Happens on mobile when
+  // device keyboard is opened.
+  window.addEventListener("resize", updateWysiwygStyle);
  window.addEventListener("pointerdown", onPointerDown);
  window.addEventListener("wheel", stopEvent, {
    passive: false,
    capture: true,
  });
-  document
-    .querySelector(".excalidraw-textEditorContainer")!
-    .appendChild(editable);
+  document.body.appendChild(editable);
  editable.focus();
  editable.select();
 };
@@ -6,11 +6,10 @@ import { APP_NAME, ENV, EVENT } from "../../constants";
 import { ImportedDataState } from "../../data/types";
 import { ExcalidrawElement } from "../../element/types";
 import {
-  getElementMap,
  getSceneVersion,
  getSyncableElements,
 } from "../../packages/excalidraw/index";
-import { Collaborator, Gesture } from "../../types";
+import { AppState, Collaborator, Gesture } from "../../types";
 import { resolvablePromise, withBatchedUpdates } from "../../utils";
 import {
  INITIAL_SCENE_UPDATE_TIMEOUT,
@@ -19,16 +18,12 @@ import {
 } from "../app_constants";
 import {
  decryptAESGEM,
-  generateCollaborationLinkData,
-  getCollaborationLink,
+  generateCollaborationLink,
+  getCollaborationLinkData,
  SocketUpdateDataSource,
  SOCKET_SERVER,
 } from "../data";
-import {
-  isSavedToFirebase,
-  loadFromFirebase,
-  saveToFirebase,
-} from "../data/firebase";
+import { isSavedToFirebase, saveToFirebase } from "../data/firebase";
 import {
  importUsernameFromLocalStorage,
  saveUsernameToLocalStorage,
@@ -36,26 +31,20 @@ import {
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
-import { createInverseContext } from "../../createInverseContext";
-import { t } from "../../i18n";
-import { UserIdleState } from "./types";
-import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";

 interface CollabState {
+  isCollaborating: boolean;
  modalIsShown: boolean;
  errorMessage: string;
  username: string;
-  userState: UserIdleState;
  activeRoomLink: string;
 }

 type CollabInstance = InstanceType<typeof CollabWrapper>;

 export interface CollabAPI {
-  /** function so that we can access the latest value from stale callbacks */
-  isCollaborating: () => boolean;
+  isCollaborating: CollabState["isCollaborating"];
  username: CollabState["username"];
-  userState: CollabState["userState"];
  onPointerUpdate: CollabInstance["onPointerUpdate"];
  initializeSocketClient: CollabInstance["initializeSocketClient"];
  onCollabButtonClick: CollabInstance["onCollabButtonClick"];
@@ -67,41 +56,31 @@ type ReconciledElements = readonly ExcalidrawElement[] & {
 };

 interface Props {
-  excalidrawAPI: ExcalidrawImperativeAPI;
+  children: (collab: CollabAPI) => React.ReactNode;
+  // NOTE not type-safe because the refObject may in fact not be initialized
+  // with ExcalidrawImperativeAPI yet
+  excalidrawRef: React.MutableRefObject<ExcalidrawImperativeAPI>;
 }

-const {
-  Context: CollabContext,
-  Consumer: CollabContextConsumer,
-  Provider: CollabContextProvider,
-} = createInverseContext<{ api: CollabAPI | null }>({ api: null });
-
-export { CollabContext, CollabContextConsumer };
-
 class CollabWrapper extends PureComponent<Props, CollabState> {
  portal: Portal;
-  excalidrawAPI: Props["excalidrawAPI"];
-  isCollaborating: boolean = false;
-  activeIntervalId: number | null;
-  idleTimeoutId: number | null;
-
  private socketInitializationTimer?: NodeJS.Timeout;
+  private excalidrawRef: Props["excalidrawRef"];
+  excalidrawAppState?: AppState;
  private lastBroadcastedOrReceivedSceneVersion: number = -1;
  private collaborators = new Map<string, Collaborator>();

  constructor(props: Props) {
    super(props);
    this.state = {
+      isCollaborating: false,
      modalIsShown: false,
      errorMessage: "",
      username: importUsernameFromLocalStorage() || "",
-      userState: UserIdleState.ACTIVE,
      activeRoomLink: "",
    };
    this.portal = new Portal(this);
-    this.excalidrawAPI = props.excalidrawAPI;
-    this.activeIntervalId = null;
-    this.idleTimeoutId = null;
+    this.excalidrawRef = props.excalidrawRef;
  }

  componentDidMount() {
@@ -125,32 +104,18 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  componentWillUnmount() {
    window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
    window.removeEventListener(EVENT.UNLOAD, this.onUnload);
-    window.removeEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    window.removeEventListener(
-      EVENT.VISIBILITY_CHANGE,
-      this.onVisibilityChange,
-    );
-    if (this.activeIntervalId) {
-      window.clearInterval(this.activeIntervalId);
-      this.activeIntervalId = null;
-    }
-    if (this.idleTimeoutId) {
-      window.clearTimeout(this.idleTimeoutId);
-      this.idleTimeoutId = null;
-    }
  }

  private onUnload = () => {
-    this.destroySocketClient({ isUnload: true });
+    this.destroySocketClient();
  };

  private beforeUnload = withBatchedUpdates((event: BeforeUnloadEvent) => {
    const syncableElements = getSyncableElements(
      this.getSceneElementsIncludingDeleted(),
    );
-
    if (
-      this.isCollaborating &&
+      this.state.isCollaborating &&
      !isSavedToFirebase(this.portal, syncableElements)
    ) {
      // this won't run in time if user decides to leave the site, but
@@ -162,7 +127,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
      event.returnValue = "";
    }

-    if (this.isCollaborating || this.portal.roomId) {
+    if (this.state.isCollaborating || this.portal.roomId) {
      try {
        localStorage?.setItem(
          STORAGE_KEYS.LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG,
@@ -177,7 +142,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {

  saveCollabRoomToFirebase = async (
    syncableElements: ExcalidrawElement[] = getSyncableElements(
-      this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+      this.excalidrawRef.current!.getSceneElementsIncludingDeleted(),
    ),
  ) => {
    try {
@@ -188,192 +153,143 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  };

  openPortal = async () => {
-    return this.initializeSocketClient(null);
+    window.history.pushState({}, APP_NAME, await generateCollaborationLink());
+    const elements = this.excalidrawRef.current!.getSceneElements();
+    // remove deleted elements from elements array & history to ensure we don't
+    // expose potentially sensitive user data in case user manually deletes
+    // existing elements (or clears scene), which would otherwise be persisted
+    // to database even if deleted before creating the room.
+    this.excalidrawRef.current!.history.clear();
+    this.excalidrawRef.current!.updateScene({
+      elements,
+      commitToHistory: true,
+    });
+    return this.initializeSocketClient();
  };

  closePortal = () => {
    this.saveCollabRoomToFirebase();
-    if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
-      window.history.pushState({}, APP_NAME, window.location.origin);
-      this.destroySocketClient();
-    }
+    window.history.pushState({}, APP_NAME, window.location.origin);
+    this.destroySocketClient();
  };

-  private destroySocketClient = (opts?: { isUnload: boolean }) => {
-    if (!opts?.isUnload) {
-      this.collaborators = new Map();
-      this.excalidrawAPI.updateScene({
-        collaborators: this.collaborators,
-      });
-      this.setState({
-        activeRoomLink: "",
-      });
-      this.isCollaborating = false;
-    }
+  private destroySocketClient = () => {
+    this.collaborators = new Map();
+    this.excalidrawRef.current!.updateScene({
+      collaborators: this.collaborators,
+    });
+    this.setState({
+      isCollaborating: false,
+      activeRoomLink: "",
+    });
    this.portal.close();
  };

-  private initializeSocketClient = async (
-    existingRoomLinkData: null | { roomId: string; roomKey: string },
-  ): Promise<ImportedDataState | null> => {
+  private initializeSocketClient = async (): Promise<ImportedDataState | null> => {
    if (this.portal.socket) {
      return null;
    }

-    let roomId;
-    let roomKey;
-
-    if (existingRoomLinkData) {
-      ({ roomId, roomKey } = existingRoomLinkData);
-    } else {
-      ({ roomId, roomKey } = await generateCollaborationLinkData());
-      window.history.pushState(
-        {},
-        APP_NAME,
-        getCollaborationLink({ roomId, roomKey }),
-      );
-    }
-
    const scenePromise = resolvablePromise<ImportedDataState | null>();

-    this.isCollaborating = true;
+    const roomMatch = getCollaborationLinkData(window.location.href);

-    const { default: socketIOClient }: any = await import(
-      /* webpackChunkName: "socketIoClient" */ "socket.io-client"
-    );
+    if (roomMatch) {
+      const roomId = roomMatch[1];
+      const roomKey = roomMatch[2];

-    this.portal.open(socketIOClient(SOCKET_SERVER), roomId, roomKey);
+      // fallback in case you're not alone in the room but still don't receive
+      // initial SCENE_UPDATE message
+      this.socketInitializationTimer = setTimeout(() => {
+        this.initializeSocket();
+        scenePromise.resolve(null);
+      }, INITIAL_SCENE_UPDATE_TIMEOUT);

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

-      try {
-        const elements = await loadFromFirebase(
-          roomId,
-          roomKey,
-          this.portal.socket,
-        );
-        if (elements) {
-          scenePromise.resolve({
-            elements,
-            scrollToCenter: true,
-          });
+      this.portal.open(socketIOClient(SOCKET_SERVER), roomId, roomKey);
+
+      // All socket listeners are moving to Portal
+      this.portal.socket!.on(
+        "client-broadcast",
+        async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
+          if (!this.portal.roomKey) {
+            return;
+          }
+          const decryptedData = await decryptAESGEM(
+            encryptedData,
+            this.portal.roomKey,
+            iv,
+          );
+
+          switch (decryptedData.type) {
+            case "INVALID_RESPONSE":
+              return;
+            case SCENE.INIT: {
+              if (!this.portal.socketInitialized) {
+                const remoteElements = decryptedData.payload.elements;
+                const reconciledElements = this.reconcileElements(
+                  remoteElements,
+                );
+                this.handleRemoteSceneUpdate(reconciledElements, {
+                  init: true,
+                });
+                this.initializeSocket();
+                scenePromise.resolve({ elements: reconciledElements });
+              }
+              break;
+            }
+            case SCENE.UPDATE:
+              this.handleRemoteSceneUpdate(
+                this.reconcileElements(decryptedData.payload.elements),
+              );
+              break;
+            case "MOUSE_LOCATION": {
+              const {
+                pointer,
+                button,
+                username,
+                selectedElementIds,
+              } = decryptedData.payload;
+              const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
+                decryptedData.payload.socketId ||
+                // @ts-ignore legacy, see #2094 (#2097)
+                decryptedData.payload.socketID;
+
+              const collaborators = new Map(this.collaborators);
+              const user = collaborators.get(socketId) || {}!;
+              user.pointer = pointer;
+              user.button = button;
+              user.selectedElementIds = selectedElementIds;
+              user.username = username;
+              collaborators.set(socketId, user);
+              this.excalidrawRef.current!.updateScene({
+                collaborators,
+              });
+              break;
+            }
+          }
+        },
+      );
+      this.portal.socket!.on("first-in-room", () => {
+        if (this.portal.socket) {
+          this.portal.socket.off("first-in-room");
        }
-      } catch (error) {
-        // log the error and move on. other peers will sync us the scene.
-        console.error(error);
-      }
-    } else {
-      const elements = this.excalidrawAPI.getSceneElements();
-      // remove deleted elements from elements array & history to ensure we don't
-      // expose potentially sensitive user data in case user manually deletes
-      // existing elements (or clears scene), which would otherwise be persisted
-      // to database even if deleted before creating the room.
-      this.excalidrawAPI.history.clear();
-      this.excalidrawAPI.updateScene({
-        elements,
-        commitToHistory: true,
+        this.initializeSocket();
+        scenePromise.resolve(null);
      });
+
+      this.setState({
+        isCollaborating: true,
+        activeRoomLink: window.location.href,
+      });
+
+      return scenePromise;
    }

-    // fallback in case you're not alone in the room but still don't receive
-    // initial SCENE_UPDATE message
-    this.socketInitializationTimer = setTimeout(() => {
-      this.initializeSocket();
-      scenePromise.resolve(null);
-    }, INITIAL_SCENE_UPDATE_TIMEOUT);
-
-    // All socket listeners are moving to Portal
-    this.portal.socket!.on(
-      "client-broadcast",
-      async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
-        if (!this.portal.roomKey) {
-          return;
-        }
-        const decryptedData = await decryptAESGEM(
-          encryptedData,
-          this.portal.roomKey,
-          iv,
-        );
-
-        switch (decryptedData.type) {
-          case "INVALID_RESPONSE":
-            return;
-          case SCENE.INIT: {
-            if (!this.portal.socketInitialized) {
-              this.initializeSocket();
-              const remoteElements = decryptedData.payload.elements;
-              const reconciledElements = this.reconcileElements(remoteElements);
-              this.handleRemoteSceneUpdate(reconciledElements, {
-                init: true,
-              });
-              // noop if already resolved via init from firebase
-              scenePromise.resolve({
-                elements: reconciledElements,
-                scrollToCenter: true,
-              });
-            }
-            break;
-          }
-          case SCENE.UPDATE:
-            this.handleRemoteSceneUpdate(
-              this.reconcileElements(decryptedData.payload.elements),
-            );
-            break;
-          case "MOUSE_LOCATION": {
-            const {
-              pointer,
-              button,
-              username,
-              selectedElementIds,
-            } = decryptedData.payload;
-            const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
-              decryptedData.payload.socketId ||
-              // @ts-ignore legacy, see #2094 (#2097)
-              decryptedData.payload.socketID;
-
-            const collaborators = new Map(this.collaborators);
-            const user = collaborators.get(socketId) || {}!;
-            user.pointer = pointer;
-            user.button = button;
-            user.selectedElementIds = selectedElementIds;
-            user.username = username;
-            collaborators.set(socketId, user);
-            this.excalidrawAPI.updateScene({
-              collaborators,
-            });
-            break;
-          }
-          case "IDLE_STATUS": {
-            const { userState, socketId, username } = decryptedData.payload;
-            const collaborators = new Map(this.collaborators);
-            const user = collaborators.get(socketId) || {}!;
-            user.userState = userState;
-            user.username = username;
-            this.excalidrawAPI.updateScene({
-              collaborators,
-            });
-            break;
-          }
-        }
-      },
-    );
-
-    this.portal.socket!.on("first-in-room", () => {
-      if (this.portal.socket) {
-        this.portal.socket.off("first-in-room");
-      }
-      this.initializeSocket();
-      scenePromise.resolve(null);
-    });
-
-    this.initializeIdleDetector();
-
-    this.setState({
-      activeRoomLink: window.location.href,
-    });
-
-    return scenePromise;
+    return null;
  };

  private initializeSocket = () => {
@@ -384,60 +300,12 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  private reconcileElements = (
    elements: readonly ExcalidrawElement[],
  ): ReconciledElements => {
-    const currentElements = this.getSceneElementsIncludingDeleted();
-    // create a map of ids so we don't have to iterate
-    // over the array more than once.
-    const localElementMap = getElementMap(currentElements);
-
-    const appState = this.excalidrawAPI.getAppState();
-
-    // Reconcile
-    const newElements: readonly ExcalidrawElement[] = elements
-      .reduce((elements, element) => {
-        // if the remote element references one that's currently
-        // edited on local, skip it (it'll be added in the next step)
-        if (
-          element.id === appState.editingElement?.id ||
-          element.id === appState.resizingElement?.id ||
-          element.id === appState.draggingElement?.id
-        ) {
-          return elements;
-        }
-
-        if (
-          localElementMap.hasOwnProperty(element.id) &&
-          localElementMap[element.id].version > element.version
-        ) {
-          elements.push(localElementMap[element.id]);
-          delete localElementMap[element.id];
-        } else if (
-          localElementMap.hasOwnProperty(element.id) &&
-          localElementMap[element.id].version === element.version &&
-          localElementMap[element.id].versionNonce !== element.versionNonce
-        ) {
-          // resolve conflicting edits deterministically by taking the one with the lowest versionNonce
-          if (localElementMap[element.id].versionNonce < element.versionNonce) {
-            elements.push(localElementMap[element.id]);
-          } else {
-            // it should be highly unlikely that the two versionNonces are the same. if we are
-            // really worried about this, we can replace the versionNonce with the socket id.
-            elements.push(element);
-          }
-          delete localElementMap[element.id];
-        } else {
-          elements.push(element);
-          delete localElementMap[element.id];
-        }
-
-        return elements;
-      }, [] as Mutable<typeof elements>)
-      // add local elements that weren't deleted or on remote
-      .concat(...Object.values(localElementMap));
+    const newElements = this.portal.reconcileElements(elements);

    // Avoid broadcasting to the rest of the collaborators the scene
    // we just received!
    // Note: this needs to be set before updating the scene as it
-    // synchronously calls render.
+    // syncronously calls render.
    this.setLastBroadcastedOrReceivedSceneVersion(getSceneVersion(newElements));

    return newElements as ReconciledElements;
@@ -451,10 +319,10 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    }: { init?: boolean; initFromSnapshot?: boolean } = {},
  ) => {
    if (init || initFromSnapshot) {
-      this.excalidrawAPI.setScrollToCenter(elements);
+      this.excalidrawRef.current!.setScrollToCenter(elements);
    }

-    this.excalidrawAPI.updateScene({
+    this.excalidrawRef.current!.updateScene({
      elements,
      commitToHistory: !!init,
    });
@@ -463,59 +331,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    // when we receive any messages from another peer. This UX can be pretty rough -- if you
    // undo, a user makes a change, and then try to redo, your element(s) will be lost. However,
    // right now we think this is the right tradeoff.
-    this.excalidrawAPI.history.clear();
-  };
-
-  private onPointerMove = () => {
-    if (this.idleTimeoutId) {
-      window.clearTimeout(this.idleTimeoutId);
-      this.idleTimeoutId = null;
-    }
-    this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
-    if (!this.activeIntervalId) {
-      this.activeIntervalId = window.setInterval(
-        this.reportActive,
-        ACTIVE_THRESHOLD,
-      );
-    }
-  };
-
-  private onVisibilityChange = () => {
-    if (document.hidden) {
-      if (this.idleTimeoutId) {
-        window.clearTimeout(this.idleTimeoutId);
-        this.idleTimeoutId = null;
-      }
-      if (this.activeIntervalId) {
-        window.clearInterval(this.activeIntervalId);
-        this.activeIntervalId = null;
-      }
-      this.onIdleStateChange(UserIdleState.AWAY);
-    } else {
-      this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
-      this.activeIntervalId = window.setInterval(
-        this.reportActive,
-        ACTIVE_THRESHOLD,
-      );
-      this.onIdleStateChange(UserIdleState.ACTIVE);
-    }
-  };
-
-  private reportIdle = () => {
-    this.onIdleStateChange(UserIdleState.IDLE);
-    if (this.activeIntervalId) {
-      window.clearInterval(this.activeIntervalId);
-      this.activeIntervalId = null;
-    }
-  };
-
-  private reportActive = () => {
-    this.onIdleStateChange(UserIdleState.ACTIVE);
-  };
-
-  private initializeIdleDetector = () => {
-    document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+    this.excalidrawRef.current!.history.clear();
  };

  setCollaborators(sockets: string[]) {
@@ -531,7 +347,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
        }
      }
      this.collaborators = collaborators;
-      this.excalidrawAPI.updateScene({ collaborators });
+      this.excalidrawRef.current!.updateScene({ collaborators });
    });
  }

@@ -544,7 +360,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  };

  public getSceneElementsIncludingDeleted = () => {
-    return this.excalidrawAPI.getSceneElementsIncludingDeleted();
+    return this.excalidrawRef.current!.getSceneElementsIncludingDeleted();
  };

  onPointerUpdate = (payload: {
@@ -557,12 +373,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
      this.portal.broadcastMouseLocation(payload);
  };

-  onIdleStateChange = (userState: UserIdleState) => {
-    this.setState({ userState });
-    this.portal.broadcastIdleChange(userState);
-  };
-
-  broadcastElements = (elements: readonly ExcalidrawElement[]) => {
+  broadcastElements = (
+    elements: readonly ExcalidrawElement[],
+    state: AppState,
+  ) => {
+    this.excalidrawAppState = state;
    if (
      getSceneVersion(elements) >
      this.getLastBroadcastedOrReceivedSceneVersion()
@@ -581,7 +396,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    this.portal.broadcastScene(
      SCENE.UPDATE,
      getSyncableElements(
-        this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+        this.excalidrawRef.current!.getSceneElementsIncludingDeleted(),
      ),
      true,
    );
@@ -610,25 +425,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    });
  };

-  /** PRIVATE. Use `this.getContextValue()` instead. */
-  private contextValue: CollabAPI | null = null;
-
-  /** Getter of context value. Returned object is stable. */
-  getContextValue = (): CollabAPI => {
-    if (!this.contextValue) {
-      this.contextValue = {} as CollabAPI;
-    }
-
-    this.contextValue.isCollaborating = () => this.isCollaborating;
-    this.contextValue.username = this.state.username;
-    this.contextValue.onPointerUpdate = this.onPointerUpdate;
-    this.contextValue.initializeSocketClient = this.initializeSocketClient;
-    this.contextValue.onCollabButtonClick = this.onCollabButtonClick;
-    this.contextValue.broadcastElements = this.broadcastElements;
-    return this.contextValue;
-  };
-
  render() {
+    const { children } = this.props;
    const { modalIsShown, username, errorMessage, activeRoomLink } = this.state;

    return (
@@ -652,11 +450,14 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
            onClose={() => this.setState({ errorMessage: "" })}
          />
        )}
-        <CollabContextProvider
-          value={{
-            api: this.getContextValue(),
-          }}
-        />
+        {children({
+          isCollaborating: this.state.isCollaborating,
+          username: this.state.username,
+          onPointerUpdate: this.onPointerUpdate,
+          initializeSocketClient: this.initializeSocketClient,
+          onCollabButtonClick: this.onCollabButtonClick,
+          broadcastElements: this.broadcastElements,
+        })}
      </>
    );
  }
@@ -6,21 +6,23 @@ import {

 import CollabWrapper from "./CollabWrapper";

-import { getSyncableElements } from "../../packages/excalidraw/index";
+import {
+  getElementMap,
+  getSyncableElements,
+} from "../../packages/excalidraw/index";
 import { ExcalidrawElement } from "../../element/types";
 import { BROADCAST, SCENE } from "../app_constants";
-import { UserIdleState } from "./types";

 class Portal {
-  collab: CollabWrapper;
+  app: CollabWrapper;
  socket: SocketIOClient.Socket | null = null;
  socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
  roomId: string | null = null;
  roomKey: string | null = null;
  broadcastedElementVersions: Map<string, number> = new Map();

-  constructor(collab: CollabWrapper) {
-    this.collab = collab;
+  constructor(app: CollabWrapper) {
+    this.app = app;
  }

  open(socket: SocketIOClient.Socket, id: string, key: string) {
@@ -28,7 +30,7 @@ class Portal {
    this.roomId = id;
    this.roomKey = key;

-    // Initialize socket listeners
+    // Initialize socket listeners (moving from App)
    this.socket.on("init-room", () => {
      if (this.socket) {
        this.socket.emit("join-room", this.roomId);
@@ -37,12 +39,12 @@ class Portal {
    this.socket.on("new-user", async (_socketId: string) => {
      this.broadcastScene(
        SCENE.INIT,
-        getSyncableElements(this.collab.getSceneElementsIncludingDeleted()),
+        getSyncableElements(this.app.getSceneElementsIncludingDeleted()),
        /* syncAll */ true,
      );
    });
    this.socket.on("room-user-change", (clients: string[]) => {
-      this.collab.setCollaborators(clients);
+      this.app.setCollaborators(clients);
    });
  }

@@ -123,33 +125,16 @@ class Portal {
      data as SocketUpdateData,
    );

-    if (syncAll && this.collab.isCollaborating) {
+    if (syncAll && this.app.state.isCollaborating) {
      await Promise.all([
        broadcastPromise,
-        this.collab.saveCollabRoomToFirebase(syncableElements),
+        this.app.saveCollabRoomToFirebase(syncableElements),
      ]);
    } else {
      await broadcastPromise;
    }
  };

-  broadcastIdleChange = (userState: UserIdleState) => {
-    if (this.socket?.id) {
-      const data: SocketUpdateDataSource["IDLE_STATUS"] = {
-        type: "IDLE_STATUS",
-        payload: {
-          socketId: this.socket.id,
-          userState,
-          username: this.collab.state.username,
-        },
-      };
-      return this._broadcastSocketData(
-        data as SocketUpdateData,
-        true, // volatile
-      );
-    }
-  };
-
  broadcastMouseLocation = (payload: {
    pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
    button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
@@ -161,9 +146,9 @@ class Portal {
          socketId: this.socket.id,
          pointer: payload.pointer,
          button: payload.button || "up",
-          selectedElementIds: this.collab.excalidrawAPI.getAppState()
-            .selectedElementIds,
-          username: this.collab.state.username,
+          selectedElementIds:
+            this.app.excalidrawAppState?.selectedElementIds || {},
+          username: this.app.state.username,
        },
      };
      return this._broadcastSocketData(
@@ -172,6 +157,62 @@ class Portal {
      );
    }
  };
+
+  reconcileElements = (
+    sceneElements: readonly ExcalidrawElement[],
+  ): readonly ExcalidrawElement[] => {
+    const currentElements = this.app.getSceneElementsIncludingDeleted();
+    // create a map of ids so we don't have to iterate
+    // over the array more than once.
+    const localElementMap = getElementMap(currentElements);
+
+    // Reconcile
+    return (
+      sceneElements
+        .reduce((elements, element) => {
+          // if the remote element references one that's currently
+          // edited on local, skip it (it'll be added in the next step)
+          if (
+            element.id === this.app.excalidrawAppState?.editingElement?.id ||
+            element.id === this.app.excalidrawAppState?.resizingElement?.id ||
+            element.id === this.app.excalidrawAppState?.draggingElement?.id
+          ) {
+            return elements;
+          }
+
+          if (
+            localElementMap.hasOwnProperty(element.id) &&
+            localElementMap[element.id].version > element.version
+          ) {
+            elements.push(localElementMap[element.id]);
+            delete localElementMap[element.id];
+          } else if (
+            localElementMap.hasOwnProperty(element.id) &&
+            localElementMap[element.id].version === element.version &&
+            localElementMap[element.id].versionNonce !== element.versionNonce
+          ) {
+            // resolve conflicting edits deterministically by taking the one with the lowest versionNonce
+            if (
+              localElementMap[element.id].versionNonce < element.versionNonce
+            ) {
+              elements.push(localElementMap[element.id]);
+            } else {
+              // it should be highly unlikely that the two versionNonces are the same. if we are
+              // really worried about this, we can replace the versionNonce with the socket id.
+              elements.push(element);
+            }
+            delete localElementMap[element.id];
+          } else {
+            elements.push(element);
+            delete localElementMap[element.id];
+          }
+
+          return elements;
+        }, [] as Mutable<typeof sceneElements>)
+        // add local elements that weren't deleted or on remote
+        .concat(...Object.values(localElementMap))
+    );
+  };
 }

 export default Portal;
@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../css/_variables";

 .excalidraw {
  .RoomDialog-linkContainer {
@@ -7,7 +7,7 @@
  }

  .RoomDialog-link {
-    color: var(--text-primary-color);
+    color: var(--text-color-primary);
    min-width: 0;
    flex: 1 1 auto;
    margin-inline-start: 1em;
@@ -32,29 +32,15 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    @media #{$is-mobile-query} {
-      flex-direction: column;
-      align-items: stretch;
-    }
-  }
-
-  @media #{$is-mobile-query} {
-    .RoomDialog-usernameLabel {
-      font-weight: bold;
-    }
  }

  .RoomDialog-username {
-    background-color: var(--input-bg-color);
+    background-color: var(--input-background-color);
    border-color: var(--input-border-color);
    appearance: none;
    min-width: 0;
    flex: 1 1 auto;
    margin-inline-start: 1em;
-    @media #{$is-mobile-query} {
-      margin-top: 0.5em;
-      margin-inline-start: 0;
-    }
    height: 2.5rem;
    font-size: 1em;
    line-height: 1.5;
@@ -67,7 +53,7 @@
  }

  .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-bg-color);
+    background-color: var(--button-destructive-background-color);

    .ToolIcon__label,
    .ToolIcon__icon svg {
@@ -119,11 +119,7 @@ const RoomDialog = ({
    );
  };
  return (
-    <Dialog
-      small
-      onCloseRequest={handleClose}
-      title={t("labels.liveCollaboration")}
-    >
+    <Dialog small onCloseRequest={handleClose} title={t("labels.createRoom")}>
      {renderRoomDialog()}
    </Dialog>
  );
@@ -1,5 +0,0 @@
-export enum UserIdleState {
-  ACTIVE = "active",
-  AWAY = "away",
-  IDLE = "idle",
-}
@@ -148,7 +148,6 @@ export const saveToFirebase = async (
 export const loadFromFirebase = async (
  roomId: string,
  roomKey: string,
-  socket: SocketIOClient.Socket | null,
 ): Promise<readonly ExcalidrawElement[] | null> => {
  const firebase = await getFirebase();
  const db = firebase.firestore();
@@ -161,12 +160,5 @@ export const loadFromFirebase = async (
  const storedScene = doc.data() as FirebaseStoredScene;
  const ciphertext = storedScene.ciphertext.toUint8Array();
  const iv = storedScene.iv.toUint8Array();
-
-  const elements = await decryptElements(roomKey, iv, ciphertext);
-
-  if (socket) {
-    firebaseSceneVersionCache.set(socket, getSceneVersion(elements));
-  }
-
-  return restoreElements(elements);
+  return restoreElements(await decryptElements(roomKey, iv, ciphertext));
 };
@@ -4,7 +4,6 @@ import { ImportedDataState } from "../../data/types";
 import { ExcalidrawElement } from "../../element/types";
 import { t } from "../../i18n";
 import { AppState } from "../../types";
-import { UserIdleState } from "../collab/types";

 const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);

@@ -60,14 +59,6 @@ export type SocketUpdateDataSource = {
      username: string;
    };
  };
-  IDLE_STATUS: {
-    type: "IDLE_STATUS";
-    payload: {
-      socketId: string;
-      userState: UserIdleState;
-      username: string;
-    };
-  };
 };

 export type SocketUpdateDataIncoming =
@@ -134,27 +125,17 @@ export const decryptAESGEM = async (
 };

 export const getCollaborationLinkData = (link: string) => {
-  const hash = new URL(link).hash;
-  const match = hash.match(/^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/);
-  return match ? { roomId: match[1], roomKey: match[2] } : null;
-};
-
-export const generateCollaborationLinkData = async () => {
-  const roomId = await generateRandomID();
-  const roomKey = await generateEncryptionKey();
-
-  if (!roomKey) {
-    throw new Error("Couldn't generate room key");
+  if (link.length === 0) {
+    return;
  }
-
-  return { roomId, roomKey };
+  const hash = new URL(link).hash;
+  return hash.match(/^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/);
 };

-export const getCollaborationLink = (data: {
-  roomId: string;
-  roomKey: string;
-}) => {
-  return `${window.location.origin}${window.location.pathname}#room=${data.roomId},${data.roomKey}`;
+export const generateCollaborationLink = async () => {
+  const id = await generateRandomID();
+  const key = await generateEncryptionKey();
+  return `${window.location.origin}${window.location.pathname}#room=${id},${key}`;
 };

 export const getImportedKey = (key: string, usage: KeyUsage) =>
@@ -1,7 +1,6 @@
 import LanguageDetector from "i18next-browser-languagedetector";
 import React, {
  useCallback,
-  useContext,
  useEffect,
  useLayoutEffect,
  useRef,
@@ -13,18 +12,17 @@ import { ExcalidrawImperativeAPI } from "../components/App";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants";
-import { DataState, ImportedDataState } from "../data/types";
+import { ImportedDataState } from "../data/types";
 import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "../element/types";
-import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { Language, t } from "../i18n";
 import Excalidraw, {
  defaultLang,
  languages,
 } from "../packages/excalidraw/index";
-import { AppState } from "../types";
+import { AppState, ExcalidrawAPIRefValue } from "../types";
 import {
  debounce,
  getVersion,
@@ -32,16 +30,14 @@ import {
  resolvablePromise,
 } from "../utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT } from "./app_constants";
-import CollabWrapper, {
-  CollabAPI,
-  CollabContext,
-  CollabContextConsumer,
-} from "./collab/CollabWrapper";
+import CollabWrapper, { CollabAPI } from "./collab/CollabWrapper";
 import { LanguageList } from "./components/LanguageList";
 import { exportToBackend, getCollaborationLinkData, loadScene } from "./data";
+import { loadFromFirebase } from "./data/firebase";
 import {
  importFromLocalStorage,
  saveToLocalStorage,
+  STORAGE_KEYS,
 } from "./data/localStorage";

 const languageDetector = new LanguageDetector();
@@ -53,6 +49,15 @@ languageDetector.init({
  checkWhitelist: false,
 });

+const excalidrawRef: React.MutableRefObject<
+  MarkRequired<ExcalidrawAPIRefValue, "ready" | "readyPromise">
+> = {
+  current: {
+    readyPromise: resolvablePromise(),
+    ready: false,
+  },
+};
+
 const saveDebounced = debounce(
  (elements: readonly ExcalidrawElement[], state: AppState) => {
    saveToLocalStorage(elements, state);
@@ -64,9 +69,50 @@ const onBlur = () => {
  saveDebounced.flush();
 };

+const shouldForceLoadScene = (
+  scene: ResolutionType<typeof loadScene>,
+): boolean => {
+  if (!scene.elements.length) {
+    return true;
+  }
+
+  const roomMatch = getCollaborationLinkData(window.location.href);
+
+  if (!roomMatch) {
+    return false;
+  }
+
+  const roomId = roomMatch[1];
+
+  let collabForceLoadFlag;
+  try {
+    collabForceLoadFlag = localStorage?.getItem(
+      STORAGE_KEYS.LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG,
+    );
+  } catch {}
+
+  if (collabForceLoadFlag) {
+    try {
+      const {
+        room: previousRoom,
+        timestamp,
+      }: { room: string; timestamp: number } = JSON.parse(collabForceLoadFlag);
+      // if loading same room as the one previously unloaded within 15sec
+      //  force reload without prompting
+      if (previousRoom === roomId && Date.now() - timestamp < 15000) {
+        return true;
+      }
+    } catch {}
+  }
+  return false;
+};
+
+type Scene = ImportedDataState & { commitToHistory: boolean };
+
 const initializeScene = async (opts: {
-  collabAPI: CollabAPI;
-}): Promise<ImportedDataState | null> => {
+  resetScene: ExcalidrawImperativeAPI["resetScene"];
+  initializeSocketClient: CollabAPI["initializeSocketClient"];
+}): Promise<Scene | null> => {
  const searchParams = new URLSearchParams(window.location.search);
  const id = searchParams.get("id");
  const jsonMatch = window.location.hash.match(
@@ -75,21 +121,13 @@ const initializeScene = async (opts: {

  const initialData = importFromLocalStorage();

-  let scene: DataState & { scrollToCenter?: boolean } = await loadScene(
-    null,
-    null,
-    initialData,
-  );
+  let scene = await loadScene(null, null, initialData);

-  let roomLinkData = getCollaborationLinkData(window.location.href);
-  const isExternalScene = !!(id || jsonMatch || roomLinkData);
+  let isCollabScene = !!getCollaborationLinkData(window.location.href);
+  const isExternalScene = !!(id || jsonMatch || isCollabScene);
  if (isExternalScene) {
    if (
-      // don't prompt if scene is empty
-      !scene.elements.length ||
-      // don't prompt for collab scenes because we don't override local storage
-      roomLinkData ||
-      // otherwise, prompt whether user wants to override current scene
+      shouldForceLoadScene(scene) ||
      window.confirm(t("alerts.loadSceneOverridePrompt"))
    ) {
      // Backwards compatibility with legacy url format
@@ -98,8 +136,7 @@ const initializeScene = async (opts: {
      } else if (jsonMatch) {
        scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
      }
-      scene.scrollToCenter = true;
-      if (!roomLinkData) {
+      if (!isCollabScene) {
        window.history.replaceState({}, APP_NAME, window.location.origin);
      }
    } else {
@@ -116,19 +153,45 @@ const initializeScene = async (opts: {
        });
      }

-      roomLinkData = null;
+      isCollabScene = false;
      window.history.replaceState({}, APP_NAME, window.location.origin);
    }
  }
-  if (roomLinkData) {
-    return opts.collabAPI.initializeSocketClient(roomLinkData);
+  if (isCollabScene) {
+    // when joining a room we don't want user's local scene data to be merged
+    // into the remote scene
+    opts.resetScene();
+    const scenePromise = opts.initializeSocketClient();
+
+    try {
+      const [, roomId, roomKey] = getCollaborationLinkData(
+        window.location.href,
+      )!;
+      const elements = await loadFromFirebase(roomId, roomKey);
+      if (elements) {
+        return {
+          elements,
+          commitToHistory: true,
+        };
+      }
+
+      return {
+        ...(await scenePromise),
+        commitToHistory: true,
+      };
+    } catch (error) {
+      // log the error and move on. other peers will sync us the scene.
+      console.error(error);
+    }
+
+    return null;
  } else if (scene) {
    return scene;
  }
  return null;
 };

-function ExcalidrawWrapper() {
+function ExcalidrawWrapper(props: { collab: CollabAPI }) {
  // dimensions
  // ---------------------------------------------------------------------------

@@ -163,35 +226,38 @@ function ExcalidrawWrapper() {
    initialStatePromiseRef.current.promise = resolvablePromise<ImportedDataState | null>();
  }

+  const { collab } = props;
+
  useEffect(() => {
    // Delayed so that the app has a time to load the latest SW
    setTimeout(() => {
      trackEvent("load", "version", getVersion());
    }, VERSION_TIMEOUT);
-  }, []);

-  const [
-    excalidrawAPI,
-    excalidrawRefCallback,
-  ] = useCallbackRefState<ExcalidrawImperativeAPI>();
-
-  const collabAPI = useContext(CollabContext)?.api;
-
-  useEffect(() => {
-    if (!collabAPI || !excalidrawAPI) {
-      return;
-    }
-
-    initializeScene({ collabAPI }).then((scene) => {
-      initialStatePromiseRef.current.promise.resolve(scene);
+    excalidrawRef.current!.readyPromise.then((excalidrawApi) => {
+      initializeScene({
+        resetScene: excalidrawApi.resetScene,
+        initializeSocketClient: collab.initializeSocketClient,
+      }).then((scene) => {
+        initialStatePromiseRef.current.promise.resolve(scene);
+      });
    });

    const onHashChange = (_: HashChangeEvent) => {
-      initializeScene({ collabAPI }).then((scene) => {
-        if (scene) {
-          excalidrawAPI.updateScene(scene);
-        }
-      });
+      const api = excalidrawRef.current!;
+      if (!api.ready) {
+        return;
+      }
+      if (window.location.hash.length > 1) {
+        initializeScene({
+          resetScene: api.resetScene,
+          initializeSocketClient: collab.initializeSocketClient,
+        }).then((scene) => {
+          if (scene) {
+            api.updateScene(scene);
+          }
+        });
+      }
    };

    const titleTimeout = setTimeout(
@@ -207,7 +273,7 @@ function ExcalidrawWrapper() {
      window.removeEventListener(EVENT.BLUR, onBlur, false);
      clearTimeout(titleTimeout);
    };
-  }, [collabAPI, excalidrawAPI]);
+  }, [collab.initializeSocketClient]);

  useEffect(() => {
    languageDetector.cacheUserLanguage(langCode);
@@ -217,13 +283,9 @@ function ExcalidrawWrapper() {
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => {
-    if (collabAPI?.isCollaborating()) {
-      collabAPI.broadcastElements(elements);
-    } else {
-      // collab scenes are persisted to the server, so we don't have to persist
-      // them locally, which has the added benefit of not overwriting whatever
-      // the user was working on before joining
-      saveDebounced(elements, appState);
+    saveDebounced(elements, appState);
+    if (collab.isCollaborating) {
+      collab.broadcastElements(elements, appState);
    }
  };

@@ -281,19 +343,19 @@ function ExcalidrawWrapper() {
  return (
    <>
      <Excalidraw
-        ref={excalidrawRefCallback}
+        ref={excalidrawRef}
        onChange={onChange}
        width={dimensions.width}
        height={dimensions.height}
        initialData={initialStatePromiseRef.current.promise}
-        onCollabButtonClick={collabAPI?.onCollabButtonClick}
-        isCollaborating={collabAPI?.isCollaborating()}
-        onPointerUpdate={collabAPI?.onPointerUpdate}
+        user={{ name: collab.username }}
+        onCollabButtonClick={collab.onCollabButtonClick}
+        isCollaborating={collab.isCollaborating}
+        onPointerUpdate={collab.onPointerUpdate}
        onExportToBackend={onExportToBackend}
        renderFooter={renderFooter}
        langCode={langCode}
      />
-      {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
      {errorMessage && (
        <ErrorDialog
          message={errorMessage}
@@ -307,9 +369,13 @@ function ExcalidrawWrapper() {
 export default function ExcalidrawApp() {
  return (
    <TopErrorBoundary>
-      <CollabContextConsumer>
-        <ExcalidrawWrapper />
-      </CollabContextConsumer>
+      <CollabWrapper
+        excalidrawRef={
+          excalidrawRef as React.MutableRefObject<ExcalidrawImperativeAPI>
+        }
+      >
+        {(collab) => <ExcalidrawWrapper collab={collab} />}
+      </CollabWrapper>
    </TopErrorBoundary>
  );
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aakansha Doshi	09daff487a	Merge remote-tracking branch 'origin/master' into aakansha-sm	2021-01-21 13:15:32 +05:30
Aakansha Doshi	17330c4c03	fix	2021-01-20 21:21:50 +05:30
Aakansha Doshi	2a4ad6fc41	upload sourcemaps to cdn	2021-01-20 21:20:28 +05:30
Aakansha Doshi	ec6999554a	build(webpack): attach sourcemaps so it helps in debugging	2021-01-20 01:58:45 +05:30