[Do not review] Use MathJax 4.0.0-beta.3

refactor: Replace the useSubtypes selection hook with a generic useSubtype hook
refactor: Refactor and add a test
2023-09-30 11:56:02 -05:00 · 2023-09-23 15:54:27 -05:00 · 2023-09-22 17:33:34 -05:00 · 2023-09-22 15:19:21 -05:00 · 2023-09-22 14:34:44 -05:00 · 2023-09-22 14:25:15 -05:00
205 changed files with 7398 additions and 10703 deletions
@@ -0,0 +1,3 @@
+## 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
@@ -70,7 +70,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/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/src/excalidraw-app) is part of this repository as well, and the app features:

 - 📡&nbsp;PWA support (works offline).
 - 🤼&nbsp;Real-time collaboration.
@@ -38,7 +38,6 @@ 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 |
@@ -71,7 +70,6 @@ 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 |
@@ -1,6 +1,6 @@
 # Customizing Styles

-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.
+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.

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

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

 ### 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**

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

 3. Switch to **Block Fingerprinting**

@@ -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 workflow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
+The following worfklow 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";
@@ -1,32 +0,0 @@
-# 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.
-
-# Arrows
-
-An arrow can be a child of a frame only if it has no binding (either start or end) to any other element, regardless of whether the bound element is inside the frame or not.
-
-This ensures that when an arrow is bound to an element outside the frame, it's rendered and behaves correctly.
-
-Therefore, when an arrow (that's a child of a frame) gets bound to an element, it's automatically removed from the frame.
-
-Bound-arrow is duplicated alongside a frame only if the arrow start is bound to an element within that frame.
@@ -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, run:
+> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork. To do this, run:
 >
 > ```bash
 > git remote add upstream https://github.com/excalidraw/excalidraw.git
@@ -23,11 +23,7 @@ const sidebars = {
      },
      items: ["introduction/development", "introduction/contributing"],
    },
-    {
-      type: "category",
-      label: "Codebase",
-      items: ["codebase/json-schema", "codebase/frames"],
-    },
+    { type: "category", label: "Codebase", items: ["codebase/json-schema"] },
    {
      type: "category",
      label: "@excalidraw/excalidraw",
@@ -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 but don't know where to
+        Want to build your own app powered by Excalidraw by don't know where to
        start?
      </>
    ),
@@ -145,14 +145,6 @@
  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"
@@ -210,16 +202,6 @@
    "@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"
@@ -283,11 +265,6 @@
  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"
@@ -303,14 +280,6 @@
    "@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"
@@ -318,13 +287,6 @@
  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"
@@ -412,28 +374,11 @@
  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"
@@ -467,25 +412,11 @@
    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"
@@ -1216,28 +1147,19 @@
    "@babel/parser" "^7.18.6"
    "@babel/types" "^7.18.6"

-"@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.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==
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
+  integrity sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==
  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"
+    "@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"
    debug "^4.1.0"
    globals "^11.1.0"

@@ -1249,15 +1171,6 @@
    "@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"
@@ -1757,11 +1670,6 @@
  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"
@@ -1780,19 +1688,6 @@
  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"
@@ -80,8 +80,7 @@ export const ExportToExcalidrawPlus: React.FC<{
  appState: Partial<AppState>;
  files: BinaryFiles;
  onError: (error: Error) => void;
-  onSuccess: () => void;
-}> = ({ elements, appState, files, onError, onSuccess }) => {
+}> = ({ elements, appState, files, onError }) => {
  const { t } = useI18n();
  return (
    <Card color="primary">
@@ -108,7 +107,6 @@ 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") {
@@ -107,7 +107,7 @@ export type SocketUpdateDataSource = {
    type: "MOUSE_LOCATION";
    payload: {
      socketId: string;
-      pointer: { x: number; y: number; tool: "pointer" | "laser" };
+      pointer: { x: number; y: number };
      button: "down" | "up";
      selectedElementIds: AppState["selectedElementIds"];
      username: string;
@@ -5,6 +5,7 @@ import { trackEvent } from "../src/analytics";
 import { getDefaultAppState } from "../src/appState";
 import { ErrorDialog } from "../src/components/ErrorDialog";
 import { TopErrorBoundary } from "../src/components/TopErrorBoundary";
+import { useMathSubtype } from "../src/element/subtypes/mathjax";
 import {
  APP_NAME,
  EVENT,
@@ -303,6 +304,8 @@ const ExcalidrawWrapper = () => {
  const [excalidrawAPI, excalidrawRefCallback] =
    useCallbackRefState<ExcalidrawImperativeAPI>();

+  useMathSubtype(excalidrawAPI);
+
  const [collabAPI] = useAtom(collabAPIAtom);
  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
  const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
@@ -608,7 +611,7 @@ const ExcalidrawWrapper = () => {
    canvas: HTMLCanvasElement,
  ) => {
    if (exportedElements.length === 0) {
-      throw new Error(t("alerts.cannotExportEmptyCanvas"));
+      return window.alert(t("alerts.cannotExportEmptyCanvas"));
    }
    if (canvas) {
      try {
@@ -624,7 +627,7 @@ const ExcalidrawWrapper = () => {
        );

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

        if (url) {
@@ -634,7 +637,7 @@ const ExcalidrawWrapper = () => {
        if (error.name !== "AbortError") {
          const { width, height } = canvas;
          console.error(error, { width, height });
-          throw new Error(error.message);
+          setErrorMessage(error.message);
        }
      }
    }
@@ -714,11 +717,6 @@ const ExcalidrawWrapper = () => {
                        },
                      });
                    }}
-                    onSuccess={() => {
-                      excalidrawAPI?.updateScene({
-                        appState: { openDialog: null },
-                      });
-                    }}
                  />
                );
              },
@@ -20,7 +20,6 @@
  },
  "dependencies": {
    "@braintree/sanitize-url": "6.0.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",
@@ -32,6 +31,7 @@
    "browser-fs-access": "0.29.1",
    "canvas-roundrect-polyfill": "0.0.1",
    "clsx": "1.1.1",
+    "copyfiles": "2.4.1",
    "cross-env": "7.0.3",
    "eslint-plugin-react": "7.32.2",
    "fake-indexeddb": "3.1.7",
@@ -41,19 +41,23 @@
    "image-blob-reduce": "3.0.1",
    "jotai": "1.13.1",
    "lodash.throttle": "4.1.1",
+    "mathjax-full": "https://github.com/MathJax/MathJax-src#develop",
    "nanoid": "3.3.3",
    "open-color": "1.9.1",
    "pako": "1.0.11",
+    "patch-package": "8.0.0",
    "perfect-freehand": "1.2.0",
    "pica": "7.1.1",
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
    "png-chunks-extract": "1.0.0",
-    "points-on-curve": "1.0.1",
+    "points-on-curve": "0.2.0",
+    "postinstall-postinstall": "2.1.0",
    "pwacompat": "2.0.17",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "roughjs": "4.6.5",
+    "replace-in-file": "7.0.1",
+    "roughjs": "4.5.2",
    "sass": "1.51.0",
    "socket.io-client": "2.3.1",
    "tunnel-rat": "0.1.2"
@@ -112,6 +116,7 @@
    "fix": "yarn fix:other && yarn fix:code",
    "locales-coverage": "node scripts/build-locales-coverage.js",
    "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "postinstall": "patch-package && yarn --cwd node_modules/mathjax-full compile-mjs && node scripts/beta-mathjax-import-paths.js",
    "prepare": "husky install",
    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "vite",
@@ -0,0 +1,126 @@
+diff --git a/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js b/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js
+index 3b228bb9..c8bcdea5 100644
+--- a/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js
+++ b/node_modules/mathjax-full/ts/input/asciimath/legacy/shim.js
+@@ -1,4 +1,4 @@
+-MathJax = Object.assign(global.MathJax || {}, require("./MathJax.js").MathJax);
+window.MathJax = Object.assign(window.MathJax || {}, require("./MathJax.js").MathJax);
+ 
+ //
+ //  Load component-based configuration, if any
+@@ -13,10 +13,13 @@ MathJax.Ajax.Preloading(
+   "[MathJax]/jax/element/mml/jax.js"
+ );
+ 
+-require("./jax/element/mml/jax.js");
+-require("./jax/input/AsciiMath/config.js");
+-require("./jax/input/AsciiMath/jax.js");
+module.exports.AsciiMath = void 0;
+(async () => {
+  await import("./jax/element/mml/jax.js");
+  await import("./jax/input/AsciiMath/config.js");
+  await import("./jax/input/AsciiMath/jax.js");
+ 
+-require("./jax/element/MmlNode.js");
+  await import("./jax/element/MmlNode.js");
+ 
+-module.exports.AsciiMath = MathJax.InputJax.AsciiMath;
+  module.exports.AsciiMath = MathJax.InputJax.AsciiMath;
+})();
+diff --git a/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js b/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js
+index 853b0a0e..1e009028 100644
+--- a/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js
+++ b/node_modules/mathjax-full/ts/input/asciimath/legacy/MathJax.js
+@@ -19,7 +19,7 @@ exports.MathJax = MathJax;
+     return obj;
+   };
+   var CONSTRUCTOR = function () {
+-    return function () {return arguments.callee.Init.call(this,arguments)};
+    return function fn() {return fn.Init.call(this,Object.assign(arguments,{call:fn}))};
+   };
+ 
+   BASE.Object = OBJECT({
+@@ -40,7 +40,7 @@ exports.MathJax = MathJax;
+     Init: function (args) {
+       var obj = this;
+       if (args.length === 1 && args[0] === PROTO) {return obj}
+-      if (!(obj instanceof args.callee)) {obj = new args.callee(PROTO)}
+      if (!(obj instanceof args.call)) {obj = new args.call(PROTO)}
+       return obj.Init.apply(obj,args) || obj;
+     },
+     
+@@ -65,7 +65,7 @@ exports.MathJax = MathJax;
+   
+     prototype: {
+       Init: function () {},
+-      SUPER: function (fn) {return fn.callee.SUPER},
+      SUPER: function (fn) {return fn.SUPER},
+       can: function (method) {return typeof(this[method]) === "function"},
+       has: function (property) {return typeof(this[property]) !== "undefined"},
+       isa: function (obj) {return (obj instanceof Object) && (this instanceof obj)}
+@@ -177,7 +177,7 @@ exports.MathJax = MathJax;
+   //  Create a callback from an associative array
+   //
+   var CALLBACK = function (data) {
+-    var cb = function () {return arguments.callee.execute.apply(arguments.callee,arguments)};
+    var cb = function fn() {return fn.execute.apply(fn,arguments)};
+     for (var id in CALLBACK.prototype) {
+       if (CALLBACK.prototype.hasOwnProperty(id)) {
+         if (typeof(data[id]) !== 'undefined') {cb[id] = data[id]}
+diff --git a/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js b/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js
+index 96fb9186..473aca11 100644
+--- a/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js
+++ b/node_modules/mathjax-full/ts/input/asciimath/legacy/jax/element/mml/jax.js
+@@ -813,9 +813,9 @@ MathJax.ElementJax.mml.Augment({
+       if (!(this.isEmbellished()) || typeof(this.core) === "undefined") {return this}
+       return this.data[this.core].CoreMO();
+     },
+-    toString: function () {
+    toString: function fn() {
+       if (this.inferred) {return '[' + this.data.join(',') + ']'}
+-      return this.SUPER(arguments).toString.call(this);
+      return this.SUPER(fn).toString.call(this);
+     },
+     setTeXclass: function (prev) {
+       var i, m = this.data.length;
+@@ -1196,12 +1196,12 @@ MathJax.ElementJax.mml.Augment({
+       }
+     },
+     linebreakContainer: true,
+-    Append: function () {
+    Append: function fn() {
+       for (var i = 0, m = arguments.length; i < m; i++) {
+         if (!((arguments[i] instanceof MML.mtr) ||
+               (arguments[i] instanceof MML.mlabeledtr))) {arguments[i] = MML.mtr(arguments[i])}
+       }
+-      this.SUPER(arguments).Append.apply(this,arguments);
+      this.SUPER(fn).Append.apply(this,arguments);
+     },
+     setTeXclass: MML.mbase.setSeparateTeXclasses
+   });
+@@ -1221,11 +1221,11 @@ MathJax.ElementJax.mml.Augment({
+       mtable: {rowalign: true, columnalign: true, groupalign: true}
+     },
+     linebreakContainer: true,
+-    Append: function () {
+    Append: function fn() {
+       for (var i = 0, m = arguments.length; i < m; i++) {
+         if (!(arguments[i] instanceof MML.mtd)) {arguments[i] = MML.mtd(arguments[i])}
+       }
+-      this.SUPER(arguments).Append.apply(this,arguments);
+      this.SUPER(fn).Append.apply(this,arguments);
+     },
+     setTeXclass: MML.mbase.setSeparateTeXclasses
+   });
+@@ -1420,9 +1420,9 @@ MathJax.ElementJax.mml.Augment({
+   
+   MML.xml = MML.mbase.Subclass({
+     type: "xml",
+-    Init: function () {
+    Init: function fn() {
+       this.div = document.createElement("div");
+-      return this.SUPER(arguments).Init.apply(this,arguments);
+      return this.SUPER(fn).Init.apply(this,arguments);
+     },
+     Append: function () {
+       for (var i = 0, m = arguments.length; i < m; i++) {
@@ -11,7 +11,7 @@
    {
      "src": "apple-touch-icon.png",
      "type": "image/png",
-      "sizes": "180x180"
+      "sizes": "256x256"
    }
  ],
  "start_url": "/",
@@ -0,0 +1,10 @@
+// When building MathJax 4.0-beta from source within the Excalidraw tree, some
+// import paths don't properly translate from `ts/` to `mjs/`. This makes the
+// Excalidraw build process parse MathJax TypeScript files. The resulting error
+// messages do not occur if MathJax was built from source outside the
+// Excalidraw tree. The following regexp eliminates those error messages.
+require("replace-in-file").sync({
+  files: "node_modules/mathjax-full/mjs/**/*",
+  from: /mathjax-full\/ts/g,
+  to: "mathjax-full/mjs",
+});
@@ -10,7 +10,7 @@ import {
  computeBoundTextPosition,
  computeContainerDimensionForBoundText,
  getBoundTextElement,
-  measureText,
+  measureTextElement,
  redrawTextBoundingBox,
 } from "../element/textElement";
 import {
@@ -31,7 +31,6 @@ import {
 } from "../element/types";
 import { AppState } from "../types";
 import { Mutable } from "../utility-types";
-import { getFontString } from "../utils";
 import { register } from "./register";

 export const actionUnbindText = register({
@@ -48,10 +47,11 @@ export const actionUnbindText = register({
    selectedElements.forEach((element) => {
      const boundTextElement = getBoundTextElement(element);
      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
-          boundTextElement.lineHeight,
+        const { width, height, baseline } = measureTextElement(
+          boundTextElement,
+          {
+            text: boundTextElement.originalText,
+          },
        );
        const originalContainerHeight = getOriginalContainerHeightFromCache(
          element.id,
@@ -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, updateActiveTool } from "../utils";
+import { getShortcutKey, setCursor, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
@@ -21,7 +21,6 @@ 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",
@@ -46,7 +46,6 @@ const deleteSelectedElements = (
    appState: {
      ...appState,
      selectedElementIds: {},
-      selectedGroupIds: {},
    },
  };
 };
@@ -155,12 +155,7 @@ const duplicateElements = (
            groupId,
          ).flatMap((element) =>
            isFrameElement(element)
-              ? [
-                  ...getFrameElements(elements, element.id, {
-                    includeBoundArrows: true,
-                  }),
-                  element,
-                ]
+              ? [...getFrameElements(elements, element.id), element]
              : [element],
          );

@@ -186,9 +181,7 @@ const duplicateElements = (
          continue;
        }
        if (isElementAFrame) {
-          const elementsInFrame = getFrameElements(sortedElements, element.id, {
-            includeBoundArrows: true,
-          });
+          const elementsInFrame = getFrameElements(sortedElements, element.id);

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

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

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

 const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
@@ -15,7 +15,6 @@ export const actionToggleGridMode = register({
      appState: {
        ...appState,
        gridSize: this.checked!(appState) ? null : GRID_SIZE,
-        objectsSnapModeEnabled: false,
      },
      commitToHistory: false,
    };
@@ -1,28 +0,0 @@
-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,
-});
@@ -80,7 +80,6 @@ export {

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

 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
@@ -2,10 +2,10 @@ import React from "react";
 import {
  Action,
  UpdaterFn,
-  ActionName,
  ActionResult,
  PanelComponentProps,
  ActionSource,
+  ActionPredicateFn,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
@@ -40,7 +40,8 @@ const trackAction = (
 };

 export class ActionManager {
-  actions = {} as Record<ActionName, Action>;
+  actions = {} as Record<Action["name"], Action>;
+  actionPredicates = [] as ActionPredicateFn[];

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

@@ -68,6 +69,37 @@ export class ActionManager {
    this.app = app;
  }

+  registerActionPredicate(predicate: ActionPredicateFn) {
+    if (!this.actionPredicates.includes(predicate)) {
+      this.actionPredicates.push(predicate);
+    }
+  }
+
+  filterActions(
+    filter: ActionPredicateFn,
+    opts?: {
+      elements?: readonly ExcalidrawElement[];
+      data?: Record<string, any>;
+    },
+  ): Action[] {
+    // For testing
+    if (this === undefined) {
+      return [];
+    }
+    const elements = opts?.elements ?? this.getElementsIncludingDeleted();
+    const appState = this.getAppState();
+    const data = opts?.data;
+
+    const actions: Action[] = [];
+    for (const key in this.actions) {
+      const action = this.actions[key];
+      if (filter(action, elements, appState, data)) {
+        actions.push(action);
+      }
+    }
+    return actions;
+  }
+
  registerAction(action: Action) {
    this.actions[action.name] = action;
  }
@@ -84,7 +116,7 @@ export class ActionManager {
        (action) =>
          (action.name in canvasActions
            ? canvasActions[action.name as keyof typeof canvasActions]
-            : true) &&
+            : this.isActionEnabled(action, { noPredicates: true })) &&
          action.keyTest &&
          action.keyTest(
            event,
@@ -135,7 +167,7 @@ export class ActionManager {
  /**
   * @param data additional data sent to the PanelComponent
   */
-  renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
+  renderAction = (name: Action["name"], data?: PanelComponentProps["data"]) => {
    const canvasActions = this.app.props.UIOptions.canvasActions;

    if (
@@ -143,7 +175,7 @@ export class ActionManager {
      "PanelComponent" in this.actions[name] &&
      (name in canvasActions
        ? canvasActions[name as keyof typeof canvasActions]
-        : true)
+        : this.isActionEnabled(this.actions[name], { noPredicates: true }))
    ) {
      const action = this.actions[name];
      const PanelComponent = action.PanelComponent!;
@@ -165,6 +197,7 @@ export class ActionManager {

      return (
        <PanelComponent
+          key={name}
          elements={this.getElementsIncludingDeleted()}
          appState={this.getAppState()}
          updateData={updateData}
@@ -178,13 +211,31 @@ export class ActionManager {
    return null;
  };

-  isActionEnabled = (action: Action) => {
-    const elements = this.getElementsIncludingDeleted();
+  isActionEnabled = (
+    action: Action,
+    opts?: {
+      elements?: readonly ExcalidrawElement[];
+      data?: Record<string, any>;
+      noPredicates?: boolean;
+    },
+  ): boolean => {
+    const elements = opts?.elements ?? this.getElementsIncludingDeleted();
    const appState = this.getAppState();
+    const data = opts?.data;

-    return (
-      !action.predicate ||
-      action.predicate(elements, appState, this.app.props, this.app)
-    );
+    if (
+      !opts?.noPredicates &&
+      action.predicate &&
+      !action.predicate(elements, appState, this.app.props, this.app, data)
+    ) {
+      return false;
+    }
+    let enabled = true;
+    this.actionPredicates.forEach((fn) => {
+      if (!fn(action, elements, appState, data)) {
+        enabled = false;
+      }
+    });
+    return enabled;
  };
 }
@@ -28,7 +28,6 @@ export type ShortcutName =
      | "ungroup"
      | "gridMode"
      | "zenMode"
-      | "objectsSnapMode"
      | "stats"
      | "addToLibrary"
      | "viewMode"
@@ -75,7 +74,6 @@ 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")],
@@ -85,8 +83,23 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };

-export const getShortcutFromShortcutName = (name: ShortcutName) => {
-  const shortcuts = shortcutMap[name];
+export type CustomShortcutName = string;
+
+let customShortcutMap: Record<CustomShortcutName, string[]> = {};
+
+export const registerCustomShortcuts = (
+  shortcuts: Record<CustomShortcutName, string[]>,
+) => {
+  customShortcutMap = { ...customShortcutMap, ...shortcuts };
+};
+
+export const getShortcutFromShortcutName = (
+  name: ShortcutName | CustomShortcutName,
+) => {
+  const shortcuts =
+    name in customShortcutMap
+      ? customShortcutMap[name as CustomShortcutName]
+      : shortcutMap[name as ShortcutName];
  // if multiple shortcuts available, take the first one
  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };
@@ -32,6 +32,15 @@ type ActionFn = (
  app: AppClassProperties,
 ) => ActionResult | Promise<ActionResult>;

+// Return `true` *unless* `Action` should be disabled
+// given `elements`, `appState`, and optionally `data`.
+export type ActionPredicateFn = (
+  action: Action,
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  data?: Record<string, any>,
+) => boolean;
+
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;

@@ -51,7 +60,6 @@ export type ActionName =
  | "pasteStyles"
  | "gridMode"
  | "zenMode"
-  | "objectsSnapMode"
  | "stats"
  | "changeStrokeColor"
  | "changeBackgroundColor"
@@ -136,7 +144,7 @@ export type PanelComponentProps = {
 };

 export interface Action {
-  name: ActionName;
+  name: string;
  PanelComponent?: React.FC<PanelComponentProps>;
  perform: ActionFn;
  keyPriority?: number;
@@ -158,6 +166,7 @@ export interface Action {
    appState: AppState,
    appProps: ExcalidrawProps,
    app: AppClassProperties,
+    data?: Record<string, any>,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
  trackEvent:
@@ -99,12 +99,6 @@ export const getDefaultAppState = (): Omit<
    pendingImageElementId: null,
    showHyperlinkPopup: false,
    selectedLinearElement: null,
-    snapLines: [],
-    originSnapOffset: {
-      x: 0,
-      y: 0,
-    },
-    objectsSnapModeEnabled: false,
  };
 };

@@ -152,6 +146,8 @@ const APP_STATE_STORAGE_CONF = (<
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
  activeTool: { browser: true, export: false, server: false },
+  activeSubtypes: { browser: true, export: false, server: false },
+  customData: { browser: true, export: false, server: false },
  penMode: { browser: true, export: false, server: false },
  penDetected: { browser: true, export: false, server: false },
  errorMessage: { browser: false, export: false, server: false },
@@ -212,9 +208,6 @@ 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 = <
@@ -11,6 +11,8 @@ import {
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
+import { AppState } from "./types";
+import { selectSubtype } from "./element/subtypes";

 export type ChartElements = readonly NonDeletedExcalidrawElement[];

@@ -23,6 +25,8 @@ export interface Spreadsheet {
  title: string | null;
  labels: string[] | null;
  values: number[];
+  activeSubtypes?: AppState["activeSubtypes"];
+  customData?: AppState["customData"];
 }

 export const NOT_SPREADSHEET = "NOT_SPREADSHEET";
@@ -193,13 +197,17 @@ const chartXLabels = (
  groupId: string,
  backgroundColor: string,
 ): ChartElements => {
+  const custom = selectSubtype(spreadsheet, "text");
  return (
    spreadsheet.labels?.map((label, index) => {
      return newTextElement({
        groupIds: [groupId],
        backgroundColor,
        ...commonProps,
-        text: label.length > 8 ? `${label.slice(0, 5)}...` : label,
+        text:
+          label.length > 8 && custom.subtype === undefined
+            ? `${label.slice(0, 5)}...`
+            : label,
        x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
        y: y + BAR_GAP / 2,
        width: BAR_WIDTH,
@@ -207,6 +215,7 @@ const chartXLabels = (
        fontSize: 16,
        textAlign: "center",
        verticalAlign: "top",
+        ...custom,
      });
    }) || []
  );
@@ -227,6 +236,7 @@ const chartYLabels = (
    y: y - BAR_GAP,
    text: "0",
    textAlign: "right",
+    ...selectSubtype(spreadsheet, "text"),
  });

  const maxYLabel = newTextElement({
@@ -237,6 +247,7 @@ const chartYLabels = (
    y: y - BAR_HEIGHT - minYLabel.height / 2,
    text: Math.max(...spreadsheet.values).toLocaleString(),
    textAlign: "right",
+    ...selectSubtype(spreadsheet, "text"),
  });

  return [minYLabel, maxYLabel];
@@ -264,6 +275,7 @@ const chartLines = (
      [0, 0],
      [chartWidth, 0],
    ],
+    ...selectSubtype(spreadsheet, "line"),
  });

  const yLine = newLinearElement({
@@ -280,6 +292,7 @@ const chartLines = (
      [0, 0],
      [0, -chartHeight],
    ],
+    ...selectSubtype(spreadsheet, "line"),
  });

  const maxLine = newLinearElement({
@@ -298,6 +311,7 @@ const chartLines = (
      [0, 0],
      [chartWidth, 0],
    ],
+    ...selectSubtype(spreadsheet, "line"),
  });

  return [xLine, yLine, maxLine];
@@ -324,6 +338,7 @@ const chartBaseElements = (
        y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
        roundness: null,
        textAlign: "center",
+        ...selectSubtype(spreadsheet, "text"),
      })
    : null;

@@ -340,6 +355,7 @@ const chartBaseElements = (
        strokeColor: COLOR_PALETTE.black,
        fillStyle: "solid",
        opacity: 6,
+        ...selectSubtype(spreadsheet, "rectangle"),
      })
    : null;

@@ -372,6 +388,7 @@ const chartTypeBar = (
      y: y - barHeight - BAR_GAP,
      width: BAR_WIDTH,
      height: barHeight,
+      ...selectSubtype(spreadsheet, "rectangle"),
    });
  });

@@ -424,6 +441,7 @@ const chartTypeLine = (
    width: maxX - minX,
    strokeWidth: 2,
    points: points as any,
+    ...selectSubtype(spreadsheet, "line"),
  });

  const dots = spreadsheet.values.map((value, index) => {
@@ -440,6 +458,7 @@ const chartTypeLine = (
      y: y + cy - BAR_GAP * 2,
      width: BAR_GAP,
      height: BAR_GAP,
+      ...selectSubtype(spreadsheet, "ellipse"),
    });
  });

@@ -462,6 +481,7 @@ const chartTypeLine = (
        [0, 0],
        [0, cy],
      ],
+      ...selectSubtype(spreadsheet, "line"),
    });
  });

@@ -1,21 +1,26 @@
 import { parseClipboard } from "./clipboard";
-import { createPasteEvent } from "./tests/test-utils";

 describe("Test parseClipboard", () => {
  it("should parse valid json correctly", async () => {
    let text = "123";

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

    expect(clipboardData.text).toBe(text);

    text = "[123]";

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

    expect(clipboardData.text).toBe(text);
  });
@@ -2,7 +2,7 @@ import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { BinaryFiles } from "./types";
+import { AppState, BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
@@ -18,14 +18,11 @@ 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;
 }
@@ -145,74 +142,22 @@ const parsePotentialSpreadsheet = (
  return null;
 };

-/** 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;
-}
-
-const maybeParseHTMLPaste = (event: ClipboardEvent) => {
-  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 content;
-    }
-  } catch (error: any) {
-    console.error(`error in parseHTMLFromPaste: ${error.message}`);
-  }
-
-  return null;
-};
-
 /**
 * Retrieves content from system clipboard (either from ClipboardEvent or
 *  via async clipboard API if supported)
 */
-const getSystemClipboard = async (
+export const getSystemClipboard = async (
  event: ClipboardEvent | null,
-  isPlainPaste = false,
-): Promise<
-  | { type: "text"; value: string }
-  | { type: "mixedContent"; value: PastedMixedContent }
-> => {
+): Promise<string> => {
  try {
-    const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
-    if (mixedContent) {
-      return { type: "mixedContent", value: mixedContent };
-    }
-
    const text = event
      ? event.clipboardData?.getData("text/plain")
      : probablySupportsClipboardReadText &&
        (await navigator.clipboard.readText());

-    return { type: "text", value: (text || "").trim() };
+    return (text || "").trim();
  } catch {
-    return { type: "text", value: "" };
+    return "";
  }
 };

@@ -222,21 +167,16 @@ const getSystemClipboard = async (
 export const parseClipboard = async (
  event: ClipboardEvent | null,
  isPlainPaste = false,
+  appState?: AppState,
 ): Promise<ClipboardData> => {
-  const systemClipboard = await getSystemClipboard(event, isPlainPaste);
-
-  if (systemClipboard.type === "mixedContent") {
-    return {
-      mixedContent: systemClipboard.value,
-    };
-  }
+  const systemClipboard = await getSystemClipboard(event);

  // 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.value.includes(SVG_EXPORT_TAG))
+    (!isPlainPaste && systemClipboard.includes(SVG_EXPORT_TAG))
  ) {
    return getAppClipboard();
  }
@@ -244,16 +184,20 @@ export const parseClipboard = async (
  // 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.value);
+    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard);

  if (spreadsheetResult) {
+    if ("spreadsheet" in spreadsheetResult) {
+      spreadsheetResult.spreadsheet.activeSubtypes = appState?.activeSubtypes;
+      spreadsheetResult.spreadsheet.customData = appState?.customData;
+    }
    return spreadsheetResult;
  }

  const appClipboardData = getAppClipboard();

  try {
-    const systemClipboardData = JSON.parse(systemClipboard.value);
+    const systemClipboardData = JSON.parse(systemClipboard);
    const programmaticAPI =
      systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
    if (clipboardContainsElements(systemClipboardData)) {
@@ -277,7 +221,7 @@ export const parseClipboard = async (
          ? JSON.stringify(appClipboardData.elements, null, 2)
          : undefined,
      }
-    : { text: systemClipboard.value };
+    : { text: systemClipboard };
 };

 export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
@@ -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: var(--color-surface-low) !important;
+  background-color: transparent !important;
  font-size: 0.875rem !important;
  width: var(--lg-button-size);
  height: var(--lg-button-size);
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
@@ -14,10 +14,16 @@ import {
  hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { AppClassProperties, UIAppState, Zoom } from "../types";
-import { capitalizeString, isTransparent } from "../utils";
+import { UIAppState, Zoom } from "../types";
+import {
+  capitalizeString,
+  isTransparent,
+  updateActiveTool,
+  setCursorForShape,
+} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
+import { SubtypeShapeActions, SubtypeToggles } from "./Subtypes";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import { hasBoundTextElement } from "../element/typeChecks";
@@ -31,12 +37,7 @@ import {

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

 export const SelectedShapeActions = ({
@@ -100,6 +101,7 @@ export const SelectedShapeActions = ({
      {showChangeBackgroundIcons && (
        <div>{renderAction("changeBackgroundColor")}</div>
      )}
+      <SubtypeShapeActions elements={targetElements} />
      {showFillIcons && renderAction("changeFillStyle")}

      {(hasStrokeWidth(appState.activeTool.type) ||
@@ -213,21 +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) => {
@@ -252,20 +253,31 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-${value}`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                app.togglePenMode(true);
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
              }
            }}
            onChange={({ pointerType }) => {
              if (appState.activeTool.type !== value) {
                trackEvent("toolbar", value, "ui");
              }
+              const nextActiveTool = updateActiveTool(appState, {
+                type: value,
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                activeEmbeddable: null,
+                multiElement: null,
+                selectedElementIds: {},
+              });
+              setCursorForShape(interactiveCanvas, {
+                ...appState,
+                activeTool: nextActiveTool,
+              });
              if (value === "image") {
-                app.setActiveTool({
-                  type: value,
-                  insertOnCanvasDirectly: pointerType !== "mouse",
-                });
-              } else {
-                app.setActiveTool({ type: value });
+                onImageAction({ pointerType });
              }
            }}
          />
@@ -290,14 +302,24 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-frame`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                app.togglePenMode(true);
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
              }
            }}
            onChange={({ pointerType }) => {
              trackEvent("toolbar", "frame", "ui");
-              app.setActiveTool({ type: "frame" });
+              const nextActiveTool = updateActiveTool(appState, {
+                type: "frame",
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+                activeEmbeddable: null,
+              });
            }}
-            selected={activeTool.type === "frame"}
          />
          <ToolButton
            className={clsx("Shape", { fillable: false })}
@@ -310,28 +332,30 @@ export const ShapesSwitcher = ({
            data-testid={`toolbar-embeddable`}
            onPointerDown={({ pointerType }) => {
              if (!appState.penDetected && pointerType === "pen") {
-                app.togglePenMode(true);
+                setAppState({
+                  penDetected: true,
+                  penMode: true,
+                });
              }
            }}
            onChange={({ pointerType }) => {
              trackEvent("toolbar", "embeddable", "ui");
-              app.setActiveTool({ type: "embeddable" });
+              const nextActiveTool = updateActiveTool(appState, {
+                type: "embeddable",
+              });
+              setAppState({
+                activeTool: nextActiveTool,
+                multiElement: null,
+                selectedElementIds: {},
+                activeEmbeddable: null,
+              });
            }}
-            selected={activeTool.type === "embeddable"}
          />
        </>
      ) : (
        <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),
-            })}
+            className="App-toolbar__extra-tools-trigger"
            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
            title={t("toolBar.extraTools")}
          >
@@ -344,39 +368,41 @@ export const ShapesSwitcher = ({
          >
            <DropdownMenu.Item
              onSelect={() => {
-                app.setActiveTool({ type: "frame" });
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "frame",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
              }}
              icon={frameToolIcon}
              shortcut={KEYS.F.toLocaleUpperCase()}
              data-testid="toolbar-frame"
-              selected={frameToolSelected}
            >
              {t("toolBar.frame")}
            </DropdownMenu.Item>
            <DropdownMenu.Item
              onSelect={() => {
-                app.setActiveTool({ type: "embeddable" });
+                const nextActiveTool = updateActiveTool(appState, {
+                  type: "embeddable",
+                });
+                setAppState({
+                  activeTool: nextActiveTool,
+                  multiElement: null,
+                  selectedElementIds: {},
+                });
              }}
              icon={EmbedIcon}
              data-testid="toolbar-embeddable"
-              selected={embeddableToolSelected}
            >
              {t("toolBar.embeddable")}
            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              onSelect={() => {
-                app.setActiveTool({ type: "laser" });
-              }}
-              icon={laserPointerToolIcon}
-              data-testid="toolbar-laser"
-              selected={laserToolSelected}
-              shortcut={KEYS.K.toLocaleUpperCase()}
-            >
-              {t("toolBar.laser")}
-            </DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu>
      )}
+      <SubtypeToggles />
    </>
  );
 };
@@ -12,32 +12,32 @@

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

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

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

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

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

        &:active {
-          --text-color: var(--color-brand-active);
-          --border-color: var(--color-brand-active);
+          --text-color: var(--color-primary-darkest);
+          --border-color: var(--color-primary-darkest);
        }
      }
    }
@@ -19,35 +19,20 @@
    }

    &__btn {
-      --background: var(--color-surface-mid);
-
      display: flex;
      column-gap: 0.5rem;
      align-items: center;
-      background-color: var(--background);
+      border: 1px solid var(--default-border-color);
      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 {
@@ -165,7 +165,6 @@ 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"]}
@@ -259,10 +258,6 @@ 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+'")]}
@@ -23,15 +23,12 @@ 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;
@@ -75,14 +72,9 @@ const JSONExportModal = ({
              title={t("exportDialog.link_button")}
              aria-label={t("exportDialog.link_button")}
              showAriaLabel={true}
-              onClick={async () => {
-                try {
-                  trackEvent("export", "link", `ui (${getFrame()})`);
-                  await onExportToBackend(elements, appState, files, canvas);
-                  onCloseRequest();
-                } catch (error: any) {
-                  setAppState({ errorMessage: error.message });
-                }
+              onClick={() => {
+                onExportToBackend(elements, appState, files, canvas);
+                trackEvent("export", "link", `ui (${getFrame()})`);
              }}
            />
          </Card>
@@ -122,7 +114,6 @@ export const JSONExportDialog = ({
          <JSONExportModal
            elements={elements}
            appState={appState}
-            setAppState={setAppState}
            files={files}
            actionManager={actionManager}
            onCloseRequest={handleClose}
@@ -1,309 +0,0 @@
-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;
-    }
-  }
-}
@@ -1,41 +0,0 @@
-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>
-  );
-};
@@ -1,27 +0,0 @@
-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>
-  );
-};
@@ -1,20 +0,0 @@
-.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;
-    }
-  }
-}
@@ -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,6 +121,7 @@ const LayerUI = ({
  setAppState,
  elements,
  canvas,
+  interactiveCanvas,
  onLockToggle,
  onHandToolToggle,
  onPenModeToggle,
@@ -128,11 +129,11 @@ const LayerUI = ({
  renderTopRightUI,
  renderCustomStats,
  UIOptions,
+  onImageAction,
  onExportImage,
  renderWelcomeScreen,
  children,
  app,
-  isCollaborating,
 }: LayerUIProps) => {
  const device = useDevice();
  const tunnels = useInitializeTunnels();
@@ -276,29 +277,17 @@ const LayerUI = ({

                          <ShapesSwitcher
                            appState={appState}
+                            interactiveCanvas={interactiveCanvas}
                            activeTool={appState.activeTool}
-                            app={app}
+                            setAppState={setAppState}
+                            onImageAction={({ pointerType }) => {
+                              onImageAction({
+                                insertOnCanvasDirectly: pointerType !== "mouse",
+                              });
+                            }}
                          />
                        </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>
@@ -462,6 +451,8 @@ const LayerUI = ({
          onLockToggle={onLockToggle}
          onHandToolToggle={onHandToolToggle}
          onPenModeToggle={onPenModeToggle}
+          interactiveCanvas={interactiveCanvas}
+          onImageAction={onImageAction}
          renderTopRightUI={renderTopRightUI}
          renderCustomStats={renderCustomStats}
          renderSidebars={renderSidebars}
@@ -548,8 +539,18 @@ const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
    return false;
  }

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

  return (
    isShallowEqual(
@@ -99,10 +99,10 @@
    font-size: 0.75rem;

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

@@ -36,7 +36,9 @@ type MobileMenuProps = {
  onLockToggle: () => void;
  onHandToolToggle: () => void;
  onPenModeToggle: () => void;
+  interactiveCanvas: HTMLCanvasElement | null;

+  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
  renderTopRightUI?: (
    isMobile: boolean,
    appState: UIAppState,
@@ -56,7 +58,8 @@ export const MobileMenu = ({
  onLockToggle,
  onHandToolToggle,
  onPenModeToggle,
-
+  interactiveCanvas,
+  onImageAction,
  renderTopRightUI,
  renderCustomStats,
  renderSidebars,
@@ -82,8 +85,14 @@ export const MobileMenu = ({
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
                      appState={appState}
+                      interactiveCanvas={interactiveCanvas}
                      activeTool={appState.activeTool}
-                      app={app}
+                      setAppState={setAppState}
+                      onImageAction={({ pointerType }) => {
+                        onImageAction({
+                          insertOnCanvasDirectly: pointerType !== "mouse",
+                        });
+                      }}
                    />
                  </Stack.Row>
                </Island>
@@ -10,6 +10,12 @@ import { useApp } from "./App";
 import { Dialog } from "./Dialog";

 import "./PasteChartDialog.scss";
+import { ensureSubtypesLoaded } from "../element/subtypes";
+import { isTextElement } from "../element";
+import {
+  getContainerElement,
+  redrawTextBoundingBox,
+} from "../element/textElement";

 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;

@@ -25,41 +31,54 @@ const ChartPreviewBtn = (props: {
  );

  useLayoutEffect(() => {
-    if (!props.spreadsheet) {
-      return;
-    }
-
-    const elements = renderSpreadsheet(
-      props.chartType,
-      props.spreadsheet,
-      0,
-      0,
-    );
-    setChartElements(elements);
    let svg: SVGSVGElement;
    const previewNode = previewRef.current!;
-
    (async () => {
-      svg = await exportToSvg(
-        elements,
-        {
-          exportBackground: false,
-          viewBackgroundColor: oc.white,
-        },
-        null, // files
-      );
-      svg.querySelector(".style-fonts")?.remove();
-      previewNode.replaceChildren();
-      previewNode.appendChild(svg);
+      (async () => {
+        let elements: ChartElements;
+        await ensureSubtypesLoaded(
+          props.spreadsheet?.activeSubtypes ?? [],
+          () => {
+            if (!props.spreadsheet) {
+              return;
+            }

-      if (props.selected) {
-        (previewNode.parentNode as HTMLDivElement).focus();
-      }
+            elements = renderSpreadsheet(
+              props.chartType,
+              props.spreadsheet,
+              0,
+              0,
+            );
+            elements.forEach(
+              (el) =>
+                isTextElement(el) &&
+                redrawTextBoundingBox(el, getContainerElement(el)),
+            );
+            setChartElements(elements);
+          },
+        ).then(async () => {
+          svg = await exportToSvg(
+            elements,
+            {
+              exportBackground: false,
+              viewBackgroundColor: oc.white,
+            },
+            null, // files
+          );
+          svg.querySelector(".style-fonts")?.remove();
+          previewNode.replaceChildren();
+          previewNode.appendChild(svg);
+
+          if (props.selected) {
+            (previewNode.parentNode as HTMLDivElement).focus();
+          }
+        });
+      })();
+
+      return () => {
+        previewNode.replaceChildren();
+      };
    })();
-
-    return () => {
-      previewNode.replaceChildren();
-    };
  }, [props.spreadsheet, props.chartType, props.selected]);

  return (
@@ -1,18 +1,27 @@
@import "../css/variables.module";

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

  --RadioGroup-choice-color-off: var(--color-primary);
-  --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-off-hover: var(--color-primary-darkest);
+  --RadioGroup-choice-background-off: white;
+  --RadioGroup-choice-background-off-active: var(--color-gray-20);

-  --RadioGroup-choice-color-on: var(--color-surface-lowest);
+  --RadioGroup-choice-color-on: white;
  --RadioGroup-choice-background-on: var(--color-primary);
-  --RadioGroup-choice-background-on-hover: var(--color-brand-hover);
-  --RadioGroup-choice-background-on-active: var(--color-brand-active);
+  --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 {
    box-sizing: border-box;
@@ -3,7 +3,8 @@
 .excalidraw {
  .sidebar-trigger {
    @include outlineButtonStyles;
-    @include filledButtonOnCanvas;
+
+    background-color: var(--island-bg-color);

    width: auto;
    height: var(--lg-button-size);
@@ -0,0 +1,173 @@
+import { getShortcutKey, updateActiveTool } from "../utils";
+import { t } from "../i18n";
+import { Action } from "../actions/types";
+import clsx from "clsx";
+import {
+  Subtype,
+  getSubtypeNames,
+  hasAlwaysEnabledActions,
+  isSubtypeAction,
+  isValidSubtype,
+  subtypeCollides,
+} from "../element/subtypes";
+import { ExcalidrawElement, Theme } from "../element/types";
+import {
+  useExcalidrawActionManager,
+  useExcalidrawContainer,
+  useExcalidrawSetAppState,
+} from "./App";
+import { ContextMenuItems } from "./ContextMenu";
+
+export const SubtypeButton = (
+  subtype: Subtype,
+  parentType: ExcalidrawElement["type"],
+  icon: ({ theme }: { theme: Theme }) => JSX.Element,
+  key?: string,
+) => {
+  const title = key !== undefined ? ` - ${getShortcutKey(key)}` : "";
+  const keyTest: Action["keyTest"] =
+    key !== undefined ? (event) => event.code === `Key${key}` : undefined;
+  const subtypeAction: Action = {
+    name: subtype,
+    trackEvent: false,
+    predicate: (...rest) => rest[4]?.subtype === subtype,
+    perform: (elements, appState) => {
+      const inactive = !appState.activeSubtypes?.includes(subtype) ?? true;
+      const activeSubtypes: Subtype[] = [];
+      if (appState.activeSubtypes) {
+        activeSubtypes.push(...appState.activeSubtypes);
+      }
+      let activated = false;
+      if (inactive) {
+        // Ensure `element.subtype` is well-defined
+        if (!subtypeCollides(subtype, activeSubtypes)) {
+          activeSubtypes.push(subtype);
+          activated = true;
+        }
+      } else {
+        // Can only be active if appState.activeSubtypes is defined
+        // and contains subtype.
+        activeSubtypes.splice(activeSubtypes.indexOf(subtype), 1);
+      }
+      const type =
+        appState.activeTool.type !== "custom" &&
+        isValidSubtype(subtype, appState.activeTool.type)
+          ? appState.activeTool.type
+          : parentType;
+      const activeTool = !inactive
+        ? appState.activeTool
+        : updateActiveTool(appState, { type });
+      const selectedElementIds = activated ? {} : appState.selectedElementIds;
+      const selectedGroupIds = activated ? {} : appState.selectedGroupIds;
+
+      return {
+        appState: {
+          ...appState,
+          activeSubtypes,
+          selectedElementIds,
+          selectedGroupIds,
+          activeTool,
+        },
+        commitToHistory: true,
+      };
+    },
+    keyTest,
+    PanelComponent: ({ elements, appState, updateData, data }) => (
+      <button
+        className={clsx("ToolIcon_type_button", "ToolIcon_type_button--show", {
+          ToolIcon: true,
+          "ToolIcon--selected":
+            appState.activeSubtypes !== undefined &&
+            appState.activeSubtypes.includes(subtype),
+          "ToolIcon--plain": true,
+        })}
+        title={`${t(`toolBar.${subtype}`)}${title}`}
+        aria-label={t(`toolBar.${subtype}`)}
+        onClick={() => {
+          updateData(null);
+        }}
+        onContextMenu={
+          data && "onContextMenu" in data
+            ? (event: React.MouseEvent) => {
+                if (
+                  appState.activeSubtypes === undefined ||
+                  (appState.activeSubtypes !== undefined &&
+                    !appState.activeSubtypes.includes(subtype))
+                ) {
+                  updateData(null);
+                }
+                data.onContextMenu(event, subtype);
+              }
+            : undefined
+        }
+      >
+        {
+          <div className="ToolIcon__icon" aria-hidden="true">
+            {icon.call(this, { theme: appState.theme })}
+          </div>
+        }
+      </button>
+    ),
+  };
+  if (key === "") {
+    delete subtypeAction.keyTest;
+  }
+  return subtypeAction;
+};
+
+export const SubtypeToggles = () => {
+  const am = useExcalidrawActionManager();
+  const { container } = useExcalidrawContainer();
+  const setAppState = useExcalidrawSetAppState();
+
+  const onContextMenu = (
+    event: React.MouseEvent<HTMLButtonElement>,
+    subtype: string,
+  ) => {
+    event.preventDefault();
+
+    const { top: offsetTop, left: offsetLeft } =
+      container!.getBoundingClientRect();
+    const left = event.clientX - offsetLeft;
+    const top = event.clientY - offsetTop;
+
+    const items: ContextMenuItems = [];
+    am.filterActions(isSubtypeAction).forEach(
+      (action) =>
+        am.isActionEnabled(action, { data: { subtype } }) && items.push(action),
+    );
+    setAppState({}, () => {
+      setAppState({
+        contextMenu: { top, left, items },
+      });
+    });
+  };
+
+  return (
+    <>
+      {getSubtypeNames().map((subtype) =>
+        am.renderAction(
+          subtype,
+          hasAlwaysEnabledActions(subtype) ? { onContextMenu } : {},
+        ),
+      )}
+    </>
+  );
+};
+
+SubtypeToggles.displayName = "SubtypeToggles";
+
+export const SubtypeShapeActions = (props: {
+  elements: readonly ExcalidrawElement[];
+}) => {
+  const am = useExcalidrawActionManager();
+  return (
+    <>
+      {am
+        .filterActions(isSubtypeAction, { elements: props.elements })
+        .map((action) => am.renderAction(action.name))}
+    </>
+  );
+};
+
+SubtypeShapeActions.displayName = "SubtypeShapeActions";
@@ -1,13 +1,15 @@
@import "../css/variables.module";

 .excalidraw {
-  --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-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 {
    position: relative;
@@ -26,11 +28,7 @@

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

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

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

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

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

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

    & input {
@@ -1,16 +1,25 @@
@import "../css/variables.module";

 .excalidraw {
-  --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--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 {
    &--fullWidth {
@@ -52,7 +61,7 @@

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

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

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

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

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

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

@@ -97,6 +97,10 @@
      }
    }

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

    &--hide {
+      // visibility: hidden;
      display: none !important;
    }
  }
@@ -165,10 +170,5 @@
        height: var(--lg-icon-size);
      }
    }
-
-    .ToolIcon__LaserPointer .ToolIcon__icon {
-      width: var(--default-button-size);
-      height: var(--default-button-size);
-    }
  }
 }
@@ -22,19 +22,12 @@
  .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 {
@@ -193,8 +193,6 @@ const getRelevantAppStateProps = (
  showHyperlinkPopup: appState.showHyperlinkPopup,
  collaborators: appState.collaborators, // Necessary for collab. sessions
  activeEmbeddable: appState.activeEmbeddable,
-  snapLines: appState.snapLines,
-  zenModeEnabled: appState.zenModeEnabled,
 });

 const areEqual = (
@@ -114,13 +114,11 @@ 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),
-    ) && isShallowEqual(prevProps.renderConfig, nextProps.renderConfig)
+  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),
  );
 };

@@ -16,7 +16,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 +29,7 @@
    }

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

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

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

-      &:active {
-        background-color: var(--button-hover-bg);
-        border-color: var(--color-brand-active);
-      }
-
      svg {
        width: 1rem;
        height: 1rem;
@@ -103,33 +93,22 @@
      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);
@@ -11,14 +11,12 @@ 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);
@@ -28,7 +26,7 @@ const DropdownMenuItem = ({
      {...rest}
      onClick={handleClick}
      type="button"
-      className={getDropdownMenuItemClassName(className, selected)}
+      className={getDropdownMenuItemClassName(className)}
      title={rest.title ?? rest["aria-label"]}
    >
      <MenuItemContent icon={icon} shortcut={shortcut}>
@@ -3,19 +3,15 @@ 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} ${
-        selected ? `dropdown-menu-item--selected` : ``
-      }`.trim()}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
    >
      {children}
    </div>
@@ -12,7 +12,6 @@ const DropdownMenuItemLink = ({
  children,
  onSelect,
  className = "",
-  selected,
  ...rest
 }: {
  href: string;
@@ -20,7 +19,6 @@ const DropdownMenuItemLink = ({
  children: React.ReactNode;
  shortcut?: string;
  className?: string;
-  selected?: boolean;
  onSelect?: (event: Event) => void;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
@@ -31,7 +29,7 @@ const DropdownMenuItemLink = ({
      href={href}
      target="_blank"
      rel="noreferrer"
-      className={getDropdownMenuItemClassName(className, selected)}
+      className={getDropdownMenuItemClassName(className)}
      title={rest.title ?? rest["aria-label"]}
      onClick={handleClick}
    >
@@ -6,13 +6,8 @@ export const DropdownMenuContentPropsContext = React.createContext<{
  onSelect?: (event: Event) => void;
 }>({});

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

 export const useHandleDropdownMenuItemClick = (
@@ -1653,22 +1653,3 @@ export const frameToolIcon = createIcon(
  </g>,
  tablerIconProps,
 );
-
-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,
-);
@@ -14,8 +14,6 @@

    --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
@@ -43,7 +43,6 @@ const MainMenu = Object.assign(
                });
              }}
              data-testid="main-menu-trigger"
-              className="main-menu-trigger"
            >
              {HamburgerMenuIcon}
            </DropdownMenu.Trigger>
@@ -174,7 +174,7 @@
    justify-content: space-between;

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

    padding: 0.75rem;

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

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

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

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

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

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

    .welcome-screen-menu-item:active {
+      background-color: var(--color-gray-90);
      .welcome-screen-menu-item__text {
        color: var(--color-gray-10);
      }
@@ -296,12 +296,6 @@ export const ROUNDNESS = {
 * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";

-export const ROUGHNESS = {
-  architect: 0,
-  artist: 1,
-  cartoonist: 2,
-} as const;
-
 export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: ExcalidrawElement["strokeColor"];
  backgroundColor: ExcalidrawElement["backgroundColor"];
@@ -314,10 +308,10 @@ export const DEFAULT_ELEMENT_PROPS: {
 } = {
  strokeColor: COLOR_PALETTE.black,
  backgroundColor: COLOR_PALETTE.transparent,
-  fillStyle: "solid",
-  strokeWidth: 2,
+  fillStyle: "hachure",
+  strokeWidth: 1,
  strokeStyle: "solid",
-  roughness: ROUGHNESS.artist,
+  roughness: 1,
  opacity: 100,
  locked: false,
 };
@@ -444,14 +444,13 @@
    }

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

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

@@ -622,20 +621,6 @@
      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 {
@@ -12,30 +12,27 @@
  --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-on-surface);
+  --icon-fill-color: var(--color-gray-80);
  --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: #ffffff;
+  --island-bg-color: rgba(255, 255, 255, 0.96);
  --keybinding-color: var(--color-gray-40);
  --link-color: #{$oc-blue-7};
  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
-  --popup-bg-color: var(--island-bg-color);
+  --popup-bg-color: #{$oc-white};
  --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 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);
+  --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);

  --default-button-size: 2rem;
  --default-icon-size: 1rem;
@@ -66,14 +63,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-surface-high);
-  --sidebar-bg-color: var(--island-bg-color);
+  --sidebar-border-color: var(--color-gray-20);
+  --sidebar-bg-color: #fff;
  --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-on-surface);
+  --text-primary-color: var(--color-gray-80);

  --color-selection: #6965db;

@@ -135,19 +132,6 @@
  --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;
@@ -166,24 +150,29 @@
    --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: #232329;
+    --island-bg-color: #262627;
    --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};
-    --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);
-
+    --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);
    --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),
@@ -191,6 +180,8 @@
      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};
@@ -233,18 +224,5 @@
    --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;
  }
 }
@@ -11,7 +11,7 @@
    .ToolIcon_type_radio,
    .ToolIcon_type_checkbox {
      &:checked + .ToolIcon__icon {
-        --icon-fill-color: var(--color-on-primary-container);
+        --icon-fill-color: var(--color-primary-darker);

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

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

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

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

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

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

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

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

@@ -1,105 +0,0 @@
-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;
-  }
-};
@@ -14,7 +14,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
      "type": "arrow",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 300,
@@ -28,7 +28,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "seed": Any<Number>,
  "strokeColor": "#66a80f",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "ellipse",
  "updated": 1,
  "version": 3,
@@ -49,7 +49,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
      "type": "arrow",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -63,7 +63,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "seed": Any<Number>,
  "strokeColor": "#9c36b5",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "diamond",
  "updated": 1,
  "version": 2,
@@ -85,7 +85,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
    "focus": -0.008153707962747813,
    "gap": 1,
  },
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 35,
@@ -116,7 +116,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  },
  "strokeColor": "#1864ab",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 3,
@@ -138,7 +138,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
    "focus": 0.10666666666666667,
    "gap": 3.834326468444573,
  },
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -169,7 +169,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  },
  "strokeColor": "#e67700",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 3,
@@ -190,7 +190,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
      "type": "arrow",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 300,
@@ -204,7 +204,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "rectangle",
  "updated": 1,
  "version": 2,
@@ -227,7 +227,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
    },
  ],
  "containerId": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -245,7 +245,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "seed": Any<Number>,
  "strokeColor": "#c2255c",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "HEYYYYY",
  "textAlign": "left",
  "type": "text",
@@ -271,7 +271,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
    },
  ],
  "containerId": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -289,7 +289,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "Whats up ?",
  "textAlign": "left",
  "type": "text",
@@ -319,7 +319,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
    "focus": 0,
    "gap": 5,
  },
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -350,7 +350,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  },
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 3,
@@ -368,7 +368,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "baseline": 0,
  "boundElements": null,
  "containerId": "id43",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -386,7 +386,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "HELLO WORLD!!",
  "textAlign": "center",
  "type": "text",
@@ -416,7 +416,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
    "focus": 0,
    "gap": 1,
  },
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -447,7 +447,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  },
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 3,
@@ -465,7 +465,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "baseline": 0,
  "boundElements": null,
  "containerId": "id32",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -483,7 +483,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "HELLO WORLD!!",
  "textAlign": "center",
  "type": "text",
@@ -507,7 +507,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
      "type": "arrow",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -521,7 +521,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "rectangle",
  "updated": 1,
  "version": 2,
@@ -542,7 +542,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
      "type": "arrow",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -556,7 +556,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "ellipse",
  "updated": 1,
  "version": 2,
@@ -583,7 +583,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
    "focus": 0,
    "gap": 1,
  },
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -614,7 +614,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  },
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 3,
@@ -632,7 +632,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "baseline": 0,
  "boundElements": null,
  "containerId": "id36",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -650,7 +650,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "HELLO WORLD!!",
  "textAlign": "center",
  "type": "text",
@@ -676,7 +676,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
    },
  ],
  "containerId": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -694,7 +694,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "HEYYYYY",
  "textAlign": "left",
  "type": "text",
@@ -720,7 +720,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
    },
  ],
  "containerId": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -738,7 +738,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "WHATS UP ?",
  "textAlign": "left",
  "type": "text",
@@ -757,7 +757,7 @@ exports[`Test Transform > should not allow duplicate ids 1`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 200,
@@ -771,7 +771,7 @@ exports[`Test Transform > should not allow duplicate ids 1`] = `
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "rectangle",
  "updated": 1,
  "version": 1,
@@ -789,7 +789,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
  "boundElements": null,
  "endArrowhead": "arrow",
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -816,7 +816,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
  "startBinding": null,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 1,
@@ -834,7 +834,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
  "boundElements": null,
  "endArrowhead": "triangle",
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -879,7 +879,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
  "boundElements": null,
  "endArrowhead": null,
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -906,7 +906,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
  "startBinding": null,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "line",
  "updated": 1,
  "version": 1,
@@ -924,7 +924,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
  "boundElements": null,
  "endArrowhead": null,
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -967,7 +967,7 @@ exports[`Test Transform > should transform regular shapes 1`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -981,7 +981,7 @@ exports[`Test Transform > should transform regular shapes 1`] = `
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "rectangle",
  "updated": 1,
  "version": 1,
@@ -997,7 +997,7 @@ exports[`Test Transform > should transform regular shapes 2`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -1011,7 +1011,7 @@ exports[`Test Transform > should transform regular shapes 2`] = `
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "ellipse",
  "updated": 1,
  "version": 1,
@@ -1027,7 +1027,7 @@ exports[`Test Transform > should transform regular shapes 3`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -1041,7 +1041,7 @@ exports[`Test Transform > should transform regular shapes 3`] = `
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "diamond",
  "updated": 1,
  "version": 1,
@@ -1057,7 +1057,7 @@ exports[`Test Transform > should transform regular shapes 4`] = `
  "angle": 0,
  "backgroundColor": "#c0eb75",
  "boundElements": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 100,
@@ -1149,7 +1149,7 @@ exports[`Test Transform > should transform text element 1`] = `
  "baseline": 0,
  "boundElements": null,
  "containerId": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1167,7 +1167,7 @@ exports[`Test Transform > should transform text element 1`] = `
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "HELLO WORLD!",
  "textAlign": "left",
  "type": "text",
@@ -1188,7 +1188,7 @@ exports[`Test Transform > should transform text element 2`] = `
  "baseline": 0,
  "boundElements": null,
  "containerId": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1206,7 +1206,7 @@ exports[`Test Transform > should transform text element 2`] = `
  "seed": Any<Number>,
  "strokeColor": "#5f3dc4",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "STYLED HELLO WORLD!",
  "textAlign": "left",
  "type": "text",
@@ -1232,7 +1232,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  ],
  "endArrowhead": "arrow",
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -1259,7 +1259,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "startBinding": null,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 1,
@@ -1282,7 +1282,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  ],
  "endArrowhead": "arrow",
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 0,
@@ -1309,7 +1309,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "startBinding": null,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "arrow",
  "updated": 1,
  "version": 1,
@@ -1332,7 +1332,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  ],
  "endArrowhead": "arrow",
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 130,
@@ -1382,7 +1382,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  ],
  "endArrowhead": "arrow",
  "endBinding": null,
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 130,
@@ -1427,7 +1427,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id24",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1445,7 +1445,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "LABELED ARROW",
  "textAlign": "center",
  "type": "text",
@@ -1466,7 +1466,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id25",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1484,7 +1484,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "seed": Any<Number>,
  "strokeColor": "#099268",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "STYLED LABELED ARROW",
  "textAlign": "center",
  "type": "text",
@@ -1505,7 +1505,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id26",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1523,7 +1523,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "seed": Any<Number>,
  "strokeColor": "#1098ad",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "ANOTHER STYLED 
 LABELLED ARROW",
  "textAlign": "center",
@@ -1545,7 +1545,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id27",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1563,7 +1563,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "seed": Any<Number>,
  "strokeColor": "#099268",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "ANOTHER STYLED 
 LABELLED ARROW",
  "textAlign": "center",
@@ -1588,7 +1588,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 35,
@@ -1602,7 +1602,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "rectangle",
  "updated": 1,
  "version": 3,
@@ -1623,7 +1623,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 85,
@@ -1637,7 +1637,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "ellipse",
  "updated": 1,
  "version": 2,
@@ -1658,7 +1658,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 170,
@@ -1672,7 +1672,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "diamond",
  "updated": 1,
  "version": 2,
@@ -1693,7 +1693,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 120,
@@ -1728,7 +1728,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 85,
@@ -1742,7 +1742,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#c2255c",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "rectangle",
  "updated": 1,
  "version": 2,
@@ -1763,7 +1763,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "frameId": null,
  "groupIds": [],
  "height": 120,
@@ -1777,7 +1777,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#f08c00",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "ellipse",
  "updated": 1,
  "version": 2,
@@ -1795,7 +1795,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id12",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1813,7 +1813,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "RECTANGLE TEXT CONTAINER",
  "textAlign": "center",
  "type": "text",
@@ -1834,7 +1834,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id13",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1852,7 +1852,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "ELLIPSE TEXT 
 CONTAINER",
  "textAlign": "center",
@@ -1874,7 +1874,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id14",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1893,7 +1893,7 @@ TEXT CONTAINER",
  "seed": Any<Number>,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "DIAMOND
 TEXT 
 CONTAINER",
@@ -1916,7 +1916,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id15",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1934,7 +1934,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#099268",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "STYLED DIAMOND
 TEXT CONTAINER",
  "textAlign": "center",
@@ -1956,7 +1956,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id16",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -1974,7 +1974,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#c2255c",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "TOP LEFT ALIGNED 
 RECTANGLE TEXT 
 CONTAINER",
@@ -1997,7 +1997,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "baseline": 0,
  "boundElements": null,
  "containerId": "id17",
-  "fillStyle": "solid",
+  "fillStyle": "hachure",
  "fontFamily": 1,
  "fontSize": 20,
  "frameId": null,
@@ -2015,7 +2015,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "seed": Any<Number>,
  "strokeColor": "#c2255c",
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "text": "STYLED 
 ELLIPSE TEXT 
 CONTAINER",
@@ -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, isPromiseLike } from "../utils";
+import { bytesToHexString } from "../utils";
 import { FileSystemHandle, nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
@@ -207,13 +207,10 @@ export const loadLibraryFromBlob = async (
 };

 export const canvasToBlob = async (
-  canvas: HTMLCanvasElement | Promise<HTMLCanvasElement>,
+  canvas: HTMLCanvasElement,
 ): Promise<Blob> => {
-  return new Promise(async (resolve, reject) => {
+  return new Promise((resolve, reject) => {
    try {
-      if (isPromiseLike(canvas)) {
-        canvas = await canvas;
-      }
      canvas.toBlob((blob) => {
        if (!blob) {
          return reject(
@@ -327,31 +324,6 @@ 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>,
 ) => {
@@ -66,14 +66,17 @@ export const exportCanvas = async (
    }
  }

-  const tempCanvas = exportToCanvas(elements, appState, files, {
+  const tempCanvas = await 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")
@@ -111,8 +114,11 @@ 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");
  }
@@ -34,16 +34,16 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
+import { isValidSubtype } from "../element/subtypes";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
  detectLineHeight,
  getDefaultLineHeight,
-  measureBaseline,
+  measureTextElement,
 } from "../element/textElement";
 import { normalizeLink } from "./url";
-import { isValidFrameChild } from "../frame";

 type RestoredAppState = Omit<
  AppState,
@@ -68,7 +68,6 @@ export const AllowedExcalidrawActiveTools: Record<
  frame: true,
  embeddable: true,
  hand: true,
-  laser: false,
 };

 export type RestoredDataState = {
@@ -94,7 +93,8 @@ const repairBinding = (binding: PointBinding | null) => {
 };

 const restoreElementWithProperties = <
-  T extends Required<Omit<ExcalidrawElement, "customData">> & {
+  T extends Required<Omit<ExcalidrawElement, "subtype" | "customData">> & {
+    subtype?: ExcalidrawElement["subtype"];
    customData?: ExcalidrawElement["customData"];
    /** @deprecated */
    boundElementIds?: readonly ExcalidrawElement["id"][];
@@ -160,6 +160,9 @@ const restoreElementWithProperties = <
    locked: element.locked ?? false,
  };

+  if ("subtype" in element && isValidSubtype(element.subtype, base.type)) {
+    base.subtype = element.subtype;
+  }
  if ("customData" in element) {
    base.customData = element.customData;
  }
@@ -190,7 +193,7 @@ const restoreElement = (
        fontSize = parseFloat(fontPx);
        fontFamily = getFontFamilyByName(_fontFamily);
      }
-      const text = (typeof element.text === "string" && element.text) || "";
+      const text = element.text ?? "";

      // line-height might not be specified either when creating elements
      // programmatically, or when importing old diagrams.
@@ -205,11 +208,7 @@ const restoreElement = (
          : // no element height likely means programmatic use, so default
            // to a fixed line height
            getDefaultLineHeight(element.fontFamily));
-      const baseline = measureBaseline(
-        element.text,
-        getFontString(element),
-        lineHeight,
-      );
+      const baseline = measureTextElement(element, { text }).baseline;
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
@@ -223,17 +222,9 @@ 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, {
@@ -285,9 +276,6 @@ const restoreElement = (
        points,
        x,
        y,
-        segmentSplitIndices: element.segmentSplitIndices
-          ? [...element.segmentSplitIndices]
-          : [],
      });
    }

@@ -311,7 +299,6 @@ 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;
 };

 /**
@@ -400,7 +387,7 @@ const repairBoundElement = (
 };

 /**
- * resets `frameId` if no longer applicable.
+ * Remove an element's frameId if its containing frame is non-existent
 *
 * NOTE mutates elements.
 */
@@ -408,16 +395,12 @@ const repairFrameMembership = (
  element: Mutable<ExcalidrawElement>,
  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
 ) => {
-  if (!element.frameId) {
-    return;
-  }
+  if (element.frameId) {
+    const containingFrame = elementsMap.get(element.frameId);

-  if (
-    !isValidFrameChild(element) ||
-    // target frame not exists
-    !elementsMap.get(element.frameId)
-  ) {
-    element.frameId = null;
+    if (!containingFrame) {
+      element.frameId = null;
+    }
  }
 };

@@ -461,8 +444,6 @@ export const restoreElements = (
  // repair binding. Mutates elements.
  const restoredElementsMap = arrayToMap(restoredElements);
  for (const element of restoredElements) {
-    // repair frame membership *after* bindings we do in restoreElement()
-    // since we rely on bindings to be correct
    if (element.frameId) {
      repairFrameMembership(element, restoredElementsMap);
    }
@@ -548,6 +529,12 @@ export const restoreAppState = (
        : defaultValue;
  }

+  if ("activeSubtypes" in appState) {
+    nextAppState.activeSubtypes = appState.activeSubtypes;
+  }
+  if ("customData" in appState) {
+    nextAppState.customData = appState.customData;
+  }
  return {
    ...nextAppState,
    cursorButton: localAppState?.cursorButton || "up",
@@ -27,7 +27,6 @@ import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { isValidFrameChild } from "../frame";

 export type SuggestedBinding =
  | NonDeleted<ExcalidrawBindableElement>
@@ -212,15 +211,6 @@ export const bindLinearElement = (
      }),
    });
  }
-  if (linearElement.frameId && !isValidFrameChild(linearElement)) {
-    mutateElement(
-      linearElement,
-      {
-        frameId: null,
-      },
-      false,
-    );
-  }
 };

 // Don't bind both ends of a simple segment
@@ -158,7 +158,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
@@ -674,19 +674,6 @@ 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,
@@ -741,7 +728,7 @@ export const getElementPointsCoords = (
  element: ExcalidrawLinearElement,
  points: readonly (readonly [number, number])[],
 ): [number, number, number, number] => {
-  // This might be computationally heavy
+  // This might be computationally heavey
  const gen = rough.generator();
  const curve =
    element.roundness == null
@@ -494,7 +494,7 @@ const hitTestFreeDrawElement = (
  // for filled freedraw shapes, support
  // selecting from inside
  if (shape && shape.sets.length) {
-    return hitTestCurveInside(shape, x, y, "round");
+    return hitTestRoughShape(shape, x, y, threshold);
  }

  return false;
@@ -6,22 +6,23 @@ 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";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
  selectedElements: NonDeletedExcalidrawElement[],
-  offset: { x: number; y: number },
+  pointerX: number,
+  pointerY: number,
+  lockDirection: boolean = false,
+  distanceX: number = 0,
+  distanceY: number = 0,
  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
@@ -43,11 +44,12 @@ export const dragSelectedElements = (

  elementsToUpdate.forEach((element) => {
    updateElementCoords(
+      lockDirection,
+      distanceX,
+      distanceY,
      pointerDownState,
      element,
      offset,
-      snapOffset,
-      gridSize,
    );
    // update coords of bound text only if we're dragging the container directly
    // (we don't drag the group that it's part of)
@@ -67,11 +69,12 @@ export const dragSelectedElements = (
        (!textElement.frameId || !frames.includes(textElement.frameId))
      ) {
        updateElementCoords(
+          lockDirection,
+          distanceX,
+          distanceY,
          pointerDownState,
          textElement,
          offset,
-          snapOffset,
-          gridSize,
        );
      }
    }
@@ -82,40 +85,31 @@ export const dragSelectedElements = (
 };

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

  mutateElement(element, {
-    x: nextX,
-    y: nextY,
+    x,
+    y,
  });
 };
-
 export const getDragOffsetXY = (
  selectedElements: NonDeletedExcalidrawElement[],
  x: number,
@@ -139,10 +133,6 @@ 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) {
@@ -183,8 +173,8 @@ export const dragNewElement = (

  if (width !== 0 && height !== 0) {
    mutateElement(draggingElement, {
-      x: newX + (originOffset?.x ?? 0),
-      y: newY + (originOffset?.y ?? 0),
+      x: newX,
+      y: newY,
      width,
      height,
    });
@@ -2,8 +2,7 @@ import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import { t } from "../i18n";
 import { ExcalidrawProps } from "../types";
-import { getFontString, updateActiveTool } from "../utils";
-import { setCursorForShape } from "../cursor";
+import { getFontString, setCursorForShape, updateActiveTool } from "../utils";
 import { newTextElement } from "./newElement";
 import { getContainerElement, wrapText } from "./textElement";
 import { isEmbeddableElement } from "./typeChecks";
@@ -28,7 +27,6 @@ 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/;
@@ -547,10 +547,7 @@ export class LinearElementEditor {
    endPointIndex: number,
  ) {
    let segmentMidPoint = centerPoint(startPoint, endPoint);
-    const splits = element.segmentSplitIndices || [];
-    const treatAsCurve =
-      splits.includes(endPointIndex) || splits.includes(endPointIndex - 1);
-    if (element.points.length > 2 && (element.roundness || treatAsCurve)) {
+    if (element.points.length > 2 && element.roundness) {
      const controlPoints = getControlPointsForBezierCurve(
        element,
        element.points[endPointIndex],
@@ -1045,15 +1042,13 @@ export class LinearElementEditor {
    let offsetX = 0;
    let offsetY = 0;

-    const indexSet = new Set(pointIndices);
-
-    const isDeletingOriginPoint = indexSet.has(0);
+    const isDeletingOriginPoint = pointIndices.includes(0);

    // if deleting first point, make the next to be [0,0] and recalculate
    // positions of the rest with respect to it
    if (isDeletingOriginPoint) {
      const firstNonDeletedPoint = element.points.find((point, idx) => {
-        return !indexSet.has(idx);
+        return !pointIndices.includes(idx);
      });
      if (firstNonDeletedPoint) {
        offsetX = firstNonDeletedPoint[0];
@@ -1062,7 +1057,7 @@ export class LinearElementEditor {
    }

    const nextPoints = element.points.reduce((acc: Point[], point, idx) => {
-      if (!indexSet.has(idx)) {
+      if (!pointIndices.includes(idx)) {
        acc.push(
          !acc.length ? [0, 0] : [point[0] - offsetX, point[1] - offsetY],
        );
@@ -1070,22 +1065,7 @@ export class LinearElementEditor {
      return acc;
    }, []);

-    const splits: number[] = [];
-    (element.segmentSplitIndices || []).forEach((index) => {
-      if (!indexSet.has(index)) {
-        let shift = 0;
-        for (const pointIndex of pointIndices) {
-          if (index > pointIndex) {
-            shift++;
-          }
-        }
-        splits.push(index - shift);
-      }
-    });
-
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, {
-      segmentSplitIndices: splits.sort((a, b) => a - b),
-    });
+    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
  }

  static addPoints(
@@ -1224,13 +1204,9 @@ export class LinearElementEditor {
      midpoint,
      ...element.points.slice(segmentMidpoint.index!),
    ];
-    const splits = (element.segmentSplitIndices || []).map((index) =>
-      index >= segmentMidpoint.index! ? index + 1 : index,
-    );

    mutateElement(element, {
      points,
-      segmentSplitIndices: splits.sort((a, b) => a - b),
    });

    ret.pointerDownState = {
@@ -1250,11 +1226,7 @@ export class LinearElementEditor {
    nextPoints: readonly Point[],
    offsetX: number,
    offsetY: number,
-    otherUpdates?: {
-      startBinding?: PointBinding;
-      endBinding?: PointBinding;
-      segmentSplitIndices?: number[];
-    },
+    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
  ) {
    const nextCoords = getElementPointsCoords(element, nextPoints);
    const prevCoords = getElementPointsCoords(element, element.points);
@@ -1500,27 +1472,6 @@ export class LinearElementEditor {

    return coords;
  };
-
-  static toggleSegmentSplitAtIndex(
-    element: NonDeleted<ExcalidrawLinearElement>,
-    index: number,
-  ) {
-    let found = false;
-    const splitIndices = (element.segmentSplitIndices || []).filter((idx) => {
-      if (idx === index) {
-        found = true;
-        return false;
-      }
-      return true;
-    });
-    if (!found) {
-      splitIndices.push(index);
-    }
-
-    mutateElement(element, {
-      segmentSplitIndices: splitIndices.sort((a, b) => a - b),
-    });
-  }
 }

 const normalizeSelectedPoints = (
@@ -6,12 +6,23 @@ import { Point } from "../types";
 import { getUpdatedTimestamp } from "../utils";
 import { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
+import { maybeGetSubtypeProps } from "./newElement";
+import { getSubtypeMethods } from "./subtypes";

 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
  Partial<TElement>,
  "id" | "version" | "versionNonce"
 >;

+const cleanUpdates = <TElement extends Mutable<ExcalidrawElement>>(
+  element: TElement,
+  updates: ElementUpdate<TElement>,
+): ElementUpdate<TElement> => {
+  const subtype = maybeGetSubtypeProps(element, element.type).subtype;
+  const map = getSubtypeMethods(subtype);
+  return map?.clean ? (map.clean(updates) as typeof updates) : updates;
+};
+
 // This function tracks updates of text elements for the purposes for collaboration.
 // The version is used to compare updates when more than one user is working in
 // the same drawing. Note: this will trigger the component to update. Make sure you
@@ -22,10 +33,12 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
  informMutation = true,
 ): TElement => {
  let didChange = false;
+  let increment = false;
+  const oldUpdates = cleanUpdates(element, updates);

  // casting to any because can't use `in` operator
  // (see https://github.com/microsoft/TypeScript/issues/21732)
-  const { points, fileId, segmentSplitIndices } = updates as any;
+  const { points, fileId } = updates as any;

  if (typeof points !== "undefined") {
    updates = { ...getSizeFromPoints(points), ...updates };
@@ -70,6 +83,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
            }
          }
          if (!didChangePoints) {
+            key in oldUpdates && (increment = true);
            continue;
          }
        }
@@ -77,6 +91,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(

      (element as any)[key] = value;
      didChange = true;
+      key in oldUpdates && (increment = true);
    }
  }
  if (!didChange) {
@@ -86,16 +101,17 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
  if (
    typeof updates.height !== "undefined" ||
    typeof updates.width !== "undefined" ||
-    typeof segmentSplitIndices !== "undefined" ||
    typeof fileId != "undefined" ||
    typeof points !== "undefined"
  ) {
    ShapeCache.delete(element);
  }

-  element.version++;
-  element.versionNonce = randomInteger();
-  element.updated = getUpdatedTimestamp();
+  if (increment) {
+    element.version++;
+    element.versionNonce = randomInteger();
+    element.updated = getUpdatedTimestamp();
+  }

  if (informMutation) {
    Scene.getScene(element)?.informMutation();
@@ -109,6 +125,8 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
  updates: ElementUpdate<TElement>,
 ): TElement => {
  let didChange = false;
+  let increment = false;
+  const oldUpdates = cleanUpdates(element, updates);
  for (const key in updates) {
    const value = (updates as any)[key];
    if (typeof value !== "undefined") {
@@ -120,6 +138,7 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
        continue;
      }
      didChange = true;
+      key in oldUpdates && (increment = true);
    }
  }

@@ -127,6 +146,9 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
    return element;
  }

+  if (!increment) {
+    return { ...element, ...updates };
+  }
  return {
    ...element,
    ...updates,
@@ -141,8 +163,8 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
 *
 * NOTE: does not trigger re-render.
 */
-export const bumpVersion = <T extends Mutable<ExcalidrawElement>>(
-  element: T,
+export const bumpVersion = (
+  element: Mutable<ExcalidrawElement>,
  version?: ExcalidrawElement["version"],
 ) => {
  element.version = (version ?? element.version) + 1;
@@ -15,12 +15,7 @@ import {
  ExcalidrawFrameElement,
  ExcalidrawEmbeddableElement,
 } from "../element/types";
-import {
-  arrayToMap,
-  getFontString,
-  getUpdatedTimestamp,
-  isTestEnv,
-} from "../utils";
+import { arrayToMap, getUpdatedTimestamp, isTestEnv } from "../utils";
 import { randomInteger, randomId } from "../random";
 import { bumpVersion, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
@@ -30,9 +25,9 @@ import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
  getContainerElement,
-  measureText,
+  measureTextElement,
  normalizeText,
-  wrapText,
+  wrapTextElement,
  getBoundTextMaxWidth,
  getDefaultLineHeight,
 } from "./textElement";
@@ -45,6 +40,30 @@ import {
  VERTICAL_ALIGN,
 } from "../constants";
 import { MarkOptional, Merge, Mutable } from "../utility-types";
+import { getSubtypeMethods, isValidSubtype } from "./subtypes";
+
+export const maybeGetSubtypeProps = (
+  obj: {
+    subtype?: ExcalidrawElement["subtype"];
+    customData?: ExcalidrawElement["customData"];
+  },
+  type: ExcalidrawElement["type"],
+) => {
+  const data: typeof obj = {};
+  if ("subtype" in obj) {
+    data.subtype = obj.subtype;
+  }
+  if ("customData" in obj) {
+    data.customData = obj.customData;
+  }
+  if ("subtype" in data && !isValidSubtype(data.subtype, type)) {
+    delete data.subtype;
+  }
+  if (!("subtype" in data) && "customData" in data) {
+    delete data.customData;
+  }
+  return data as typeof obj;
+};

 export type ElementConstructorOpts = MarkOptional<
  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -58,6 +77,8 @@ export type ElementConstructorOpts = MarkOptional<
  | "version"
  | "versionNonce"
  | "link"
+  | "subtype"
+  | "customData"
  | "strokeStyle"
  | "fillStyle"
  | "strokeColor"
@@ -93,8 +114,10 @@ const _newElementBase = <T extends ExcalidrawElement>(
    ...rest
  }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
+  const { subtype, customData } = rest;
  // assign type to guard against excess properties
  const element: Merge<ExcalidrawGenericElement, { type: T["type"] }> = {
+    ...maybeGetSubtypeProps({ subtype, customData }, type),
    id: rest.id || randomId(),
    type,
    x,
@@ -128,8 +151,11 @@ export const newElement = (
  opts: {
    type: ExcalidrawGenericElement["type"];
  } & ElementConstructorOpts,
-): NonDeleted<ExcalidrawGenericElement> =>
-  _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
+): NonDeleted<ExcalidrawGenericElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
+  return _newElementBase<ExcalidrawGenericElement>(opts.type, opts);
+};

 export const newEmbeddableElement = (
  opts: {
@@ -196,10 +222,12 @@ export const newTextElement = (
  const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
  const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
  const text = normalizeText(opts.text);
-  const metrics = measureText(
-    text,
-    getFontString({ fontFamily, fontSize }),
-    lineHeight,
+  const metrics = measureTextElement(
+    { ...opts, fontSize, fontFamily, lineHeight },
+    {
+      text,
+      customData: opts.customData,
+    },
  );
  const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
  const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
@@ -244,7 +272,9 @@ const getAdjustedDimensions = (
    width: nextWidth,
    height: nextHeight,
    baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element), element.lineHeight);
+  } = measureTextElement(element, {
+    text: nextText,
+  });
  const { textAlign, verticalAlign } = element;
  let x: number;
  let y: number;
@@ -253,11 +283,7 @@ const getAdjustedDimensions = (
    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
    !element.containerId
  ) {
-    const prevMetrics = measureText(
-      element.text,
-      getFontString(element),
-      element.lineHeight,
-    );
+    const prevMetrics = measureTextElement(element);
    const offsets = getTextElementPositionOffsets(element, {
      width: nextWidth - prevMetrics.width,
      height: nextHeight - prevMetrics.height,
@@ -313,11 +339,9 @@ export const refreshTextDimensions = (
  }
  const container = getContainerElement(textElement);
  if (container) {
-    text = wrapText(
+    text = wrapTextElement(textElement, getBoundTextMaxWidth(container), {
      text,
-      getFontString(textElement),
-      getBoundTextMaxWidth(container),
-    );
+    });
  }
  const dimensions = getAdjustedDimensions(textElement, text);
  return { text, ...dimensions };
@@ -349,6 +373,8 @@ export const newFreeDrawElement = (
    simulatePressure: boolean;
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFreeDrawElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
  return {
    ..._newElementBase<ExcalidrawFreeDrawElement>(opts.type, opts),
    points: opts.points || [],
@@ -366,6 +392,8 @@ export const newLinearElement = (
    points?: ExcalidrawLinearElement["points"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawLinearElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
  return {
    ..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
    points: opts.points || [],
@@ -374,7 +402,6 @@ export const newLinearElement = (
    endBinding: null,
    startArrowhead: opts.startArrowhead || null,
    endArrowhead: opts.endArrowhead || null,
-    segmentSplitIndices: [],
  };
 };

@@ -386,6 +413,8 @@ export const newImageElement = (
    scale?: ExcalidrawImageElement["scale"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawImageElement> => {
+  const map = getSubtypeMethods(opts?.subtype);
+  map?.clean && map.clean(opts);
  return {
    ..._newElementBase<ExcalidrawImageElement>("image", opts),
    // in the future we'll support changing stroke color for some SVG elements,
@@ -41,7 +41,7 @@ import {
  MaybeTransformHandleType,
  TransformHandleDirection,
 } from "./transformHandles";
-import { AppState, Point, PointerDownState } from "../types";
+import { Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
  getApproxMinLineWidth,
@@ -51,7 +51,7 @@ import {
  handleBindTextResize,
  getBoundTextMaxWidth,
  getApproxMinLineHeight,
-  measureText,
+  measureTextElement,
  getBoundTextMaxHeight,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
@@ -79,7 +79,6 @@ export const transformElements = (
  pointerY: number,
  centerX: number,
  centerY: number,
-  appState: AppState,
 ) => {
  if (selectedElements.length === 1) {
    const [element] = selectedElements;
@@ -224,11 +223,7 @@ const measureFontSizeFromWidth = (
  if (nextFontSize < MIN_FONT_SIZE) {
    return null;
  }
-  const metrics = measureText(
-    element.text,
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.lineHeight,
-  );
+  const metrics = measureTextElement(element, { fontSize: nextFontSize });
  return {
    size: nextFontSize,
    baseline: metrics.baseline + (nextHeight - metrics.height),
@@ -467,8 +462,8 @@ export const resizeSingleElement = (
        boundTextElement.fontSize,
        boundTextElement.lineHeight,
      );
-      eleNewWidth = Math.max(eleNewWidth, minWidth);
-      eleNewHeight = Math.max(eleNewHeight, minHeight);
+      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
+      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
    }
  }

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

-  const flipX = eleNewWidth < 0;
-  const flipY = eleNewHeight < 0;
-
  // Flip horizontally
-  if (flipX) {
+  if (eleNewWidth < 0) {
    if (transformHandleDirection.includes("e")) {
      newTopLeft[0] -= Math.abs(newBoundsWidth);
    }
@@ -521,9 +513,8 @@ export const resizeSingleElement = (
      newTopLeft[0] += Math.abs(newBoundsWidth);
    }
  }
-
  // Flip vertically
-  if (flipY) {
+  if (eleNewHeight < 0) {
    if (transformHandleDirection.includes("s")) {
      newTopLeft[1] -= Math.abs(newBoundsHeight);
    }
@@ -547,20 +538,10 @@ 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,
@@ -577,11 +558,16 @@ 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: nextX,
-    y: nextY,
+    x: newOrigin[0],
+    y: newOrigin[1],
    points: rescaledPoints,
  };

@@ -690,10 +676,6 @@ 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> = {
@@ -12,7 +12,6 @@ export const showSelectedShapeActions = (
        (appState.editingElement ||
          (appState.activeTool.type !== "selection" &&
            appState.activeTool.type !== "eraser" &&
-            appState.activeTool.type !== "hand" &&
-            appState.activeTool.type !== "laser"))) ||
+            appState.activeTool.type !== "hand"))) ||
        getSelectedElements(elements, appState).length),
  );
@@ -0,0 +1,490 @@
+import { useEffect } from "react";
+import { ExcalidrawElement, ExcalidrawTextElement, NonDeleted } from "../types";
+import { getNonDeletedElements } from "../";
+import { getSelectedElements } from "../../scene";
+import { AppState, ExcalidrawImperativeAPI } from "../../types";
+import { registerAuxLangData } from "../../i18n";
+
+import { Action, ActionName, ActionPredicateFn } from "../../actions/types";
+import {
+  CustomShortcutName,
+  registerCustomShortcuts,
+} from "../../actions/shortcuts";
+import { register } from "../../actions/register";
+import { hasBoundTextElement, isTextElement } from "../typeChecks";
+import {
+  getBoundTextElement,
+  getContainerElement,
+  redrawTextBoundingBox,
+} from "../textElement";
+import { ShapeCache } from "../../scene/ShapeCache";
+import Scene from "../../scene/Scene";
+
+// Use "let" instead of "const" so we can dynamically add subtypes
+let subtypeNames: readonly Subtype[] = [];
+let parentTypeMap: readonly {
+  subtype: Subtype;
+  parentType: ExcalidrawElement["type"];
+}[] = [];
+let subtypeActionMap: readonly {
+  subtype: Subtype;
+  actions: readonly SubtypeActionName[];
+}[] = [];
+let disabledActionMap: readonly {
+  subtype: Subtype;
+  actions: readonly DisabledActionName[];
+}[] = [];
+let alwaysEnabledMap: readonly {
+  subtype: Subtype;
+  actions: readonly SubtypeActionName[];
+}[] = [];
+
+export type SubtypeRecord = Readonly<{
+  subtype: Subtype;
+  parents: readonly ExcalidrawElement["type"][];
+  actionNames?: readonly SubtypeActionName[];
+  disabledNames?: readonly DisabledActionName[];
+  shortcutMap?: Record<CustomShortcutName, string[]>;
+  alwaysEnabledNames?: readonly SubtypeActionName[];
+}>;
+
+// Subtype Names
+export type Subtype = Required<ExcalidrawElement>["subtype"];
+export const getSubtypeNames = (): readonly Subtype[] => {
+  return subtypeNames;
+};
+export const isValidSubtype = (s: any, t: any): s is Subtype =>
+  parentTypeMap.find(
+    (val) => (val.subtype as any) === s && (val.parentType as any) === t,
+  ) !== undefined;
+const isSubtypeName = (s: any): s is Subtype => subtypeNames.includes(s);
+
+// Subtype Actions
+
+// Used for context menus in the shape chooser
+export const hasAlwaysEnabledActions = (s: any): boolean => {
+  if (!isSubtypeName(s)) {
+    return false;
+  }
+  return alwaysEnabledMap.some((value) => value.subtype === s);
+};
+
+type SubtypeActionName = string;
+
+const isSubtypeActionName = (s: any): s is SubtypeActionName =>
+  subtypeActionMap.some((val) => val.actions.includes(s));
+
+const addSubtypeAction = (action: Action) => {
+  if (isSubtypeActionName(action.name) || isSubtypeName(action.name)) {
+    register(action);
+  }
+};
+
+// Standard actions disabled by subtypes
+type DisabledActionName = ActionName;
+
+const isDisabledActionName = (s: any): s is DisabledActionName =>
+  disabledActionMap.some((val) => val.actions.includes(s));
+
+// Is the `actionName` one of the subtype actions for `subtype`
+// (if `isAdded` is true) or one of the standard actions disabled
+// by `subtype` (if `isAdded` is false)?
+const isForSubtype = (
+  subtype: ExcalidrawElement["subtype"],
+  actionName: ActionName | SubtypeActionName,
+  isAdded: boolean,
+) => {
+  const actions = isAdded ? subtypeActionMap : disabledActionMap;
+  const map = actions.find((value) => value.subtype === subtype);
+  if (map) {
+    return map.actions.includes(actionName);
+  }
+  return false;
+};
+
+export const isSubtypeAction: ActionPredicateFn = function (action) {
+  return isSubtypeActionName(action.name) && !isSubtypeName(action.name);
+};
+
+export const subtypeActionPredicate: ActionPredicateFn = function (
+  action,
+  elements,
+  appState,
+) {
+  // We always enable subtype actions.  Also let through standard actions
+  // which no subtypes might have disabled.
+  if (
+    isSubtypeName(action.name) ||
+    (!isSubtypeActionName(action.name) && !isDisabledActionName(action.name))
+  ) {
+    return true;
+  }
+  const selectedElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+  const chosen = appState.editingElement
+    ? [appState.editingElement, ...selectedElements]
+    : selectedElements;
+  // Now handle actions added by subtypes
+  if (isSubtypeActionName(action.name)) {
+    // Has any ExcalidrawElement enabled this actionName through having
+    // its subtype?
+    return (
+      chosen.some((el) => {
+        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
+        return isForSubtype(e.subtype, action.name, true);
+      }) ||
+      // Or has any active subtype enabled this actionName?
+      (appState.activeSubtypes !== undefined &&
+        appState.activeSubtypes?.some((subtype) => {
+          if (!isValidSubtype(subtype, appState.activeTool.type)) {
+            return false;
+          }
+          return isForSubtype(subtype, action.name, true);
+        })) ||
+      alwaysEnabledMap.some((value) => {
+        return value.actions.includes(action.name);
+      })
+    );
+  }
+  // Now handle standard actions disabled by subtypes
+  if (isDisabledActionName(action.name)) {
+    return (
+      // Has every ExcalidrawElement not disabled this actionName?
+      (chosen.every((el) => {
+        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
+        return !isForSubtype(e.subtype, action.name, false);
+      }) &&
+        // And has every active subtype not disabled this actionName?
+        (appState.activeSubtypes === undefined ||
+          appState.activeSubtypes?.every((subtype) => {
+            if (!isValidSubtype(subtype, appState.activeTool.type)) {
+              return true;
+            }
+            return !isForSubtype(subtype, action.name, false);
+          }))) ||
+      // Or can we find an ExcalidrawElement without a valid subtype
+      // which would disable this action if it had a valid subtype?
+      chosen.some((el) => {
+        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
+        return parentTypeMap.some(
+          (value) =>
+            value.parentType === e.type &&
+            !isValidSubtype(e.subtype, e.type) &&
+            isForSubtype(value.subtype, action.name, false),
+        );
+      }) ||
+      chosen.some((el) => {
+        const e = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
+        return (
+          // Would the subtype of e by inself disable this action?
+          isForSubtype(e.subtype, action.name, false) &&
+          // Can we find an ExcalidrawElement which could have the same subtype
+          // as e but whose subtype does not disable this action?
+          chosen.some((el) => {
+            const e2 = hasBoundTextElement(el) ? getBoundTextElement(el)! : el;
+            return (
+              // Does e have a valid subtype whose parent types include the
+              // type of e2, and does the subtype of e2 not disable this action?
+              parentTypeMap
+                .filter((val) => val.subtype === e.subtype)
+                .some((val) => val.parentType === e2.type) &&
+              !isForSubtype(e2.subtype, action.name, false)
+            );
+          })
+        );
+      })
+    );
+  }
+  // Shouldn't happen
+  return true;
+};
+
+// Are any of the parent types of `subtype` shared by any subtype
+// in the array?
+export const subtypeCollides = (subtype: Subtype, subtypeArray: Subtype[]) => {
+  const subtypeParents = parentTypeMap
+    .filter((value) => value.subtype === subtype)
+    .map((value) => value.parentType);
+  const subtypeArrayParents = subtypeArray.flatMap((s) =>
+    parentTypeMap
+      .filter((value) => value.subtype === s)
+      .map((value) => value.parentType),
+  );
+  return subtypeParents.some((t) => subtypeArrayParents.includes(t));
+};
+
+// Subtype Methods
+export type SubtypeMethods = {
+  clean: (
+    updates: Omit<
+      Partial<ExcalidrawElement>,
+      "id" | "version" | "versionNonce"
+    >,
+  ) => Omit<Partial<ExcalidrawElement>, "id" | "version" | "versionNonce">;
+  getEditorStyle: (element: ExcalidrawTextElement) => Record<string, any>;
+  ensureLoaded: (callback?: () => void) => Promise<void>;
+  measureText: (
+    element: Pick<
+      ExcalidrawTextElement,
+      | "subtype"
+      | "customData"
+      | "fontSize"
+      | "fontFamily"
+      | "text"
+      | "lineHeight"
+    >,
+    next?: {
+      fontSize?: number;
+      text?: string;
+      customData?: ExcalidrawElement["customData"];
+    },
+  ) => { width: number; height: number; baseline: number };
+  render: (
+    element: NonDeleted<ExcalidrawElement>,
+    context: CanvasRenderingContext2D,
+  ) => void;
+  renderSvg: (
+    svgRoot: SVGElement,
+    root: SVGElement,
+    element: NonDeleted<ExcalidrawElement>,
+    opt?: { offsetX?: number; offsetY?: number },
+  ) => void;
+  wrapText: (
+    element: Pick<
+      ExcalidrawTextElement,
+      | "subtype"
+      | "customData"
+      | "fontSize"
+      | "fontFamily"
+      | "originalText"
+      | "lineHeight"
+    >,
+    containerWidth: number,
+    next?: {
+      fontSize?: number;
+      text?: string;
+      customData?: ExcalidrawElement["customData"];
+    },
+  ) => string;
+};
+
+type MethodMap = { subtype: Subtype; methods: Partial<SubtypeMethods> };
+const methodMaps = [] as Array<MethodMap>;
+
+// Use `getSubtypeMethods` to call subtype-specialized methods, like `render`.
+export const getSubtypeMethods = (
+  subtype: Subtype | undefined,
+): Partial<SubtypeMethods> | undefined => {
+  const map = methodMaps.find((method) => method.subtype === subtype);
+  return map?.methods;
+};
+
+export const addSubtypeMethods = (
+  subtype: Subtype,
+  methods: Partial<SubtypeMethods>,
+) => {
+  if (!methodMaps.find((method) => method.subtype === subtype)) {
+    methodMaps.push({ subtype, methods });
+  }
+};
+
+// For a given `ExcalidrawElement` type, return the active subtype
+// and associated customData (if any) from the AppState.  Assume
+// only one subtype is active for a given `ExcalidrawElement` type
+// at any given time.
+export const selectSubtype = (
+  appState: {
+    activeSubtypes?: AppState["activeSubtypes"];
+    customData?: AppState["customData"];
+  },
+  type: ExcalidrawElement["type"],
+): {
+  subtype?: ExcalidrawElement["subtype"];
+  customData?: ExcalidrawElement["customData"];
+} => {
+  if (appState.activeSubtypes === undefined) {
+    return {};
+  }
+  const subtype = appState.activeSubtypes.find((subtype) =>
+    isValidSubtype(subtype, type),
+  );
+  if (subtype === undefined) {
+    return {};
+  }
+  if (appState.customData === undefined || !(subtype in appState.customData)) {
+    return { subtype };
+  }
+  const customData = appState.customData[subtype];
+  return { subtype, customData };
+};
+
+// Callback to re-render subtyped `ExcalidrawElement`s after completing
+// async loading of the subtype.
+export type SubtypeLoadedCb = (hasSubtype: SubtypeCheckFn) => void;
+export type SubtypeCheckFn = (element: ExcalidrawElement) => boolean;
+
+// Functions to prepare subtypes for use
+export type SubtypePrepFn = (
+  addSubtypeAction: (action: Action) => void,
+  addLangData: (
+    fallbackLangData: Object,
+    setLanguageAux: (langCode: string) => Promise<Object | undefined>,
+  ) => void,
+  onSubtypeLoaded?: SubtypeLoadedCb,
+) => {
+  actions: Action[];
+  methods: Partial<SubtypeMethods>;
+};
+
+// This is the main method to set up the subtype.  The optional
+// `onSubtypeLoaded` callback may be used to re-render subtyped
+// `ExcalidrawElement`s after the subtype has finished async loading.
+// See the MathJax extension in `@excalidraw/extensions` for example.
+export const prepareSubtype = (
+  record: SubtypeRecord,
+  subtypePrepFn: SubtypePrepFn,
+  onSubtypeLoaded?: SubtypeLoadedCb,
+): { actions: Action[] | null; methods: Partial<SubtypeMethods> } => {
+  const map = getSubtypeMethods(record.subtype);
+  if (map) {
+    return { actions: null, methods: map };
+  }
+
+  // Check for undefined/null subtypes and parentTypes
+  if (
+    record.subtype === undefined ||
+    record.subtype === "" ||
+    record.parents === undefined ||
+    record.parents.length === 0
+  ) {
+    return { actions: null, methods: {} };
+  }
+
+  // Register the types
+  const subtype = record.subtype;
+  subtypeNames = [...subtypeNames, subtype];
+  record.parents.forEach((parentType) => {
+    parentTypeMap = [...parentTypeMap, { subtype, parentType }];
+  });
+  if (record.actionNames) {
+    subtypeActionMap = [
+      ...subtypeActionMap,
+      { subtype, actions: record.actionNames },
+    ];
+  }
+  if (record.disabledNames) {
+    disabledActionMap = [
+      ...disabledActionMap,
+      { subtype, actions: record.disabledNames },
+    ];
+  }
+  if (record.alwaysEnabledNames) {
+    alwaysEnabledMap = [
+      ...alwaysEnabledMap,
+      { subtype, actions: record.alwaysEnabledNames },
+    ];
+  }
+  if (record.shortcutMap) {
+    registerCustomShortcuts(record.shortcutMap);
+  }
+
+  // Prepare the subtype
+  const { actions, methods } = subtypePrepFn(
+    addSubtypeAction,
+    registerAuxLangData,
+    onSubtypeLoaded,
+  );
+
+  // Register the subtype's methods
+  addSubtypeMethods(record.subtype, methods);
+  return { actions, methods };
+};
+
+// Ensure all subtypes are loaded before continuing, eg to
+// render SVG previews of new charts.  Chart-relevant subtypes
+// include math equations in titles or non hand-drawn line styles.
+export const ensureSubtypesLoadedForElements = async (
+  elements: readonly ExcalidrawElement[],
+  callback?: () => void,
+) => {
+  // Only ensure the loading of subtypes which are actually needed.
+  // We don't want to be held up by eg downloading the MathJax SVG fonts
+  // if we don't actually need them yet.
+  const subtypesUsed = [] as Subtype[];
+  elements.forEach((el) => {
+    if (
+      "subtype" in el &&
+      isValidSubtype(el.subtype, el.type) &&
+      !subtypesUsed.includes(el.subtype)
+    ) {
+      subtypesUsed.push(el.subtype);
+    }
+  });
+  await ensureSubtypesLoaded(subtypesUsed, callback);
+};
+
+export const ensureSubtypesLoaded = async (
+  subtypes: Subtype[],
+  callback?: () => void,
+) => {
+  // Use a for loop so we can do `await map.ensureLoaded()`
+  for (let i = 0; i < subtypes.length; i++) {
+    const subtype = subtypes[i];
+    // Should be defined if prepareSubtype() has run
+    const map = getSubtypeMethods(subtype);
+    if (map?.ensureLoaded) {
+      await map.ensureLoaded();
+    }
+  }
+  if (callback) {
+    callback();
+  }
+};
+
+// Call this method after finishing any async loading for
+// subtypes of ExcalidrawElement if the newly loaded code
+// would change the rendering.
+export const checkRefreshOnSubtypeLoad = (
+  hasSubtype: SubtypeCheckFn,
+  elements: readonly ExcalidrawElement[],
+) => {
+  let refreshNeeded = false;
+  const scenes: Scene[] = [];
+  getNonDeletedElements(elements).forEach((element) => {
+    // If the element is of the subtype that was just
+    // registered, update the element's dimensions, mark the
+    // element for a re-render, and indicate the scene needs a refresh.
+    if (hasSubtype(element)) {
+      ShapeCache.delete(element);
+      if (isTextElement(element)) {
+        redrawTextBoundingBox(element, getContainerElement(element));
+      }
+      refreshNeeded = true;
+      const scene = Scene.getScene(element);
+      if (scene && !scenes.includes(scene)) {
+        // Store in case we have multiple scenes
+        scenes.push(scene);
+      }
+    }
+  });
+  // Only inform each scene once
+  scenes.forEach((scene) => scene.informMutation());
+  return refreshNeeded;
+};
+
+export const useSubtype = (
+  api: ExcalidrawImperativeAPI | null,
+  record: SubtypeRecord,
+  subtypePrepFn: SubtypePrepFn,
+) => {
+  useEffect(() => {
+    if (api) {
+      const prep = api.addSubtype(record, subtypePrepFn);
+      if (prep) {
+        addSubtypeMethods(record.subtype, prep.methods);
+      }
+    }
+  }, [api, record, subtypePrepFn]);
+};
@@ -0,0 +1,13 @@
+import { Theme } from "../../../element/types";
+import { createIcon, iconFillColor } from "../../../components/icons";
+
+// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
+export const mathSubtypeIcon = ({ theme }: { theme: Theme }) =>
+  createIcon(
+    <path
+      fill={iconFillColor(theme)}
+      // fa-square-root-variable-solid
+      d="M289 24.2C292.5 10 305.3 0 320 0H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H345L239 487.8c-3.2 13-14.2 22.6-27.6 24s-26.1-5.5-32.1-17.5L76.2 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c12.1 0 23.2 6.8 28.6 17.7l73.3 146.6L289 24.2zM393.4 233.4c12.5-12.5 32.8-12.5 45.3 0L480 274.7l41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L525.3 320l41.4 41.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L480 365.3l-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L434.7 320l-41.4-41.4c-12.5-12.5-12.5-32.8 0-45.3z"
+    />,
+    { width: 576, height: 512, mirror: true, strokeWidth: 1.25 },
+  );
@@ -0,0 +1,15 @@
+import { ExcalidrawImperativeAPI } from "../../../types";
+import { useSubtype } from "../";
+import { getMathSubtypeRecord } from "./types";
+import { prepareMathSubtype } from "./implementation";
+
+declare global {
+  module SREfeature {
+    function custom(locale: string): Promise<string>;
+  }
+}
+
+// The main hook to use the MathJax subtype
+export const useMathSubtype = (api: ExcalidrawImperativeAPI | null) => {
+  useSubtype(api, getMathSubtypeRecord(), prepareMathSubtype);
+};
@@ -0,0 +1,15 @@
+{
+  "labels": {
+    "changeMathOnly": "Math display",
+    "mathOnlyTrue": "Math only",
+    "mathOnlyFalse": "Mixed text",
+    "resetUseTex": "Reset math input type",
+    "useTexTrueActive": "✔ Standard input",
+    "useTexTrueInactive": "Standard input",
+    "useTexFalseActive": "✔ Simplified input",
+    "useTexFalseInactive": "Simplified input"
+  },
+  "toolBar": {
+    "math": "Math"
+  }
+}
@@ -0,0 +1,77 @@
+import { vi } from "vitest";
+import { render } from "../../../../tests/test-utils";
+import { API } from "../../../../tests/helpers/api";
+import { Excalidraw } from "../../../../packages/excalidraw/index";
+
+import { measureTextElement } from "../../../textElement";
+import { ensureSubtypesLoaded } from "../../";
+import { getMathSubtypeRecord } from "../types";
+import { prepareMathSubtype } from "../implementation";
+
+describe("mathjax loaded", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+    API.addSubtype(getMathSubtypeRecord(), prepareMathSubtype);
+    await ensureSubtypesLoaded(["math"]);
+  });
+  it("text-only measurements match", async () => {
+    const text = "A quick brown fox jumps over the lazy dog.";
+    const elements = [
+      API.createElement({ type: "text", id: "A", text, subtype: "math" }),
+      API.createElement({ type: "text", id: "B", text }),
+    ];
+    const metrics1 = measureTextElement(elements[0]);
+    const metrics2 = measureTextElement(elements[1]);
+    expect(metrics1).toStrictEqual(metrics2);
+  });
+  it("minimum height remains", async () => {
+    const elements = [
+      API.createElement({ type: "text", id: "A", text: "a" }),
+      API.createElement({
+        type: "text",
+        id: "B",
+        text: "\\(\\alpha\\)",
+        subtype: "math",
+        customData: { useTex: true },
+      }),
+      API.createElement({
+        type: "text",
+        id: "C",
+        text: "`beta`",
+        subtype: "math",
+        customData: { useTex: false },
+      }),
+    ];
+    const height = measureTextElement(elements[0]).height;
+    const height1 = measureTextElement(elements[1]).height;
+    const height2 = measureTextElement(elements[2]).height;
+    expect(height).toEqual(height1);
+    expect(height).toEqual(height2);
+  });
+  it("converts math to svgs", async () => {
+    const svgDim = 42;
+    vi.spyOn(SVGElement.prototype, "getBoundingClientRect").mockImplementation(
+      () => new DOMRect(0, 0, svgDim, svgDim),
+    );
+    const elements = [];
+    const type = "text";
+    const subtype = "math";
+    let text = "Math ";
+    elements.push(API.createElement({ type, text }));
+    text = "Math \\(\\alpha\\)";
+    elements.push(
+      API.createElement({ type, subtype, text, customData: { useTex: true } }),
+    );
+    text = "Math `beta`";
+    elements.push(
+      API.createElement({ type, subtype, text, customData: { useTex: false } }),
+    );
+    const metrics = {
+      width: measureTextElement(elements[0]).width + svgDim,
+      height: svgDim,
+      baseline: 0,
+    };
+    expect(measureTextElement(elements[1])).toStrictEqual(metrics);
+    expect(measureTextElement(elements[2])).toStrictEqual(metrics);
+  });
+});
@@ -0,0 +1,17 @@
+import { getShortcutKey } from "../../../utils";
+import { SubtypeRecord } from "../";
+
+// Exports
+export const getMathSubtypeRecord = () => mathSubtype;
+
+// Use `getMathSubtype` so we don't have to export this
+const mathSubtype: SubtypeRecord = {
+  subtype: "math",
+  parents: ["text"],
+  actionNames: ["useTexTrue", "useTexFalse", "resetUseTex", "changeMathOnly"],
+  disabledNames: ["changeFontFamily"],
+  shortcutMap: {
+    resetUseTex: [getShortcutKey("Shift+R")],
+  },
+  alwaysEnabledNames: ["useTexTrue", "useTexFalse"],
+};
@@ -1,3 +1,4 @@
+import { getSubtypeMethods, SubtypeMethods } from "./subtypes";
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
  ExcalidrawElement,
@@ -36,6 +37,30 @@ import {
 } from "./textWysiwyg";
 import { ExtractSetType } from "../utility-types";

+export const measureTextElement = function (element, next) {
+  const map = getSubtypeMethods(element.subtype);
+  if (map?.measureText) {
+    return map.measureText(element, next);
+  }
+
+  const fontSize = next?.fontSize ?? element.fontSize;
+  const font = getFontString({ fontSize, fontFamily: element.fontFamily });
+  const text = next?.text ?? element.text;
+  return measureText(text, font, element.lineHeight);
+} as SubtypeMethods["measureText"];
+
+export const wrapTextElement = function (element, containerWidth, next) {
+  const map = getSubtypeMethods(element.subtype);
+  if (map?.wrapText) {
+    return map.wrapText(element, containerWidth, next);
+  }
+
+  const fontSize = next?.fontSize ?? element.fontSize;
+  const font = getFontString({ fontSize, fontFamily: element.fontFamily });
+  const text = next?.text ?? element.originalText;
+  return wrapText(text, font, containerWidth);
+} as SubtypeMethods["wrapText"];
+
 export const normalizeText = (text: string) => {
  return (
    text
@@ -68,22 +93,24 @@ export const redrawTextBoundingBox = (

  if (container) {
    maxWidth = getBoundTextMaxWidth(container, textElement);
-    boundTextUpdates.text = wrapText(
-      textElement.originalText,
-      getFontString(textElement),
-      maxWidth,
-    );
+    boundTextUpdates.text = wrapTextElement(textElement, maxWidth);
  }
-  const metrics = measureText(
-    boundTextUpdates.text,
-    getFontString(textElement),
-    textElement.lineHeight,
-  );
+  const metrics = measureTextElement(textElement, {
+    text: boundTextUpdates.text,
+  });

  boundTextUpdates.width = metrics.width;
  boundTextUpdates.height = metrics.height;
  boundTextUpdates.baseline = metrics.baseline;

+  // Maintain coordX for non left-aligned text in case the width has changed
+  if (!container) {
+    if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
+      boundTextUpdates.x += textElement.width - metrics.width;
+    } else if (textElement.textAlign === TEXT_ALIGN.CENTER) {
+      boundTextUpdates.x += textElement.width / 2 - metrics.width / 2;
+    }
+  }
  if (container) {
    const maxContainerHeight = getBoundTextMaxHeight(
      container,
@@ -196,17 +223,9 @@ export const handleBindTextResize = (
      (transformHandleType !== "n" && transformHandleType !== "s")
    ) {
      if (text) {
-        text = wrapText(
-          textElement.originalText,
-          getFontString(textElement),
-          maxWidth,
-        );
+        text = wrapTextElement(textElement, maxWidth);
      }
-      const metrics = measureText(
-        text,
-        getFontString(textElement),
-        textElement.lineHeight,
-      );
+      const metrics = measureTextElement(textElement, { text });
      nextHeight = metrics.height;
      nextWidth = metrics.width;
      nextBaseLine = metrics.baseline;
@@ -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 } from "../tests/queries/dom";

 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -26,6 +26,12 @@ 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"));
@@ -180,7 +186,7 @@ describe("textWysiwyg", () => {
      expect(h.state.editingElement?.id).toBe(boundText.id);
    });

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

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

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

      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", async () => {
+    it("should edit text under cursor when double-clicked with selection tool", () => {
      const text = API.createElement({
        type: "text",
        text: "ola",
@@ -217,7 +223,7 @@ describe("textWysiwyg", () => {

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

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

      expect(editor).not.toBe(null);
      expect(h.state.editingElement?.id).toBe(text.id);
@@ -244,7 +250,7 @@ describe("textWysiwyg", () => {
      textElement = UI.createElement("text");

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

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

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

      updateTextEditor(editor, "Hello World!");

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

      updateTextEditor(editor, "Hello World!");

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

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

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

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

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

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

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

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

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

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

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

      updateTextEditor(editor, "Hello World!");

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

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

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

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

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

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

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

      updateTextEditor(editor, "Hello World!");

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

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

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

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

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

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

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

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

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

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

      editor.select();

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

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

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

      editor.select();

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

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

      updateTextEditor(editor, "Hello World!");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1379,7 +1382,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 = await getTextEditor(true);
+      const editor = getTextEditor();

      updateTextEditor(
        editor,
@@ -1425,7 +1428,7 @@ describe("textWysiwyg", () => {
              type: "text",
            },
          ],
-          fillStyle: "solid",
+          fillStyle: "hachure",
          groupIds: [],
          height: 35,
          isDeleted: false,
@@ -1438,7 +1441,7 @@ describe("textWysiwyg", () => {
          },
          strokeColor: "#1e1e1e",
          strokeStyle: "solid",
-          strokeWidth: 2,
+          strokeWidth: 1,
          type: "rectangle",
          updated: 1,
          version: 1,
@@ -1467,7 +1470,7 @@ describe("textWysiwyg", () => {
      // Bind first text
      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);
-      let editor = await getTextEditor(true);
+      let editor = getTextEditor();
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello!");
      expect(
@@ -1492,7 +1495,7 @@ describe("textWysiwyg", () => {
        rectangle.x + rectangle.width / 2,
        rectangle.y + rectangle.height / 2,
      );
-      editor = await getTextEditor(true);
+      editor = getTextEditor();
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Excalidraw");
      editor.blur();
@@ -1507,16 +1510,28 @@ describe("textWysiwyg", () => {
    });
  });

-  it("should bump the version of a labeled arrow when the label is updated", async () => {
+  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,
    });
-    await UI.editText(arrow, "Hello");
+
+    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;

-    await UI.editText(arrow, "Hello\nworld!");
+    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);
  });
@@ -26,6 +26,7 @@ import {
  getContainerElement,
  getTextElementAngle,
  getTextWidth,
+  measureText,
  normalizeText,
  redrawTextBoundingBox,
  wrapText,
@@ -43,8 +44,10 @@ import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
+import { SubtypeMethods, getSubtypeMethods } from "./subtypes";

 const getTransform = (
+  offsetX: number,
  width: number,
  height: number,
  angle: number,
@@ -62,7 +65,8 @@ const getTransform = (
  if (height > maxHeight && zoom.value !== 1) {
    translateY = (maxHeight * (zoom.value - 1)) / 2;
  }
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
+  const offset = offsetX !== 0 ? ` translate(${offsetX}px, 0px)` : "";
+  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)${offset}`;
 };

 const originalContainerCache: {
@@ -97,6 +101,14 @@ export const getOriginalContainerHeightFromCache = (
  return originalContainerCache[id]?.height ?? null;
 };

+const getEditorStyle = function (element) {
+  const map = getSubtypeMethods(element.subtype);
+  if (map?.getEditorStyle) {
+    return map.getEditorStyle(element);
+  }
+  return {};
+} as SubtypeMethods["getEditorStyle"];
+
 export const textWysiwyg = ({
  id,
  onChange,
@@ -156,11 +168,24 @@ export const textWysiwyg = ({
      const container = getContainerElement(updatedTextElement);
      let maxWidth = updatedTextElement.width;

-      let maxHeight = updatedTextElement.height;
-      let textElementWidth = updatedTextElement.width;
+      // Editing metrics
+      const eMetrics = measureText(
+        container && updatedTextElement.containerId
+          ? wrapText(
+              updatedTextElement.originalText,
+              getFontString(updatedTextElement),
+              getBoundTextMaxWidth(container),
+            )
+          : updatedTextElement.originalText,
+        getFontString(updatedTextElement),
+        updatedTextElement.lineHeight,
+      );
+
+      let maxHeight = eMetrics.height;
+      let textElementWidth = Math.max(updatedTextElement.width, eMetrics.width);
      // Set to element height by default since that's
      // what is going to be used for unbounded text
-      const textElementHeight = updatedTextElement.height;
+      const textElementHeight = Math.max(updatedTextElement.height, maxHeight);

      if (container && updatedTextElement.containerId) {
        if (isArrowElement(container)) {
@@ -246,13 +271,35 @@ export const textWysiwyg = ({
        editable.selectionEnd = editable.value.length - diff;
      }

+      let transformWidth = updatedTextElement.width;
      if (!container) {
        maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
        textElementWidth = Math.min(textElementWidth, maxWidth);
      } else {
        textElementWidth += 0.5;
+        transformWidth += 0.5;
      }

+      // Horizontal offset in case updatedTextElement has a non-WYSIWYG subtype
+      const offWidth = container
+        ? Math.min(
+            0,
+            updatedTextElement.width - Math.min(maxWidth, eMetrics.width),
+          )
+        : Math.min(maxWidth, updatedTextElement.width) -
+          Math.min(maxWidth, eMetrics.width);
+      const offsetX =
+        textAlign === "right"
+          ? offWidth
+          : textAlign === "center"
+          ? offWidth / 2
+          : 0;
+      const { width: w, height: h } = updatedTextElement;
+      const transformOrigin =
+        updatedTextElement.width !== eMetrics.width ||
+        updatedTextElement.height !== eMetrics.height
+          ? { transformOrigin: `${w / 2}px ${h / 2}px` }
+          : {};
      let lineHeight = updatedTextElement.lineHeight;

      // In Safari the font size gets rounded off when rendering hence calculating the line height by rounding off font size
@@ -270,13 +317,15 @@ export const textWysiwyg = ({
        font: getFontString(updatedTextElement),
        // must be defined *after* font ¯\_(ツ)_/¯
        lineHeight,
-        width: `${textElementWidth}px`,
+        width: `${Math.min(textElementWidth, maxWidth)}px`,
        height: `${textElementHeight}px`,
        left: `${viewportX}px`,
        top: `${viewportY}px`,
+        ...transformOrigin,
        transform: getTransform(
-          textElementWidth,
-          textElementHeight,
+          offsetX,
+          transformWidth,
+          updatedTextElement.height,
          getTextElementAngle(updatedTextElement),
          appState,
          maxWidth,
@@ -334,6 +383,7 @@ export const textWysiwyg = ({
    whiteSpace,
    overflowWrap: "break-word",
    boxSizing: "content-box",
+    ...getEditorStyle(element),
  });
  editable.value = element.originalText;
  updateWysiwygStyle();
@@ -584,7 +634,7 @@ export const textWysiwyg = ({
    window.removeEventListener("pointerdown", onPointerDown);
    window.removeEventListener("pointerup", bindBlurEvent);
    window.removeEventListener("blur", handleSubmit);
-    window.removeEventListener("beforeunload", handleSubmit);
+
    unbindUpdate();

    editable.remove();
@@ -701,7 +751,6 @@ export const textWysiwyg = ({
    passive: false,
    capture: true,
  });
-  window.addEventListener("beforeunload", handleSubmit);
  excalidrawContainer
    ?.querySelector(".excalidraw-textEditorContainer")!
    .appendChild(editable);
@@ -65,6 +65,7 @@ type _ExcalidrawElementBase = Readonly<{
  updated: number;
  link: string | null;
  locked: boolean;
+  subtype?: string;
  customData?: Record<string, any>;
 }>;

@@ -195,7 +196,6 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
  Readonly<{
    type: "line" | "arrow";
    points: readonly Point[];
-    segmentSplitIndices: readonly number[] | null;
    lastCommittedPoint: Point | null;
    startBinding: PointBinding | null;
    endBinding: PointBinding | null;
@@ -1,47 +0,0 @@
-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/Show More
+++ b/Show More
Author	SHA1	Message	Date
Daniel J. Geiger	baf3ab7d81	[Do not review] Use MathJax 4.0.0-beta.3	2023-09-30 11:56:02 -05:00
Daniel J. Geiger	ef0fcc1537	refactor: Replace the `useSubtypes` selection hook with a generic `useSubtype` hook	2023-09-23 15:54:27 -05:00
Daniel J. Geiger	ec26aeead2	refactor: Refactor and add a test	2023-09-22 17:33:34 -05:00
Daniel J. Geiger	62f5475c4a	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax-maint-stage	2023-09-22 15:19:21 -05:00
Daniel J. Geiger	7225915b82	fix: `4d6d6cf1` had a line-height regression for sufficiently short math symbols	2023-09-22 14:34:44 -05:00
Daniel J. Geiger	8eb3191b3f	refactor: Move MathJax into `src/element/subtypes` for the `excalidraw-app` separation, maintaining lazy-loading of MathJax.	2023-09-22 14:25:15 -05:00
Daniel J. Geiger	4d6d6cf129	fix: Text-only measurements off by a pixel	2023-09-22 10:17:51 -05:00
Daniel J. Geiger	208285b7ba	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax-maint-stage	2023-09-17 15:40:45 -05:00
Daniel J. Geiger	372a4868da	chore: Only use `transform-origin` in the text editor if rendered dimensions don't match the editor dimensions.	2023-09-15 13:40:46 -05:00
Daniel J. Geiger	05800d8599	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax-maint-stage	2023-09-15 10:52:15 -05:00
Daniel J. Geiger	1f496d9f64	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax-maint-stage	2023-09-11 19:22:29 -05:00
Daniel J. Geiger	e0221ddf20	fix: Inform scenes of mutations when a subtype finishes loading.	2023-09-10 16:49:06 -05:00
Daniel J. Geiger	1bd86942f3	refactor: Simplify a file.	2023-09-10 16:47:29 -05:00
Daniel J. Geiger	fd9a172da9	refactor: Relocate a type definition.	2023-09-08 13:12:50 -05:00
Daniel J. Geiger	1f9847ed98	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax-maint-stage	2023-09-08 10:31:19 -05:00
Daniel J. Geiger	4e4802b19e	chore: Don't bundle #6050 or #5511 .	2023-09-01 14:30:52 -05:00
Daniel J. Geiger	23eb08088e	chore: Drop `@excalidraw/extensions` and move the MathJax subtype into `src/excalidraw-app/subtypes` to leave `@excalidraw/excalidraw` untouched. `@excalidraw/extensions` mostly contained boilerplate and obscured the main new features here: `ExcalidrawElement` subtypes and MathJax support.	2023-09-01 13:40:27 -05:00
Daniel J. Geiger	e8a6053251	Revert "Add a semicolon." This reverts commit `456433e8f0`.	2023-08-24 11:11:11 -05:00
Daniel J. Geiger	456433e8f0	Add a semicolon.	2023-08-24 10:35:12 -05:00
Daniel J. Geiger	38e3a4e8e1	fix: Further patch AsciiMath to work with Vite in production mode also.	2023-08-24 10:16:04 -05:00
Daniel J. Geiger	27a8cda8fd	fix: Patch AsciiMath to work with Vite. Incorporates PR mathjax/MathJax-src#854 by @masx200.	2023-08-23 11:27:12 -05:00
Daniel J. Geiger	dd5053149a	@excalidraw/extensions: Fixes for Vite.	2023-08-22 16:18:28 -05:00
Daniel J. Geiger	40ec02b280	chore: Update `@excalidraw/extensions` configs.	2023-08-22 09:54:13 -05:00
Daniel J. Geiger	b81aa19ff9	fix: Migrate `@excalidraw/extensions` environment variable names to Vite.	2023-08-22 08:51:01 -05:00
Daniel J. Geiger	e4ddd08bb1	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-08-21 16:09:37 -05:00
Daniel J. Geiger	795176b256	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-06-15 14:36:09 -05:00
Daniel J. Geiger	be057bde39	MathJax: Use `$` as LaTeX delimiters. Fall back to `\(` and `\)` if detected. Interpret `\$` as a text literal "$" sign.	2023-06-15 13:56:33 -05:00
Daniel J. Geiger	94f4b727bb	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-05-17 14:36:53 -05:00
Daniel J. Geiger	63698572db	Subtypes: add another test.	2023-04-28 13:03:03 -05:00
Daniel J. Geiger	ab3467973f	fix: No more debounced `refresh()` for subtypes.	2023-04-28 09:47:03 -05:00
Daniel J. Geiger	91fe07d9c5	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-04-26 16:43:42 -05:00
Daniel J. Geiger	28cc821047	Fix a merge lint issue	2023-04-24 15:29:55 -05:00
Daniel J. Geiger	7dc728a459	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-04-24 13:08:44 -05:00
Daniel J. Geiger	12c651af6d	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-04-20 18:52:45 -05:00
Daniel J. Geiger	9d0cafe10b	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-04-14 18:34:08 -05:00
Daniel J. Geiger	fb24221587	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-04-10 20:24:03 -05:00
Daniel J. Geiger	ef347cc685	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-04-08 09:52:03 -05:00
Daniel J. Geiger	2d3b9e0c66	fix: Properly avoid concurrent invocations of `loadMathJax()`.	2023-03-18 09:52:44 -05:00
Daniel J. Geiger	bdb0dd064b	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-03-17 11:19:18 -05:00
Daniel J. Geiger	b17ed4dc29	fix: Don't cache wrapped text before MathJax finishes loading.	2023-03-13 13:01:52 -05:00
Daniel J. Geiger	b988f67759	fix: Better legibility when editing some math elements.	2023-03-13 12:57:33 -05:00
Daniel J. Geiger	089aaa8792	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-03-13 11:33:26 -05:00
Daniel J. Geiger	28261c4b29	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-03-06 09:06:55 -06:00
Daniel J. Geiger	3fbed86d3e	Fixes for math element dimensions before/upon loading MathJax.	2023-02-27 15:32:36 -06:00
Daniel J. Geiger	38b3d90fa6	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-02-27 15:32:15 -06:00
Daniel J. Geiger	82b597ab8b	fix: Catch MathML errors and render the "ERR" block instead.	2023-02-27 14:19:06 -06:00
Daniel J. Geiger	4c939cefad	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-02-27 14:18:41 -06:00
Daniel J. Geiger	8f0d9f5230	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-02-19 16:02:22 -06:00
Daniel J. Geiger	fcde0ac3de	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-02-07 21:10:26 -06:00
Daniel J. Geiger	b07dfba4b8	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-02-03 17:49:32 -06:00
Daniel J. Geiger	1089cdb278	Refactor: Modify fewer components.	2023-02-01 21:25:04 -06:00
Daniel J. Geiger	7246a6b17a	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-02-01 17:34:12 -06:00
Daniel J. Geiger	04a96caf78	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-01-31 15:26:03 -06:00
Daniel J. Geiger	14c6ea938a	Refactor: Drop `isActionName` and convert `getCustomActions` to `filterActions`.	2023-01-28 21:27:25 -06:00
Daniel J. Geiger	87aba3f619	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-28 18:44:03 -06:00
Daniel J. Geiger	c8d4e8c421	Simplify custom Actions: universal Action predicates instead of action-specific guards.	2023-01-27 13:23:40 -06:00
Daniel J. Geiger	512e506798	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-26 17:38:48 -06:00
Daniel J. Geiger	b4e742bda0	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-01-25 16:54:14 -06:00
Daniel J. Geiger	5a3f4fd08f	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-24 19:27:05 -06:00
Daniel J. Geiger	34515f2952	Fixes.	2023-01-24 19:09:07 -06:00
Daniel J. Geiger	08f430b3ac	Fix tests.	2023-01-23 20:23:51 -06:00
Daniel J. Geiger	59e74f94e6	Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax	2023-01-17 15:12:39 -06:00
Daniel J. Geiger	ddc393bd9d	Make filtering of custom actions optional.	2023-01-08 19:30:01 -06:00
Daniel J. Geiger	9e5948ac28	Filter all context menu items (standard and custom) through `isActionEnabled`.	2023-01-08 17:37:32 -06:00
Daniel J. Geiger	f86d0f9102	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-08 17:06:23 -06:00
Daniel J. Geiger	ace031e992	Update to latest `Action` changes.	2023-01-07 15:47:19 -06:00
Daniel J. Geiger	45faf7d58f	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-07 11:58:15 -06:00
Daniel J. Geiger	8c558a0f33	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-05 11:36:23 -06:00
Daniel J. Geiger	65059cb166	Fix tests introduced by the arrow labels feature.	2023-01-02 13:30:11 -06:00
Daniel J. Geiger	9158e2d989	fix: Remove leftovers from a merge.	2023-01-02 12:48:53 -06:00
Daniel J. Geiger	12da1862a0	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2023-01-02 12:45:33 -06:00
Daniel J. Geiger	67fb3210ab	fix: Correct existing subtypes test coverage; add test coverage for subtype actions; and a subtype action fix.	2023-01-02 12:43:19 -06:00
Daniel J. Geiger	13d69d8cef	Merge remote-tracking branch 'origin/master' into danieljgeiger-mathjax	2022-12-31 16:00:26 -06:00
Daniel J. Geiger	0f6ad916c0	fix: Cache SVGs separately for mixed-text and math-only modes.	2022-12-30 10:48:47 -06:00
Daniel J. Geiger	9ee2bf36cf	Render LaTeX matrices correctly in math-only mode.	2022-12-30 10:26:46 -06:00
Daniel J. Geiger	86f5c2ebcf	feat: Support LaTeX and AsciiMath via MathJax on stem.excalidraw.com	2022-12-27 15:11:52 -06:00