(un)lock a frame should not affect elements unrelated to the frame

improve cursor style when frame's locked
update test snapshot
2025-10-27 00:44:22 +01:00 · 2023-11-22 18:35:05 +08:00 · 2023-11-22 18:28:57 +08:00 · 2023-11-22 18:20:31 +08:00 · 2023-11-08 15:48:36 +08:00 · 2023-11-04 18:15:09 +01:00
220 changed files with 14182 additions and 4118 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +0,0 @@
-## 2020-10-13
-
- Added ability to embed scene source into exported PNG/SVG files so you can import the scene from them (open via `Load` button or drag & drop). #2219
--- a/README.md
+++ b/README.md
@@ -25,6 +25,9 @@
  <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
  </a>
+  <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
+    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
+  </a>
  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
  </a>
@@ -70,7 +73,7 @@ The Excalidraw editor (npm package) supports:

 ## Excalidraw.com

-The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/src/excalidraw-app) is part of this repository as well, and the app features:
+The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:

 - 📡&nbsp;PWA support (works offline).
 - 🤼&nbsp;Real-time collaboration.
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
@@ -38,6 +38,7 @@ To render an item, its recommended to use `MainMenu.Item`.
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `onSelect` | `function` | Yes | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
+| `selected` | `boolean` | No | `false` | Whether item is active |
 | `children` | `React.ReactNode` | Yes | - | The content of the menu item |
 | `icon` | `JSX.Element` | No | - | The icon used in the menu item |
 | `shortcut` | `string` | No | - | The shortcut to be shown for the menu item |
@@ -70,6 +71,7 @@ function App() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
+| `selected` | `boolean` | No | `false` | Whether item is active |
 | `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. |
 | `children` | `React.ReactNode` | Yes | - | The content of the menu item |
 | `icon` | `JSX.Element` | No | - | The icon used in the menu item |
--- a/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx
@@ -1,6 +1,6 @@
 # Customizing Styles

-Excalidraw is using CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
+Excalidraw uses CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.

 Make sure the selector has higher specificity, e.g. by prefixing it with your app's selector:

--- a/dev-docs/docs/@excalidraw/excalidraw/faq.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/faq.mdx
@@ -2,7 +2,7 @@

 ### Does this package support collaboration ?

-No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.
+No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.

 ### Turning off Aggressive Anti-Fingerprinting in Brave browser

@@ -18,7 +18,7 @@ We strongly recommend turning it off. You can follow the steps below on how to d

 2. Once opened, look for **Aggressively Block Fingerprinting**

-![Aggresive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)

 3. Switch to **Block Fingerprinting**

--- a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
@@ -34,7 +34,7 @@ function App() {

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

-The following worfklow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
+The following workflow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.

 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
--- a/dev-docs/docs/codebase/frames.mdx
+++ b/dev-docs/docs/codebase/frames.mdx
@@ -0,0 +1,22 @@
+# Frames
+
+## Ordering
+
+Frames should be ordered where frame children come first, followed by the frame element itself:
+
+```
+[
+  other_element,
+  frame1_child1,
+  frame1_child2,
+  frame1,
+  other_element,
+  frame2_child1,
+  frame2_child2,
+  frame2,
+  other_element,
+  ...
+]
+```
+
+If not oredered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.
--- a/dev-docs/docs/introduction/contributing.mdx
+++ b/dev-docs/docs/introduction/contributing.mdx
@@ -15,7 +15,7 @@ In case you want to pick up something from the roadmap, comment on that issue an
 1. Run `yarn` to install dependencies
 1. Create a branch for your PR with `git checkout -b your-branch-name`

-> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork. To do this, run:
+> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork, run:
 >
 > ```bash
 > git remote add upstream https://github.com/excalidraw/excalidraw.git
--- a/dev-docs/sidebars.js
+++ b/dev-docs/sidebars.js
@@ -23,7 +23,11 @@ const sidebars = {
      },
      items: ["introduction/development", "introduction/contributing"],
    },
-    { type: "category", label: "Codebase", items: ["codebase/json-schema"] },
+    {
+      type: "category",
+      label: "Codebase",
+      items: ["codebase/json-schema", "codebase/frames"],
+    },
    {
      type: "category",
      label: "@excalidraw/excalidraw",
--- a/dev-docs/src/components/Homepage/index.js
+++ b/dev-docs/src/components/Homepage/index.js
@@ -15,7 +15,7 @@ const FeatureList = [
    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
    description: (
      <>
-        Want to build your own app powered by Excalidraw by don't know where to
+        Want to build your own app powered by Excalidraw but don't know where to
        start?
      </>
    ),
--- a/dev-docs/yarn.lock
+++ b/dev-docs/yarn.lock
@@ -145,6 +145,14 @@
  dependencies:
    "@babel/highlight" "^7.18.6"

+"@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+  dependencies:
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.18.8":
  version "7.18.8"
  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
@@ -202,6 +210,16 @@
    "@jridgewell/gen-mapping" "^0.3.2"
    jsesc "^2.5.1"

+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
+  dependencies:
+    "@babel/types" "^7.23.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -265,6 +283,11 @@
  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==

+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -280,6 +303,14 @@
    "@babel/template" "^7.18.6"
    "@babel/types" "^7.18.9"

+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -287,6 +318,13 @@
  dependencies:
    "@babel/types" "^7.18.6"

+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.18.9":
  version "7.18.9"
  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815"
@@ -374,11 +412,28 @@
  dependencies:
    "@babel/types" "^7.18.6"

+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==

+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -412,11 +467,25 @@
    chalk "^2.0.0"
    js-tokens "^4.0.0"

+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.12.7", "@babel/parser@^7.18.6", "@babel/parser@^7.18.8", "@babel/parser@^7.18.9":
  version "7.18.9"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
  integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==

+"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1147,19 +1216,28 @@
    "@babel/parser" "^7.18.6"
    "@babel/types" "^7.18.6"

-"@babel/traverse@^7.12.9", "@babel/traverse@^7.18.8", "@babel/traverse@^7.18.9":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
-  integrity sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
  dependencies:
-    "@babel/code-frame" "^7.18.6"
-    "@babel/generator" "^7.18.9"
-    "@babel/helper-environment-visitor" "^7.18.9"
-    "@babel/helper-function-name" "^7.18.9"
-    "@babel/helper-hoist-variables" "^7.18.6"
-    "@babel/helper-split-export-declaration" "^7.18.6"
-    "@babel/parser" "^7.18.9"
-    "@babel/types" "^7.18.9"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
+"@babel/traverse@^7.12.9", "@babel/traverse@^7.18.8", "@babel/traverse@^7.18.9":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
    debug "^4.1.0"
    globals "^11.1.0"

@@ -1171,6 +1249,15 @@
    "@babel/helper-validator-identifier" "^7.18.6"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@colors/colors@1.5.0":
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -1670,6 +1757,11 @@
  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==

+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
+  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
@@ -1688,6 +1780,19 @@
  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==

+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
+  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.9":
  version "0.3.14"
  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
--- a/excalidraw-app/components/ExportToExcalidrawPlus.tsx
+++ b/excalidraw-app/components/ExportToExcalidrawPlus.tsx
@@ -80,7 +80,8 @@ export const ExportToExcalidrawPlus: React.FC<{
  appState: Partial<AppState>;
  files: BinaryFiles;
  onError: (error: Error) => void;
-}> = ({ elements, appState, files, onError }) => {
+  onSuccess: () => void;
+}> = ({ elements, appState, files, onError, onSuccess }) => {
  const { t } = useI18n();
  return (
    <Card color="primary">
@@ -107,6 +108,7 @@ export const ExportToExcalidrawPlus: React.FC<{
          try {
            trackEvent("export", "eplus", `ui (${getFrame()})`);
            await exportToExcalidrawPlus(elements, appState, files);
+            onSuccess();
          } catch (error: any) {
            console.error(error);
            if (error.name !== "AbortError") {
--- a/excalidraw-app/data/LocalData.ts
+++ b/excalidraw-app/data/LocalData.ts
@@ -6,7 +6,7 @@
 *
 * - DataState refers to full state of the app: appState, elements, images,
 *   though some state is saved separately (collab username, library) for one
- *   reason or another. We also save different data to different sotrage
+ *   reason or another. We also save different data to different storage
 *   (localStorage, indexedDB).
 */

--- a/excalidraw-app/data/index.ts
+++ b/excalidraw-app/data/index.ts
@@ -107,7 +107,7 @@ export type SocketUpdateDataSource = {
    type: "MOUSE_LOCATION";
    payload: {
      socketId: string;
-      pointer: { x: number; y: number };
+      pointer: { x: number; y: number; tool: "pointer" | "laser" };
      button: "down" | "up";
      selectedElementIds: AppState["selectedElementIds"];
      username: string;
--- a/excalidraw-app/debug.ts
+++ b/excalidraw-app/debug.ts
@@ -131,5 +131,5 @@ export class Debug {
    };
  };
 }
-
+//@ts-ignore
 window.debug = Debug;
--- a/excalidraw-app/index.tsx
+++ b/excalidraw-app/index.tsx
@@ -608,7 +608,7 @@ const ExcalidrawWrapper = () => {
    canvas: HTMLCanvasElement,
  ) => {
    if (exportedElements.length === 0) {
-      return window.alert(t("alerts.cannotExportEmptyCanvas"));
+      throw new Error(t("alerts.cannotExportEmptyCanvas"));
    }
    if (canvas) {
      try {
@@ -624,7 +624,7 @@ const ExcalidrawWrapper = () => {
        );

        if (errorMessage) {
-          setErrorMessage(errorMessage);
+          throw new Error(errorMessage);
        }

        if (url) {
@@ -634,7 +634,7 @@ const ExcalidrawWrapper = () => {
        if (error.name !== "AbortError") {
          const { width, height } = canvas;
          console.error(error, { width, height });
-          setErrorMessage(error.message);
+          throw new Error(error.message);
        }
      }
    }
@@ -714,6 +714,11 @@ const ExcalidrawWrapper = () => {
                        },
                      });
                    }}
+                    onSuccess={() => {
+                      excalidrawAPI?.updateScene({
+                        appState: { openDialog: null },
+                      });
+                    }}
                  />
                );
              },
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "6.0.2",
+    "@excalidraw/mermaid-to-excalidraw": "0.1.2",
+    "@excalidraw/laser-pointer": "1.2.0",
    "@excalidraw/random-username": "1.0.0",
    "@radix-ui/react-popover": "1.0.3",
    "@radix-ui/react-tabs": "1.0.2",
@@ -48,11 +50,11 @@
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
    "png-chunks-extract": "1.0.0",
-    "points-on-curve": "0.2.0",
+    "points-on-curve": "1.0.1",
    "pwacompat": "2.0.17",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "roughjs": "4.5.2",
+    "roughjs": "4.6.4",
    "sass": "1.51.0",
    "socket.io-client": "2.3.1",
    "tunnel-rat": "0.1.2"
@@ -124,7 +126,7 @@
    "test": "yarn test:app",
    "test:coverage": "vitest --coverage",
    "test:coverage:watch": "vitest --coverage --watch",
-    "test:ui": "yarn test --ui",
+    "test:ui": "yarn test --ui --coverage.enabled=true",
    "autorelease": "node scripts/autorelease.js",
    "prerelease": "node scripts/prerelease.js",
    "build:preview": "yarn build && vite preview --port 5000",
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -11,7 +11,7 @@
    {
      "src": "apple-touch-icon.png",
      "type": "image/png",
-      "sizes": "256x256"
+      "sizes": "180x180"
    }
  ],
  "start_url": "/",
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -10,7 +10,7 @@ import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
-import { getShortcutKey, setCursor, updateActiveTool } from "../utils";
+import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
@@ -21,6 +21,7 @@ import {
 } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { Bounds } from "../element/bounds";
+import { setCursor } from "../cursor";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@@ -3,33 +3,43 @@ import { register } from "./register";
 import {
  copyTextToSystemClipboard,
  copyToClipboard,
+  createPasteEvent,
  probablySupportsClipboardBlob,
  probablySupportsClipboardWriteText,
+  readSystemClipboard,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas } from "../data/index";
 import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";
+import { isFirefox } from "../constants";

 export const actionCopy = register({
  name: "copy",
  trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
+  perform: async (elements, appState, event: ClipboardEvent | null, app) => {
    const elementsToCopy = app.scene.getSelectedElements({
      selectedElementIds: appState.selectedElementIds,
      includeBoundTextElement: true,
      includeElementsInFrames: true,
    });

-    copyToClipboard(elementsToCopy, app.files);
+    try {
+      await copyToClipboard(elementsToCopy, app.files, event);
+    } catch (error: any) {
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          errorMessage: error.message,
+        },
+      };
+    }

    return {
      commitToHistory: false,
    };
  },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
  contextItemLabel: "labels.copy",
  // don't supply a shortcut since we handle this conditionally via onCopy event
  keyTest: undefined,
@@ -38,15 +48,55 @@ export const actionCopy = register({
 export const actionPaste = register({
  name: "paste",
  trackEvent: { category: "element" },
-  perform: (elements: any, appStates: any, data, app) => {
-    app.pasteFromClipboard(null);
+  perform: async (elements, appState, data, app) => {
+    let types;
+    try {
+      types = await readSystemClipboard();
+    } catch (error: any) {
+      if (error.name === "AbortError" || error.name === "NotAllowedError") {
+        // user probably aborted the action. Though not 100% sure, it's best
+        // to not annoy them with an error message.
+        return false;
+      }
+
+      console.error(`actionPaste ${error.name}: ${error.message}`);
+
+      if (isFirefox) {
+        return {
+          commitToHistory: false,
+          appState: {
+            ...appState,
+            errorMessage: t("hints.firefox_clipboard_write"),
+          },
+        };
+      }
+
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          errorMessage: t("errors.asyncPasteFailedOnRead"),
+        },
+      };
+    }
+
+    try {
+      app.pasteFromClipboard(createPasteEvent({ types }));
+    } catch (error: any) {
+      console.error(error);
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          errorMessage: t("errors.asyncPasteFailedOnParse"),
+        },
+      };
+    }
+
    return {
      commitToHistory: false,
    };
  },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
  contextItemLabel: "labels.paste",
  // don't supply a shortcut since we handle this conditionally via onCopy event
  keyTest: undefined,
@@ -55,13 +105,10 @@ export const actionPaste = register({
 export const actionCut = register({
  name: "cut",
  trackEvent: { category: "element" },
-  perform: (elements, appState, data, app) => {
-    actionCopy.perform(elements, appState, data, app);
+  perform: (elements, appState, event: ClipboardEvent | null, app) => {
+    actionCopy.perform(elements, appState, event, app);
    return actionDeleteSelected.perform(elements, appState);
  },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@@ -46,6 +46,7 @@ const deleteSelectedElements = (
    appState: {
      ...appState,
      selectedElementIds: {},
+      selectedGroupIds: {},
    },
  };
 };
--- a/src/actions/actionElementLock.ts
+++ b/src/actions/actionElementLock.ts
@@ -10,17 +10,12 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 export const actionToggleElementLock = register({
  name: "toggleElementLock",
  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    return !selectedElements.some(
-      (element) => element.locked && element.frameId,
-    );
-  },
  perform: (elements, appState, _, app) => {
+    // Frames and their children should not be selected at the same time.
+    // Therefore, there's no need to include elements in frame in the selection.
    const selectedElements = app.scene.getSelectedElements({
      selectedElementIds: appState.selectedElementIds,
      includeBoundTextElement: true,
-      includeElementsInFrames: true,
    });

    if (!selectedElements.length) {
@@ -31,7 +26,12 @@ export const actionToggleElementLock = register({
    const selectedElementsMap = arrayToMap(selectedElements);
    return {
      elements: elements.map((element) => {
-        if (!selectedElementsMap.has(element.id)) {
+        if (
+          !selectedElementsMap.has(element.id) &&
+          (!element.frameId ||
+            // lock frame children if frame is selected
+            (element.frameId && !selectedElementsMap.has(element.frameId)))
+        ) {
          return element;
        }

--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@@ -191,7 +191,15 @@ export const actionSaveFileToDisk = register({
        },
        app.files,
      );
-      return { commitToHistory: false, appState: { ...appState, fileHandle } };
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          openDialog: null,
+          fileHandle,
+          toast: { message: t("toast.fileSaved") },
+        },
+      };
    } catch (error: any) {
      if (error?.name !== "AbortError") {
        console.error(error);
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { updateActiveTool, resetCursor } from "../utils";
+import { updateActiveTool } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -15,6 +15,7 @@ import {
 } from "../element/binding";
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import { AppState } from "../types";
+import { resetCursor } from "../cursor";

 export const actionFinalize = register({
  name: "finalize",
@@ -90,7 +91,9 @@ export const actionFinalize = register({
        }
      }
      if (isInvisiblySmallElement(multiPointElement)) {
-        newElements = newElements.slice(0, -1);
+        newElements = newElements.filter(
+          (el) => el.id !== multiPointElement.id,
+        );
      }

      // If the multi point line closes the loop,
--- a/src/actions/actionFrame.ts
+++ b/src/actions/actionFrame.ts
@@ -4,7 +4,8 @@ import { removeAllElementsFromFrame } from "../frame";
 import { getFrameElements } from "../frame";
 import { KEYS } from "../keys";
 import { AppClassProperties, AppState } from "../types";
-import { setCursorForShape, updateActiveTool } from "../utils";
+import { updateActiveTool } from "../utils";
+import { setCursorForShape } from "../cursor";
 import { register } from "./register";

 const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
--- a/src/actions/actionProperties.test.tsx
+++ b/src/actions/actionProperties.test.tsx
@@ -0,0 +1,167 @@
+import { Excalidraw } from "../packages/excalidraw/index";
+import { queryByTestId } from "@testing-library/react";
+import { render } from "../tests/test-utils";
+import { UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
+import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
+import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
+
+const { h } = window;
+
+describe("element locking", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+  });
+
+  describe("properties when tool selected", () => {
+    it("should show active background top picks", () => {
+      UI.clickTool("rectangle");
+
+      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
+
+      // just in case we change it in the future
+      expect(color).not.toBe(COLOR_PALETTE.transparent);
+
+      h.setState({
+        currentItemBackgroundColor: color,
+      });
+      const activeColor = queryByTestId(
+        document.body,
+        `color-top-pick-${color}`,
+      );
+      expect(activeColor).toHaveClass("active");
+    });
+
+    it("should show fill style when background non-transparent", () => {
+      UI.clickTool("rectangle");
+
+      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
+
+      // just in case we change it in the future
+      expect(color).not.toBe(COLOR_PALETTE.transparent);
+
+      h.setState({
+        currentItemBackgroundColor: color,
+        currentItemFillStyle: "hachure",
+      });
+      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
+
+      expect(hachureFillButton).toHaveClass("active");
+      h.setState({
+        currentItemFillStyle: "solid",
+      });
+      const solidFillStyle = queryByTestId(document.body, `fill-solid`);
+      expect(solidFillStyle).toHaveClass("active");
+    });
+
+    it("should not show fill style when background transparent", () => {
+      UI.clickTool("rectangle");
+
+      h.setState({
+        currentItemBackgroundColor: COLOR_PALETTE.transparent,
+        currentItemFillStyle: "hachure",
+      });
+      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
+
+      expect(hachureFillButton).toBe(null);
+    });
+
+    it("should show horizontal text align for text tool", () => {
+      UI.clickTool("text");
+
+      h.setState({
+        currentItemTextAlign: "right",
+      });
+
+      const centerTextAlign = queryByTestId(document.body, `align-right`);
+      expect(centerTextAlign).toBeChecked();
+    });
+  });
+
+  describe("properties when elements selected", () => {
+    it("should show active styles when single element selected", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        backgroundColor: "red",
+        fillStyle: "cross-hatch",
+      });
+      h.elements = [rect];
+      API.setSelectedElements([rect]);
+
+      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
+      expect(crossHatchButton).toHaveClass("active");
+    });
+
+    it("should not show fill style selected element's background is transparent", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        backgroundColor: COLOR_PALETTE.transparent,
+        fillStyle: "cross-hatch",
+      });
+      h.elements = [rect];
+      API.setSelectedElements([rect]);
+
+      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
+      expect(crossHatchButton).toBe(null);
+    });
+
+    it("should highlight common stroke width of selected elements", () => {
+      const rect1 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.thin,
+      });
+      const rect2 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.thin,
+      });
+      h.elements = [rect1, rect2];
+      API.setSelectedElements([rect1, rect2]);
+
+      const thinStrokeWidthButton = queryByTestId(
+        document.body,
+        `strokeWidth-thin`,
+      );
+      expect(thinStrokeWidthButton).toBeChecked();
+    });
+
+    it("should not highlight any stroke width button if no common style", () => {
+      const rect1 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.thin,
+      });
+      const rect2 = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.bold,
+      });
+      h.elements = [rect1, rect2];
+      API.setSelectedElements([rect1, rect2]);
+
+      expect(queryByTestId(document.body, `strokeWidth-thin`)).not.toBe(null);
+      expect(
+        queryByTestId(document.body, `strokeWidth-thin`),
+      ).not.toBeChecked();
+      expect(
+        queryByTestId(document.body, `strokeWidth-bold`),
+      ).not.toBeChecked();
+      expect(
+        queryByTestId(document.body, `strokeWidth-extraBold`),
+      ).not.toBeChecked();
+    });
+
+    it("should show properties of different element types when selected", () => {
+      const rect = API.createElement({
+        type: "rectangle",
+        strokeWidth: STROKE_WIDTH.bold,
+      });
+      const text = API.createElement({
+        type: "text",
+        fontFamily: FONT_FAMILY.Cascadia,
+      });
+      h.elements = [rect, text];
+      API.setSelectedElements([rect, text]);
+
+      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
+      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
+    });
+  });
+});
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -1,4 +1,4 @@
-import { AppState } from "../../src/types";
+import { AppState, Primitive } from "../../src/types";
 import {
  DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
  DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -51,6 +51,7 @@ import {
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
  ROUNDNESS,
+  STROKE_WIDTH,
  VERTICAL_ALIGN,
 } from "../constants";
 import {
@@ -82,7 +83,6 @@ import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
-  canChangeRoundness,
  canHaveArrowheads,
  getCommonAttributeOfSelectedElements,
  getSelectedElements,
@@ -118,25 +118,44 @@ export const changeProperty = (
  });
 };

-export const getFormValue = function <T>(
+export const getFormValue = function <T extends Primitive>(
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  getAttribute: (element: ExcalidrawElement) => T,
-  defaultValue: T,
+  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
+  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
  const editingElement = appState.editingElement;
  const nonDeletedElements = getNonDeletedElements(elements);
-  return (
-    (editingElement && getAttribute(editingElement)) ??
-    (isSomeElementSelected(nonDeletedElements, appState)
-      ? getCommonAttributeOfSelectedElements(
-          nonDeletedElements,
+
+  let ret: T | null = null;
+
+  if (editingElement) {
+    ret = getAttribute(editingElement);
+  }
+
+  if (!ret) {
+    const hasSelection = isSomeElementSelected(nonDeletedElements, appState);
+
+    if (hasSelection) {
+      ret =
+        getCommonAttributeOfSelectedElements(
+          isRelevantElement === true
+            ? nonDeletedElements
+            : nonDeletedElements.filter((el) => isRelevantElement(el)),
          appState,
          getAttribute,
-        )
-      : defaultValue) ??
-    defaultValue
-  );
+        ) ??
+        (typeof defaultValue === "function"
+          ? defaultValue(true)
+          : defaultValue);
+    } else {
+      ret =
+        typeof defaultValue === "function" ? defaultValue(false) : defaultValue;
+    }
+  }
+
+  return ret;
 };

 const offsetElementAfterFontResize = (
@@ -247,6 +266,7 @@ export const actionChangeStrokeColor = register({
          elements,
          appState,
          (element) => element.strokeColor,
+          true,
          appState.currentItemStrokeColor,
        )}
        onChange={(color) => updateData({ currentItemStrokeColor: color })}
@@ -289,6 +309,7 @@ export const actionChangeBackgroundColor = register({
          elements,
          appState,
          (element) => element.backgroundColor,
+          true,
          appState.currentItemBackgroundColor,
        )}
        onChange={(color) => updateData({ currentItemBackgroundColor: color })}
@@ -338,23 +359,28 @@ export const actionChangeFillStyle = register({
              } (${getShortcutKey("Alt-Click")})`,
              icon: allElementsZigZag ? FillZigZagIcon : FillHachureIcon,
              active: allElementsZigZag ? true : undefined,
+              testId: `fill-hachure`,
            },
            {
              value: "cross-hatch",
              text: t("labels.crossHatch"),
              icon: FillCrossHatchIcon,
+              testId: `fill-cross-hatch`,
            },
            {
              value: "solid",
              text: t("labels.solid"),
              icon: FillSolidIcon,
+              testId: `fill-solid`,
            },
          ]}
          value={getFormValue(
            elements,
            appState,
            (element) => element.fillStyle,
-            appState.currentItemFillStyle,
+            (element) => element.hasOwnProperty("fillStyle"),
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemFillStyle,
          )}
          onClick={(value, event) => {
            const nextValue =
@@ -393,26 +419,31 @@ export const actionChangeStrokeWidth = register({
        group="stroke-width"
        options={[
          {
-            value: 1,
+            value: STROKE_WIDTH.thin,
            text: t("labels.thin"),
            icon: StrokeWidthBaseIcon,
+            testId: "strokeWidth-thin",
          },
          {
-            value: 2,
+            value: STROKE_WIDTH.bold,
            text: t("labels.bold"),
            icon: StrokeWidthBoldIcon,
+            testId: "strokeWidth-bold",
          },
          {
-            value: 4,
+            value: STROKE_WIDTH.extraBold,
            text: t("labels.extraBold"),
            icon: StrokeWidthExtraBoldIcon,
+            testId: "strokeWidth-extraBold",
          },
        ]}
        value={getFormValue(
          elements,
          appState,
          (element) => element.strokeWidth,
-          appState.currentItemStrokeWidth,
+          (element) => element.hasOwnProperty("strokeWidth"),
+          (hasSelection) =>
+            hasSelection ? null : appState.currentItemStrokeWidth,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -461,7 +492,9 @@ export const actionChangeSloppiness = register({
          elements,
          appState,
          (element) => element.roughness,
-          appState.currentItemRoughness,
+          (element) => element.hasOwnProperty("roughness"),
+          (hasSelection) =>
+            hasSelection ? null : appState.currentItemRoughness,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -509,7 +542,9 @@ export const actionChangeStrokeStyle = register({
          elements,
          appState,
          (element) => element.strokeStyle,
-          appState.currentItemStrokeStyle,
+          (element) => element.hasOwnProperty("strokeStyle"),
+          (hasSelection) =>
+            hasSelection ? null : appState.currentItemStrokeStyle,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -549,6 +584,7 @@ export const actionChangeOpacity = register({
            elements,
            appState,
            (element) => element.opacity,
+            true,
            appState.currentItemOpacity,
          ) ?? undefined
        }
@@ -607,7 +643,12 @@ export const actionChangeFontSize = register({
            }
            return null;
          },
-          appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+          (element) =>
+            isTextElement(element) || getBoundTextElement(element) !== null,
+          (hasSelection) =>
+            hasSelection
+              ? null
+              : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -692,21 +733,25 @@ export const actionChangeFontFamily = register({
      value: FontFamilyValues;
      text: string;
      icon: JSX.Element;
+      testId: string;
    }[] = [
      {
        value: FONT_FAMILY.Virgil,
        text: t("labels.handDrawn"),
        icon: FreedrawIcon,
+        testId: "font-family-virgil",
      },
      {
        value: FONT_FAMILY.Helvetica,
        text: t("labels.normal"),
        icon: FontFamilyNormalIcon,
+        testId: "font-family-normal",
      },
      {
        value: FONT_FAMILY.Cascadia,
        text: t("labels.code"),
        icon: FontFamilyCodeIcon,
+        testId: "font-family-code",
      },
    ];

@@ -729,7 +774,12 @@ export const actionChangeFontFamily = register({
              }
              return null;
            },
-            appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
+            (element) =>
+              isTextElement(element) || getBoundTextElement(element) !== null,
+            (hasSelection) =>
+              hasSelection
+                ? null
+                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -806,7 +856,10 @@ export const actionChangeTextAlign = register({
              }
              return null;
            },
-            appState.currentItemTextAlign,
+            (element) =>
+              isTextElement(element) || getBoundTextElement(element) !== null,
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemTextAlign,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -882,7 +935,9 @@ export const actionChangeVerticalAlign = register({
              }
              return null;
            },
-            VERTICAL_ALIGN.MIDDLE,
+            (element) =>
+              isTextElement(element) || getBoundTextElement(element) !== null,
+            (hasSelection) => (hasSelection ? null : VERTICAL_ALIGN.MIDDLE),
          )}
          onChange={(value) => updateData(value)}
        />
@@ -947,9 +1002,9 @@ export const actionChangeRoundness = register({
            appState,
            (element) =>
              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (canChangeRoundness(appState.activeTool.type) &&
-              appState.currentItemRoundness) ||
-              null,
+            (element) => element.hasOwnProperty("roundness"),
+            (hasSelection) =>
+              hasSelection ? null : appState.currentItemRoundness,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -1043,6 +1098,7 @@ export const actionChangeArrowhead = register({
                isLinearElement(element) && canHaveArrowheads(element.type)
                  ? element.startArrowhead
                  : appState.currentItemStartArrowhead,
+              true,
              appState.currentItemStartArrowhead,
            )}
            onChange={(value) => updateData({ position: "start", type: value })}
@@ -1089,6 +1145,7 @@ export const actionChangeArrowhead = register({
                isLinearElement(element) && canHaveArrowheads(element.type)
                  ? element.endArrowhead
                  : appState.currentItemEndArrowhead,
+              true,
              appState.currentItemEndArrowhead,
            )}
            onChange={(value) => updateData({ position: "end", type: value })}
--- a/src/actions/actionToggleGridMode.tsx
+++ b/src/actions/actionToggleGridMode.tsx
@@ -15,6 +15,7 @@ export const actionToggleGridMode = register({
      appState: {
        ...appState,
        gridSize: this.checked!(appState) ? null : GRID_SIZE,
+        objectsSnapModeEnabled: false,
      },
      commitToHistory: false,
    };
--- a/src/actions/actionToggleObjectsSnapMode.tsx
+++ b/src/actions/actionToggleObjectsSnapMode.tsx
@@ -0,0 +1,28 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+
+export const actionToggleObjectsSnapMode = register({
+  name: "objectsSnapMode",
+  viewMode: true,
+  trackEvent: {
+    category: "canvas",
+    predicate: (appState) => !appState.objectsSnapModeEnabled,
+  },
+  perform(elements, appState) {
+    return {
+      appState: {
+        ...appState,
+        objectsSnapModeEnabled: !this.checked!(appState),
+        gridSize: null,
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState) => appState.objectsSnapModeEnabled,
+  predicate: (elements, appState, appProps) => {
+    return typeof appProps.objectsSnapModeEnabled === "undefined";
+  },
+  contextItemLabel: "buttons.objectsSnapMode",
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.S,
+});
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -80,6 +80,7 @@ export {

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

 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@@ -119,10 +119,10 @@ export class ActionManager {
    return true;
  }

-  executeAction(
-    action: Action,
+  executeAction<T extends Action>(
+    action: T,
    source: ActionSource = "api",
-    value: any = null,
+    value: Parameters<T["perform"]>[2] = null,
  ) {
    const elements = this.getElementsIncludingDeleted();
    const appState = this.getAppState();
--- a/src/actions/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@@ -28,6 +28,7 @@ export type ShortcutName =
      | "ungroup"
      | "gridMode"
      | "zenMode"
+      | "objectsSnapMode"
      | "stats"
      | "addToLibrary"
      | "viewMode"
@@ -74,6 +75,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  ungroup: [getShortcutKey("CtrlOrCmd+Shift+G")],
  gridMode: [getShortcutKey("CtrlOrCmd+'")],
  zenMode: [getShortcutKey("Alt+Z")],
+  objectsSnapMode: [getShortcutKey("Alt+S")],
  stats: [getShortcutKey("Alt+/")],
  addToLibrary: [],
  flipHorizontal: [getShortcutKey("Shift+H")],
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -51,6 +51,7 @@ export type ActionName =
  | "pasteStyles"
  | "gridMode"
  | "zenMode"
+  | "objectsSnapMode"
  | "stats"
  | "changeStrokeColor"
  | "changeBackgroundColor"
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -99,6 +99,12 @@ export const getDefaultAppState = (): Omit<
    pendingImageElementId: null,
    showHyperlinkPopup: false,
    selectedLinearElement: null,
+    snapLines: [],
+    originSnapOffset: {
+      x: 0,
+      y: 0,
+    },
+    objectsSnapModeEnabled: false,
  };
 };

@@ -206,6 +212,9 @@ const APP_STATE_STORAGE_CONF = (<
  pendingImageElementId: { browser: false, export: false, server: false },
  showHyperlinkPopup: { browser: false, export: false, server: false },
  selectedLinearElement: { browser: true, export: false, server: false },
+  snapLines: { browser: false, export: false, server: false },
+  originSnapOffset: { browser: false, export: false, server: false },
+  objectsSnapModeEnabled: { browser: true, export: false, server: false },
 });

 const _clearAppStateForStorage = <
--- a/src/clipboard.test.ts
+++ b/src/clipboard.test.ts
@@ -1,27 +1,196 @@
-import { parseClipboard } from "./clipboard";
+import {
+  createPasteEvent,
+  parseClipboard,
+  serializeAsClipboardJSON,
+} from "./clipboard";
+import { API } from "./tests/helpers/api";

-describe("Test parseClipboard", () => {
-  it("should parse valid json correctly", async () => {
-    let text = "123";
-
-    let clipboardData = await parseClipboard({
-      //@ts-ignore
-      clipboardData: {
-        getData: () => text,
-      },
-    });
+describe("parseClipboard()", () => {
+  it("should parse JSON as plaintext if not excalidraw-api/clipboard data", async () => {
+    let text;
+    let clipboardData;
+    // -------------------------------------------------------------------------

+    text = "123";
+    clipboardData = await parseClipboard(
+      createPasteEvent({ types: { "text/plain": text } }),
+    );
    expect(clipboardData.text).toBe(text);

+    // -------------------------------------------------------------------------
+
    text = "[123]";
+    clipboardData = await parseClipboard(
+      createPasteEvent({ types: { "text/plain": text } }),
+    );
+    expect(clipboardData.text).toBe(text);

-    clipboardData = await parseClipboard({
-      //@ts-ignore
-      clipboardData: {
-        getData: () => text,
-      },
-    });
+    // -------------------------------------------------------------------------

+    text = JSON.stringify({ val: 42 });
+    clipboardData = await parseClipboard(
+      createPasteEvent({ types: { "text/plain": text } }),
+    );
    expect(clipboardData.text).toBe(text);
  });
+
+  it("should parse valid excalidraw JSON if inside text/plain", async () => {
+    const rect = API.createElement({ type: "rectangle" });
+
+    const json = serializeAsClipboardJSON({ elements: [rect], files: null });
+    const clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/plain": json,
+        },
+      }),
+    );
+    expect(clipboardData.elements).toEqual([rect]);
+  });
+
+  it("should parse valid excalidraw JSON if inside text/html", async () => {
+    const rect = API.createElement({ type: "rectangle" });
+
+    let json;
+    let clipboardData;
+    // -------------------------------------------------------------------------
+    json = serializeAsClipboardJSON({ elements: [rect], files: null });
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": json,
+        },
+      }),
+    );
+    expect(clipboardData.elements).toEqual([rect]);
+    // -------------------------------------------------------------------------
+    json = serializeAsClipboardJSON({ elements: [rect], files: null });
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": `<div> ${json}</div>`,
+        },
+      }),
+    );
+    expect(clipboardData.elements).toEqual([rect]);
+    // -------------------------------------------------------------------------
+  });
+
+  it("should parse <image> `src` urls out of text/html", async () => {
+    let clipboardData;
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": `<img src="https://example.com/image.png" />`,
+        },
+      }),
+    );
+    expect(clipboardData.mixedContent).toEqual([
+      {
+        type: "imageUrl",
+        value: "https://example.com/image.png",
+      },
+    ]);
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": `<div><img src="https://example.com/image.png" /></div><a><img src="https://example.com/image2.png" /></a>`,
+        },
+      }),
+    );
+    expect(clipboardData.mixedContent).toEqual([
+      {
+        type: "imageUrl",
+        value: "https://example.com/image.png",
+      },
+      {
+        type: "imageUrl",
+        value: "https://example.com/image2.png",
+      },
+    ]);
+  });
+
+  it("should parse text content alongside <image> `src` urls out of text/html", async () => {
+    const clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": `<a href="https://example.com">hello </a><div><img src="https://example.com/image.png" /></div><b>my friend!</b>`,
+        },
+      }),
+    );
+    expect(clipboardData.mixedContent).toEqual([
+      {
+        type: "text",
+        // trimmed
+        value: "hello",
+      },
+      {
+        type: "imageUrl",
+        value: "https://example.com/image.png",
+      },
+      {
+        type: "text",
+        value: "my friend!",
+      },
+    ]);
+  });
+
+  it("should parse spreadsheet from either text/plain and text/html", async () => {
+    let clipboardData;
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/plain": `a	b
+        1	2
+        4	5
+        7	10`,
+        },
+      }),
+    );
+    expect(clipboardData.spreadsheet).toEqual({
+      title: "b",
+      labels: ["1", "4", "7"],
+      values: [2, 5, 10],
+    });
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": `a	b
+        1	2
+        4	5
+        7	10`,
+        },
+      }),
+    );
+    expect(clipboardData.spreadsheet).toEqual({
+      title: "b",
+      labels: ["1", "4", "7"],
+      values: [2, 5, 10],
+    });
+    // -------------------------------------------------------------------------
+    clipboardData = await parseClipboard(
+      createPasteEvent({
+        types: {
+          "text/html": `<html>
+        <body>
+        <!--StartFragment--><google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;a&quot;}">a</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;b&quot;}">b</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:1}">1</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:2}">2</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:4}">4</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:5}">5</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:7}">7</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:10}">10</td></tr></tbody></table><!--EndFragment-->
+        </body>
+        </html>`,
+          "text/plain": `a	b
+        1	2
+        4	5
+        7	10`,
+        },
+      }),
+    );
+    expect(clipboardData.spreadsheet).toEqual({
+      title: "b",
+      labels: ["1", "4", "7"],
+      values: [2, 5, 10],
+    });
+  });
 });
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@@ -3,14 +3,18 @@ import {
  NonDeletedExcalidrawElement,
 } from "./element/types";
 import { BinaryFiles } from "./types";
-import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
-import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
+import {
+  ALLOWED_PASTE_MIME_TYPES,
+  EXPORT_DATA_TYPES,
+  MIME_TYPES,
+} from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
 import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
-import { isPromiseLike, isTestEnv } from "./utils";
+import { isMemberOf, isPromiseLike } from "./utils";
+import { t } from "./i18n";

 type ElementsClipboard = {
  type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -18,17 +22,23 @@ type ElementsClipboard = {
  files: BinaryFiles | undefined;
 };

+export type PastedMixedContent = { type: "text" | "imageUrl"; value: string }[];
+
 export interface ClipboardData {
  spreadsheet?: Spreadsheet;
  elements?: readonly ExcalidrawElement[];
  files?: BinaryFiles;
  text?: string;
+  mixedContent?: PastedMixedContent;
  errorMessage?: string;
  programmaticAPI?: boolean;
 }

-let CLIPBOARD = "";
-let PREFER_APP_CLIPBOARD = false;
+type AllowedPasteMimeTypes = typeof ALLOWED_PASTE_MIME_TYPES[number];
+
+type ParsedClipboardEvent =
+  | { type: "text"; value: string }
+  | { type: "mixedContent"; value: PastedMixedContent };

 export const probablySupportsClipboardReadText =
  "clipboard" in navigator && "readText" in navigator.clipboard;
@@ -58,10 +68,61 @@ const clipboardContainsElements = (
  return false;
 };

-export const copyToClipboard = async (
-  elements: readonly NonDeletedExcalidrawElement[],
-  files: BinaryFiles | null,
-) => {
+export const createPasteEvent = ({
+  types,
+  files,
+}: {
+  types?: { [key in AllowedPasteMimeTypes]?: string };
+  files?: File[];
+}) => {
+  if (!types && !files) {
+    console.warn("createPasteEvent: no types or files provided");
+  }
+
+  const event = new ClipboardEvent("paste", {
+    clipboardData: new DataTransfer(),
+  });
+
+  if (types) {
+    for (const [type, value] of Object.entries(types)) {
+      try {
+        event.clipboardData?.setData(type, value);
+        if (event.clipboardData?.getData(type) !== value) {
+          throw new Error(`Failed to set "${type}" as clipboardData item`);
+        }
+      } catch (error: any) {
+        throw new Error(error.message);
+      }
+    }
+  }
+
+  if (files) {
+    let idx = -1;
+    for (const file of files) {
+      idx++;
+      try {
+        event.clipboardData?.items.add(file);
+        if (event.clipboardData?.files[idx] !== file) {
+          throw new Error(
+            `Failed to set file "${file.name}" as clipboardData item`,
+          );
+        }
+      } catch (error: any) {
+        throw new Error(error.message);
+      }
+    }
+  }
+
+  return event;
+};
+
+export const serializeAsClipboardJSON = ({
+  elements,
+  files,
+}: {
+  elements: readonly NonDeletedExcalidrawElement[];
+  files: BinaryFiles | null;
+}) => {
  const framesToCopy = new Set(
    elements.filter((element) => element.type === "frame"),
  );
@@ -83,7 +144,7 @@ export const copyToClipboard = async (
    );
  }

-  // select binded text elements when copying
+  // select bound text elements when copying
  const contents: ElementsClipboard = {
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
    elements: elements.map((element) => {
@@ -102,34 +163,20 @@ export const copyToClipboard = async (
    }),
    files: files ? _files : undefined,
  };
-  const json = JSON.stringify(contents);

-  if (isTestEnv()) {
-    return json;
-  }
-
-  CLIPBOARD = json;
-
-  try {
-    PREFER_APP_CLIPBOARD = false;
-    await copyTextToSystemClipboard(json);
-  } catch (error: any) {
-    PREFER_APP_CLIPBOARD = true;
-    console.error(error);
-  }
+  return JSON.stringify(contents);
 };

-const getAppClipboard = (): Partial<ElementsClipboard> => {
-  if (!CLIPBOARD) {
-    return {};
-  }
-
-  try {
-    return JSON.parse(CLIPBOARD);
-  } catch (error: any) {
-    console.error(error);
-    return {};
-  }
+export const copyToClipboard = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  files: BinaryFiles | null,
+  /** supply if available to make the operation more certain to succeed */
+  clipboardEvent?: ClipboardEvent | null,
+) => {
+  await copyTextToSystemClipboard(
+    serializeAsClipboardJSON({ elements, files }),
+    clipboardEvent,
+  );
 };

 const parsePotentialSpreadsheet = (
@@ -142,22 +189,137 @@ const parsePotentialSpreadsheet = (
  return null;
 };

-/**
- * Retrieves content from system clipboard (either from ClipboardEvent or
- *  via async clipboard API if supported)
- */
-export const getSystemClipboard = async (
-  event: ClipboardEvent | null,
-): Promise<string> => {
-  try {
-    const text = event
-      ? event.clipboardData?.getData("text/plain")
-      : probablySupportsClipboardReadText &&
-        (await navigator.clipboard.readText());
+/** internal, specific to parsing paste events. Do not reuse. */
+function parseHTMLTree(el: ChildNode) {
+  let result: PastedMixedContent = [];
+  for (const node of el.childNodes) {
+    if (node.nodeType === 3) {
+      const text = node.textContent?.trim();
+      if (text) {
+        result.push({ type: "text", value: text });
+      }
+    } else if (node instanceof HTMLImageElement) {
+      const url = node.getAttribute("src");
+      if (url && url.startsWith("http")) {
+        result.push({ type: "imageUrl", value: url });
+      }
+    } else {
+      result = result.concat(parseHTMLTree(node));
+    }
+  }
+  return result;
+}

-    return (text || "").trim();
+const maybeParseHTMLPaste = (
+  event: ClipboardEvent,
+): { type: "mixedContent"; value: PastedMixedContent } | null => {
+  const html = event.clipboardData?.getData("text/html");
+
+  if (!html) {
+    return null;
+  }
+
+  try {
+    const doc = new DOMParser().parseFromString(html, "text/html");
+
+    const content = parseHTMLTree(doc.body);
+
+    if (content.length) {
+      return { type: "mixedContent", value: content };
+    }
+  } catch (error: any) {
+    console.error(`error in parseHTMLFromPaste: ${error.message}`);
+  }
+
+  return null;
+};
+
+export const readSystemClipboard = async () => {
+  const types: { [key in AllowedPasteMimeTypes]?: string } = {};
+
+  try {
+    if (navigator.clipboard?.readText) {
+      return { "text/plain": await navigator.clipboard?.readText() };
+    }
+  } catch (error: any) {
+    // @ts-ignore
+    if (navigator.clipboard?.read) {
+      console.warn(
+        `navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`,
+      );
+    } else {
+      throw error;
+    }
+  }
+
+  let clipboardItems: ClipboardItems;
+
+  try {
+    clipboardItems = await navigator.clipboard?.read();
+  } catch (error: any) {
+    if (error.name === "DataError") {
+      console.warn(
+        `navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`,
+      );
+      return types;
+    }
+    throw error;
+  }
+
+  for (const item of clipboardItems) {
+    for (const type of item.types) {
+      if (!isMemberOf(ALLOWED_PASTE_MIME_TYPES, type)) {
+        continue;
+      }
+      try {
+        types[type] = await (await item.getType(type)).text();
+      } catch (error: any) {
+        console.warn(
+          `Cannot retrieve ${type} from clipboardItem: ${error.message}`,
+        );
+      }
+    }
+  }
+
+  if (Object.keys(types).length === 0) {
+    console.warn("No clipboard data found from clipboard.read().");
+    return types;
+  }
+
+  return types;
+};
+
+/**
+ * Parses "paste" ClipboardEvent.
+ */
+const parseClipboardEvent = async (
+  event: ClipboardEvent,
+  isPlainPaste = false,
+): Promise<ParsedClipboardEvent> => {
+  try {
+    const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
+
+    if (mixedContent) {
+      if (mixedContent.value.every((item) => item.type === "text")) {
+        return {
+          type: "text",
+          value:
+            event.clipboardData?.getData("text/plain") ||
+            mixedContent.value
+              .map((item) => item.value)
+              .join("\n")
+              .trim(),
+        };
+      }
+
+      return mixedContent;
+    }
+
+    const text = event.clipboardData?.getData("text/plain");
+
+    return { type: "text", value: (text || "").trim() };
  } catch {
-    return "";
+    return { type: "text", value: "" };
  }
 };

@@ -165,34 +327,32 @@ export const getSystemClipboard = async (
 * Attempts to parse clipboard. Prefers system clipboard.
 */
 export const parseClipboard = async (
-  event: ClipboardEvent | null,
+  event: ClipboardEvent,
  isPlainPaste = false,
 ): Promise<ClipboardData> => {
-  const systemClipboard = await getSystemClipboard(event);
+  const parsedEventData = await parseClipboardEvent(event, isPlainPaste);

-  // if system clipboard empty, couldn't be resolved, or contains previously
-  // copied excalidraw scene as SVG, fall back to previously copied excalidraw
-  // elements
-  if (
-    !systemClipboard ||
-    (!isPlainPaste && systemClipboard.includes(SVG_EXPORT_TAG))
-  ) {
-    return getAppClipboard();
+  if (parsedEventData.type === "mixedContent") {
+    return {
+      mixedContent: parsedEventData.value,
+    };
  }

-  // if system clipboard contains spreadsheet, use it even though it's
-  // technically possible it's staler than in-app clipboard
-  const spreadsheetResult =
-    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard);
-
-  if (spreadsheetResult) {
-    return spreadsheetResult;
-  }
-
-  const appClipboardData = getAppClipboard();
-
  try {
-    const systemClipboardData = JSON.parse(systemClipboard);
+    // if system clipboard contains spreadsheet, use it even though it's
+    // technically possible it's staler than in-app clipboard
+    const spreadsheetResult =
+      !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value);
+
+    if (spreadsheetResult) {
+      return spreadsheetResult;
+    }
+  } catch (error: any) {
+    console.error(error);
+  }
+
+  try {
+    const systemClipboardData = JSON.parse(parsedEventData.value);
    const programmaticAPI =
      systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
    if (clipboardContainsElements(systemClipboardData)) {
@@ -205,18 +365,9 @@ export const parseClipboard = async (
        programmaticAPI,
      };
    }
-  } catch (e) {}
-  // system clipboard doesn't contain excalidraw elements → return plaintext
-  // unless we set a flag to prefer in-app clipboard because browser didn't
-  // support storing to system clipboard on copy
-  return PREFER_APP_CLIPBOARD && appClipboardData.elements
-    ? {
-        ...appClipboardData,
-        text: isPlainPaste
-          ? JSON.stringify(appClipboardData.elements, null, 2)
-          : undefined,
-      }
-    : { text: systemClipboard };
+  } catch {}
+
+  return { text: parsedEventData.value };
 };

 export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
@@ -249,28 +400,49 @@ export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
  }
 };

-export const copyTextToSystemClipboard = async (text: string | null) => {
-  let copied = false;
+export const copyTextToSystemClipboard = async (
+  text: string | null,
+  clipboardEvent?: ClipboardEvent | null,
+) => {
+  // (1) first try using Async Clipboard API
  if (probablySupportsClipboardWriteText) {
    try {
      // NOTE: doesn't work on FF on non-HTTPS domains, or when document
      // not focused
      await navigator.clipboard.writeText(text || "");
-      copied = true;
+      return;
    } catch (error: any) {
      console.error(error);
    }
  }

-  // Note that execCommand doesn't allow copying empty strings, so if we're
-  // clearing clipboard using this API, we must copy at least an empty char
-  if (!copied && !copyTextViaExecCommand(text || " ")) {
-    throw new Error("couldn't copy");
+  // (2) if fails and we have access to ClipboardEvent, use plain old setData()
+  try {
+    if (clipboardEvent) {
+      clipboardEvent.clipboardData?.setData("text/plain", text || "");
+      if (clipboardEvent.clipboardData?.getData("text/plain") !== text) {
+        throw new Error("Failed to setData on clipboardEvent");
+      }
+      return;
+    }
+  } catch (error: any) {
+    console.error(error);
+  }
+
+  // (3) if that fails, use document.execCommand
+  if (!copyTextViaExecCommand(text)) {
+    throw new Error(t("errors.copyToSystemClipboardFailed"));
  }
 };

 // adapted from https://github.com/zenorocha/clipboard.js/blob/ce79f170aa655c408b6aab33c9472e8e4fa52e19/src/clipboard-action.js#L48
-const copyTextViaExecCommand = (text: string) => {
+const copyTextViaExecCommand = (text: string | null) => {
+  // execCommand doesn't allow copying empty strings, so if we're
+  // clearing clipboard using this API, we must copy at least an empty char
+  if (!text) {
+    text = " ";
+  }
+
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const textarea = document.createElement("textarea");
--- a/src/components/Actions.scss
+++ b/src/components/Actions.scss
@@ -2,13 +2,13 @@
 .undo-redo-buttons {
  background-color: var(--island-bg-color);
  border-radius: var(--border-radius-lg);
+  box-shadow: 0 0 0 1px var(--color-surface-lowest);
 }

 .zoom-button,
 .undo-redo-buttons button {
-  border: 1px solid var(--default-border-color) !important;
  border-radius: 0 !important;
-  background-color: transparent !important;
+  background-color: var(--color-surface-low) !important;
  font-size: 0.875rem !important;
  width: var(--lg-button-size);
  height: var(--lg-button-size);
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement, PointerType } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
@@ -11,21 +11,15 @@ import {
  hasBackground,
  hasStrokeStyle,
  hasStrokeWidth,
-  hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { UIAppState, Zoom } from "../types";
-import {
-  capitalizeString,
-  isTransparent,
-  updateActiveTool,
-  setCursorForShape,
-} from "../utils";
+import { AppClassProperties, UIAppState, Zoom } from "../types";
+import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement } from "../element/typeChecks";
+import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -36,7 +30,13 @@ import {

 import "./Actions.scss";
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { EmbedIcon, extraToolsIcon, frameToolIcon } from "./icons";
+import {
+  EmbedIcon,
+  extraToolsIcon,
+  frameToolIcon,
+  mermaidLogoIcon,
+  laserPointerToolIcon,
+} from "./icons";
 import { KEYS } from "../keys";

 export const SelectedShapeActions = ({
@@ -66,7 +66,8 @@ export const SelectedShapeActions = ({
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const showFillIcons =
-    hasBackground(appState.activeTool.type) ||
+    (hasBackground(appState.activeTool.type) &&
+      !isTransparent(appState.currentItemBackgroundColor)) ||
    targetElements.some(
      (element) =>
        hasBackground(element.type) && !isTransparent(element.backgroundColor),
@@ -123,14 +124,15 @@ export const SelectedShapeActions = ({
        <>{renderAction("changeRoundness")}</>
      )}

-      {(hasText(appState.activeTool.type) ||
-        targetElements.some((element) => hasText(element.type))) && (
+      {(appState.activeTool.type === "text" ||
+        targetElements.some(isTextElement)) && (
        <>
          {renderAction("changeFontSize")}

          {renderAction("changeFontFamily")}

-          {suppportsHorizontalAlign(targetElements) &&
+          {(appState.activeTool.type === "text" ||
+            suppportsHorizontalAlign(targetElements)) &&
            renderAction("changeTextAlign")}
        </>
      )}
@@ -213,20 +215,20 @@ export const SelectedShapeActions = ({
 };

 export const ShapesSwitcher = ({
-  interactiveCanvas,
  activeTool,
-  setAppState,
-  onImageAction,
  appState,
+  app,
 }: {
-  interactiveCanvas: HTMLCanvasElement | null;
  activeTool: UIAppState["activeTool"];
-  setAppState: React.Component<any, UIAppState>["setState"];
-  onImageAction: (data: { pointerType: PointerType | null }) => void;
  appState: UIAppState;
+  app: AppClassProperties;
 }) => {
  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
-  const device = useDevice();
+
+  const frameToolSelected = activeTool.type === "frame";
+  const laserToolSelected = activeTool.type === "laser";
+  const embeddableToolSelected = activeTool.type === "embeddable";
+
  return (
    <>
      {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
@@ -251,155 +253,83 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-${value}`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
+                app.togglePenMode(true);
              }
            }}
            onChange={({ pointerType }) => {
              if (appState.activeTool.type !== value) {
                trackEvent("toolbar", value, "ui");
              }
-              const nextActiveTool = updateActiveTool(appState, {
-                type: value,
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                activeEmbeddable: null,
-                multiElement: null,
-                selectedElementIds: {},
-              });
-              setCursorForShape(interactiveCanvas, {
-                ...appState,
-                activeTool: nextActiveTool,
-              });
              if (value === "image") {
-                onImageAction({ pointerType });
+                app.setActiveTool({
+                  type: value,
+                  insertOnCanvasDirectly: pointerType !== "mouse",
+                });
+              } else {
+                app.setActiveTool({ type: value });
              }
            }}
          />
        );
      })}
      <div className="App-toolbar__divider" />
-      {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
-      {device.isMobile ? (
-        <>
-          <ToolButton
-            className={clsx("Shape", { fillable: false })}
-            type="radio"
+
+      <DropdownMenu open={isExtraToolsMenuOpen}>
+        <DropdownMenu.Trigger
+          className={clsx("App-toolbar__extra-tools-trigger", {
+            "App-toolbar__extra-tools-trigger--selected":
+              frameToolSelected ||
+              embeddableToolSelected ||
+              // in collab we're already highlighting the laser button
+              // outside toolbar, so let's not highlight extra-tools button
+              // on top of it
+              (laserToolSelected && !app.props.isCollaborating),
+          })}
+          onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
+          title={t("toolBar.extraTools")}
+        >
+          {extraToolsIcon}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          onClickOutside={() => setIsExtraToolsMenuOpen(false)}
+          onSelect={() => setIsExtraToolsMenuOpen(false)}
+          className="App-toolbar__extra-tools-dropdown"
+        >
+          <DropdownMenu.Item
+            onSelect={() => app.setActiveTool({ type: "frame" })}
            icon={frameToolIcon}
-            checked={activeTool.type === "frame"}
-            name="editor-current-shape"
-            title={`${capitalizeString(
-              t("toolBar.frame"),
-            )} — ${KEYS.F.toLocaleUpperCase()}`}
-            keyBindingLabel={KEYS.F.toLocaleUpperCase()}
-            aria-label={capitalizeString(t("toolBar.frame"))}
-            aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
-            data-testid={`toolbar-frame`}
-            onPointerDown={({ pointerType }) => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              trackEvent("toolbar", "frame", "ui");
-              const nextActiveTool = updateActiveTool(appState, {
-                type: "frame",
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                multiElement: null,
-                selectedElementIds: {},
-                activeEmbeddable: null,
-              });
-            }}
-          />
-          <ToolButton
-            className={clsx("Shape", { fillable: false })}
-            type="radio"
+            shortcut={KEYS.F.toLocaleUpperCase()}
+            data-testid="toolbar-frame"
+            selected={frameToolSelected}
+          >
+            {t("toolBar.frame")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            onSelect={() => app.setActiveTool({ type: "embeddable" })}
            icon={EmbedIcon}
-            checked={activeTool.type === "embeddable"}
-            name="editor-current-shape"
-            title={capitalizeString(t("toolBar.embeddable"))}
-            aria-label={capitalizeString(t("toolBar.embeddable"))}
-            data-testid={`toolbar-embeddable`}
-            onPointerDown={({ pointerType }) => {
-              if (!appState.penDetected && pointerType === "pen") {
-                setAppState({
-                  penDetected: true,
-                  penMode: true,
-                });
-              }
-            }}
-            onChange={({ pointerType }) => {
-              trackEvent("toolbar", "embeddable", "ui");
-              const nextActiveTool = updateActiveTool(appState, {
-                type: "embeddable",
-              });
-              setAppState({
-                activeTool: nextActiveTool,
-                multiElement: null,
-                selectedElementIds: {},
-                activeEmbeddable: null,
-              });
-            }}
-          />
-        </>
-      ) : (
-        <DropdownMenu open={isExtraToolsMenuOpen}>
-          <DropdownMenu.Trigger
-            className="App-toolbar__extra-tools-trigger"
-            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
-            title={t("toolBar.extraTools")}
+            data-testid="toolbar-embeddable"
+            selected={embeddableToolSelected}
          >
-            {extraToolsIcon}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content
-            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
-            onSelect={() => setIsExtraToolsMenuOpen(false)}
-            className="App-toolbar__extra-tools-dropdown"
+            {t("toolBar.embeddable")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            onSelect={() => app.setActiveTool({ type: "laser" })}
+            icon={laserPointerToolIcon}
+            data-testid="toolbar-laser"
+            selected={laserToolSelected}
+            shortcut={KEYS.K.toLocaleUpperCase()}
          >
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "frame",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={frameToolIcon}
-              shortcut={KEYS.F.toLocaleUpperCase()}
-              data-testid="toolbar-frame"
-            >
-              {t("toolBar.frame")}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                const nextActiveTool = updateActiveTool(appState, {
-                  type: "embeddable",
-                });
-                setAppState({
-                  activeTool: nextActiveTool,
-                  multiElement: null,
-                  selectedElementIds: {},
-                });
-              }}
-              icon={EmbedIcon}
-              data-testid="toolbar-embeddable"
-            >
-              {t("toolBar.embeddable")}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu>
-      )}
+            {t("toolBar.laser")}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            onSelect={() => app.setOpenDialog("mermaid")}
+            icon={mermaidLogoIcon}
+            data-testid="toolbar-embeddable"
+          >
+            {t("toolBar.mermaidToExcalidraw")}
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
    </>
  );
 };
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
--- a/src/components/ColorPicker/TopPicks.tsx
+++ b/src/components/ColorPicker/TopPicks.tsx
@@ -55,6 +55,7 @@ export const TopPicks = ({
          type="button"
          title={color}
          onClick={() => onChange(color)}
+          data-testid={`color-top-pick-${color}`}
        >
          <div className="color-picker__button-outline" />
        </button>
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -9,11 +9,7 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import {
-  useExcalidrawAppState,
-  useExcalidrawElements,
-  useExcalidrawSetAppState,
-} from "./App";
+import { useExcalidrawAppState, useExcalidrawElements } from "./App";
 import React from "react";

 export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
@@ -25,14 +21,14 @@ type ContextMenuProps = {
  items: ContextMenuItems;
  top: number;
  left: number;
+  onClose: (callback?: () => void) => void;
 };

 export const CONTEXT_MENU_SEPARATOR = "separator";

 export const ContextMenu = React.memo(
-  ({ actionManager, items, top, left }: ContextMenuProps) => {
+  ({ actionManager, items, top, left, onClose }: ContextMenuProps) => {
    const appState = useExcalidrawAppState();
-    const setAppState = useExcalidrawSetAppState();
    const elements = useExcalidrawElements();

    const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
@@ -54,7 +50,9 @@ export const ContextMenu = React.memo(

    return (
      <Popover
-        onCloseRequest={() => setAppState({ contextMenu: null })}
+        onCloseRequest={() => {
+          onClose();
+        }}
        top={top}
        left={left}
        fitInViewport={true}
@@ -102,7 +100,7 @@ export const ContextMenu = React.memo(
                  // we need update state before executing the action in case
                  // the action uses the appState it's being passed (that still
                  // contains a defined contextMenu) to return the next state.
-                  setAppState({ contextMenu: null }, () => {
+                  onClose(() => {
                    actionManager.executeAction(item, "contextMenu");
                  });
                }}
--- a/src/components/FilledButton.scss
+++ b/src/components/FilledButton.scss
@@ -12,32 +12,32 @@

    &--color-primary {
      &.ExcButton--variant-filled {
-        --text-color: var(--input-bg-color);
+        --text-color: var(--color-surface-lowest);
        --back-color: var(--color-primary);

        &:hover {
-          --back-color: var(--color-primary-darker);
+          --back-color: var(--color-brand-hover);
        }

        &:active {
-          --back-color: var(--color-primary-darkest);
+          --back-color: var(--color-brand-active);
        }
      }

      &.ExcButton--variant-outlined,
      &.ExcButton--variant-icon {
        --text-color: var(--color-primary);
-        --border-color: var(--color-primary);
-        --back-color: var(--input-bg-color);
+        --border-color: var(--color-border-outline);
+        --back-color: transparent;

        &:hover {
-          --text-color: var(--color-primary-darker);
-          --border-color: var(--color-primary-darker);
+          --text-color: var(--color-brand-hover);
+          --border-color: var(--color-brand-hover);
        }

        &:active {
-          --text-color: var(--color-primary-darkest);
-          --border-color: var(--color-primary-darkest);
+          --text-color: var(--color-brand-active);
+          --border-color: var(--color-brand-active);
        }
      }
    }
--- a/src/components/HelpDialog.scss
+++ b/src/components/HelpDialog.scss
@@ -19,20 +19,35 @@
    }

    &__btn {
+      --background: var(--color-surface-mid);
+
      display: flex;
      column-gap: 0.5rem;
      align-items: center;
-      border: 1px solid var(--default-border-color);
+      background-color: var(--background);
      padding: 0.625rem 1rem;
+      border: 1px solid var(--background);
      border-radius: var(--border-radius-lg);
      color: var(--text-primary-color);
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.4px;

+      @at-root .excalidraw.theme--dark#{&} {
+        --background: var(--color-surface-high);
+        &:hover {
+          --background: #363541;
+        }
+      }
+
      &:hover {
+        --background: var(--color-surface-high);
        text-decoration: none;
      }
+
+      &:active {
+        border-color: var(--color-primary);
+      }
    }

    &__link-icon {
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -165,6 +165,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              shortcuts={[KEYS.E, KEYS["0"]]}
            />
            <Shortcut label={t("toolBar.frame")} shortcuts={[KEYS.F]} />
+            <Shortcut label={t("toolBar.laser")} shortcuts={[KEYS.K]} />
            <Shortcut
              label={t("labels.eyeDropper")}
              shortcuts={[KEYS.I, "Shift+S", "Shift+G"]}
@@ -258,6 +259,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("buttons.zenMode")}
              shortcuts={[getShortcutKey("Alt+Z")]}
            />
+            <Shortcut
+              label={t("buttons.objectsSnapMode")}
+              shortcuts={[getShortcutKey("Alt+S")]}
+            />
            <Shortcut
              label={t("labels.showGrid")}
              shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
--- a/src/components/JSONExportDialog.tsx
+++ b/src/components/JSONExportDialog.tsx
@@ -23,12 +23,15 @@ export type ExportCB = (
 const JSONExportModal = ({
  elements,
  appState,
+  setAppState,
  files,
  actionManager,
  exportOpts,
  canvas,
+  onCloseRequest,
 }: {
  appState: UIAppState;
+  setAppState: React.Component<any, UIAppState>["setState"];
  files: BinaryFiles;
  elements: readonly NonDeletedExcalidrawElement[];
  actionManager: ActionManager;
@@ -72,9 +75,14 @@ const JSONExportModal = ({
              title={t("exportDialog.link_button")}
              aria-label={t("exportDialog.link_button")}
              showAriaLabel={true}
-              onClick={() => {
-                onExportToBackend(elements, appState, files, canvas);
-                trackEvent("export", "link", `ui (${getFrame()})`);
+              onClick={async () => {
+                try {
+                  trackEvent("export", "link", `ui (${getFrame()})`);
+                  await onExportToBackend(elements, appState, files, canvas);
+                  onCloseRequest();
+                } catch (error: any) {
+                  setAppState({ errorMessage: error.message });
+                }
              }}
            />
          </Card>
@@ -114,6 +122,7 @@ export const JSONExportDialog = ({
          <JSONExportModal
            elements={elements}
            appState={appState}
+            setAppState={setAppState}
            files={files}
            actionManager={actionManager}
            onCloseRequest={handleClose}
--- a/src/components/LaserTool/LaserPathManager.ts
+++ b/src/components/LaserTool/LaserPathManager.ts
@@ -0,0 +1,309 @@
+import { LaserPointer } from "@excalidraw/laser-pointer";
+
+import { sceneCoordsToViewportCoords } from "../../utils";
+import App from "../App";
+import { getClientColor } from "../../clients";
+
+// decay time in milliseconds
+const DECAY_TIME = 1000;
+// length of line in points before it starts decaying
+const DECAY_LENGTH = 50;
+
+const average = (a: number, b: number) => (a + b) / 2;
+function getSvgPathFromStroke(points: number[][], closed = true) {
+  const len = points.length;
+
+  if (len < 4) {
+    return ``;
+  }
+
+  let a = points[0];
+  let b = points[1];
+  const c = points[2];
+
+  let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(
+    2,
+  )},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
+    b[1],
+    c[1],
+  ).toFixed(2)} T`;
+
+  for (let i = 2, max = len - 1; i < max; i++) {
+    a = points[i];
+    b = points[i + 1];
+    result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(
+      2,
+    )} `;
+  }
+
+  if (closed) {
+    result += "Z";
+  }
+
+  return result;
+}
+
+declare global {
+  interface Window {
+    LPM: LaserPathManager;
+  }
+}
+
+function easeOutCubic(t: number) {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+function instantiateCollabolatorState(): CollabolatorState {
+  return {
+    currentPath: undefined,
+    finishedPaths: [],
+    lastPoint: [-10000, -10000],
+    svg: document.createElementNS("http://www.w3.org/2000/svg", "path"),
+  };
+}
+
+function instantiatePath() {
+  LaserPointer.constants.cornerDetectionMaxAngle = 70;
+
+  return new LaserPointer({
+    simplify: 0,
+    streamline: 0.4,
+    sizeMapping: (c) => {
+      const pt = DECAY_TIME;
+      const pl = DECAY_LENGTH;
+      const t = Math.max(0, 1 - (performance.now() - c.pressure) / pt);
+      const l = (pl - Math.min(pl, c.totalLength - c.currentIndex)) / pl;
+
+      return Math.min(easeOutCubic(l), easeOutCubic(t));
+    },
+  });
+}
+
+type CollabolatorState = {
+  currentPath: LaserPointer | undefined;
+  finishedPaths: LaserPointer[];
+  lastPoint: [number, number];
+  svg: SVGPathElement;
+};
+
+export class LaserPathManager {
+  private ownState: CollabolatorState;
+  private collaboratorsState: Map<string, CollabolatorState> = new Map();
+
+  private rafId: number | undefined;
+  private isDrawing = false;
+  private container: SVGSVGElement | undefined;
+
+  constructor(private app: App) {
+    this.ownState = instantiateCollabolatorState();
+  }
+
+  destroy() {
+    this.stop();
+    this.isDrawing = false;
+    this.ownState = instantiateCollabolatorState();
+    this.collaboratorsState = new Map();
+  }
+
+  startPath(x: number, y: number) {
+    this.ownState.currentPath = instantiatePath();
+    this.ownState.currentPath.addPoint([x, y, performance.now()]);
+    this.updatePath(this.ownState);
+  }
+
+  addPointToPath(x: number, y: number) {
+    if (this.ownState.currentPath) {
+      this.ownState.currentPath?.addPoint([x, y, performance.now()]);
+      this.updatePath(this.ownState);
+    }
+  }
+
+  endPath() {
+    if (this.ownState.currentPath) {
+      this.ownState.currentPath.close();
+      this.ownState.finishedPaths.push(this.ownState.currentPath);
+      this.updatePath(this.ownState);
+    }
+  }
+
+  private updatePath(state: CollabolatorState) {
+    this.isDrawing = true;
+
+    if (!this.isRunning) {
+      this.start();
+    }
+  }
+
+  private isRunning = false;
+
+  start(svg?: SVGSVGElement) {
+    if (svg) {
+      this.container = svg;
+      this.container.appendChild(this.ownState.svg);
+    }
+
+    this.stop();
+    this.isRunning = true;
+    this.loop();
+  }
+
+  stop() {
+    this.isRunning = false;
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.rafId = undefined;
+  }
+
+  loop() {
+    this.rafId = requestAnimationFrame(this.loop.bind(this));
+
+    this.updateCollabolatorsState();
+
+    if (this.isDrawing) {
+      this.update();
+    } else {
+      this.isRunning = false;
+    }
+  }
+
+  draw(path: LaserPointer) {
+    const stroke = path
+      .getStrokeOutline(path.options.size / this.app.state.zoom.value)
+      .map(([x, y]) => {
+        const result = sceneCoordsToViewportCoords(
+          { sceneX: x, sceneY: y },
+          this.app.state,
+        );
+
+        return [result.x, result.y];
+      });
+
+    return getSvgPathFromStroke(stroke, true);
+  }
+
+  updateCollabolatorsState() {
+    if (!this.container || !this.app.state.collaborators.size) {
+      return;
+    }
+
+    for (const [key, collabolator] of this.app.state.collaborators.entries()) {
+      if (!this.collaboratorsState.has(key)) {
+        const state = instantiateCollabolatorState();
+        this.container.appendChild(state.svg);
+        this.collaboratorsState.set(key, state);
+
+        this.updatePath(state);
+      }
+
+      const state = this.collaboratorsState.get(key)!;
+
+      if (collabolator.pointer && collabolator.pointer.tool === "laser") {
+        if (collabolator.button === "down" && state.currentPath === undefined) {
+          state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
+          state.currentPath = instantiatePath();
+          state.currentPath.addPoint([
+            collabolator.pointer.x,
+            collabolator.pointer.y,
+            performance.now(),
+          ]);
+
+          this.updatePath(state);
+        }
+
+        if (collabolator.button === "down" && state.currentPath !== undefined) {
+          if (
+            collabolator.pointer.x !== state.lastPoint[0] ||
+            collabolator.pointer.y !== state.lastPoint[1]
+          ) {
+            state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
+            state.currentPath.addPoint([
+              collabolator.pointer.x,
+              collabolator.pointer.y,
+              performance.now(),
+            ]);
+
+            this.updatePath(state);
+          }
+        }
+
+        if (collabolator.button === "up" && state.currentPath !== undefined) {
+          state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
+          state.currentPath.addPoint([
+            collabolator.pointer.x,
+            collabolator.pointer.y,
+            performance.now(),
+          ]);
+          state.currentPath.close();
+
+          state.finishedPaths.push(state.currentPath);
+          state.currentPath = undefined;
+
+          this.updatePath(state);
+        }
+      }
+    }
+  }
+
+  update() {
+    if (!this.container) {
+      return;
+    }
+
+    let somePathsExist = false;
+
+    for (const [key, state] of this.collaboratorsState.entries()) {
+      if (!this.app.state.collaborators.has(key)) {
+        state.svg.remove();
+        this.collaboratorsState.delete(key);
+        continue;
+      }
+
+      state.finishedPaths = state.finishedPaths.filter((path) => {
+        const lastPoint = path.originalPoints[path.originalPoints.length - 1];
+
+        return !(lastPoint && lastPoint[2] < performance.now() - DECAY_TIME);
+      });
+
+      let paths = state.finishedPaths.map((path) => this.draw(path)).join(" ");
+
+      if (state.currentPath) {
+        paths += ` ${this.draw(state.currentPath)}`;
+      }
+
+      if (paths.trim()) {
+        somePathsExist = true;
+      }
+
+      state.svg.setAttribute("d", paths);
+      state.svg.setAttribute("fill", getClientColor(key));
+    }
+
+    this.ownState.finishedPaths = this.ownState.finishedPaths.filter((path) => {
+      const lastPoint = path.originalPoints[path.originalPoints.length - 1];
+
+      return !(lastPoint && lastPoint[2] < performance.now() - DECAY_TIME);
+    });
+
+    let paths = this.ownState.finishedPaths
+      .map((path) => this.draw(path))
+      .join(" ");
+
+    if (this.ownState.currentPath) {
+      paths += ` ${this.draw(this.ownState.currentPath)}`;
+    }
+
+    paths = paths.trim();
+
+    if (paths) {
+      somePathsExist = true;
+    }
+
+    this.ownState.svg.setAttribute("d", paths);
+    this.ownState.svg.setAttribute("fill", "red");
+
+    if (!somePathsExist) {
+      this.isDrawing = false;
+    }
+  }
+}
--- a/src/components/LaserTool/LaserPointerButton.tsx
+++ b/src/components/LaserTool/LaserPointerButton.tsx
@@ -0,0 +1,41 @@
+import "../ToolIcon.scss";
+
+import clsx from "clsx";
+import { ToolButtonSize } from "../ToolButton";
+import { laserPointerToolIcon } from "../icons";
+
+type LaserPointerIconProps = {
+  title?: string;
+  name?: string;
+  checked: boolean;
+  onChange?(): void;
+  isMobile?: boolean;
+};
+
+const DEFAULT_SIZE: ToolButtonSize = "small";
+
+export const LaserPointerButton = (props: LaserPointerIconProps) => {
+  return (
+    <label
+      className={clsx(
+        "ToolIcon ToolIcon__LaserPointer",
+        `ToolIcon_size_${DEFAULT_SIZE}`,
+        {
+          "is-mobile": props.isMobile,
+        },
+      )}
+      title={`${props.title}`}
+    >
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name={props.name}
+        onChange={props.onChange}
+        checked={props.checked}
+        aria-label={props.title}
+        data-testid="toolbar-LaserPointer"
+      />
+      <div className="ToolIcon__icon">{laserPointerToolIcon}</div>
+    </label>
+  );
+};
--- a/src/components/LaserTool/LaserTool.tsx
+++ b/src/components/LaserTool/LaserTool.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import { LaserPathManager } from "./LaserPathManager";
+import "./LaserToolOverlay.scss";
+
+type LaserToolOverlayProps = {
+  manager: LaserPathManager;
+};
+
+export const LaserToolOverlay = ({ manager }: LaserToolOverlayProps) => {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+
+  useEffect(() => {
+    if (svgRef.current) {
+      manager.start(svgRef.current);
+    }
+
+    return () => {
+      manager.stop();
+    };
+  }, [manager]);
+
+  return (
+    <div className="LaserToolOverlay">
+      <svg ref={svgRef} className="LaserToolOverlayCanvas" />
+    </div>
+  );
+};
--- a/src/components/LaserTool/LaserToolOverlay.scss
+++ b/src/components/LaserTool/LaserToolOverlay.scss
@@ -0,0 +1,20 @@
+.excalidraw {
+  .LaserToolOverlay {
+    pointer-events: none;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    z-index: 2;
+
+    .LaserToolOverlayCanvas {
+      image-rendering: auto;
+      overflow: visible;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -55,13 +55,13 @@ import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
+import { LaserPointerButton } from "./LaserTool/LaserPointerButton";

 interface LayerUIProps {
  actionManager: ActionManager;
  appState: UIAppState;
  files: BinaryFiles;
  canvas: HTMLCanvasElement;
-  interactiveCanvas: HTMLCanvasElement | null;
  setAppState: React.Component<any, AppState>["setState"];
  elements: readonly NonDeletedExcalidrawElement[];
  onLockToggle: () => void;
@@ -72,11 +72,11 @@ interface LayerUIProps {
  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
  UIOptions: AppProps["UIOptions"];
-  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
  onExportImage: AppClassProperties["onExportImage"];
  renderWelcomeScreen: boolean;
  children?: React.ReactNode;
  app: AppClassProperties;
+  isCollaborating: boolean;
 }

 const DefaultMainMenu: React.FC<{
@@ -121,7 +121,6 @@ const LayerUI = ({
  setAppState,
  elements,
  canvas,
-  interactiveCanvas,
  onLockToggle,
  onHandToolToggle,
  onPenModeToggle,
@@ -129,11 +128,11 @@ const LayerUI = ({
  renderTopRightUI,
  renderCustomStats,
  UIOptions,
-  onImageAction,
  onExportImage,
  renderWelcomeScreen,
  children,
  app,
+  isCollaborating,
 }: LayerUIProps) => {
  const device = useDevice();
  const tunnels = useInitializeTunnels();
@@ -277,17 +276,29 @@ const LayerUI = ({

                          <ShapesSwitcher
                            appState={appState}
-                            interactiveCanvas={interactiveCanvas}
                            activeTool={appState.activeTool}
-                            setAppState={setAppState}
-                            onImageAction={({ pointerType }) => {
-                              onImageAction({
-                                insertOnCanvasDirectly: pointerType !== "mouse",
-                              });
-                            }}
+                            app={app}
                          />
                        </Stack.Row>
                      </Island>
+                      {isCollaborating && (
+                        <Island
+                          style={{
+                            marginLeft: 8,
+                            alignSelf: "center",
+                            height: "fit-content",
+                          }}
+                        >
+                          <LaserPointerButton
+                            title={t("toolBar.laser")}
+                            checked={appState.activeTool.type === "laser"}
+                            onChange={() =>
+                              app.setActiveTool({ type: "laser" })
+                            }
+                            isMobile
+                          />
+                        </Island>
+                      )}
                    </Stack.Row>
                  </Stack.Col>
                </div>
@@ -451,8 +462,6 @@ const LayerUI = ({
          onLockToggle={onLockToggle}
          onHandToolToggle={onHandToolToggle}
          onPenModeToggle={onPenModeToggle}
-          interactiveCanvas={interactiveCanvas}
-          onImageAction={onImageAction}
          renderTopRightUI={renderTopRightUI}
          renderCustomStats={renderCustomStats}
          renderSidebars={renderSidebars}
@@ -539,18 +548,8 @@ const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
    return false;
  }

-  const {
-    canvas: _pC,
-    interactiveCanvas: _pIC,
-    appState: prevAppState,
-    ...prev
-  } = prevProps;
-  const {
-    canvas: _nC,
-    interactiveCanvas: _nIC,
-    appState: nextAppState,
-    ...next
-  } = nextProps;
+  const { canvas: _pC, appState: prevAppState, ...prev } = prevProps;
+  const { canvas: _nC, appState: nextAppState, ...next } = nextProps;

  return (
    isShallowEqual(
--- a/src/components/LibraryMenu.scss
+++ b/src/components/LibraryMenu.scss
@@ -99,10 +99,10 @@
    font-size: 0.75rem;

    &:hover {
-      background-color: var(--color-primary-darker);
+      background-color: var(--color-brand-hover);
    }
    &:active {
-      background-color: var(--color-primary-darkest);
+      background-color: var(--color-brand-active);
    }
  }

--- a/src/components/MermaidToExcalidraw.scss
+++ b/src/components/MermaidToExcalidraw.scss
@@ -0,0 +1,221 @@
+@import "../css/variables.module";
+
+$verticalBreakpoint: 860px;
+
+.excalidraw {
+  .dialog-mermaid {
+    &-title {
+      margin-bottom: 5px;
+      margin-top: 2px;
+    }
+    &-desc {
+      font-size: 15px;
+      font-style: italic;
+      font-weight: 500;
+    }
+
+    .Modal__content .Island {
+      box-shadow: none;
+    }
+
+    @at-root .excalidraw:not(.excalidraw--mobile)#{&} {
+      padding: 1.25rem;
+
+      .Modal__content {
+        height: 100%;
+        max-height: 750px;
+
+        @media screen and (max-width: $verticalBreakpoint) {
+          height: auto;
+          // When vertical, we want the height to span whole viewport.
+          // This is also important for the children not to overflow the
+          // modal/viewport (for some reason).
+          max-height: 100%;
+        }
+
+        .Island {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          flex: 1 1 auto;
+
+          .Dialog__content {
+            display: flex;
+            flex: 1 1 auto;
+          }
+        }
+      }
+    }
+  }
+
+  .dialog-mermaid-body {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr auto;
+    height: 100%;
+    column-gap: 4rem;
+
+    @media screen and (max-width: $verticalBreakpoint) {
+      flex-direction: column;
+      display: flex;
+      gap: 1rem;
+    }
+  }
+
+  .dialog-mermaid-panels {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+    justify-content: space-between;
+    gap: 4rem;
+
+    grid-row: 1;
+    grid-column: 1 / 3;
+
+    @media screen and (max-width: $verticalBreakpoint) {
+      flex-direction: column;
+      display: flex;
+      gap: 1rem;
+    }
+
+    label {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      margin-bottom: 4px;
+      margin-left: 4px;
+
+      @media screen and (max-width: $verticalBreakpoint) {
+        margin-top: 4px;
+      }
+    }
+
+    &-text {
+      display: flex;
+      flex-direction: column;
+
+      textarea {
+        width: 20rem;
+        height: 100%;
+        resize: none;
+        border-radius: var(--border-radius-lg);
+        border: 1px solid var(--dialog-border-color);
+        white-space: pre-wrap;
+        padding: 0.85rem;
+        box-sizing: border-box;
+        width: 100%;
+        font-family: monospace;
+
+        @media screen and (max-width: $verticalBreakpoint) {
+          width: auto;
+          height: 10rem;
+        }
+      }
+    }
+
+    &-preview-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.85rem;
+      box-sizing: border-box;
+      width: 100%;
+      // acts as min-height
+      height: 200px;
+      flex-grow: 1;
+      position: relative;
+
+      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+        left center;
+      border-radius: var(--border-radius-lg);
+      border: 1px solid var(--dialog-border-color);
+
+      @media screen and (max-width: $verticalBreakpoint) {
+        // acts as min-height
+        height: 400px;
+        width: auto;
+      }
+
+      canvas {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+    &-preview-canvas-container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      flex-grow: 1;
+    }
+
+    &-preview {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .mermaid-error {
+      color: red;
+      font-weight: 800;
+      font-size: 30px;
+      word-break: break-word;
+      overflow: auto;
+      max-height: 100%;
+      height: 100%;
+      width: 100%;
+      text-align: center;
+      position: absolute;
+      z-index: 10;
+
+      p {
+        font-weight: 500;
+        font-family: Cascadia;
+        text-align: left;
+        white-space: pre-wrap;
+        font-size: 0.875rem;
+        padding: 0 10px;
+      }
+    }
+  }
+
+  .dialog-mermaid-buttons {
+    grid-column: 2;
+
+    .dialog-mermaid-insert {
+      &.excalidraw-button {
+        font-family: "Assistant";
+        font-weight: 600;
+        height: 2.5rem;
+        margin-top: 1em;
+        margin-bottom: 0.3em;
+        width: 7.5rem;
+        font-size: 12px;
+        color: $oc-white;
+        background-color: var(--color-primary);
+
+        &:hover {
+          background-color: var(--color-primary-darker);
+        }
+        &:active {
+          background-color: var(--color-primary-darkest);
+        }
+
+        @media screen and (max-width: $verticalBreakpoint) {
+          width: 100%;
+        }
+
+        @at-root .excalidraw.theme--dark#{&} {
+          color: var(--color-gray-100);
+        }
+      }
+
+      span {
+        padding-left: 0.5rem;
+        display: flex;
+      }
+    }
+  }
+}
--- a/src/components/MermaidToExcalidraw.tsx
+++ b/src/components/MermaidToExcalidraw.tsx
@@ -0,0 +1,243 @@
+import { useState, useRef, useEffect, useDeferredValue } from "react";
+import { BinaryFiles } from "../types";
+import { useApp } from "./App";
+import { Button } from "./Button";
+import { Dialog } from "./Dialog";
+import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE } from "../constants";
+import {
+  convertToExcalidrawElements,
+  exportToCanvas,
+} from "../packages/excalidraw/index";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { canvasToBlob } from "../data/blob";
+import { ArrowRightIcon } from "./icons";
+import Spinner from "./Spinner";
+import "./MermaidToExcalidraw.scss";
+
+import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+import { t } from "../i18n";
+import Trans from "./Trans";
+
+const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
+const MERMAID_EXAMPLE =
+  "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
+
+const saveMermaidDataToStorage = (data: string) => {
+  try {
+    localStorage.setItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW, data);
+  } catch (error: any) {
+    // Unable to access window.localStorage
+    console.error(error);
+  }
+};
+
+const importMermaidDataFromStorage = () => {
+  try {
+    const data = localStorage.getItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW);
+    if (data) {
+      return data;
+    }
+  } catch (error: any) {
+    // Unable to access localStorage
+    console.error(error);
+  }
+
+  return null;
+};
+
+const ErrorComp = ({ error }: { error: string }) => {
+  return (
+    <div data-testid="mermaid-error" className="mermaid-error">
+      Error! <p>{error}</p>
+    </div>
+  );
+};
+
+const MermaidToExcalidraw = () => {
+  const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = useState<{
+    loaded: boolean;
+    api: {
+      parseMermaidToExcalidraw: (
+        defination: string,
+        options: MermaidOptions,
+      ) => Promise<MermaidToExcalidrawResult>;
+    } | null;
+  }>({ loaded: false, api: null });
+
+  const [text, setText] = useState("");
+  const deferredText = useDeferredValue(text.trim());
+  const [error, setError] = useState(null);
+
+  const canvasRef = useRef<HTMLDivElement>(null);
+  const data = useRef<{
+    elements: readonly NonDeletedExcalidrawElement[];
+    files: BinaryFiles | null;
+  }>({ elements: [], files: null });
+
+  const app = useApp();
+
+  const resetPreview = () => {
+    const canvasNode = canvasRef.current;
+
+    if (!canvasNode) {
+      return;
+    }
+    const parent = canvasNode.parentElement;
+    if (!parent) {
+      return;
+    }
+    parent.style.background = "";
+    setError(null);
+    canvasNode.replaceChildren();
+  };
+
+  useEffect(() => {
+    const loadMermaidToExcalidrawLib = async () => {
+      const api = await import(
+        /* webpackChunkName:"mermaid-to-excalidraw" */ "@excalidraw/mermaid-to-excalidraw"
+      );
+      setMermaidToExcalidrawLib({ loaded: true, api });
+    };
+    loadMermaidToExcalidrawLib();
+  }, []);
+
+  useEffect(() => {
+    const data = importMermaidDataFromStorage() || MERMAID_EXAMPLE;
+    setText(data);
+  }, []);
+
+  useEffect(() => {
+    const renderExcalidrawPreview = async () => {
+      const canvasNode = canvasRef.current;
+      const parent = canvasNode?.parentElement;
+      if (
+        !mermaidToExcalidrawLib.loaded ||
+        !canvasNode ||
+        !parent ||
+        !mermaidToExcalidrawLib.api
+      ) {
+        return;
+      }
+      if (!deferredText) {
+        resetPreview();
+        return;
+      }
+      try {
+        const { elements, files } =
+          await mermaidToExcalidrawLib.api.parseMermaidToExcalidraw(
+            deferredText,
+            {
+              fontSize: DEFAULT_FONT_SIZE,
+            },
+          );
+        setError(null);
+
+        data.current = {
+          elements: convertToExcalidrawElements(elements, {
+            regenerateIds: true,
+          }),
+          files,
+        };
+
+        const canvas = await exportToCanvas({
+          elements: data.current.elements,
+          files: data.current.files,
+          exportPadding: DEFAULT_EXPORT_PADDING,
+          maxWidthOrHeight:
+            Math.max(parent.offsetWidth, parent.offsetHeight) *
+            window.devicePixelRatio,
+        });
+        // if converting to blob fails, there's some problem that will
+        // likely prevent preview and export (e.g. canvas too big)
+        await canvasToBlob(canvas);
+        parent.style.background = "var(--default-bg-color)";
+        canvasNode.replaceChildren(canvas);
+      } catch (e: any) {
+        parent.style.background = "var(--default-bg-color)";
+        if (deferredText) {
+          setError(e.message);
+        }
+      }
+    };
+    renderExcalidrawPreview();
+  }, [deferredText, mermaidToExcalidrawLib]);
+
+  const onClose = () => {
+    app.setOpenDialog(null);
+    saveMermaidDataToStorage(text);
+  };
+
+  const onSelect = () => {
+    const { elements: newElements, files } = data.current;
+    app.addElementsFromPasteOrLibrary({
+      elements: newElements,
+      files,
+      position: "center",
+      fitToContent: true,
+    });
+    onClose();
+  };
+
+  return (
+    <Dialog
+      className="dialog-mermaid"
+      onCloseRequest={onClose}
+      size={1200}
+      title={
+        <>
+          <p className="dialog-mermaid-title">{t("mermaid.title")}</p>
+          <span className="dialog-mermaid-desc">
+            <Trans
+              i18nKey="mermaid.description"
+              flowchartLink={(el) => (
+                <a href="https://mermaid.js.org/syntax/flowchart.html">{el}</a>
+              )}
+              sequenceLink={(el) => (
+                <a href="https://mermaid.js.org/syntax/sequenceDiagram.html">
+                  {el}
+                </a>
+              )}
+            />
+            <br />
+          </span>
+        </>
+      }
+    >
+      <div className="dialog-mermaid-body">
+        <div className="dialog-mermaid-panels">
+          <div className="dialog-mermaid-panels-text">
+            <label>{t("mermaid.syntax")}</label>
+
+            <textarea
+              onChange={(event) => setText(event.target.value)}
+              value={text}
+            />
+          </div>
+          <div className="dialog-mermaid-panels-preview">
+            <label>{t("mermaid.preview")}</label>
+            <div className="dialog-mermaid-panels-preview-wrapper">
+              {error && <ErrorComp error={error} />}
+              {mermaidToExcalidrawLib.loaded ? (
+                <div
+                  ref={canvasRef}
+                  style={{ opacity: error ? "0.15" : 1 }}
+                  className="dialog-mermaid-panels-preview-canvas-container"
+                />
+              ) : (
+                <Spinner size="2rem" />
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="dialog-mermaid-buttons">
+          <Button className="dialog-mermaid-insert" onSelect={onSelect}>
+            {t("mermaid.button")}
+            <span>{ArrowRightIcon}</span>
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+export default MermaidToExcalidraw;
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -36,9 +36,7 @@ type MobileMenuProps = {
  onLockToggle: () => void;
  onHandToolToggle: () => void;
  onPenModeToggle: () => void;
-  interactiveCanvas: HTMLCanvasElement | null;

-  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
  renderTopRightUI?: (
    isMobile: boolean,
    appState: UIAppState,
@@ -58,8 +56,7 @@ export const MobileMenu = ({
  onLockToggle,
  onHandToolToggle,
  onPenModeToggle,
-  interactiveCanvas,
-  onImageAction,
+
  renderTopRightUI,
  renderCustomStats,
  renderSidebars,
@@ -85,14 +82,8 @@ export const MobileMenu = ({
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
                      appState={appState}
-                      interactiveCanvas={interactiveCanvas}
                      activeTool={appState.activeTool}
-                      setAppState={setAppState}
-                      onImageAction={({ pointerType }) => {
-                        onImageAction({
-                          insertOnCanvasDirectly: pointerType !== "mouse",
-                        });
-                      }}
+                      app={app}
                    />
                  </Stack.Row>
                </Island>
--- a/src/components/RadioGroup.scss
+++ b/src/components/RadioGroup.scss
@@ -1,27 +1,18 @@
@import "../css/variables.module";

 .excalidraw {
-  --RadioGroup-background: #ffffff;
-  --RadioGroup-border: var(--color-gray-30);
+  --RadioGroup-background: var(--island-bg-color);
+  --RadioGroup-border: var(--color-surface-high);

  --RadioGroup-choice-color-off: var(--color-primary);
-  --RadioGroup-choice-color-off-hover: var(--color-primary-darkest);
-  --RadioGroup-choice-background-off: white;
-  --RadioGroup-choice-background-off-active: var(--color-gray-20);
+  --RadioGroup-choice-color-off-hover: var(--color-brand-hover);
+  --RadioGroup-choice-background-off: var(--island-bg-color);
+  --RadioGroup-choice-background-off-active: var(--color-surface-high);

-  --RadioGroup-choice-color-on: white;
+  --RadioGroup-choice-color-on: var(--color-surface-lowest);
  --RadioGroup-choice-background-on: var(--color-primary);
-  --RadioGroup-choice-background-on-hover: var(--color-primary-darker);
-  --RadioGroup-choice-background-on-active: var(--color-primary-darkest);
-
-  &.theme--dark {
-    --RadioGroup-background: var(--color-gray-85);
-    --RadioGroup-border: var(--color-gray-70);
-
-    --RadioGroup-choice-background-off: var(--color-gray-85);
-    --RadioGroup-choice-background-off-active: var(--color-gray-70);
-    --RadioGroup-choice-color-on: var(--color-gray-85);
-  }
+  --RadioGroup-choice-background-on-hover: var(--color-brand-hover);
+  --RadioGroup-choice-background-on-active: var(--color-brand-active);

  .RadioGroup {
    box-sizing: border-box;
--- a/src/components/Sidebar/SidebarTrigger.scss
+++ b/src/components/Sidebar/SidebarTrigger.scss
@@ -3,8 +3,7 @@
 .excalidraw {
  .sidebar-trigger {
    @include outlineButtonStyles;
-
-    background-color: var(--island-bg-color);
+    @include filledButtonOnCanvas;

    width: auto;
    height: var(--lg-button-size);
--- a/src/components/Switch.scss
+++ b/src/components/Switch.scss
@@ -1,15 +1,13 @@
@import "../css/variables.module";

 .excalidraw {
-  --Switch-disabled-color: #d6d6d6;
-  --Switch-track-background: white;
-  --Switch-thumb-background: #3d3d3d;
-
-  &.theme--dark {
-    --Switch-disabled-color: #5c5c5c;
-    --Switch-track-background: #242424;
-    --Switch-thumb-background: #b8b8b8;
-  }
+  --Switch-disabled-color: var(--color-border-outline);
+  --Switch-disabled-toggled-background: var(--color-border-outline-variant);
+  --Switch-disabled-border: var(--color-border-outline-variant);
+  --Switch-track-background: var(--island-bg-color);
+  --Switch-thumb-background: var(--color-on-surface);
+  --Switch-hover-background: var(--color-brand-hover);
+  --Switch-active-background: var(--color-brand-active);

  .Switch {
    position: relative;
@@ -28,7 +26,11 @@

    &:hover {
      background: var(--Switch-track-background);
-      border: 1px solid #999999;
+      border: 1px solid var(--Switch-hover-background);
+    }
+
+    &:active {
+      border: 1px solid var(--Switch-active-background);
    }

    &.toggled {
@@ -43,11 +45,11 @@

    &.disabled {
      background: var(--Switch-track-background);
-      border: 1px solid var(--Switch-disabled-color);
+      border: 1px solid var(--Switch-disabled-border);

      &.toggled {
-        background: var(--Switch-disabled-color);
-        border: 1px solid var(--Switch-disabled-color);
+        background: var(--Switch-disabled-toggled-background);
+        border: 1px solid var(--Switch-disabled-toggled-background);
      }
    }

@@ -92,7 +94,7 @@
    }

    &.disabled.toggled:before {
-      background: var(--color-gray-50);
+      background: var(--Switch-disabled-color);
    }

    & input {
--- a/src/components/TextField.scss
+++ b/src/components/TextField.scss
@@ -1,25 +1,16 @@
@import "../css/variables.module";

 .excalidraw {
-  --ExcTextField--color: var(--color-gray-80);
-  --ExcTextField--label-color: var(--color-gray-80);
-  --ExcTextField--background: white;
-  --ExcTextField--readonly--background: var(--color-gray-10);
-  --ExcTextField--readonly--color: var(--color-gray-80);
-  --ExcTextField--border: var(--color-gray-40);
-  --ExcTextField--border-hover: var(--color-gray-50);
-  --ExcTextField--placeholder: var(--color-gray-40);
-
-  &.theme--dark {
-    --ExcTextField--color: var(--color-gray-10);
-    --ExcTextField--label-color: var(--color-gray-20);
-    --ExcTextField--background: var(--color-gray-85);
-    --ExcTextField--readonly--background: var(--color-gray-80);
-    --ExcTextField--readonly--color: var(--color-gray-40);
-    --ExcTextField--border: var(--color-gray-70);
-    --ExcTextField--border-hover: var(--color-gray-60);
-    --ExcTextField--placeholder: var(--color-gray-80);
-  }
+  --ExcTextField--color: var(--color-on-surface);
+  --ExcTextField--label-color: var(--color-on-surface);
+  --ExcTextField--background: transparent;
+  --ExcTextField--readonly--background: var(--color-surface-high);
+  --ExcTextField--readonly--color: var(--color-on-surface);
+  --ExcTextField--border: var(--color-border-outline);
+  --ExcTextField--readonly--border: var(--color-border-outline-variant);
+  --ExcTextField--border-hover: var(--color-brand-hover);
+  --ExcTextField--border-active: var(--color-brand-active);
+  --ExcTextField--placeholder: var(--color-border-outline-variant);

  .ExcTextField {
    &--fullWidth {
@@ -61,7 +52,7 @@

        &:active,
        &:focus-within {
-          border-color: var(--color-primary);
+          border-color: var(--ExcTextField--border-active);
        }
      }

@@ -107,7 +98,7 @@

      &--readonly {
        background: var(--ExcTextField--readonly--background);
-        border-color: transparent;
+        border-color: var(--ExcTextField--readonly--border);

        & input {
          color: var(--ExcTextField--readonly--color);
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -83,12 +83,12 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
    }
  };

-  useEffect(
-    () => () => {
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
      isMountedRef.current = false;
-    },
-    [],
-  );
+    };
+  }, []);

  const lastPointerTypeRef = useRef<PointerType | null>(null);

--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -97,10 +97,6 @@
      }
    }

-    // &:hover {
-    //   background-color: var(--button-gray-2);
-    // }
-
    &:active {
      background-color: var(--button-gray-3);
    }
@@ -110,7 +106,6 @@
    }

    &--hide {
-      // visibility: hidden;
      display: none !important;
    }
  }
@@ -165,10 +160,24 @@
      width: var(--lg-button-size);
      height: var(--lg-button-size);

+      @media screen and (max-width: 450px) {
+        width: 1.8rem;
+        height: 1.8rem;
+      }
+      @media screen and (max-width: 379px) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
      svg {
        width: var(--lg-icon-size);
        height: var(--lg-icon-size);
      }
    }
+
+    .ToolIcon__LaserPointer .ToolIcon__icon {
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
  }
 }
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -16,23 +16,35 @@
      align-self: center;
      background-color: var(--default-border-color);
      margin: 0 0.25rem;
+
+      @include isMobile {
+        margin: 0;
+      }
    }
  }

  .App-toolbar__extra-tools-trigger {
    box-shadow: none;
    border: 0;
+    background-color: transparent;

    &:active {
      background-color: var(--button-hover-bg);
      box-shadow: 0 0 0 1px
        var(--button-active-border, var(--color-primary-darkest)) inset;
    }
+
+    &--selected,
+    &--selected:hover {
+      background: var(--color-primary-light);
+      color: var(--color-primary);
+    }
  }

  .App-toolbar__extra-tools-dropdown {
    margin-top: 0.375rem;
    right: 0;
    min-width: 11.875rem;
+    z-index: 1;
  }
 }
--- a/src/components/canvases/InteractiveCanvas.tsx
+++ b/src/components/canvases/InteractiveCanvas.tsx
@@ -193,6 +193,8 @@ const getRelevantAppStateProps = (
  showHyperlinkPopup: appState.showHyperlinkPopup,
  collaborators: appState.collaborators, // Necessary for collab. sessions
  activeEmbeddable: appState.activeEmbeddable,
+  snapLines: appState.snapLines,
+  zenModeEnabled: appState.zenModeEnabled,
 });

 const areEqual = (
--- a/src/components/canvases/StaticCanvas.tsx
+++ b/src/components/canvases/StaticCanvas.tsx
@@ -114,11 +114,13 @@ const areEqual = (
    return false;
  }

-  return isShallowEqual(
-    // asserting AppState because we're being passed the whole AppState
-    // but resolve to only the StaticCanvas-relevant props
-    getRelevantAppStateProps(prevProps.appState as AppState),
-    getRelevantAppStateProps(nextProps.appState as AppState),
+  return (
+    isShallowEqual(
+      // asserting AppState because we're being passed the whole AppState
+      // but resolve to only the StaticCanvas-relevant props
+      getRelevantAppStateProps(prevProps.appState as AppState),
+      getRelevantAppStateProps(nextProps.appState as AppState),
+    ) && isShallowEqual(prevProps.renderConfig, nextProps.renderConfig)
  );
 };

--- a/src/components/dropdownMenu/DropdownMenu.scss
+++ b/src/components/dropdownMenu/DropdownMenu.scss
@@ -7,8 +7,6 @@
    margin-top: 0.25rem;

    &--mobile {
-      bottom: 55px;
-      top: auto;
      left: 0;
      width: 100%;
      row-gap: 0.75rem;
@@ -16,7 +14,7 @@
      .dropdown-menu-container {
        padding: 8px 8px;
        box-sizing: border-box;
-        background-color: var(--island-bg-color);
+        // background-color: var(--island-bg-color);
        box-shadow: var(--shadow-island);
        border-radius: var(--border-radius-lg);
        position: relative;
@@ -29,7 +27,7 @@
    }

    .dropdown-menu-container {
-      background-color: #fff !important;
+      background-color: var(--island-bg-color);
      max-height: calc(100vh - 150px);
      overflow-y: auto;
      --gap: 2;
@@ -40,7 +38,7 @@
      padding: 0 0.625rem;
      column-gap: 0.625rem;
      font-size: 0.875rem;
-      color: var(--color-gray-100);
+      color: var(--color-on-surface);
      width: 100%;
      box-sizing: border-box;
      font-weight: normal;
@@ -49,7 +47,7 @@

    .dropdown-menu-item {
      background-color: transparent;
-      border: 0;
+      border: 1px solid transparent;
      align-items: center;
      height: 2rem;
      cursor: pointer;
@@ -59,6 +57,11 @@
        height: 2.25rem;
      }

+      &--selected {
+        background: var(--color-primary-light);
+        --icon-fill-color: var(--color-primary-darker);
+      }
+
      &__text {
        text-overflow: ellipsis;
        overflow: hidden;
@@ -75,6 +78,11 @@
        text-decoration: none;
      }

+      &:active {
+        background-color: var(--button-hover-bg);
+        border-color: var(--color-brand-active);
+      }
+
      svg {
        width: 1rem;
        height: 1rem;
@@ -93,22 +101,33 @@
      font-weight: 500;
    }
  }
-  &.theme--dark {
-    .dropdown-menu-item {
-      color: var(--color-gray-40);
-    }
-
-    .dropdown-menu-container {
-      background-color: var(--color-gray-90) !important;
-    }
-  }

  .dropdown-menu-button {
    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
    width: var(--lg-button-size);
    height: var(--lg-button-size);

+    --background: var(--color-surface-mid);
+
+    background-color: var(--background);
+
+    @at-root .excalidraw.theme--dark#{&} {
+      --background: var(--color-surface-high);
+      &:hover {
+        --background: #363541;
+      }
+    }
+
+    &:hover {
+      --background: var(--color-surface-high);
+      background-color: var(--background);
+      text-decoration: none;
+    }
+
+    &:active {
+      border-color: var(--color-primary);
+    }
+
    svg {
      width: var(--lg-icon-size);
      height: var(--lg-icon-size);
--- a/src/components/dropdownMenu/DropdownMenuItem.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItem.tsx
@@ -11,12 +11,14 @@ const DropdownMenuItem = ({
  children,
  shortcut,
  className,
+  selected,
  ...rest
 }: {
  icon?: JSX.Element;
  onSelect: (event: Event) => void;
  children: React.ReactNode;
  shortcut?: string;
+  selected?: boolean;
  className?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -26,7 +28,7 @@ const DropdownMenuItem = ({
      {...rest}
      onClick={handleClick}
      type="button"
-      className={getDropdownMenuItemClassName(className)}
+      className={getDropdownMenuItemClassName(className, selected)}
      title={rest.title ?? rest["aria-label"]}
    >
      <MenuItemContent icon={icon} shortcut={shortcut}>
--- a/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItemCustom.tsx
@@ -3,15 +3,19 @@ import React from "react";
 const DropdownMenuItemCustom = ({
  children,
  className = "",
+  selected,
  ...rest
 }: {
  children: React.ReactNode;
  className?: string;
+  selected?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>) => {
  return (
    <div
      {...rest}
-      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className} ${
+        selected ? `dropdown-menu-item--selected` : ``
+      }`.trim()}
    >
      {children}
    </div>
--- a/src/components/dropdownMenu/DropdownMenuItemLink.tsx
+++ b/src/components/dropdownMenu/DropdownMenuItemLink.tsx
@@ -12,6 +12,7 @@ const DropdownMenuItemLink = ({
  children,
  onSelect,
  className = "",
+  selected,
  ...rest
 }: {
  href: string;
@@ -19,6 +20,7 @@ const DropdownMenuItemLink = ({
  children: React.ReactNode;
  shortcut?: string;
  className?: string;
+  selected?: boolean;
  onSelect?: (event: Event) => void;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -29,7 +31,7 @@ const DropdownMenuItemLink = ({
      href={href}
      target="_blank"
      rel="noreferrer"
-      className={getDropdownMenuItemClassName(className)}
+      className={getDropdownMenuItemClassName(className, selected)}
      title={rest.title ?? rest["aria-label"]}
      onClick={handleClick}
    >
--- a/src/components/dropdownMenu/common.ts
+++ b/src/components/dropdownMenu/common.ts
@@ -6,8 +6,13 @@ export const DropdownMenuContentPropsContext = React.createContext<{
  onSelect?: (event: Event) => void;
 }>({});

-export const getDropdownMenuItemClassName = (className = "") => {
-  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
+export const getDropdownMenuItemClassName = (
+  className = "",
+  selected = false,
+) => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className} ${
+    selected ? "dropdown-menu-item--selected" : ""
+  }`.trim();
 };

 export const useHandleDropdownMenuItemClick = (
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -13,7 +13,7 @@ import clsx from "clsx";
 import { Theme } from "../element/types";
 import { THEME } from "../constants";

-const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
+export const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";

 const handlerColor = (theme: Theme) =>
  theme === THEME.LIGHT ? oc.white : "#1e1e1e";
@@ -1653,3 +1653,38 @@ export const frameToolIcon = createIcon(
  </g>,
  tablerIconProps,
 );
+
+export const mermaidLogoIcon = createIcon(
+  <path
+    fill="currentColor"
+    d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z"
+  />,
+);
+
+export const ArrowRightIcon = createIcon(
+  <g strokeWidth="1.25">
+    <path d="M4.16602 10H15.8327" />
+    <path d="M12.5 13.3333L15.8333 10" />
+    <path d="M12.5 6.66666L15.8333 9.99999" />
+  </g>,
+  modifiedTablerIconProps,
+);
+
+export const laserPointerToolIcon = createIcon(
+  <g
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.25"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    transform="rotate(90 10 10)"
+  >
+    <path
+      clipRule="evenodd"
+      d="m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z"
+    />
+    <path d="m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13" />
+  </g>,
+
+  20,
+);
--- a/src/components/live-collaboration/LiveCollaborationTrigger.scss
+++ b/src/components/live-collaboration/LiveCollaborationTrigger.scss
@@ -14,6 +14,8 @@

    --button-active-bg: var(--color-primary-darker);

+    box-shadow: 0 0 0 1px var(--color-surface-lowest);
+
    flex-shrink: 0;

    // double .active to force specificity
--- a/src/components/main-menu/MainMenu.tsx
+++ b/src/components/main-menu/MainMenu.tsx
@@ -43,6 +43,7 @@ const MainMenu = Object.assign(
                });
              }}
              data-testid="main-menu-trigger"
+              className="main-menu-trigger"
            >
              {HamburgerMenuIcon}
            </DropdownMenu.Trigger>
--- a/src/components/welcome-screen/WelcomeScreen.scss
+++ b/src/components/welcome-screen/WelcomeScreen.scss
@@ -174,7 +174,7 @@
    justify-content: space-between;

    background: none;
-    border: none;
+    border: 1px solid transparent;

    padding: 0.75rem;

@@ -204,7 +204,7 @@

  .welcome-screen-menu-item:hover {
    text-decoration: none;
-    background: var(--color-gray-10);
+    background: var(--button-hover-bg);

    .welcome-screen-menu-item__shortcut {
      color: var(--color-gray-50);
@@ -216,7 +216,8 @@
  }

  .welcome-screen-menu-item:active {
-    background: var(--color-gray-20);
+    background: var(--button-hover-bg);
+    border-color: var(--color-brand-active);

    .welcome-screen-menu-item__shortcut {
      color: var(--color-gray-50);
@@ -247,8 +248,7 @@
    }

    .welcome-screen-menu-item:hover {
-      background: var(--color-gray-85);
-
+      background-color: var(--color-surface-low);
      .welcome-screen-menu-item__shortcut {
        color: var(--color-gray-50);
      }
@@ -259,7 +259,6 @@
    }

    .welcome-screen-menu-item:active {
-      background-color: var(--color-gray-90);
      .welcome-screen-menu-item__text {
        color: var(--color-gray-10);
      }
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -148,6 +148,8 @@ export const IMAGE_MIME_TYPES = {
  jfif: "image/jfif",
 } as const;

+export const ALLOWED_PASTE_MIME_TYPES = ["text/plain", "text/html"] as const;
+
 export const MIME_TYPES = {
  json: "application/json",
  // excalidraw data
@@ -296,6 +298,18 @@ export const ROUNDNESS = {
 * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";

+export const ROUGHNESS = {
+  architect: 0,
+  artist: 1,
+  cartoonist: 2,
+} as const;
+
+export const STROKE_WIDTH = {
+  thin: 1,
+  bold: 2,
+  extraBold: 4,
+} as const;
+
 export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: ExcalidrawElement["strokeColor"];
  backgroundColor: ExcalidrawElement["backgroundColor"];
@@ -308,10 +322,10 @@ export const DEFAULT_ELEMENT_PROPS: {
 } = {
  strokeColor: COLOR_PALETTE.black,
  backgroundColor: COLOR_PALETTE.transparent,
-  fillStyle: "hachure",
-  strokeWidth: 1,
+  fillStyle: "solid",
+  strokeWidth: 2,
  strokeStyle: "solid",
-  roughness: 1,
+  roughness: ROUGHNESS.artist,
  opacity: 100,
  locked: false,
 };
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -195,7 +195,7 @@
  .buttonList label:focus-within,
  input:focus-visible {
    outline: transparent;
-    box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    box-shadow: 0 0 0 1px var(--color-brand-hover);
  }

  .buttonList {
@@ -280,6 +280,11 @@
    align-items: center;
    justify-content: space-between;
    padding: 8px;
+
+    .dropdown-menu--mobile {
+      bottom: 55px;
+      top: auto;
+    }
  }

  .App-mobile-menu {
@@ -444,13 +449,14 @@
    }

    &:active {
-      border: 1px solid var(--color-primary-darkest);
+      border: 1px solid var(--button-active-border);
    }
  }

  .help-icon {
    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
+    @include filledButtonOnCanvas;
+
    width: var(--lg-button-size);
    height: var(--lg-button-size);

@@ -536,13 +542,13 @@

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

    &:focus {
      outline: none;
-      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+      border-color: var(--color-brand-hover);
    }
  }

@@ -591,6 +597,8 @@
    background-color: var(--island-bg-color);

    .ToolIcon__icon {
+      width: 2rem;
+      height: 2rem;
      border-radius: 0;
    }

@@ -600,8 +608,8 @@
  }

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

    .ToolIcon__keybinding {
      display: none;
@@ -621,6 +629,20 @@
      padding: 0;
    }
  }
+
+  .main-menu-trigger {
+    @include filledButtonOnCanvas;
+  }
+
+  .App-menu__left {
+    --button-border: transparent;
+    --button-bg: var(--color-surface-mid);
+
+    @at-root .excalidraw.theme--dark#{&} {
+      --button-hover-bg: #363541;
+      --button-bg: var(--color-surface-high);
+    }
+  }
 }

 .ErrorSplash.excalidraw {
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -12,27 +12,30 @@
  --dialog-border-color: var(--color-gray-20);
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #{$oc-blue-2};
-  --icon-fill-color: var(--color-gray-80);
+  --icon-fill-color: var(--color-on-surface);
  --icon-green-fill-color: #{$oc-green-9};
  --default-bg-color: #{$oc-white};
  --input-bg-color: #{$oc-white};
  --input-border-color: #{$oc-gray-4};
  --input-hover-bg-color: #{$oc-gray-1};
  --input-label-color: #{$oc-gray-7};
-  --island-bg-color: rgba(255, 255, 255, 0.96);
+  --island-bg-color: #ffffff;
  --keybinding-color: var(--color-gray-40);
  --link-color: #{$oc-blue-7};
  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
-  --popup-bg-color: #{$oc-white};
+  --popup-bg-color: var(--island-bg-color);
  --popup-secondary-bg-color: #{$oc-gray-1};
  --popup-text-color: #{$oc-black};
  --popup-text-inverted-color: #{$oc-white};
  --select-highlight-color: #{$oc-blue-5};
-  --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
-    0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
-    0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
-  --button-hover-bg: var(--color-gray-10);
-  --default-border-color: var(--color-gray-30);
+  --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
+    0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
+    0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+
+  --button-hover-bg: var(--color-surface-high);
+  --button-active-bg: var(--color-surface-high);
+  --button-active-border: var(--color-brand-active);
+  --default-border-color: var(--color-surface-high);

  --default-button-size: 2rem;
  --default-icon-size: 1rem;
@@ -63,14 +66,14 @@
    0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
    0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
    0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
-  --sidebar-border-color: var(--color-gray-20);
-  --sidebar-bg-color: #fff;
+  --sidebar-border-color: var(--color-surface-high);
+  --sidebar-bg-color: var(--island-bg-color);
  --library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01),
    0px 8px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09),
    0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);

  --space-factor: 0.25rem;
-  --text-primary-color: var(--color-gray-80);
+  --text-primary-color: var(--color-on-surface);

  --color-selection: #6965db;

@@ -132,6 +135,19 @@
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;

+  --color-surface-high: hsl(244, 100%, 97%);
+  --color-surface-mid: hsl(240 25% 96%);
+  --color-surface-low: hsl(240 25% 94%);
+  --color-surface-lowest: #ffffff;
+  --color-on-surface: #1b1b1f;
+  --color-brand-hover: #5753d0;
+  --color-on-primary-container: #030064;
+  --color-surface-primary-container: #e0dfff;
+  --color-brand-active: #4440bf;
+  --color-border-outline: #767680;
+  --color-border-outline-variant: #c5c5d0;
+  --color-surface-primary-container: #e0dfff;
+
  &.theme--dark {
    &.theme--dark-background-none {
      background: none;
@@ -150,29 +166,24 @@
    --dialog-border-color: var(--color-gray-80);
    --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};
-    --icon-fill-color: var(--color-gray-40);
    --icon-green-fill-color: #{$oc-green-4};
    --default-bg-color: #121212;
    --input-bg-color: #121212;
    --input-border-color: #2e2e2e;
    --input-hover-bg-color: #181818;
    --input-label-color: #{$oc-gray-2};
-    --island-bg-color: #262627;
+    --island-bg-color: #232329;
    --keybinding-color: var(--color-gray-60);
    --link-color: #{$oc-blue-4};
    --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
-    --popup-bg-color: #2c2c2c;
    --popup-secondary-bg-color: #222;
    --popup-text-color: #{$oc-gray-4};
    --popup-text-inverted-color: #2c2c2c;
    --select-highlight-color: #{$oc-blue-4};
-    --text-primary-color: var(--color-gray-40);
-    --button-hover-bg: var(--color-gray-80);
-    --default-border-color: var(--color-gray-80);
-    --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
-      0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),
-      0px 1.13px 4.13211px rgba(0, 0, 0, 0.035),
-      0px 0.769896px 1.4945px rgba(0, 0, 0, 0.0243888);
+    --shadow-island: 0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
+      0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
+      0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+
    --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
      0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
      0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
@@ -180,8 +191,6 @@
      0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
      0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
    --avatar-border-color: var(--color-gray-85);
-    --sidebar-border-color: var(--color-gray-85);
-    --sidebar-bg-color: #191919;

    --scrollbar-thumb: #{$oc-gray-8};
    --scrollbar-thumb-hover: #{$oc-gray-7};
@@ -224,5 +233,18 @@
    --color-promo: #d297ff;

    --color-logo-text: #e2dfff;
+
+    --color-surface-high: hsl(245, 10%, 21%);
+    --color-surface-low: hsl(240, 8%, 15%);
+    --color-surface-mid: hsl(240 6% 10%);
+    --color-surface-lowest: hsl(0, 0%, 7%);
+    --color-on-surface: #e3e3e8;
+    --color-brand-hover: #bbb8ff;
+    --color-on-primary-container: #e0dfff;
+    --color-surface-primary-container: #403e6a;
+    --color-brand-active: #d0ccff;
+    --color-border-outline: #8e8d9c;
+    --color-border-outline-variant: #46464f;
+    --color-surface-primary-container: #403e6a;
  }
 }
--- a/src/css/variables.module.scss
+++ b/src/css/variables.module.scss
@@ -11,7 +11,7 @@
    .ToolIcon_type_radio,
    .ToolIcon_type_checkbox {
      &:checked + .ToolIcon__icon {
-        --icon-fill-color: var(--color-primary-darker);
+        --icon-fill-color: var(--color-on-primary-container);

        svg {
          fill: var(--icon-fill-color);
@@ -23,11 +23,11 @@
  .ToolIcon_type_radio,
  .ToolIcon_type_checkbox {
    &:checked + .ToolIcon__icon {
-      background: var(--color-primary-light);
-      --keybinding-color: var(--color-gray-60);
+      background: var(--color-surface-primary-container);
+      --keybinding-color: var(--color-on-primary-container);

      svg {
-        color: var(--color-primary-darker);
+        color: var(--color-on-primary-container);
      }
    }
  }
@@ -44,7 +44,11 @@

    &:active {
      background: var(--button-hover-bg);
-      border: 1px solid var(--color-primary-darkest);
+      border: 1px solid var(--button-active-border);
+
+      svg {
+        color: var(--color-on-primary-container);
+      }
    }
  }
 }
@@ -63,7 +67,7 @@
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
-  color: var(--button-color, var(--text-primary-color));
+  color: var(--button-color, var(--color-on-surface));

  svg {
    width: var(--button-width, var(--lg-icon-size));
@@ -88,22 +92,38 @@
  }

  &.active {
-    background-color: var(--button-selected-bg, var(--color-primary-light));
-    border-color: var(--button-selected-border, var(--color-primary-light));
+    background-color: var(
+      --button-selected-bg,
+      var(--color-surface-primary-container)
+    );
+    border-color: var(
+      --button-selected-border,
+      var(--color-surface-primary-container)
+    );

    &:hover {
      background-color: var(
        --button-selected-hover-bg,
-        var(--color-primary-light)
+        var(--color-surface-primary-container)
      );
    }

    svg {
-      color: var(--button-color, var(--color-primary-darker));
+      color: var(--button-color, var(--color-on-primary-container));
    }
  }
 }

+@mixin filledButtonOnCanvas {
+  border: none;
+  box-shadow: 0 0 0 1px var(--color-surface-lowest);
+  background-color: var(--color-surface-low);
+
+  &:active {
+    box-shadow: 0 0 0 1px var(--color-brand-active);
+  }
+}
+
 $theme-filter: "invert(93%) hue-rotate(180deg)";
 $right-sidebar-width: "302px";

--- a/src/cursor.ts
+++ b/src/cursor.ts
@@ -0,0 +1,105 @@
+import { CURSOR_TYPE, MIME_TYPES, THEME } from "./constants";
+import OpenColor from "open-color";
+import { AppState, DataURL } from "./types";
+import { isHandToolActive, isEraserActive } from "./appState";
+
+const laserPointerCursorSVG_tag = `<svg viewBox="0 0 24 24" stroke-width="1" width="28" height="28" xmlns="http://www.w3.org/2000/svg">`;
+const laserPointerCursorBackgroundSVG = `<path d="M6.164 11.755a5.314 5.314 0 0 1-4.932-5.298 5.314 5.314 0 0 1 5.311-5.311 5.314 5.314 0 0 1 5.307 5.113l8.773 8.773a3.322 3.322 0 0 1 0 4.696l-.895.895a3.322 3.322 0 0 1-4.696 0l-8.868-8.868Z" style="fill:#fff"/>`;
+const laserPointerCursorIconSVG = `<path stroke="#1b1b1f" fill="#fff" d="m7.868 11.113 7.773 7.774a2.359 2.359 0 0 0 1.667.691 2.368 2.368 0 0 0 2.357-2.358c0-.625-.248-1.225-.69-1.667L11.201 7.78 9.558 9.469l-1.69 1.643v.001Zm10.273 3.606-3.333 3.333m-3.25-6.583 2 2m-7-7 3 3M3.664 3.625l1 1M2.529 6.922l1.407-.144m5.735-2.932-1.118.866M4.285 9.823l.758-1.194m1.863-6.207-.13 1.408"/>`;
+
+const laserPointerCursorDataURL_lightMode = `data:${
+  MIME_TYPES.svg
+},${encodeURIComponent(
+  `${laserPointerCursorSVG_tag}${laserPointerCursorIconSVG}</svg>`,
+)}`;
+const laserPointerCursorDataURL_darkMode = `data:${
+  MIME_TYPES.svg
+},${encodeURIComponent(
+  `${laserPointerCursorSVG_tag}${laserPointerCursorBackgroundSVG}${laserPointerCursorIconSVG}</svg>`,
+)}`;
+
+export const resetCursor = (interactiveCanvas: HTMLCanvasElement | null) => {
+  if (interactiveCanvas) {
+    interactiveCanvas.style.cursor = "";
+  }
+};
+
+export const setCursor = (
+  interactiveCanvas: HTMLCanvasElement | null,
+  cursor: string,
+) => {
+  if (interactiveCanvas) {
+    interactiveCanvas.style.cursor = cursor;
+  }
+};
+
+let eraserCanvasCache: any;
+let previewDataURL: string;
+export const setEraserCursor = (
+  interactiveCanvas: HTMLCanvasElement | null,
+  theme: AppState["theme"],
+) => {
+  const cursorImageSizePx = 20;
+
+  const drawCanvas = () => {
+    const isDarkTheme = theme === THEME.DARK;
+    eraserCanvasCache = document.createElement("canvas");
+    eraserCanvasCache.theme = theme;
+    eraserCanvasCache.height = cursorImageSizePx;
+    eraserCanvasCache.width = cursorImageSizePx;
+    const context = eraserCanvasCache.getContext("2d")!;
+    context.lineWidth = 1;
+    context.beginPath();
+    context.arc(
+      eraserCanvasCache.width / 2,
+      eraserCanvasCache.height / 2,
+      5,
+      0,
+      2 * Math.PI,
+    );
+    context.fillStyle = isDarkTheme ? OpenColor.black : OpenColor.white;
+    context.fill();
+    context.strokeStyle = isDarkTheme ? OpenColor.white : OpenColor.black;
+    context.stroke();
+    previewDataURL = eraserCanvasCache.toDataURL(MIME_TYPES.svg) as DataURL;
+  };
+  if (!eraserCanvasCache || eraserCanvasCache.theme !== theme) {
+    drawCanvas();
+  }
+
+  setCursor(
+    interactiveCanvas,
+    `url(${previewDataURL}) ${cursorImageSizePx / 2} ${
+      cursorImageSizePx / 2
+    }, auto`,
+  );
+};
+
+export const setCursorForShape = (
+  interactiveCanvas: HTMLCanvasElement | null,
+  appState: Pick<AppState, "activeTool" | "theme">,
+) => {
+  if (!interactiveCanvas) {
+    return;
+  }
+  if (appState.activeTool.type === "selection") {
+    resetCursor(interactiveCanvas);
+  } else if (isHandToolActive(appState)) {
+    interactiveCanvas.style.cursor = CURSOR_TYPE.GRAB;
+  } else if (isEraserActive(appState)) {
+    setEraserCursor(interactiveCanvas, appState.theme);
+    // do nothing if image tool is selected which suggests there's
+    // a image-preview set as the cursor
+    // Ignore custom type as well and let host decide
+  } else if (appState.activeTool.type === "laser") {
+    const url =
+      appState.theme === THEME.LIGHT
+        ? laserPointerCursorDataURL_lightMode
+        : laserPointerCursorDataURL_darkMode;
+    interactiveCanvas.style.cursor = `url(${url}), auto`;
+  } else if (!["image", "custom"].includes(appState.activeTool.type)) {
+    interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
+  } else {
+    interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
+  }
+};
--- a/src/data/snapshots/transform.test.ts.snap
+++ b/src/data/snapshots/transform.test.ts.snap
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@@ -8,7 +8,7 @@ import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL, LibraryItem } from "../types";
 import { ValueOf } from "../utility-types";
-import { bytesToHexString } from "../utils";
+import { bytesToHexString, isPromiseLike } from "../utils";
 import { FileSystemHandle, nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
@@ -207,10 +207,13 @@ export const loadLibraryFromBlob = async (
 };

 export const canvasToBlob = async (
-  canvas: HTMLCanvasElement,
+  canvas: HTMLCanvasElement | Promise<HTMLCanvasElement>,
 ): Promise<Blob> => {
-  return new Promise((resolve, reject) => {
+  return new Promise(async (resolve, reject) => {
    try {
+      if (isPromiseLike(canvas)) {
+        canvas = await canvas;
+      }
      canvas.toBlob((blob) => {
        if (!blob) {
          return reject(
@@ -324,6 +327,31 @@ export const SVGStringToFile = (SVGString: string, filename: string = "") => {
  }) as File & { type: typeof MIME_TYPES.svg };
 };

+export const ImageURLToFile = async (
+  imageUrl: string,
+  filename: string = "",
+): Promise<File | undefined> => {
+  let response;
+  try {
+    response = await fetch(imageUrl);
+  } catch (error: any) {
+    throw new Error(t("errors.failedToFetchImage"));
+  }
+
+  if (!response.ok) {
+    throw new Error(t("errors.failedToFetchImage"));
+  }
+
+  const blob = await response.blob();
+
+  if (blob.type && isSupportedImageFile(blob)) {
+    const name = filename || blob.name || "";
+    return new File([blob], name, { type: blob.type });
+  }
+
+  throw new Error(t("errors.unsupportedFileType"));
+};
+
 export const getFileFromEvent = async (
  event: React.DragEvent<HTMLDivElement>,
 ) => {
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -66,17 +66,14 @@ export const exportCanvas = async (
    }
  }

-  const tempCanvas = await exportToCanvas(elements, appState, files, {
+  const tempCanvas = exportToCanvas(elements, appState, files, {
    exportBackground,
    viewBackgroundColor,
    exportPadding,
  });
-  tempCanvas.style.display = "none";
-  document.body.appendChild(tempCanvas);

  if (type === "png") {
    let blob = await canvasToBlob(tempCanvas);
-    tempCanvas.remove();
    if (appState.exportEmbedScene) {
      blob = await (
        await import(/* webpackChunkName: "image" */ "./image")
@@ -114,11 +111,8 @@ export const exportCanvas = async (
      } else {
        throw new Error(t("alerts.couldNotCopyToClipboard"));
      }
-    } finally {
-      tempCanvas.remove();
    }
  } else {
-    tempCanvas.remove();
    // shouldn't happen
    throw new Error("Unsupported export type");
  }
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -67,6 +67,7 @@ export const AllowedExcalidrawActiveTools: Record<
  frame: true,
  embeddable: true,
  hand: true,
+  laser: false,
 };

 export type RestoredDataState = {
@@ -188,7 +189,7 @@ const restoreElement = (
        fontSize = parseFloat(fontPx);
        fontFamily = getFontFamilyByName(_fontFamily);
      }
-      const text = element.text ?? "";
+      const text = (typeof element.text === "string" && element.text) || "";

      // line-height might not be specified either when creating elements
      // programmatically, or when importing old diagrams.
@@ -221,9 +222,17 @@ const restoreElement = (
        baseline,
      });

+      // if empty text, mark as deleted. We keep in array
+      // for data integrity purposes (collab etc.)
+      if (!text && !element.isDeleted) {
+        element = { ...element, originalText: text, isDeleted: true };
+        element = bumpVersion(element);
+      }
+
      if (refreshDimensions) {
        element = { ...element, ...refreshTextDimensions(element) };
      }
+
      return element;
    case "freedraw": {
      return restoreElementWithProperties(element, {
@@ -298,6 +307,7 @@ const restoreElement = (
    // We also don't want to throw, but instead return void so we filter
    // out these unsupported elements from the restored array.
  }
+  return null;
 };

 /**
--- a/src/data/transform.test.ts
+++ b/src/data/transform.test.ts
@@ -5,7 +5,31 @@ import {
 } from "./transform";
 import { ExcalidrawArrowElement } from "../element/types";

+const opts = { regenerateIds: false };
+
 describe("Test Transform", () => {
+  it("should generate id unless opts.regenerateIds is set to false explicitly", () => {
+    const elements = [
+      {
+        type: "rectangle",
+        x: 100,
+        y: 100,
+        id: "rect-1",
+      },
+    ];
+    let data = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+    );
+    expect(data.length).toBe(1);
+    expect(data[0].id).toBe("id0");
+
+    data = convertToExcalidrawElements(
+      elements as ExcalidrawElementSkeleton[],
+      opts,
+    );
+    expect(data[0].id).toBe("rect-1");
+  });
+
  it("should transform regular shapes", () => {
    const elements = [
      {
@@ -59,6 +83,7 @@ describe("Test Transform", () => {

    convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
+      opts,
    ).forEach((ele) => {
      expect(ele).toMatchSnapshot({
        seed: expect.any(Number),
@@ -87,6 +112,7 @@ describe("Test Transform", () => {
    ];
    convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
+      opts,
    ).forEach((ele) => {
      expect(ele).toMatchSnapshot({
        seed: expect.any(Number),
@@ -128,6 +154,7 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
+      opts,
    );

    expect(excaldrawElements.length).toBe(4);
@@ -210,6 +237,7 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
+      opts,
    );

    expect(excaldrawElements.length).toBe(12);
@@ -267,6 +295,7 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
+      opts,
    );

    expect(excaldrawElements.length).toBe(8);
@@ -280,6 +309,90 @@ describe("Test Transform", () => {
    });
  });

+  describe("Test Frames", () => {
+    it("should transform frames and update frame ids when regenerated", () => {
+      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
+        {
+          type: "frame",
+          children: ["1", "2"],
+          name: "My frame",
+        },
+      ];
+      const excaldrawElements = convertToExcalidrawElements(
+        elementsSkeleton,
+        opts,
+      );
+      expect(excaldrawElements.length).toBe(4);
+
+      excaldrawElements.forEach((ele) => {
+        expect(ele).toMatchObject({
+          seed: expect.any(Number),
+          versionNonce: expect.any(Number),
+          id: expect.any(String),
+        });
+      });
+    });
+
+    it("should consider max of calculated and frame dimensions when provided", () => {
+      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
+        {
+          type: "frame",
+          children: ["1", "2"],
+          name: "My frame",
+          width: 800,
+          height: 100,
+        },
+      ];
+      const excaldrawElements = convertToExcalidrawElements(
+        elementsSkeleton,
+        opts,
+      );
+      const frame = excaldrawElements.find((ele) => ele.type === "frame")!;
+      expect(frame.width).toBe(800);
+      expect(frame.height).toBe(126);
+    });
+  });
+
  describe("Test arrow bindings", () => {
    it("should bind arrows to shapes when start / end provided without ids", () => {
      const elements = [
@@ -300,6 +413,7 @@ describe("Test Transform", () => {
      ];
      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
+        opts,
      );

      expect(excaldrawElements.length).toBe(4);
@@ -321,7 +435,7 @@ describe("Test Transform", () => {
      });

      expect(text).toMatchObject({
-        x: 340,
+        x: 240,
        y: 226.5,
        type: "text",
        text: "HELLO WORLD!!",
@@ -341,7 +455,7 @@ describe("Test Transform", () => {
      });

      expect(ellipse).toMatchObject({
-        x: 555,
+        x: 355,
        y: 189,
        type: "ellipse",
        boundElements: [
@@ -383,10 +497,10 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
+        opts,
      );

      expect(excaldrawElements.length).toBe(4);
-
      const [arrow, text1, text2, text3] = excaldrawElements;

      expect(arrow).toMatchObject({
@@ -406,7 +520,7 @@ describe("Test Transform", () => {
      });

      expect(text1).toMatchObject({
-        x: 340,
+        x: 240,
        y: 226.5,
        type: "text",
        text: "HELLO WORLD!!",
@@ -426,7 +540,7 @@ describe("Test Transform", () => {
      });

      expect(text3).toMatchObject({
-        x: 555,
+        x: 355,
        y: 226.5,
        type: "text",
        boundElements: [
@@ -499,6 +613,7 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
+        opts,
      );

      expect(excaldrawElements.length).toBe(5);
@@ -547,6 +662,7 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
+        opts,
      );

      expect(excaldrawElements.length).toBe(4);
@@ -600,17 +716,18 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
+        opts,
      );

      expect(excaldrawElements.length).toBe(4);
-      const [, , arrow] = excaldrawElements;
+      const [, , arrow, text] = excaldrawElements;
      expect(arrow).toMatchObject({
        type: "arrow",
        x: 255,
        y: 239,
        boundElements: [
          {
-            id: "id46",
+            id: text.id,
            type: "text",
          },
        ],
@@ -650,17 +767,18 @@ describe("Test Transform", () => {
      ];
      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
+        opts,
      );
      expect(excaldrawElements.length).toBe(2);
      const [arrow, rect] = excaldrawElements;
      expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
        elementId: "rect-1",
        focus: 0,
-        gap: 5,
+        gap: 205,
      });
      expect(rect.boundElements).toStrictEqual([
        {
-          id: "id47",
+          id: arrow.id,
          type: "arrow",
        },
      ]);
@@ -692,6 +810,7 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
+      opts,
    );

    expect(excaldrawElements.length).toBe(1);
--- a/src/data/transform.ts
+++ b/src/data/transform.ts
@@ -5,6 +5,7 @@ import {
  VERTICAL_ALIGN,
 } from "../constants";
 import {
+  getCommonBounds,
  newElement,
  newLinearElement,
  redrawTextBoundingBox,
@@ -12,6 +13,7 @@ import {
 import { bindLinearElement } from "../element/binding";
 import {
  ElementConstructorOpts,
+  newFrameElement,
  newImageElement,
  newTextElement,
 } from "../element/newElement";
@@ -39,6 +41,8 @@ import {
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
 import { assertNever, getFontString } from "../utils";
+import { getSizeFromPoints } from "../points";
+import { randomId } from "../random";

 export type ValidLinearElement = {
  type: "arrow" | "line";
@@ -133,9 +137,7 @@ export type ValidContainer =
 export type ExcalidrawElementSkeleton =
  | Extract<
      Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-      | ExcalidrawEmbeddableElement
-      | ExcalidrawFreeDrawElement
-      | ExcalidrawFrameElement
+      ExcalidrawEmbeddableElement | ExcalidrawFreeDrawElement
    >
  | ({
      type: Extract<ExcalidrawLinearElement["type"], "line">;
@@ -156,10 +158,15 @@ export type ExcalidrawElementSkeleton =
      x: number;
      y: number;
      fileId: FileId;
-    } & Partial<ExcalidrawImageElement>);
+    } & Partial<ExcalidrawImageElement>)
+  | ({
+      type: "frame";
+      children: readonly ExcalidrawElement["id"][];
+      name?: string;
+    } & Partial<ExcalidrawFrameElement>);

 const DEFAULT_LINEAR_ELEMENT_PROPS = {
-  width: 300,
+  width: 100,
  height: 0,
 };

@@ -357,6 +364,48 @@ const bindLinearElementToElement = (
      );
    }
  }
+
+  // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
+  const endPointIndex = linearElement.points.length - 1;
+  const delta = 0.5;
+  const newPoints = JSON.parse(JSON.stringify(linearElement.points));
+  // left to right so shift the arrow towards right
+  if (
+    linearElement.points[endPointIndex][0] >
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = delta;
+    newPoints[endPointIndex][0] -= delta;
+  }
+
+  // right to left so shift the arrow towards left
+  if (
+    linearElement.points[endPointIndex][0] <
+    linearElement.points[endPointIndex - 1][0]
+  ) {
+    newPoints[0][0] = -delta;
+    newPoints[endPointIndex][0] += delta;
+  }
+  // top to bottom so shift the arrow towards top
+  if (
+    linearElement.points[endPointIndex][1] >
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = delta;
+    newPoints[endPointIndex][1] -= delta;
+  }
+
+  // bottom to top so shift the arrow towards bottom
+  if (
+    linearElement.points[endPointIndex][1] <
+    linearElement.points[endPointIndex - 1][1]
+  ) {
+    newPoints[0][1] = -delta;
+    newPoints[endPointIndex][1] += delta;
+  }
+
+  Object.assign(linearElement, { points: newPoints });
+
  return {
    linearElement,
    startBoundElement,
@@ -384,18 +433,27 @@ class ElementStore {
 }

 export const convertToExcalidrawElements = (
-  elements: ExcalidrawElementSkeleton[] | null,
+  elementsSkeleton: ExcalidrawElementSkeleton[] | null,
+  opts?: { regenerateIds: boolean },
 ) => {
-  if (!elements) {
+  if (!elementsSkeleton) {
    return [];
  }
-
+  const elements: ExcalidrawElementSkeleton[] = JSON.parse(
+    JSON.stringify(elementsSkeleton),
+  );
  const elementStore = new ElementStore();
  const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>();
+  const oldToNewElementIdMap = new Map<string, string>();

  // Create individual elements
  for (const element of elements) {
    let excalidrawElement: ExcalidrawElement;
+    const originalId = element.id;
+    if (opts?.regenerateIds !== false) {
+      Object.assign(element, { id: randomId() });
+    }
+
    switch (element.type) {
      case "rectangle":
      case "ellipse":
@@ -444,6 +502,11 @@ export const convertToExcalidrawElements = (
          ],
          ...element,
        });
+
+        Object.assign(
+          excalidrawElement,
+          getSizeFromPoints(excalidrawElement.points),
+        );
        break;
      }
      case "text": {
@@ -477,8 +540,15 @@ export const convertToExcalidrawElements = (

        break;
      }
+      case "frame": {
+        excalidrawElement = newFrameElement({
+          x: 0,
+          y: 0,
+          ...element,
+        });
+        break;
+      }
      case "freedraw":
-      case "frame":
      case "embeddable": {
        excalidrawElement = element;
        break;
@@ -499,6 +569,9 @@ export const convertToExcalidrawElements = (
    } else {
      elementStore.add(excalidrawElement);
      elementsWithIds.set(excalidrawElement.id, element);
+      if (originalId) {
+        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
+      }
    }
  }

@@ -524,6 +597,18 @@ export const convertToExcalidrawElements = (
              element.type === "arrow" ? element?.start : undefined;
            const originalEnd =
              element.type === "arrow" ? element?.end : undefined;
+            if (originalStart && originalStart.id) {
+              const newStartId = oldToNewElementIdMap.get(originalStart.id);
+              if (newStartId) {
+                Object.assign(originalStart, { id: newStartId });
+              }
+            }
+            if (originalEnd && originalEnd.id) {
+              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
+              if (newEndId) {
+                Object.assign(originalEnd, { id: newEndId });
+              }
+            }
            const { linearElement, startBoundElement, endBoundElement } =
              bindLinearElementToElement(
                container as ExcalidrawArrowElement,
@@ -539,13 +624,23 @@ export const convertToExcalidrawElements = (
        } else {
          switch (element.type) {
            case "arrow": {
+              const { start, end } = element;
+              if (start && start.id) {
+                const newStartId = oldToNewElementIdMap.get(start.id);
+                Object.assign(start, { id: newStartId });
+              }
+              if (end && end.id) {
+                const newEndId = oldToNewElementIdMap.get(end.id);
+                Object.assign(end, { id: newEndId });
+              }
              const { linearElement, startBoundElement, endBoundElement } =
                bindLinearElementToElement(
                  excalidrawElement as ExcalidrawArrowElement,
-                  element.start,
-                  element.end,
+                  start,
+                  end,
                  elementStore,
                );
+
              elementStore.add(linearElement);
              elementStore.add(startBoundElement);
              elementStore.add(endBoundElement);
@@ -557,5 +652,60 @@ export const convertToExcalidrawElements = (
      }
    }
  }
+
+  // Once all the excalidraw elements are created, we can add frames since we
+  // need to calculate coordinates and dimensions of frame which is possibe after all
+  // frame children are processed.
+  for (const [id, element] of elementsWithIds) {
+    if (element.type !== "frame") {
+      continue;
+    }
+    const frame = elementStore.getElement(id);
+
+    if (!frame) {
+      throw new Error(`Excalidraw element with id ${id} doesn't exist`);
+    }
+    const childrenElements: ExcalidrawElement[] = [];
+
+    element.children.forEach((id) => {
+      const newElementId = oldToNewElementIdMap.get(id);
+      if (!newElementId) {
+        throw new Error(`Element with ${id} wasn't mapped correctly`);
+      }
+
+      const elementInFrame = elementStore.getElement(newElementId);
+      if (!elementInFrame) {
+        throw new Error(`Frame element with id ${newElementId} doesn't exist`);
+      }
+      Object.assign(elementInFrame, { frameId: frame.id });
+
+      elementInFrame?.boundElements?.forEach((boundElement) => {
+        const ele = elementStore.getElement(boundElement.id);
+        if (!ele) {
+          throw new Error(
+            `Bound element with id ${boundElement.id} doesn't exist`,
+          );
+        }
+        Object.assign(ele, { frameId: frame.id });
+        childrenElements.push(ele);
+      });
+
+      childrenElements.push(elementInFrame);
+    });
+
+    let [minX, minY, maxX, maxY] = getCommonBounds(childrenElements);
+
+    const PADDING = 10;
+    minX = minX - PADDING;
+    minY = minY - PADDING;
+    maxX = maxX + PADDING;
+    maxY = maxY + PADDING;
+
+    // Take the max of calculated and provided frame dimensions, whichever is higher
+    const width = Math.max(frame?.width, maxX - minX);
+    const height = Math.max(frame?.height, maxY - minY);
+    Object.assign(frame, { x: minX, y: minY, width, height });
+  }
+
  return elementStore.getElements();
 };
--- a/src/element/Hyperlink.tsx
+++ b/src/element/Hyperlink.tsx
@@ -392,7 +392,7 @@ export const getLinkHandleFromCoords = (
  [x1, y1, x2, y2]: Bounds,
  angle: number,
  appState: Pick<UIAppState, "zoom">,
-): [x: number, y: number, width: number, height: number] => {
+): Bounds => {
  const size = DEFAULT_LINK_SIZE;
  const linkWidth = size / appState.zoom.value;
  const linkHeight = size / appState.zoom.value;
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@@ -34,7 +34,12 @@ export type RectangleBox = {
 type MaybeQuadraticSolution = [number | null, number | null] | false;

 // x and y position of top left corner, x and y position of bottom right corner
-export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
+export type Bounds = readonly [
+  minX: number,
+  minY: number,
+  maxX: number,
+  maxY: number,
+];

 export class ElementBounds {
  private static boundsCache = new WeakMap<
@@ -63,7 +68,7 @@ export class ElementBounds {
  }

  private static calculateBounds(element: ExcalidrawElement): Bounds {
-    let bounds: [number, number, number, number];
+    let bounds: Bounds;

    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);

@@ -158,7 +163,7 @@ export const getElementAbsoluteCoords = (
  ];
 };

-/**
+/*
 * for a given element, `getElementLineSegments` returns line segments
 * that can be used for visual collision detection (useful for frames)
 * as opposed to bounding box collision detection
@@ -387,7 +392,7 @@ const getCubicBezierCurveBound = (
 export const getMinMaxXYFromCurvePathOps = (
  ops: Op[],
  transformXY?: (x: number, y: number) => [number, number],
-): [number, number, number, number] => {
+): Bounds => {
  let currentP: Point = [0, 0];

  const { minX, minY, maxX, maxY } = ops.reduce(
@@ -435,9 +440,9 @@ export const getMinMaxXYFromCurvePathOps = (
  return [minX, minY, maxX, maxY];
 };

-const getBoundsFromPoints = (
+export const getBoundsFromPoints = (
  points: ExcalidrawFreeDrawElement["points"],
-): [number, number, number, number] => {
+): Bounds => {
  let minX = Infinity;
  let minY = Infinity;
  let maxX = -Infinity;
@@ -589,7 +594,7 @@ const getLinearElementRotatedBounds = (
  element: ExcalidrawLinearElement,
  cx: number,
  cy: number,
-): [number, number, number, number] => {
+): Bounds => {
  if (element.points.length < 2) {
    const [pointX, pointY] = element.points[0];
    const [x, y] = rotate(
@@ -600,7 +605,7 @@ const getLinearElementRotatedBounds = (
      element.angle,
    );

-    let coords: [number, number, number, number] = [x, y, x, y];
+    let coords: Bounds = [x, y, x, y];
    const boundTextElement = getBoundTextElement(element);
    if (boundTextElement) {
      const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
@@ -625,12 +630,7 @@ const getLinearElementRotatedBounds = (
  const transformXY = (x: number, y: number) =>
    rotate(element.x + x, element.y + y, cx, cy, element.angle);
  const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
-  let coords: [number, number, number, number] = [
-    res[0],
-    res[1],
-    res[2],
-    res[3],
-  ];
+  let coords: Bounds = [res[0], res[1], res[2], res[3]];
  const boundTextElement = getBoundTextElement(element);
  if (boundTextElement) {
    const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
@@ -674,12 +674,25 @@ export const getCommonBounds = (
  return [minX, minY, maxX, maxY];
 };

+export const getDraggedElementsBounds = (
+  elements: ExcalidrawElement[],
+  dragOffset: { x: number; y: number },
+) => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  return [
+    minX + dragOffset.x,
+    minY + dragOffset.y,
+    maxX + dragOffset.x,
+    maxY + dragOffset.y,
+  ];
+};
+
 export const getResizedElementAbsoluteCoords = (
  element: ExcalidrawElement,
  nextWidth: number,
  nextHeight: number,
  normalizePoints: boolean,
-): [number, number, number, number] => {
+): Bounds => {
  if (!(isLinearElement(element) || isFreeDrawElement(element))) {
    return [
      element.x,
@@ -696,7 +709,7 @@ export const getResizedElementAbsoluteCoords = (
    normalizePoints,
  );

-  let bounds: [number, number, number, number];
+  let bounds: Bounds;

  if (isFreeDrawElement(element)) {
    // Free Draw
@@ -727,7 +740,7 @@ export const getResizedElementAbsoluteCoords = (
 export const getElementPointsCoords = (
  element: ExcalidrawLinearElement,
  points: readonly (readonly [number, number])[],
-): [number, number, number, number] => {
+): Bounds => {
  // This might be computationally heavey
  const gen = rough.generator();
  const curve =
--- a/src/element/collision.ts
+++ b/src/element/collision.ts
@@ -494,7 +494,9 @@ const hitTestFreeDrawElement = (
  // for filled freedraw shapes, support
  // selecting from inside
  if (shape && shape.sets.length) {
-    return hitTestRoughShape(shape, x, y, threshold);
+    return element.fillStyle === "solid"
+      ? hitTestCurveInside(shape, x, y, "round")
+      : hitTestRoughShape(shape, x, y, threshold);
  }

  return false;
--- a/src/element/dragElements.ts
+++ b/src/element/dragElements.ts
@@ -1,28 +1,31 @@
 import { updateBoundElements } from "./binding";
-import { getCommonBounds } from "./bounds";
+import { Bounds, getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
 import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
+import { getGridPoint } from "../math";
 import Scene from "../scene/Scene";
-import { isFrameElement } from "./typeChecks";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isFrameElement,
+} from "./typeChecks";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
  selectedElements: NonDeletedExcalidrawElement[],
-  pointerX: number,
-  pointerY: number,
-  lockDirection: boolean = false,
-  distanceX: number = 0,
-  distanceY: number = 0,
+  offset: { x: number; y: number },
  appState: AppState,
  scene: Scene,
+  snapOffset: {
+    x: number;
+    y: number;
+  },
+  gridSize: AppState["gridSize"],
 ) => {
-  const [x1, y1] = getCommonBounds(selectedElements);
-  const offset = { x: pointerX - x1, y: pointerY - y1 };
-
  // we do not want a frame and its elements to be selected at the same time
  // but when it happens (due to some bug), we want to avoid updating element
  // in the frame twice, hence the use of set
@@ -36,46 +39,41 @@ export const dragSelectedElements = (
  if (frames.length > 0) {
    const elementsInFrames = scene
      .getNonDeletedElements()
+      .filter((e) => !isBoundToContainer(e))
      .filter((e) => e.frameId !== null)
      .filter((e) => frames.includes(e.frameId!));

    elementsInFrames.forEach((element) => elementsToUpdate.add(element));
  }

+  const commonBounds = getCommonBounds(
+    Array.from(elementsToUpdate).map(
+      (el) => pointerDownState.originalElements.get(el.id) ?? el,
+    ),
+  );
+  const adjustedOffset = calculateOffset(
+    commonBounds,
+    offset,
+    snapOffset,
+    gridSize,
+  );
+
  elementsToUpdate.forEach((element) => {
-    updateElementCoords(
-      lockDirection,
-      distanceX,
-      distanceY,
-      pointerDownState,
-      element,
-      offset,
-    );
+    updateElementCoords(pointerDownState, element, adjustedOffset);
    // update coords of bound text only if we're dragging the container directly
    // (we don't drag the group that it's part of)
    if (
+      // Don't update coords of arrow label since we calculate its position during render
+      !isArrowElement(element) &&
      // container isn't part of any group
      // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-      !element.groupIds.length ||
-      // container is part of a group, but we're dragging the container directly
-      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
+      (!element.groupIds.length ||
+        // container is part of a group, but we're dragging the container directly
+        (appState.editingGroupId && !isSelectedViaGroup(appState, element)))
    ) {
      const textElement = getBoundTextElement(element);
-      if (
-        textElement &&
-        // when container is added to a frame, so will its bound text
-        // so the text is already in `elementsToUpdate` and we should avoid
-        // updating its coords again
-        (!textElement.frameId || !frames.includes(textElement.frameId))
-      ) {
-        updateElementCoords(
-          lockDirection,
-          distanceX,
-          distanceY,
-          pointerDownState,
-          textElement,
-          offset,
-        );
+      if (textElement) {
+        updateElementCoords(pointerDownState, textElement, adjustedOffset);
      }
    }
    updateBoundElements(element, {
@@ -84,32 +82,54 @@ export const dragSelectedElements = (
  });
 };

+const calculateOffset = (
+  commonBounds: Bounds,
+  dragOffset: { x: number; y: number },
+  snapOffset: { x: number; y: number },
+  gridSize: AppState["gridSize"],
+): { x: number; y: number } => {
+  const [x, y] = commonBounds;
+  let nextX = x + dragOffset.x + snapOffset.x;
+  let nextY = y + dragOffset.y + snapOffset.y;
+
+  if (snapOffset.x === 0 || snapOffset.y === 0) {
+    const [nextGridX, nextGridY] = getGridPoint(
+      x + dragOffset.x,
+      y + dragOffset.y,
+      gridSize,
+    );
+
+    if (snapOffset.x === 0) {
+      nextX = nextGridX;
+    }
+
+    if (snapOffset.y === 0) {
+      nextY = nextGridY;
+    }
+  }
+  return {
+    x: nextX - x,
+    y: nextY - y,
+  };
+};
+
 const updateElementCoords = (
-  lockDirection: boolean,
-  distanceX: number,
-  distanceY: number,
  pointerDownState: PointerDownState,
  element: NonDeletedExcalidrawElement,
-  offset: { x: number; y: number },
+  dragOffset: { x: number; y: number },
 ) => {
-  let x: number;
-  let y: number;
-  if (lockDirection) {
-    const lockX = lockDirection && distanceX < distanceY;
-    const lockY = lockDirection && distanceX > distanceY;
-    const original = pointerDownState.originalElements.get(element.id);
-    x = lockX && original ? original.x : element.x + offset.x;
-    y = lockY && original ? original.y : element.y + offset.y;
-  } else {
-    x = element.x + offset.x;
-    y = element.y + offset.y;
-  }
+  const originalElement =
+    pointerDownState.originalElements.get(element.id) ?? element;
+
+  const nextX = originalElement.x + dragOffset.x;
+  const nextY = originalElement.y + dragOffset.y;

  mutateElement(element, {
-    x,
-    y,
+    x: nextX,
+    y: nextY,
  });
 };
+
 export const getDragOffsetXY = (
  selectedElements: NonDeletedExcalidrawElement[],
  x: number,
@@ -133,6 +153,10 @@ export const dragNewElement = (
  /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
      true */
  widthAspectRatio?: number | null,
+  originOffset: {
+    x: number;
+    y: number;
+  } | null = null,
 ) => {
  if (shouldMaintainAspectRatio && draggingElement.type !== "selection") {
    if (widthAspectRatio) {
@@ -173,8 +197,8 @@ export const dragNewElement = (

  if (width !== 0 && height !== 0) {
    mutateElement(draggingElement, {
-      x: newX,
-      y: newY,
+      x: newX + (originOffset?.x ?? 0),
+      y: newY + (originOffset?.y ?? 0),
      width,
      height,
    });
--- a/src/element/embeddable.ts
+++ b/src/element/embeddable.ts
@@ -2,7 +2,8 @@ import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import { t } from "../i18n";
 import { ExcalidrawProps } from "../types";
-import { getFontString, setCursorForShape, updateActiveTool } from "../utils";
+import { getFontString, updateActiveTool } from "../utils";
+import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { getContainerElement, wrapText } from "./textElement";
 import { isEmbeddableElement } from "./typeChecks";
@@ -27,6 +28,7 @@ const embeddedLinkCache = new Map<string, EmbeddedLink>();

 const RE_YOUTUBE =
  /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+
 const RE_VIMEO =
  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
@@ -46,6 +48,9 @@ const RE_VALTOWN =
 const RE_GENERIC_EMBED =
  /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;

+const RE_GIPHY =
+  /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
+
 const ALLOWED_DOMAINS = new Set([
  "youtube.com",
  "youtu.be",
@@ -58,6 +63,7 @@ const ALLOWED_DOMAINS = new Set([
  "*.simplepdf.eu",
  "stackblitz.com",
  "val.town",
+  "giphy.com",
 ]);

 const createSrcDoc = (body: string) => {
@@ -307,6 +313,10 @@ export const extractSrc = (htmlString: string): string => {
    return gistMatch[1];
  }

+  if (RE_GIPHY.test(htmlString)) {
+    return `https://giphy.com/embed/${RE_GIPHY.exec(htmlString)![1]}`;
+  }
+
  const match = htmlString.match(RE_GENERIC_EMBED);
  if (match && match.length === 2) {
    return match[1];
--- a/src/element/linearElementEditor.ts
+++ b/src/element/linearElementEditor.ts
@@ -21,6 +21,7 @@ import {
 } from "../math";
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import {
+  Bounds,
  getCurvePathOps,
  getElementPointsCoords,
  getMinMaxXYFromCurvePathOps,
@@ -1316,7 +1317,7 @@ export class LinearElementEditor {

  static getMinMaxXYWithBoundText = (
    element: ExcalidrawLinearElement,
-    elementBounds: [number, number, number, number],
+    elementBounds: Bounds,
    boundTextElement: ExcalidrawTextElementWithContainer,
  ): [number, number, number, number, number, number] => {
    let [x1, y1, x2, y2] = elementBounds;
--- a/src/element/mutateElement.ts
+++ b/src/element/mutateElement.ts
@@ -140,8 +140,8 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
 *
 * NOTE: does not trigger re-render.
 */
-export const bumpVersion = (
-  element: Mutable<ExcalidrawElement>,
+export const bumpVersion = <T extends Mutable<ExcalidrawElement>>(
+  element: T,
  version?: ExcalidrawElement["version"],
 ) => {
  element.version = (version ?? element.version) + 1;
--- a/src/element/newElement.ts
+++ b/src/element/newElement.ts
@@ -144,13 +144,15 @@ export const newEmbeddableElement = (
 };

 export const newFrameElement = (
-  opts: ElementConstructorOpts,
+  opts: {
+    name?: string;
+  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFrameElement> => {
  const frameElement = newElementWith(
    {
      ..._newElementBase<ExcalidrawFrameElement>("frame", opts),
      type: "frame",
-      name: null,
+      name: opts?.name || null,
    },
    {},
  );
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -41,7 +41,7 @@ import {
  MaybeTransformHandleType,
  TransformHandleDirection,
 } from "./transformHandles";
-import { Point, PointerDownState } from "../types";
+import { AppState, Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
  getApproxMinLineWidth,
@@ -79,6 +79,7 @@ export const transformElements = (
  pointerY: number,
  centerX: number,
  centerY: number,
+  appState: AppState,
 ) => {
  if (selectedElements.length === 1) {
    const [element] = selectedElements;
@@ -466,8 +467,8 @@ export const resizeSingleElement = (
        boundTextElement.fontSize,
        boundTextElement.lineHeight,
      );
-      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
-      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
+      eleNewWidth = Math.max(eleNewWidth, minWidth);
+      eleNewHeight = Math.max(eleNewHeight, minHeight);
    }
  }

@@ -508,8 +509,11 @@ export const resizeSingleElement = (
    }
  }

+  const flipX = eleNewWidth < 0;
+  const flipY = eleNewHeight < 0;
+
  // Flip horizontally
-  if (eleNewWidth < 0) {
+  if (flipX) {
    if (transformHandleDirection.includes("e")) {
      newTopLeft[0] -= Math.abs(newBoundsWidth);
    }
@@ -517,8 +521,9 @@ export const resizeSingleElement = (
      newTopLeft[0] += Math.abs(newBoundsWidth);
    }
  }
+
  // Flip vertically
-  if (eleNewHeight < 0) {
+  if (flipY) {
    if (transformHandleDirection.includes("s")) {
      newTopLeft[1] -= Math.abs(newBoundsHeight);
    }
@@ -542,10 +547,20 @@ export const resizeSingleElement = (
  const rotatedNewCenter = rotatePoint(newCenter, startCenter, angle);
  newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);

+  // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
+  // So we need to readjust (x,y) to be where the first point should be
+  const newOrigin = [...newTopLeft];
+  const linearElementXOffset = stateAtResizeStart.x - newBoundsX1;
+  const linearElementYOffset = stateAtResizeStart.y - newBoundsY1;
+  newOrigin[0] += linearElementXOffset;
+  newOrigin[1] += linearElementYOffset;
+
+  const nextX = newOrigin[0];
+  const nextY = newOrigin[1];
+
  // Readjust points for linear elements
  let rescaledElementPointsY;
  let rescaledPoints;
-
  if (isLinearElement(element) || isFreeDrawElement(element)) {
    rescaledElementPointsY = rescalePoints(
      1,
@@ -562,16 +577,11 @@ export const resizeSingleElement = (
    );
  }

-  // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
-  // So we need to readjust (x,y) to be where the first point should be
-  const newOrigin = [...newTopLeft];
-  newOrigin[0] += stateAtResizeStart.x - newBoundsX1;
-  newOrigin[1] += stateAtResizeStart.y - newBoundsY1;
  const resizedElement = {
    width: Math.abs(eleNewWidth),
    height: Math.abs(eleNewHeight),
-    x: newOrigin[0],
-    y: newOrigin[1],
+    x: nextX,
+    y: nextY,
    points: rescaledPoints,
  };

@@ -680,6 +690,10 @@ export const resizeMultipleElements = (
  const { minX, minY, maxX, maxY, midX, midY } = getCommonBoundingBox(
    targetElements.map(({ orig }) => orig).concat(boundTextElements),
  );
+
+  // const originalHeight = maxY - minY;
+  // const originalWidth = maxX - minX;
+
  const direction = transformHandleType;

  const mapDirectionsToAnchors: Record<typeof direction, Point> = {
--- a/src/element/resizeTest.ts
+++ b/src/element/resizeTest.ts
@@ -13,6 +13,7 @@ import {
  MaybeTransformHandleType,
 } from "./transformHandles";
 import { AppState, Zoom } from "../types";
+import { Bounds } from "./bounds";

 const isInsideTransformHandle = (
  transformHandle: TransformHandle,
@@ -87,7 +88,7 @@ export const getElementWithTransformHandleType = (
 };

 export const getTransformHandleTypeFromCoords = (
-  [x1, y1, x2, y2]: readonly [number, number, number, number],
+  [x1, y1, x2, y2]: Bounds,
  scenePointerX: number,
  scenePointerY: number,
  zoom: Zoom,
--- a/src/element/showSelectedShapeActions.ts
+++ b/src/element/showSelectedShapeActions.ts
@@ -12,6 +12,7 @@ export const showSelectedShapeActions = (
        (appState.editingElement ||
          (appState.activeTool.type !== "selection" &&
            appState.activeTool.type !== "eraser" &&
-            appState.activeTool.type !== "hand"))) ||
+            appState.activeTool.type !== "hand" &&
+            appState.activeTool.type !== "laser"))) ||
        getSelectedElements(elements, appState).length),
  );
--- a/src/element/textElement.ts
+++ b/src/element/textElement.ts
@@ -91,7 +91,7 @@ export const redrawTextBoundingBox = (
    );
    const maxContainerWidth = getBoundTextMaxWidth(container);

-    if (metrics.height > maxContainerHeight) {
+    if (!isArrowElement(container) && metrics.height > maxContainerHeight) {
      const nextHeight = computeContainerDimensionForBoundText(
        metrics.height,
        container.type,
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@@ -17,8 +17,8 @@ import {
 } from "./types";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
-import { resize } from "../tests/utils";
 import { getOriginalContainerHeightFromCache } from "./textWysiwyg";
+import { getTextEditor, updateTextEditor } from "../tests/queries/dom";

 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -26,16 +26,7 @@ ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 const tab = "    ";
 const mouse = new Pointer("mouse");

-const getTextEditor = () => {
-  return document.querySelector(
-    ".excalidraw-textEditorContainer > textarea",
-  ) as HTMLTextAreaElement;
-};
-
-const updateTextEditor = (editor: HTMLTextAreaElement, value: string) => {
-  fireEvent.change(editor, { target: { value } });
-  editor.dispatchEvent(new Event("input"));
-};
+const textEditorSelector = ".excalidraw-textEditorContainer > textarea";

 describe("textWysiwyg", () => {
  describe("start text editing", () => {
@@ -186,7 +177,7 @@ describe("textWysiwyg", () => {
      expect(h.state.editingElement?.id).toBe(boundText.id);
    });

-    it("should edit text under cursor when clicked with text tool", () => {
+    it("should edit text under cursor when clicked with text tool", async () => {
      const text = API.createElement({
        type: "text",
        text: "ola",
@@ -201,14 +192,14 @@ describe("textWysiwyg", () => {

      mouse.clickAt(text.x + 50, text.y + 50);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, false);

      expect(editor).not.toBe(null);
      expect(h.state.editingElement?.id).toBe(text.id);
      expect(h.elements.length).toBe(1);
    });

-    it("should edit text under cursor when double-clicked with selection tool", () => {
+    it("should edit text under cursor when double-clicked with selection tool", async () => {
      const text = API.createElement({
        type: "text",
        text: "ola",
@@ -223,12 +214,26 @@ describe("textWysiwyg", () => {

      mouse.doubleClickAt(text.x + 50, text.y + 50);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, false);

      expect(editor).not.toBe(null);
      expect(h.state.editingElement?.id).toBe(text.id);
      expect(h.elements.length).toBe(1);
    });
+
+    // FIXME too flaky. No one knows why.
+    it.skip("should bump the version of a labeled arrow when the label is updated", async () => {
+      const arrow = UI.createElement("arrow", {
+        width: 300,
+        height: 0,
+      });
+      await UI.editText(arrow, "Hello");
+      const { version } = arrow;
+
+      await UI.editText(arrow, "Hello\nworld!");
+
+      expect(arrow.version).toEqual(version + 1);
+    });
  });

  describe("Test container-unbound text", () => {
@@ -250,7 +255,7 @@ describe("textWysiwyg", () => {
      textElement = UI.createElement("text");

      mouse.clickOn(textElement);
-      textarea = getTextEditor();
+      textarea = await getTextEditor(textEditorSelector, true);
    });

    afterAll(() => {
@@ -460,7 +465,7 @@ describe("textWysiwyg", () => {
      UI.clickTool("text");
      mouse.clickAt(750, 300);

-      textarea = getTextEditor();
+      textarea = await getTextEditor(textEditorSelector, true);
      updateTextEditor(
        textarea,
        "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
@@ -512,7 +517,7 @@ describe("textWysiwyg", () => {
        { id: text.id, type: "text" },
      ]);
      mouse.down();
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(editor, "Hello World!");

@@ -540,7 +545,7 @@ describe("textWysiwyg", () => {
      ]);
      expect(text.angle).toBe(rectangle.angle);
      mouse.down();
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(editor, "Hello World!");

@@ -567,7 +572,7 @@ describe("textWysiwyg", () => {
      API.setSelectedElements([diamond]);
      Keyboard.keyPress(KEYS.ENTER);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      await new Promise((r) => setTimeout(r, 0));
      const value = new Array(1000).fill("1").join("\n");
@@ -602,7 +607,7 @@ describe("textWysiwyg", () => {
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(null);
      mouse.down();
-      let editor = getTextEditor();
+      let editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      editor.blur();

@@ -617,7 +622,7 @@ describe("textWysiwyg", () => {
      expect(text.containerId).toBe(rectangle.id);

      mouse.down();
-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(editor, "Hello World!");
      await new Promise((r) => setTimeout(r, 0));
@@ -639,7 +644,7 @@ describe("textWysiwyg", () => {
      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(rectangle.id);
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      await new Promise((r) => setTimeout(r, 0));

@@ -674,7 +679,7 @@ describe("textWysiwyg", () => {
        { id: text.id, type: "text" },
      ]);
      mouse.down();
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      updateTextEditor(editor, "Hello World!");

      await new Promise((r) => setTimeout(r, 0));
@@ -699,7 +704,7 @@ describe("textWysiwyg", () => {
        freedraw.y + freedraw.height / 2,
      );

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      updateTextEditor(editor, "Hello World!");
      fireEvent.keyDown(editor, { key: KEYS.ESCAPE });

@@ -733,7 +738,7 @@ describe("textWysiwyg", () => {
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(null);
      mouse.down();
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(editor, "Hello World!");

@@ -748,7 +753,7 @@ describe("textWysiwyg", () => {

      UI.clickTool("text");
      mouse.clickAt(20, 30);
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(
        editor,
@@ -793,7 +798,7 @@ describe("textWysiwyg", () => {
      mouse.down();

      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = getTextEditor();
+      let editor = await getTextEditor(textEditorSelector, true);

      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello World!");
@@ -806,7 +811,7 @@ describe("textWysiwyg", () => {
        rectangle.y + rectangle.height / 2,
      );
      mouse.down();
-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);

      editor.select();
      fireEvent.click(screen.getByTitle(/code/i));
@@ -839,7 +844,7 @@ describe("textWysiwyg", () => {

      Keyboard.keyDown(KEYS.ENTER);
      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = getTextEditor();
+      let editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(editor, "Hello World!");

@@ -860,7 +865,7 @@ describe("textWysiwyg", () => {
      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);

-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);
      updateTextEditor(editor, "Hello");

      await new Promise((r) => setTimeout(r, 0));
@@ -889,7 +894,7 @@ describe("textWysiwyg", () => {
      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      await new Promise((r) => setTimeout(r, 0));

@@ -926,7 +931,7 @@ describe("textWysiwyg", () => {
      // Bind first text
      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello World!");
      editor.blur();
@@ -947,24 +952,24 @@ describe("textWysiwyg", () => {
    it("should respect text alignment when resizing", async () => {
      Keyboard.keyPress(KEYS.ENTER);

-      let editor = getTextEditor();
+      let editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();

      // should center align horizontally and vertically by default
-      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          85,
-          4.5,
+          4.999999999999986,
        ]
      `);

      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);

-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);

      editor.select();

@@ -977,7 +982,7 @@ describe("textWysiwyg", () => {
      editor.blur();

      // should left align horizontally and bottom vertically after resize
-      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
          15,
@@ -987,7 +992,7 @@ describe("textWysiwyg", () => {

      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);
-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);

      editor.select();

@@ -999,11 +1004,11 @@ describe("textWysiwyg", () => {
      editor.blur();

      // should right align horizontally and top vertically after resize
-      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
        [
-          375,
-          -539,
+          374.99999999999994,
+          -535.0000000000001,
        ]
      `);
    });
@@ -1025,7 +1030,7 @@ describe("textWysiwyg", () => {
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(rectangle.id);
      mouse.down();
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(editor, "Hello World!");

@@ -1040,7 +1045,7 @@ describe("textWysiwyg", () => {
    it("should scale font size correctly when resizing using shift", async () => {
      Keyboard.keyPress(KEYS.ENTER);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1049,7 +1054,7 @@ describe("textWysiwyg", () => {
      expect(rectangle.height).toBe(75);
      expect(textElement.fontSize).toBe(20);

-      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
+      UI.resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
        shift: true,
      });
      expect(rectangle.width).toBe(200);
@@ -1060,7 +1065,7 @@ describe("textWysiwyg", () => {
    it("should bind text correctly when container duplicated with alt-drag", async () => {
      Keyboard.keyPress(KEYS.ENTER);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1092,7 +1097,7 @@ describe("textWysiwyg", () => {

    it("undo should work", async () => {
      Keyboard.keyPress(KEYS.ENTER);
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1129,7 +1134,7 @@ describe("textWysiwyg", () => {

    it("should not allow bound text with only whitespaces", async () => {
      Keyboard.keyPress(KEYS.ENTER);
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));

      updateTextEditor(editor, "   ");
@@ -1184,32 +1189,35 @@ describe("textWysiwyg", () => {
    it("should reset the container height cache when resizing", async () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
-      let editor = getTextEditor();
+      let editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();

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

      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);

-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);

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

    it("should reset the container height cache when font properties updated", async () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      updateTextEditor(editor, "Hello World!");
      editor.blur();

@@ -1234,7 +1242,7 @@ describe("textWysiwyg", () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);

-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);
      updateTextEditor(editor, "Hello World!");
      editor.blur();
      expect(
@@ -1266,12 +1274,12 @@ describe("textWysiwyg", () => {

      beforeEach(async () => {
        Keyboard.keyPress(KEYS.ENTER);
-        editor = getTextEditor();
+        editor = await getTextEditor(textEditorSelector, true);
        updateTextEditor(editor, "Hello");
        editor.blur();
        mouse.select(rectangle);
        Keyboard.keyPress(KEYS.ENTER);
-        editor = getTextEditor();
+        editor = await getTextEditor(textEditorSelector, true);
        editor.select();
      });

@@ -1382,7 +1390,7 @@ describe("textWysiwyg", () => {
    it("should wrap text in a container when wrap text in container triggered from context menu", async () => {
      UI.clickTool("text");
      mouse.clickAt(20, 30);
-      const editor = getTextEditor();
+      const editor = await getTextEditor(textEditorSelector, true);

      updateTextEditor(
        editor,
@@ -1428,7 +1436,7 @@ describe("textWysiwyg", () => {
              type: "text",
            },
          ],
-          fillStyle: "hachure",
+          fillStyle: "solid",
          groupIds: [],
          height: 35,
          isDeleted: false,
@@ -1441,7 +1449,7 @@ describe("textWysiwyg", () => {
          },
          strokeColor: "#1e1e1e",
          strokeStyle: "solid",
-          strokeWidth: 1,
+          strokeWidth: 2,
          type: "rectangle",
          updated: 1,
          version: 1,
@@ -1470,7 +1478,7 @@ describe("textWysiwyg", () => {
      // Bind first text
      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);
-      let editor = getTextEditor();
+      let editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello!");
      expect(
@@ -1495,7 +1503,7 @@ describe("textWysiwyg", () => {
        rectangle.x + rectangle.width / 2,
        rectangle.y + rectangle.height / 2,
      );
-      editor = getTextEditor();
+      editor = await getTextEditor(textEditorSelector, true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Excalidraw");
      editor.blur();
@@ -1509,30 +1517,4 @@ describe("textWysiwyg", () => {
      expect(text.text).toBe("Excalidraw");
    });
  });
-
-  it("should bump the version of labelled arrow when label updated", async () => {
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-    const arrow = UI.createElement("arrow", {
-      width: 300,
-      height: 0,
-    });
-
-    mouse.select(arrow);
-    Keyboard.keyPress(KEYS.ENTER);
-    let editor = getTextEditor();
-    await new Promise((r) => setTimeout(r, 0));
-    updateTextEditor(editor, "Hello");
-    editor.blur();
-
-    const { version } = arrow;
-
-    mouse.select(arrow);
-    Keyboard.keyPress(KEYS.ENTER);
-    editor = getTextEditor();
-    await new Promise((r) => setTimeout(r, 0));
-    updateTextEditor(editor, "Hello\nworld!");
-    editor.blur();
-
-    expect(arrow.version).toEqual(version + 1);
-  });
 });
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -584,7 +584,7 @@ export const textWysiwyg = ({
    window.removeEventListener("pointerdown", onPointerDown);
    window.removeEventListener("pointerup", bindBlurEvent);
    window.removeEventListener("blur", handleSubmit);
-
+    window.removeEventListener("beforeunload", handleSubmit);
    unbindUpdate();

    editable.remove();
@@ -701,6 +701,7 @@ export const textWysiwyg = ({
    passive: false,
    capture: true,
  });
+  window.addEventListener("beforeunload", handleSubmit);
  excalidrawContainer
    ?.querySelector(".excalidraw-textEditorContainer")!
    .appendChild(editable);
--- a/src/element/transformHandles.ts
+++ b/src/element/transformHandles.ts
@@ -4,7 +4,7 @@ import {
  PointerType,
 } from "./types";

-import { getElementAbsoluteCoords } from "./bounds";
+import { Bounds, getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { InteractiveCanvasAppState, Zoom } from "../types";
 import { isTextElement } from ".";
@@ -23,7 +23,7 @@ export type TransformHandleDirection =

 export type TransformHandleType = TransformHandleDirection | "rotation";

-export type TransformHandle = [number, number, number, number];
+export type TransformHandle = Bounds;
 export type TransformHandles = Partial<{
  [T in TransformHandleType]: TransformHandle;
 }>;
--- a/src/emitter.ts
+++ b/src/emitter.ts
@@ -0,0 +1,47 @@
+type Subscriber<T extends any[]> = (...payload: T) => void;
+
+export class Emitter<T extends any[] = []> {
+  public subscribers: Subscriber<T>[] = [];
+  public value: T | undefined;
+  private updateOnChangeOnly: boolean;
+
+  constructor(opts?: { initialState?: T; updateOnChangeOnly?: boolean }) {
+    this.updateOnChangeOnly = opts?.updateOnChangeOnly ?? false;
+    this.value = opts?.initialState;
+  }
+
+  /**
+   * Attaches subscriber
+   *
+   * @returns unsubscribe function
+   */
+  on(...handlers: Subscriber<T>[] | Subscriber<T>[][]) {
+    const _handlers = handlers
+      .flat()
+      .filter((item) => typeof item === "function");
+
+    this.subscribers.push(..._handlers);
+
+    return () => this.off(_handlers);
+  }
+
+  off(...handlers: Subscriber<T>[] | Subscriber<T>[][]) {
+    const _handlers = handlers.flat();
+    this.subscribers = this.subscribers.filter(
+      (handler) => !_handlers.includes(handler),
+    );
+  }
+
+  trigger(...payload: T): any[] {
+    if (this.updateOnChangeOnly && this.value === payload) {
+      return [];
+    }
+    this.value = payload;
+    return this.subscribers.map((handler) => handler(...payload));
+  }
+
+  destroy() {
+    this.subscribers = [];
+    this.value = undefined;
+  }
+}
--- a/src/frame.test.tsx
+++ b/src/frame.test.tsx
@@ -123,7 +123,7 @@ describe("adding elements to frames", () => {
  const commonTestCases = async (
    func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
  ) => {
-    describe("when frame is in a layer below", async () => {
+    describe.skip("when frame is in a layer below", async () => {
      it("should add an element", async () => {
        h.elements = [frame, rect2];

@@ -167,7 +167,7 @@ describe("adding elements to frames", () => {
      });
    });

-    describe("when frame is in a layer above", async () => {
+    describe.skip("when frame is in a layer above", async () => {
      it("should add an element", async () => {
        h.elements = [rect2, frame];

@@ -212,7 +212,7 @@ describe("adding elements to frames", () => {
    });

    describe("when frame is in an inner layer", async () => {
-      it("should add elements", async () => {
+      it.skip("should add elements", async () => {
        h.elements = [rect2, frame, rect3];

        func(frame, rect2);
@@ -223,7 +223,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect2, rect3, frame]);
      });

-      it("should add elements when there are other other elements in between", async () => {
+      it.skip("should add elements when there are other other elements in between", async () => {
        h.elements = [rect2, rect1, frame, rect4, rect3];

        func(frame, rect2);
@@ -234,7 +234,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect1, rect2, rect3, frame, rect4]);
      });

-      it("should add elements when there are other elements in between and the order is reversed", async () => {
+      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
        h.elements = [rect3, rect4, frame, rect2, rect1];

        func(frame, rect2);
@@ -289,7 +289,7 @@ describe("adding elements to frames", () => {
  describe("resizing frame over elements", async () => {
    await commonTestCases(resizeFrameOverElement);

-    it("resizing over text containers and labelled arrows", async () => {
+    it.skip("resizing over text containers and labelled arrows", async () => {
      await resizingTest(
        "rectangle",
        ["frame", "rectangle", "text"],
@@ -339,7 +339,7 @@ describe("adding elements to frames", () => {
      // );
    });

-    it("should add arrow bound with text when frame is in a layer below", async () => {
+    it.skip("should add arrow bound with text when frame is in a layer below", async () => {
      h.elements = [frame, arrow, text];

      resizeFrameOverElement(frame, arrow);
@@ -359,7 +359,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([arrow, text, frame]);
    });

-    it("should add arrow bound with text when frame is in an inner layer", async () => {
+    it.skip("should add arrow bound with text when frame is in an inner layer", async () => {
      h.elements = [arrow, frame, text];

      resizeFrameOverElement(frame, arrow);
@@ -371,7 +371,7 @@ describe("adding elements to frames", () => {
  });

  describe("resizing frame over elements but downwards", async () => {
-    it("should add elements when frame is in a layer below", async () => {
+    it.skip("should add elements when frame is in a layer below", async () => {
      h.elements = [frame, rect1, rect2, rect3, rect4];

      resizeFrameOverElement(frame, rect4);
@@ -382,7 +382,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([rect2, rect3, frame, rect4, rect1]);
    });

-    it("should add elements when frame is in a layer above", async () => {
+    it.skip("should add elements when frame is in a layer above", async () => {
      h.elements = [rect1, rect2, rect3, rect4, frame];

      resizeFrameOverElement(frame, rect4);
@@ -393,7 +393,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([rect1, rect2, rect3, frame, rect4]);
    });

-    it("should add elements when frame is in an inner layer", async () => {
+    it.skip("should add elements when frame is in an inner layer", async () => {
      h.elements = [rect1, rect2, frame, rect3, rect4];

      resizeFrameOverElement(frame, rect4);
@@ -408,7 +408,7 @@ describe("adding elements to frames", () => {
  describe("dragging elements into the frame", async () => {
    await commonTestCases(dragElementIntoFrame);

-    it("should drag element inside, duplicate it and keep it in frame", () => {
+    it.skip("should drag element inside, duplicate it and keep it in frame", () => {
      h.elements = [frame, rect2];

      dragElementIntoFrame(frame, rect2);
@@ -422,7 +422,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([rect2_copy, rect2, frame]);
    });

-    it("should drag element inside, duplicate it and remove it from frame", () => {
+    it.skip("should drag element inside, duplicate it and remove it from frame", () => {
      h.elements = [frame, rect2];

      dragElementIntoFrame(frame, rect2);
@@ -436,5 +436,121 @@ describe("adding elements to frames", () => {
      expect(rect2.frameId).toBe(null);
      expectEqualIds([rect2_copy, frame, rect2]);
    });
+
+    it("random order 01", () => {
+      const frame1 = API.createElement({
+        type: "frame",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+      const frame2 = API.createElement({
+        type: "frame",
+        x: 200,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+      const frame3 = API.createElement({
+        type: "frame",
+        x: 300,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+
+      const rectangle1 = API.createElement({
+        type: "rectangle",
+        x: 25,
+        y: 25,
+        width: 50,
+        height: 50,
+        frameId: frame1.id,
+      });
+      const rectangle2 = API.createElement({
+        type: "rectangle",
+        x: 225,
+        y: 25,
+        width: 50,
+        height: 50,
+        frameId: frame2.id,
+      });
+      const rectangle3 = API.createElement({
+        type: "rectangle",
+        x: 325,
+        y: 25,
+        width: 50,
+        height: 50,
+        frameId: frame3.id,
+      });
+      const rectangle4 = API.createElement({
+        type: "rectangle",
+        x: 350,
+        y: 25,
+        width: 50,
+        height: 50,
+        frameId: frame3.id,
+      });
+
+      h.elements = [
+        frame1,
+        rectangle4,
+        rectangle1,
+        rectangle3,
+        frame3,
+        rectangle2,
+        frame2,
+      ];
+
+      API.setSelectedElements([rectangle2]);
+
+      const origSize = h.elements.length;
+
+      expect(h.elements.length).toBe(origSize);
+      dragElementIntoFrame(frame3, rectangle2);
+      expect(h.elements.length).toBe(origSize);
+    });
+
+    it("random order 02", () => {
+      const frame1 = API.createElement({
+        type: "frame",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+      const frame2 = API.createElement({
+        type: "frame",
+        x: 200,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+      const rectangle1 = API.createElement({
+        type: "rectangle",
+        x: 25,
+        y: 25,
+        width: 50,
+        height: 50,
+        frameId: frame1.id,
+      });
+      const rectangle2 = API.createElement({
+        type: "rectangle",
+        x: 225,
+        y: 25,
+        width: 50,
+        height: 50,
+        frameId: frame2.id,
+      });
+
+      h.elements = [rectangle1, rectangle2, frame1, frame2];
+
+      API.setSelectedElements([rectangle2]);
+
+      expect(h.elements.length).toBe(4);
+      dragElementIntoFrame(frame2, rectangle1);
+      expect(h.elements.length).toBe(4);
+    });
  });
 });
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ryan Di	0bf1b4c4af	(un)lock a frame should not affect elements unrelated to the frame	2023-11-22 18:35:05 +08:00
Ryan Di	d9d1a3ab99	improve cursor style when frame's locked	2023-11-22 18:28:57 +08:00
Ryan Di	c43d9d44f0	update test snapshot	2023-11-22 18:20:31 +08:00
Ryan Di	c9af72e2ee	fix: lock/unlock elements in frames	2023-11-08 15:48:36 +08:00
Dante Calderon	18a7b97515	chore: Fix typo in comment in LocalData file (#7235 )	2023-11-04 18:15:09 +01:00
Aakansha Doshi	e8def8da8d	feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920 ) * feat: integrate mermaidToExcalidraw * create mermaid to excal dialog * allow mermaid syntax and export in preview * fix * fix webpack config * fix markdown error by using named export * center preview * set elements as selected when inserted onto canvas * persist mermaid data to storage * store canvas data in refs * load mermaid lazily * tweak design * compute width, height correctly for arrows * fix undefined vertex issue * add mermaid icon in dropdown * add a note in dialog * reset preview when error * show error in preview when error * show mermaid error messgae react way * design tweaks * add example and docs link * fix * tweak design to remove scroll bar * show a spinner unless mermaid loaded * regenerate ids when needed via programmatic api, this makes sure for mermaid diagrams ids are regenerated * tweak * add option to transform viewport to scene coords in transform api * make opts optional and use 100% zoom when inserting to canvas * fix arrow bindings in safari and firefox * fix elements insert position and viewport centering * fix: Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates. * defer rendering the preview * tweak text * fix tests * remove only * make design responsive * fix: show extra tools dropdown in mobile * fix mobile css * width auto * upgrade mermaid-to-excalidraw * don't pass appState in deps as its not used * upgrade mermaid-to-excalidraw to fix firefox issue * use types from mermaid-to-excalidraw * upgrade mermaid-to-excalidraw * use stable version of mermaid-to-excalidraw * upgrade mermaid-to-excalidraw * fix width of shapes toolbar for smaller screen size and also fix regression of mobile menu * use i18n * better api * enable test coverage in ui * Add tests * use common utils to update and get text editor * updgrade mermaid-to-excalidraw to support sequence diagrams * fix test * don't update arrow container height anytime in when redrawing text bounding box * increase size limit * increase size limit of vendor to 900kb * use openDialog for mermaid * upgrade mermaid-to-excalidraw * update frame id post generation * upgrade mermaid-to-excalidraw to add entity codes support * update size limit * upgrade mermaid-to-excalidraw package with frame api changes * upgrade mermaid-to-excalidraw to remove directive and use config * don't highlight mermaid tool and remove unused api setSelection * stop using loading state to update text area * move some styling to scss * review fixes * use modifiedTableIcon props and remove stale snap * css * dialog css * fix snap * use dialog border * change mermaidToExcalidrawLib to state * better styling of errors * make modal bigger * fix mobile * update snaps * fix icon color * fix dark mode insert button color * horizontally center spinner * render canvas conditionally on loaded state * rd tweaks * tweak class names * remove max height * typo in example * upgrade mermaid-to-excalidraw * simplify error state * fix height & overflow on vertical breakpoint * fix lint * show errors in overlay * set textarea font family * reduce opacity * update snap * upgrade to mermaid 0.1.2 --------- Co-authored-by: dwelle <luzar.david@gmail.com>	2023-11-03 17:41:34 +05:30
David Luzar	a7db41c5ba	fix: align input `:hover`/`:focus` with spec (#7225 )	2023-11-02 16:06:26 +01:00
David Luzar	d8166d9e1d	fix: dialog remounting on className updates (#7224 )	2023-11-02 16:06:15 +01:00
Farzaneh Sefidabi	81c0259041	docs: add npm downloads rate badge to README.md file (#7127 )	2023-11-01 13:27:57 +01:00
Aakansha Doshi	f5c91c3a0f	feat: support frames via programmatic API (#7205 ) * update frame id post generation * support frames via programmatic API * fix types * add test for frames * throw error when element doesn't exist * naming tweaks * update the api to use children * consider max of frame dimensions and calculated bounds of elements * consider bound elements in frame api	2023-11-01 17:14:04 +05:30
David Luzar	9b8de8a12e	test: disable flaky test (#7213 )	2023-10-31 12:05:08 +01:00
David Luzar	ea677d4581	feat: make clipboard more robust and reintroduce contextmenu actions (#7198 )	2023-10-28 19:29:28 +00:00
Aakansha Doshi	ec2de7205f	fix: don't update label position when dragging labelled arrows (#6891 ) * fix: don't update label position when dragging labelled arrows * lint * add test * don't update coords for label when labelled arrow inside frame * increase locales bundle size limit	2023-10-27 12:06:11 +05:30
Are	d5e3f436dc	feat: add approximate elements in bbox detection (#6727 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-26 23:33:00 +02:00
Aakansha Doshi	dcf4592e79	feat: regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping (#7195 ) * feat: regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping * type * increase limit as some past PR(s) increased the bundle size * review fixes * update changelog	2023-10-27 00:43:48 +05:30
David Luzar	d1f8eec174	feat: support giphy.com embed domain (#7192 )	2023-10-26 00:00:50 +02:00
David Luzar	0f81c30276	fix: frame add/remove/z-index ordering changes (#7194 )	2023-10-25 23:16:02 +02:00
zsviczian	f098789d16	fix: element relative position when dragging multiple elements on grid (#7107 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-25 22:48:03 +02:00
David Luzar	f794b0bb90	fix: freedraw non-solid bg hitbox not working (#7193 )	2023-10-25 17:21:01 +02:00
David Luzar	104f64f1dc	revert: remove bound-arrows from frames (#7190 )	2023-10-25 10:39:19 +02:00
Viczián András	71ad3c5356	fix: Actions panel ux improvement (#6850 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-24 18:36:13 +00:00
David Luzar	afea0df141	feat: renderer tweaks (#6698 )	2023-10-20 17:45:37 +02:00
Preet	d2a508104e	fix: Better fill rendering with latest RoughJS (#7031 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-20 15:08:24 +02:00
David Luzar	3697618266	feat: support `props.locked` for `setActiveTool` (#7153 ) Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>	2023-10-20 13:16:23 +02:00
David Luzar	e7cc2337ea	feat: add `onChange`, `onPointerDown`, `onPointerUp` api subs (#7154 )	2023-10-20 13:08:22 +02:00
dependabot[bot]	9eb89f9960	build(deps): bump @babel/traverse from 7.18.9 to 7.23.2 in /dev-docs (#7165 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-20 11:31:27 +02:00
Excalidraw Bot	ab1bcc7615	chore: Update translations from Crowdin (#6695 )	2023-10-20 11:29:28 +02:00
Vaibhav Shukla	b1cac35269	feat: Closing of "Save to.." Dialog on Save To Disk (#7168 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-19 17:51:50 +00:00
Vaibhav Shukla	83f86e2b86	fix: Fix for Strange Symbol Appearing on Canvas after Deleting Grouped Graphics (Issue #7116 ) (#7170 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-19 12:59:39 +02:00
dependabot[bot]	7e38cab76e	build(deps): bump @babel/traverse from 7.21.4 to 7.23.2 (#7171 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-19 12:33:16 +02:00
David Luzar	2cabb1f1f4	fix: attempt to fix flake in wysiwyg tests (#7173 )	2023-10-19 12:32:31 +02:00
Lakshya Satpal	63650f82d1	feat: Added Copy/Paste from Google Docs (#7136 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-19 12:14:23 +02:00
David Luzar	dde3dac931	feat: remove bound-arrows from frames (#7157 )	2023-10-17 18:18:20 +02:00
David Luzar	5b94cffc74	fix: ensure `ClipboardItem` created in the same tick to fix safari (#7066 )	2023-10-16 11:38:57 +02:00
David Luzar	aaf73c8ff3	fix: double image dialog shown on insert (#7152 )	2023-10-16 00:19:46 +02:00
mazijian-pp	44d9d5fcac	fix: wysiwyg left in undefined state on reload (#7123 )	2023-10-13 14:29:54 +02:00
Alex Kim	89a3bbddb7	test: add more resizing tests (#7028 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-12 20:59:02 +02:00
David Luzar	b86184a849	fix: ensure relative z-index of elements added to frame is retained (#7134 )	2023-10-12 15:00:23 +02:00
Barnabás Molnár	b552166924	feat: new dark mode theme & light theme tweaks (#7104 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-12 14:58:33 +02:00
David Luzar	26ff3993bb	feat: better laser cursor for dark mode (#7132 )	2023-10-11 11:17:27 +02:00
David Luzar	7ad02c359a	fix: memoize static canvas on `props.renderConfig` (#7131 )	2023-10-10 23:31:23 +02:00
David Luzar	2523fe82e3	feat: laser pointer improvements (#7128 )	2023-10-10 13:55:55 +02:00
zsviczian	4ea079eb85	fix: regression from #6739 preventing redirect link in view mode (#7120 ) Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-09 12:26:49 +02:00
Ryan Di	f20ba90ffa	perf: improve element in frame check (#7124 )	2023-10-09 16:32:27 +08:00
Emmanuel Ferdman	03da9112cf	fix: update links to excalidraw-app (#7072 )	2023-10-08 19:37:17 -05:00
David Luzar	a249f332a2	fix: ensure we do not stop laser update prematurely (#7100 )	2023-10-06 12:00:35 +02:00
Are	2e61926a6b	feat: initial Laser Pointer MVP (#6739 ) * feat: initial Laser pointer mvp * feat: add laser-pointer package and integrate it with collab * chore: fix yarn.lock * feat: update laser-pointer package, prevent panning from showing * feat: add laser pointer tool button when collaborating, migrate to official package * feat: reduce laser tool button size * update icon * fix icon & rotate * fix: lock zoom level * fix icon * add `selected` state, simplify and reduce api * set up pointer callbacks in viewMode if laser tool active * highlight extra-tools button if one of the nested tools active * add shortcut to laser pointer * feat: don't update paths if nothing changed * ensure we reset flag if no rAF scheduled * move `lastUpdate` to instance to optimize * return early * factor out into constants and add doc * skip iteration instead of exit * fix naming * feat: remove testing variable on window * destroy on editor unmount * fix incorrectly resetting `lastUpdate` in `stop()` --------- Co-authored-by: dwelle <luzar.david@gmail.com>	2023-10-05 17:05:16 +02:00
DanielJGeiger	e921bfb1ae	feat: Export `iconFillColor()` (#6996 )	2023-10-04 18:17:22 -05:00
David Luzar	e6f74350ac	refactor: DRY out tool typing (#7086 )	2023-10-04 23:39:00 +02:00
David Luzar	fa33aa08ab	refactor: refactor event globals to differentiate from `lastPointerUp` (#7084 )	2023-10-04 16:18:22 +02:00
David Luzar	8b838049df	fix: remove invisible elements safely (#7083 )	2023-10-04 16:09:59 +02:00
David Luzar	1f4f5e11ae	refactor: DRY out and simplify setting active tool from toolbar (#7079 )	2023-10-04 00:16:54 +02:00
David Luzar	12420592ef	feat: support menu / dropdown items to have `selected` state (#7078 )	2023-10-03 23:35:47 +02:00
DanielJGeiger	bfd318e765	docs: Update the `excalidraw-app` source-code link in README.md (#7035 ) chore: Update the `excalidraw-app` source-code link in README.md	2023-10-03 08:41:13 -05:00
Thomas Steiner	6a821f3b76	fix: Icon size in manifest (#7073 )	2023-10-03 11:07:02 +02:00
Tanmoy	84fd13e872	docs: fix minor grammar and spellings (#7039 )	2023-10-02 10:11:02 +02:00
Alberto Torrigiotti	7d2b6f3374	docs: fix typo on homepage of developer docs (#7047 )	2023-09-29 20:52:53 -05:00
David Luzar	ceb637f5ea	fix: elements being dropped/duplicated when added to frame (#7057 )	2023-09-29 15:40:14 +02:00
hugofqt	4c35eba72d	feat: element alignments - snapping (#6256 ) Co-authored-by: Ryan Di <ryan.weihao.di@gmail.com> Co-authored-by: dwelle <luzar.david@gmail.com>	2023-09-28 16:28:08 +02:00
David Luzar	4765f5536e	fix: frame name not editable on dbl-click (#7037 )	2023-09-25 16:54:23 +02:00
David Luzar	556175558a	fix: polyfill `Element.replaceChildren` (#7034 )	2023-09-24 19:07:35 +02:00
Aakansha Doshi	4db73a7f95	docs: release @excalidraw/excalidraw@0.16.1 🎉 (#7020 )	2023-09-21 10:28:21 +05:30