Fix lint

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

.env.development

@@ -8,7 +8,7 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 VITE_APP_WS_SERVER_URL=http://localhost:3002
 
 VITE_APP_PLUS_LP=https://plus.excalidraw.com
-VITE_APP_PLUS_APP=http://localhost:3000
+VITE_APP_PLUS_APP=https://app.excalidraw.com
 
 VITE_APP_AI_BACKEND=http://localhost:3015
 
@@ -37,14 +37,3 @@ VITE_APP_COLLAPSE_OVERLAY=true
 
 # Set this flag to false to disable eslint
 VITE_APP_ENABLE_ESLINT=true
-
-# Enable PWA in dev server
-VITE_APP_ENABLE_PWA=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0
-7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij
-ba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y
-UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
-s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
-kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
-HQIDAQAB'

.env.production

@@ -15,18 +15,3 @@ VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
 VITE_APP_ENABLE_TRACKING=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApQ0jM9Qz8TdFLzcuAZZX
-/WvuKSOJxiw6AR/ZcE3eFQWM/mbFdhQgyK8eHGkKQifKzH1xUZjCxyXcxW6ZO02t
-kPOPxhz+nxUrIoWCD/V4NGmUA1lxwHuO21HN1gzKrN3xHg5EGjyouR9vibT9VDGF
-gq6+4Ic/kJX+AD2MM7Yre2+FsOdysrmuW2Fu3ahuC1uQE7pOe1j0k7auNP0y1q53
-PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
-iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
-PQIDAQAB'
-
-# Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when  running the build command
-VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
-VITE_APP_COLLAPSE_OVERLAY=false
-# Enable eslint in dev server
-VITE_APP_ENABLE_ESLINT=false
-

.eslintrc.json

@@ -3,20 +3,6 @@
   "rules": {
     "import/no-anonymous-default-export": "off",
     "no-restricted-globals": "off",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        "prefer": "type-imports",
-        "disallowTypeAnnotations": false,
-        "fixStyle": "separate-type-imports"
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "name": "jotai",
-        "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
-      }
-    ]
+    "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "type-imports", "disallowTypeAnnotations": false, "fixStyle": "separate-type-imports" }]
   }
 }

.github/workflows/locales-coverage.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 

.github/workflows/semantic-pr-title.yml

@@ -11,6 +11,6 @@ jobs:
   semantic:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@v3.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -7,7 +7,7 @@
 
 <h4 align="center">
   <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://plus.excalidraw.com/blog">Blog</a> |
+  <a href="https://blog.excalidraw.com">Blog</a> |
   <a href="https://docs.excalidraw.com">Documentation</a> |
   <a href="https://plus.excalidraw.com">Excalidraw+</a>
 </h4>

dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx

@@ -31,7 +31,7 @@ The welcome screen consists of two main groups of subcomponents:
 
 <img
   src={require("@site/static/img/welcome-screen-overview.png").default}
-  alt="Excalidraw logo: Sketch hand-drawn like diagrams."
+  alt="Excalidraw logo: Sketch handrawn like diagrams."
 />
 
 ### Center

dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx

@@ -12,7 +12,7 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";
 
 | Font Family | Description            |
 | ----------- | ---------------------- |
-| `Virgil`    | The `Hand-drawn` font |
+| `Virgil`    | The `handwritten` font |
 | `Helvetica` | The `Normal` Font      |
 | `Cascadia`  | The `Code` Font        |
 

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -3,32 +3,31 @@
 All `props` are _optional_.
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
-| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
-| [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
-| [`onChange`](#onchange) | `function` | \_ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
-| [`onPointerUpdate`](#onpointerupdate) | `function` | \_ | Callback triggered when mouse pointer is updated. |
-| [`onPointerDown`](#onpointerdown) | `function` | \_ | This prop if passed gets triggered on pointer down events |
-| [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
-| [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
-| [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`generateLinkForSelection`](#generateLinkForSelection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
-| [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
+| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | _ | Callback triggered with the excalidraw api once rendered |
+| [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
+| [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
+| [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
+| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down events |
+| [`onScrollChange`](#onscrollchange) | `function` | _ | This prop if passed gets triggered when scrolling the canvas. |
+| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when something is pasted into the scene |
+| [`onLibraryChange`](#onlibrarychange) | `function` | _ | The callback if supplied is triggered when the library is updated and receives the library items. |
+| [`onLinkOpen`](#onlinkopen) | `function` | _ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
-| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
-| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | \_ | Render function that can be used to render custom stats on the stats dialog. |
-| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | \_ | This indicates if the app is in `view` mode. |
-| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | \_ | This indicates if the `zen` mode is enabled |
-| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | \_ | This indicates if the `grid` mode is enabled |
-| [`libraryReturnUrl`](#libraryreturnurl) | `string` | \_ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
+| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
+| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
+| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
+| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
+| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |
+| [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` &#124; `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
 | [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
-| [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
+| [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
 
@@ -94,8 +93,9 @@ This callback is triggered when mouse pointer is updated.
 
 This prop if passed will be triggered on pointer down events and has the below signature.
 
+
 <pre>
-  (activeTool:{" "}
+(activeTool:{" "}
   <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L115">
     {" "}
     AppState["activeTool"]
@@ -143,14 +143,6 @@ This callback if supplied will get triggered when the library is updated and has
 
 It is invoked with empty items when user clears the library. You can use this callback when you want to do something additional when library is updated for example persisting it to local storage.
 
-### generateLinkForSelection
-
-This prop if passed will be used to replace the default link generation function. The idea is that the host app can take over the creation of element links, which can be used to navigate to a particular element or a group. If the host app chooses a different key for element link id, then the host app should also take care of the handling and the navigation in `onLinkOpen`.
-
-```tsx
-(id: string, type: "element" | "group") => string;
-```
-
 ### onLinkOpen
 
 This prop if passed will be triggered when clicked on `link`. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
@@ -215,7 +207,8 @@ This prop indicates whether the shows the grid. When supplied, the value takes p
 
 ### libraryReturnUrl
 
-If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com).  
+Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
 
 ### theme
 
@@ -227,6 +220,7 @@ You can use [`THEME`](/docs/@excalidraw/excalidraw/api/utils#theme) to specify t
 
 This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over _intialData.appState.name_, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
 
+
 ### detectScroll
 
 Indicates whether Excalidraw should listen for `scroll` event on the nearest scrollable container in the DOM tree and recompute the coordinates (e.g. to correctly handle the cursor) when the component's position changes. You can disable this when you either know this doesn't affect your app or you want to take care of it yourself (calling the [`refresh()`](#ref) method).

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -12,7 +12,7 @@ import { Excalidraw } from "@excalidraw/excalidraw";
 
 Throughout the documentation we use live, editable Excalidraw examples like the one shown below.
 
-While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.
+While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.  
 For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.
 
 :::
@@ -70,9 +70,9 @@ If you are using `pages router` then importing the wrapper dynamically would wor
       height: 141.9765625,
     },]));
     return (
-      <div style={{height:"500px", width:"500px"}}>
+      <div style={{height:"500px", width:"500px"}}>  
         <Excalidraw />
-      </div>
+      </div> 
     );
   };
   export default ExcalidrawWrapper;
@@ -84,8 +84,8 @@ If you are using `pages router` then importing the wrapper dynamically would wor
 
   ```jsx showLineNumbers
   import dynamic from "next/dynamic";
-
-  // Since client components get prerenderd on server as well hence importing
+  
+  // Since client components get prerenderd on server as well hence importing 
   // the excalidraw stuff dynamically with ssr false
 
   const ExcalidrawWrapper = dynamic(
@@ -97,7 +97,7 @@ If you are using `pages router` then importing the wrapper dynamically would wor
 
   export default function Page() {
     return (
-      <ExcalidrawWrapper />
+      <ExcalidrawWrapper />      
     );
   }
   ```
@@ -108,7 +108,7 @@ If you are using `pages router` then importing the wrapper dynamically would wor
   ```jsx showLineNumbers
   import dynamic from "next/dynamic";
 
-  // Since client components get prerenderd on server as well hence importing
+  // Since client components get prerenderd on server as well hence importing 
   // the excalidraw stuff dynamically with ssr false
 
   const ExcalidrawWrapper = dynamic(
@@ -153,7 +153,7 @@ Since Vite removes env variables by default, you can update the vite config to e
     "process.env.IS_PREACT": JSON.stringify("true"),
   },
 ```
-:::
+::: 
 
 ## Browser
 
@@ -235,5 +235,3 @@ root.render(React.createElement(App));
 
 </TabItem>
 </Tabs>
-
-You can try it out [here](https://codesandbox.io/p/sandbox/excalidraw-in-browser-tlqom?file=%2Findex.html%3A1%2C10).

dev-docs/docusaurus.config.js

@@ -66,7 +66,7 @@ const config = {
             label: "Docs",
           },
           {
-            to: "https://plus.excalidraw.com/blog",
+            to: "https://blog.excalidraw.com",
             label: "Blog",
             position: "left",
           },
@@ -111,7 +111,7 @@ const config = {
             items: [
               {
                 label: "Blog",
-                to: "https://plus.excalidraw.com/blog",
+                to: "https://blog.excalidraw.com",
               },
               {
                 label: "GitHub",

examples/excalidraw/with-nextjs/.gitignore

@@ -36,4 +36,4 @@ yarn-error.log*
 next-env.d.ts
 
 # copied assets
-public/**/*.woff2
+public/*.woff2

examples/excalidraw/with-nextjs/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
     "dev": "yarn build:workspace && next dev -p 3005",
     "build": "yarn build:workspace && next build",
     "start": "next start -p 3006",

examples/excalidraw/with-script-in-browser/.gitignore

@@ -1,2 +1,2 @@
 # copied assets
-public/**/*.woff2
+public/*.woff2

examples/excalidraw/with-script-in-browser/package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
     "start": "yarn build:workspace && vite",
     "build": "yarn build:workspace && vite build",
     "build:preview": "yarn build && vite preview --port 5002"

excalidraw-app/App.tsx

@@ -90,13 +90,9 @@ import {
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
-import {
-  Provider,
-  useAtom,
-  useAtomValue,
-  useAtomWithInitialValue,
-  appJotaiStore,
-} from "./app-jotai";
+import { Provider, useAtom, useAtomValue } from "jotai";
+import { useAtomWithInitialValue } from "../packages/excalidraw/jotai";
+import { appJotaiStore } from "./app-jotai";
 
 import "./index.scss";
 import type { ResolutionType } from "../packages/excalidraw/utility-types";
@@ -121,7 +117,7 @@ import {
   share,
   youtubeIcon,
 } from "../packages/excalidraw/components/icons";
-import { useHandleAppTheme } from "./useHandleAppTheme";
+import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
 import DebugCanvas, {
@@ -130,8 +126,8 @@ import DebugCanvas, {
   loadSavedDebugState,
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
-import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-import { isElementLink } from "../packages/excalidraw/element/elementLink";
+import type { SaveWarningRef } from "./components/SaveWarning";
+import { SaveWarning } from "./components/SaveWarning";
 
 polyfill();
 
@@ -332,10 +328,13 @@ const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const isCollabDisabled = isRunningInIframe();
 
-  const { editorTheme, appTheme, setAppTheme } = useHandleAppTheme();
+  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
+  const { editorTheme } = useHandleAppTheme();
 
   const [langCode, setLangCode] = useAppLangCode();
 
+  const activityRef = useRef<SaveWarningRef | null>(null);
+
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -620,6 +619,8 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
+    activityRef.current?.activity();
+
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -852,12 +853,6 @@ const ExcalidrawWrapper = () => {
             </div>
           );
         }}
-        onLinkOpen={(element, event) => {
-          if (element.link && isElementLink(element.link)) {
-            event.preventDefault();
-            excalidrawAPI?.scrollToContent(element.link, { animate: true });
-          }
-        }}
       >
         <AppMainMenu
           onCollabDialogOpen={onCollabDialogOpen}
@@ -867,6 +862,7 @@ const ExcalidrawWrapper = () => {
           setTheme={(theme) => setAppTheme(theme)}
           refresh={() => forceRefresh((prev) => !prev)}
         />
+        <SaveWarning ref={activityRef} />
         <AppWelcomeScreen
           onCollabDialogOpen={onCollabDialogOpen}
           isCollabEnabled={!isCollabDisabled}
@@ -1136,15 +1132,9 @@ const ExcalidrawWrapper = () => {
 };
 
 const ExcalidrawApp = () => {
-  const isCloudExportWindow =
-    window.location.pathname === "/excalidraw-plus-export";
-  if (isCloudExportWindow) {
-    return <ExcalidrawPlusIframeExport />;
-  }
-
   return (
     <TopErrorBoundary>
-      <Provider store={appJotaiStore}>
+      <Provider unstable_createStore={() => appJotaiStore}>
         <ExcalidrawWrapper />
       </Provider>
     </TopErrorBoundary>

excalidraw-app/ExcalidrawPlusIframeExport.tsx

@@ -1,222 +0,0 @@
-import { useLayoutEffect, useRef } from "react";
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
-import type {
-  FileId,
-  OrderedExcalidrawElement,
-} from "../packages/excalidraw/element/types";
-import type { AppState, BinaryFileData } from "../packages/excalidraw/types";
-import { ExcalidrawError } from "../packages/excalidraw/errors";
-import { base64urlToString } from "../packages/excalidraw/data/encode";
-
-const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
-
-const EXCALIDRAW_PLUS_ORIGIN = import.meta.env.VITE_APP_PLUS_APP;
-
-// -----------------------------------------------------------------------------
-// outgoing message
-// -----------------------------------------------------------------------------
-type MESSAGE_REQUEST_SCENE = {
-  type: "REQUEST_SCENE";
-  jwt: string;
-};
-
-type MESSAGE_FROM_PLUS = MESSAGE_REQUEST_SCENE;
-
-// incoming messages
-// -----------------------------------------------------------------------------
-type MESSAGE_READY = { type: "READY" };
-type MESSAGE_ERROR = { type: "ERROR"; message: string };
-type MESSAGE_SCENE_DATA = {
-  type: "SCENE_DATA";
-  elements: OrderedExcalidrawElement[];
-  appState: Pick<AppState, "viewBackgroundColor">;
-  files: { loadedFiles: BinaryFileData[]; erroredFiles: Map<FileId, true> };
-};
-
-type MESSAGE_FROM_EDITOR = MESSAGE_ERROR | MESSAGE_SCENE_DATA | MESSAGE_READY;
-// -----------------------------------------------------------------------------
-
-const parseSceneData = async ({
-  rawElementsString,
-  rawAppStateString,
-}: {
-  rawElementsString: string | null;
-  rawAppStateString: string | null;
-}): Promise<MESSAGE_SCENE_DATA> => {
-  if (!rawElementsString || !rawAppStateString) {
-    throw new ExcalidrawError("Elements or appstate is missing.");
-  }
-
-  try {
-    const elements = JSON.parse(
-      rawElementsString,
-    ) as OrderedExcalidrawElement[];
-
-    if (!elements.length) {
-      throw new ExcalidrawError("Scene is empty, nothing to export.");
-    }
-
-    const appState = JSON.parse(rawAppStateString) as Pick<
-      AppState,
-      "viewBackgroundColor"
-    >;
-
-    const fileIds = elements.reduce((acc, el) => {
-      if ("fileId" in el && el.fileId) {
-        acc.push(el.fileId);
-      }
-      return acc;
-    }, [] as FileId[]);
-
-    const files = await LocalData.fileStorage.getFiles(fileIds);
-
-    return {
-      type: "SCENE_DATA",
-      elements,
-      appState,
-      files,
-    };
-  } catch (error: any) {
-    throw error instanceof ExcalidrawError
-      ? error
-      : new ExcalidrawError("Failed to parse scene data.");
-  }
-};
-
-const verifyJWT = async ({
-  token,
-  publicKey,
-}: {
-  token: string;
-  publicKey: string;
-}) => {
-  try {
-    if (!publicKey) {
-      throw new ExcalidrawError("Public key is undefined");
-    }
-
-    const [header, payload, signature] = token.split(".");
-
-    if (!header || !payload || !signature) {
-      throw new ExcalidrawError("Invalid JWT format");
-    }
-
-    // JWT is using Base64URL encoding
-    const decodedPayload = base64urlToString(payload);
-    const decodedSignature = base64urlToString(signature);
-
-    const data = `${header}.${payload}`;
-    const signatureArrayBuffer = Uint8Array.from(decodedSignature, (c) =>
-      c.charCodeAt(0),
-    );
-
-    const keyData = publicKey.replace(/-----\w+ PUBLIC KEY-----/g, "");
-    const keyArrayBuffer = Uint8Array.from(atob(keyData), (c) =>
-      c.charCodeAt(0),
-    );
-
-    const key = await crypto.subtle.importKey(
-      "spki",
-      keyArrayBuffer,
-      { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
-      true,
-      ["verify"],
-    );
-
-    const isValid = await crypto.subtle.verify(
-      "RSASSA-PKCS1-v1_5",
-      key,
-      signatureArrayBuffer,
-      new TextEncoder().encode(data),
-    );
-
-    if (!isValid) {
-      throw new Error("Invalid JWT");
-    }
-
-    const parsedPayload = JSON.parse(decodedPayload);
-
-    // Check for expiration
-    const currentTime = Math.floor(Date.now() / 1000);
-    if (parsedPayload.exp && parsedPayload.exp < currentTime) {
-      throw new Error("JWT has expired");
-    }
-  } catch (error) {
-    console.error("Failed to verify JWT:", error);
-    throw new Error(error instanceof Error ? error.message : "Invalid JWT");
-  }
-};
-
-export const ExcalidrawPlusIframeExport = () => {
-  const readyRef = useRef(false);
-
-  useLayoutEffect(() => {
-    const handleMessage = async (event: MessageEvent<MESSAGE_FROM_PLUS>) => {
-      if (event.origin !== EXCALIDRAW_PLUS_ORIGIN) {
-        throw new ExcalidrawError("Invalid origin");
-      }
-
-      if (event.data.type === EVENT_REQUEST_SCENE) {
-        if (!event.data.jwt) {
-          throw new ExcalidrawError("JWT is missing");
-        }
-
-        try {
-          try {
-            await verifyJWT({
-              token: event.data.jwt,
-              publicKey: import.meta.env.VITE_APP_PLUS_EXPORT_PUBLIC_KEY,
-            });
-          } catch (error: any) {
-            console.error(`Failed to verify JWT: ${error.message}`);
-            throw new ExcalidrawError("Failed to verify JWT");
-          }
-
-          const parsedSceneData: MESSAGE_SCENE_DATA = await parseSceneData({
-            rawAppStateString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-            ),
-            rawElementsString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-            ),
-          });
-
-          event.source!.postMessage(parsedSceneData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        } catch (error) {
-          const responseData: MESSAGE_ERROR = {
-            type: "ERROR",
-            message:
-              error instanceof ExcalidrawError
-                ? error.message
-                : "Failed to export scene data",
-          };
-          event.source!.postMessage(responseData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        }
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    // so we don't send twice in StrictMode
-    if (!readyRef.current) {
-      readyRef.current = true;
-      const message: MESSAGE_FROM_EDITOR = { type: "READY" };
-      window.parent.postMessage(message, EXCALIDRAW_PLUS_ORIGIN);
-    }
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-
-  // Since this component is expected to run in a hidden iframe on Excaildraw+,
-  // it doesn't need to render anything. All the data we need is available in
-  // LocalStorage and IndexedDB. It only needs to handle the messaging between
-  // the parent window and the iframe with the relevant data.
-  return null;
-};

excalidraw-app/app-jotai.ts

@@ -1,37 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import {
-  atom,
-  Provider,
-  useAtom,
-  useAtomValue,
-  useSetAtom,
-  createStore,
-  type PrimitiveAtom,
-} from "jotai";
-import { useLayoutEffect } from "react";
+import { unstable_createStore } from "jotai";
 
-export const appJotaiStore = createStore();
-
-export { atom, Provider, useAtom, useAtomValue, useSetAtom };
-
-export const useAtomWithInitialValue = <
-  T extends unknown,
-  A extends PrimitiveAtom<T>,
->(
-  atom: A,
-  initialValue: T | (() => T),
-) => {
-  const [value, setValue] = useAtom(atom);
-
-  useLayoutEffect(() => {
-    if (typeof initialValue === "function") {
-      // @ts-ignore
-      setValue(initialValue());
-    } else {
-      setValue(initialValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [value, setValue] as const;
-};
+export const appJotaiStore = unstable_createStore();

excalidraw-app/app-language/LanguageList.tsx

@@ -1,6 +1,6 @@
+import { useSetAtom } from "jotai";
 import React from "react";
 import { useI18n, languages } from "../../packages/excalidraw/i18n";
-import { useSetAtom } from "../app-jotai";
 import { appLangCodeAtom } from "./language-state";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {

excalidraw-app/app-language/language-state.ts

@@ -1,5 +1,5 @@
+import { atom, useAtom } from "jotai";
 import { useEffect } from "react";
-import { atom, useAtom } from "../app-jotai";
 import { getPreferredLanguage, languageDetector } from "./language-detector";
 
 export const appLangCodeAtom = atom(getPreferredLanguage());

excalidraw-app/collab/Collab.tsx

@@ -1,7 +1,6 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
 import type {
-  BinaryFileData,
   ExcalidrawImperativeAPI,
   SocketId,
 } from "../../packages/excalidraw/types";
@@ -10,7 +9,6 @@ import { APP_NAME, ENV, EVENT } from "../../packages/excalidraw/constants";
 import type { ImportedDataState } from "../../packages/excalidraw/data/types";
 import type {
   ExcalidrawElement,
-  FileId,
   InitializedExcalidrawImageElement,
   OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
@@ -79,7 +77,8 @@ import { newElementWith } from "../../packages/excalidraw/element/mutateElement"
 import { decryptData } from "../../packages/excalidraw/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
-import { appJotaiStore, atom } from "../app-jotai";
+import { atom } from "jotai";
+import { appJotaiStore } from "../app-jotai";
 import type { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
 import { getVisibleSceneBounds } from "../../packages/excalidraw/element/bounds";
 import { withBatchedUpdates } from "../../packages/excalidraw/reactUtils";
@@ -158,7 +157,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
           throw new AbortError();
         }
 
-        const { savedFiles, erroredFiles } = await saveFilesToFirebase({
+        return saveFilesToFirebase({
           prefix: `${FIREBASE_STORAGE_PREFIXES.collabFiles}/${roomId}`,
           files: await encodeFilesForUpload({
             files: addedFiles,
@@ -166,29 +165,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
             maxBytes: FILE_UPLOAD_MAX_BYTES,
           }),
         });
-
-        return {
-          savedFiles: savedFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-          erroredFiles: erroredFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-        };
       },
     });
     this.excalidrawAPI = props.excalidrawAPI;
@@ -418,7 +394,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       .filter((element) => {
         return (
           isInitializedImageElement(element) &&
-          !this.fileManager.isFileTracked(element.fileId) &&
+          !this.fileManager.isFileHandled(element.fileId) &&
           !element.isDeleted &&
           (opts.forceFetchFiles
             ? element.status !== "pending" ||

excalidraw-app/collab/CollabError.tsx

@@ -2,9 +2,9 @@ import { Tooltip } from "../../packages/excalidraw/components/Tooltip";
 import { warning } from "../../packages/excalidraw/components/icons";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
-import { atom } from "../app-jotai";
 
 import "./CollabError.scss";
+import { atom } from "jotai";
 
 type ErrorIndicator = {
   message: string | null;

excalidraw-app/components/EncryptedIcon.tsx

@@ -8,7 +8,7 @@ export const EncryptedIcon = () => {
   return (
     <a
       className="encrypted-icon tooltip"
-      href="https://plus.excalidraw.com/blog/end-to-end-encryption"
+      href="https://blog.excalidraw.com/end-to-end-encryption/"
       target="_blank"
       rel="noopener noreferrer"
       aria-label={t("encrypted.link")}

excalidraw-app/components/SaveWarning.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { t } from "../../packages/excalidraw/i18n";
+import { getShortcutKey } from "../../packages/excalidraw/utils";
+
+export type SaveWarningRef = {
+  activity: () => Promise<void>;
+};
+
+export const SaveWarning = forwardRef<SaveWarningRef, {}>((props, ref) => {
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * Call this API method via the ref to hide warning message
+     * and start an idle timer again.
+     */
+    activity: async () => {
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+        dialogRef.current?.classList.remove("animate");
+      }
+
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        dialogRef.current?.classList.add("animate");
+      }, 5000);
+    },
+  }));
+
+  return (
+    <div ref={dialogRef} className="alert-save">
+      <div className="dialog">
+        {t("alerts.saveYourContent", {
+          shortcut: getShortcutKey("CtrlOrCmd + S"),
+        })}
+      </div>
+    </div>
+  );
+});

excalidraw-app/data/FileManager.ts

@@ -16,26 +16,14 @@ import type {
   BinaryFiles,
 } from "../../packages/excalidraw/types";
 
-type FileVersion = Required<BinaryFileData>["version"];
-
 export class FileManager {
   /** files being fetched */
   private fetchingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
-  private erroredFiles_fetch = new Map<
-    ExcalidrawImageElement["fileId"],
-    true
-  >();
   /** files being saved */
-  private savingFiles = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
   /* files already saved to persistent storage */
-  private savedFiles = new Map<ExcalidrawImageElement["fileId"], FileVersion>();
-  private erroredFiles_save = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savedFiles = new Map<ExcalidrawImageElement["fileId"], true>();
+  private erroredFiles = new Map<ExcalidrawImageElement["fileId"], true>();
 
   private _getFiles;
   private _saveFiles;
@@ -49,8 +37,8 @@ export class FileManager {
       erroredFiles: Map<FileId, true>;
     }>;
     saveFiles: (data: { addedFiles: Map<FileId, BinaryFileData> }) => Promise<{
-      savedFiles: Map<FileId, BinaryFileData>;
-      erroredFiles: Map<FileId, BinaryFileData>;
+      savedFiles: Map<FileId, true>;
+      erroredFiles: Map<FileId, true>;
     }>;
   }) {
     this._getFiles = getFiles;
@@ -58,28 +46,19 @@ export class FileManager {
   }
 
   /**
-   * returns whether file is saved/errored, or being processed
+   * returns whether file is already saved or being processed
    */
-  isFileTracked = (id: FileId) => {
+  isFileHandled = (id: FileId) => {
     return (
       this.savedFiles.has(id) ||
-      this.savingFiles.has(id) ||
       this.fetchingFiles.has(id) ||
-      this.erroredFiles_fetch.has(id) ||
-      this.erroredFiles_save.has(id)
+      this.savingFiles.has(id) ||
+      this.erroredFiles.has(id)
     );
   };
 
-  isFileSavedOrBeingSaved = (file: BinaryFileData) => {
-    const fileVersion = this.getFileVersion(file);
-    return (
-      this.savedFiles.get(file.id) === fileVersion ||
-      this.savingFiles.get(file.id) === fileVersion
-    );
-  };
-
-  getFileVersion = (file: BinaryFileData) => {
-    return file.version ?? 1;
+  isFileSaved = (id: FileId) => {
+    return this.savedFiles.has(id);
   };
 
   saveFiles = async ({
@@ -92,16 +71,13 @@ export class FileManager {
     const addedFiles: Map<FileId, BinaryFileData> = new Map();
 
     for (const element of elements) {
-      const fileData =
-        isInitializedImageElement(element) && files[element.fileId];
-
       if (
-        fileData &&
-        // NOTE if errored during save, won't retry due to this check
-        !this.isFileSavedOrBeingSaved(fileData)
+        isInitializedImageElement(element) &&
+        files[element.fileId] &&
+        !this.isFileHandled(element.fileId)
       ) {
         addedFiles.set(element.fileId, files[element.fileId]);
-        this.savingFiles.set(element.fileId, this.getFileVersion(fileData));
+        this.savingFiles.set(element.fileId, true);
       }
     }
 
@@ -110,12 +86,8 @@ export class FileManager {
         addedFiles,
       });
 
-      for (const [fileId, fileData] of savedFiles) {
-        this.savedFiles.set(fileId, this.getFileVersion(fileData));
-      }
-
-      for (const [fileId, fileData] of erroredFiles) {
-        this.erroredFiles_save.set(fileId, this.getFileVersion(fileData));
+      for (const [fileId] of savedFiles) {
+        this.savedFiles.set(fileId, true);
       }
 
       return {
@@ -149,10 +121,10 @@ export class FileManager {
       const { loadedFiles, erroredFiles } = await this._getFiles(ids);
 
       for (const file of loadedFiles) {
-        this.savedFiles.set(file.id, this.getFileVersion(file));
+        this.savedFiles.set(file.id, true);
       }
       for (const [fileId] of erroredFiles) {
-        this.erroredFiles_fetch.set(fileId, true);
+        this.erroredFiles.set(fileId, true);
       }
 
       return { loadedFiles, erroredFiles };
@@ -188,7 +160,7 @@ export class FileManager {
   ): element is InitializedExcalidrawImageElement => {
     return (
       isInitializedImageElement(element) &&
-      this.savedFiles.has(element.fileId) &&
+      this.isFileSaved(element.fileId) &&
       element.status === "pending"
     );
   };
@@ -197,8 +169,7 @@ export class FileManager {
     this.fetchingFiles.clear();
     this.savingFiles.clear();
     this.savedFiles.clear();
-    this.erroredFiles_fetch.clear();
-    this.erroredFiles_save.clear();
+    this.erroredFiles.clear();
   }
 }
 

excalidraw-app/data/LocalData.ts

@@ -183,8 +183,8 @@ export class LocalData {
       );
     },
     async saveFiles({ addedFiles }) {
-      const savedFiles = new Map<FileId, BinaryFileData>();
-      const erroredFiles = new Map<FileId, BinaryFileData>();
+      const savedFiles = new Map<FileId, true>();
+      const erroredFiles = new Map<FileId, true>();
 
       // before we use `storage` event synchronization, let's update the flag
       // optimistically. Hopefully nothing fails, and an IDB read executed
@@ -195,10 +195,10 @@ export class LocalData {
         [...addedFiles].map(async ([id, fileData]) => {
           try {
             await set(id, fileData, filesStore);
-            savedFiles.set(id, fileData);
+            savedFiles.set(id, true);
           } catch (error: any) {
             console.error(error);
-            erroredFiles.set(id, fileData);
+            erroredFiles.set(id, true);
           }
         }),
       );

excalidraw-app/data/firebase.ts

@@ -177,8 +177,8 @@ export const saveFilesToFirebase = async ({
 }) => {
   const firebase = await loadFirebaseStorage();
 
-  const erroredFiles: FileId[] = [];
-  const savedFiles: FileId[] = [];
+  const erroredFiles = new Map<FileId, true>();
+  const savedFiles = new Map<FileId, true>();
 
   await Promise.all(
     files.map(async ({ id, buffer }) => {
@@ -194,9 +194,9 @@ export const saveFilesToFirebase = async ({
               cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`,
             },
           );
-        savedFiles.push(id);
+        savedFiles.set(id, true);
       } catch (error: any) {
-        erroredFiles.push(id);
+        erroredFiles.set(id, true);
       }
     }),
   );

excalidraw-app/index.html

@@ -54,7 +54,11 @@
       content="https://excalidraw.com/og-image-3.png"
     />
 
-    <link rel="canonical" href="https://excalidraw.com" />
+    <!-- General tags -->
+    <meta
+      name="description"
+      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
+    />
 
     <!------------------------------------------------------------------------->
     <!--   to minimize white flash on load when user has dark mode enabled   -->
@@ -120,19 +124,28 @@
     <!-- Following placeholder is replaced during the build step -->
     <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
 
-    <!-- Register Assistant as the UI font, before the scene inits -->
-    <link
-      rel="stylesheet"
-      href="../packages/excalidraw/fonts/fonts.css"
-      type="text/css"
-    />
-
     <% } else { %>
     <script>
       window.EXCALIDRAW_ASSET_PATH = window.origin;
     </script>
     <% } %>
 
+    <!-- For Nunito only preload the latin range, which should be good enough for now -->
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <!-- Register Assistant as the UI font, before the scene inits -->
+    <link
+      rel="stylesheet"
+      href="../packages/excalidraw/fonts/assets/fonts.css"
+      type="text/css"
+    />
+
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -214,7 +227,6 @@
     </header>
     <div id="root"></div>
     <script type="module" src="index.tsx"></script>
-    <% if (typeof PROD != 'undefined' && PROD == true) { %>
     <!-- 100% privacy friendly analytics -->
     <script>
       // need to load this script dynamically bcs. of iframe embed tracking
@@ -247,6 +259,5 @@
       }
     </script>
     <!-- end LEGACY GOOGLE ANALYTICS -->
-    <% } %>
   </body>
 </html>

excalidraw-app/index.scss

@@ -18,6 +18,43 @@
     margin-inline-start: auto;
   }
 
+  .alert-save {
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    right: 0;
+    bottom: 10vh;
+    margin-inline: auto;
+    width: fit-content;
+
+    opacity: 0;
+    transition: all 0s;
+
+    &.animate {
+      opacity: 1;
+      transition: all 0.2s ease-in;
+    }
+
+    .dialog {
+      margin-inline: 10px;
+      padding: 1rem;
+      padding-inline: 1.25rem;
+
+      resize: none;
+      white-space: pre-wrap;
+      box-sizing: border-box;
+
+      background-color: var(--color-warning);
+      border-radius: var(--border-radius-md);
+      border: 1px solid var(--dialog-border-color);
+
+      font-size: 0.875rem;
+      text-align: center;
+      line-height: 1.5;
+      color: var(--color-text-warning);
+    }
+  }
+
   .encrypted-icon {
     border-radius: var(--space-factor);
     color: var(--color-primary);

excalidraw-app/package.json

@@ -23,20 +23,20 @@
     ]
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": ">=18.0.0"
   },
   "dependencies": {
+    "firebase": "8.3.3",
+    "idb-keyval": "6.0.3",
+    "jotai": "1.13.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vite-plugin-html": "3.2.2",
     "@excalidraw/random-username": "1.0.0",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
-    "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
-    "idb-keyval": "6.0.3",
-    "jotai": "2.11.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "socket.io-client": "4.7.2",
-    "vite-plugin-html": "3.2.2"
+    "socket.io-client": "4.7.2"
   },
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
@@ -49,8 +49,5 @@
     "start:production": "yarn build && yarn serve",
     "serve": "npx http-server build -a localhost -p 5001 -o",
     "build:preview": "yarn build && vite preview --port 5000"
-  },
-  "devDependencies": {
-    "vite-plugin-sitemap": "0.7.1"
   }
 }

excalidraw-app/share/ShareDialog.tsx

@@ -18,11 +18,11 @@ import { TextField } from "../../packages/excalidraw/components/TextField";
 import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
 import type { CollabAPI } from "../collab/Collab";
 import { activeRoomLinkAtom } from "../collab/Collab";
-import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
-import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";
-import { atom, useAtom, useAtomValue } from "../app-jotai";
+import { atom, useAtom, useAtomValue } from "jotai";
 
 import "./ShareDialog.scss";
+import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
+import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";
 
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";

excalidraw-app/useHandleAppTheme.ts

@@ -1,3 +1,4 @@
+import { atom, useAtom } from "jotai";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { THEME } from "../packages/excalidraw";
 import { EVENT } from "../packages/excalidraw/constants";
@@ -5,18 +6,18 @@ import type { Theme } from "../packages/excalidraw/element/types";
 import { CODES, KEYS } from "../packages/excalidraw/keys";
 import { STORAGE_KEYS } from "./app_constants";
 
+export const appThemeAtom = atom<Theme | "system">(
+  (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
+    | Theme
+    | "system"
+    | null) || THEME.LIGHT,
+);
+
 const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>
   window.matchMedia?.("(prefers-color-scheme: dark)");
 
 export const useHandleAppTheme = () => {
-  const [appTheme, setAppTheme] = useState<Theme | "system">(() => {
-    return (
-      (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
-        | Theme
-        | "system"
-        | null) || THEME.LIGHT
-    );
-  });
+  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
   const [editorTheme, setEditorTheme] = useState<Theme>(THEME.LIGHT);
 
   useEffect(() => {
@@ -65,5 +66,5 @@ export const useHandleAppTheme = () => {
     }
   }, [appTheme]);
 
-  return { editorTheme, appTheme, setAppTheme };
+  return { editorTheme };
 };

excalidraw-app/vite-env.d.ts

@@ -29,9 +29,6 @@ interface ImportMetaEnv {
   // Enable eslint in dev server
   VITE_APP_ENABLE_ESLINT: string;
 
-  // Enable PWA in dev server
-  VITE_APP_ENABLE_PWA: string;
-
   VITE_APP_PLUS_LP: string;
 
   VITE_APP_PLUS_APP: string;

excalidraw-app/vite.config.mts

@@ -5,237 +5,215 @@ import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import { createHtmlPlugin } from "vite-plugin-html";
-import Sitemap from "vite-plugin-sitemap";
 import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
 
-export default defineConfig(({ mode }) => {
-  // To load .env variables
-  const envVars = loadEnv(mode, `../`);
-  // https://vitejs.dev/config/
-  return {
-    server: {
-      port: Number(envVars.VITE_APP_PORT || 3000),
-      // open the browser
-      open: true,
-    },
-    // We need to specify the envDir since now there are no
-    //more located in parallel with the vite.config.ts file but in parent dir
-    envDir: "../",
-    build: {
-      outDir: "build",
-      rollupOptions: {
-        output: {
-          assetFileNames(chunkInfo) {
-            if (chunkInfo?.name?.endsWith(".woff2")) {
-              const family = chunkInfo.name.split("-")[0];
-              return `fonts/${family}/[name][extname]`;
-            }
+// To load .env.local variables
+const envVars = loadEnv("", `../`);
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: Number(envVars.VITE_APP_PORT || 3000),
+    // open the browser
+    open: true,
+  },
+  // We need to specify the envDir since now there are no
+  //more located in parallel with the vite.config.ts file but in parent dir
+  envDir: "../",
+  build: {
+    outDir: "build",
+    rollupOptions: {
+      output: {
+        assetFileNames(chunkInfo) {
+          if (chunkInfo?.name?.endsWith(".woff2")) {
+            // put on root so we are flexible about the CDN path
+            return "[name]-[hash][extname]";
+          }
 
-            return "assets/[name]-[hash][extname]";
-          },
-          // Creating separate chunk for locales except for en and percentages.json so they
-          // can be cached at runtime and not merged with
-          // app precache. en.json and percentages.json are needed for first load
-          // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
-          manualChunks(id) {
-            if (
-              id.includes("packages/excalidraw/locales") &&
-              id.match(/en.json|percentages.json/) === null
-            ) {
-              const index = id.indexOf("locales/");
-              // Taking the substring after "locales/"
-              return `locales/${id.substring(index + 8)}`;
-            }
-          },
+          return "assets/[name]-[hash][extname]";
+        },
+        // Creating separate chunk for locales except for en and percentages.json so they
+        // can be cached at runtime and not merged with
+        // app precache. en.json and percentages.json are needed for first load
+        // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
+        manualChunks(id) {
+          if (
+            id.includes("packages/excalidraw/locales") &&
+            id.match(/en.json|percentages.json/) === null
+          ) {
+            const index = id.indexOf("locales/");
+            // Taking the substring after "locales/"
+            return `locales/${id.substring(index + 8)}`;
+          }
         },
       },
-      sourcemap: true,
-      // don't auto-inline small assets (i.e. fonts hosted on CDN)
-      assetsInlineLimit: 0,
     },
-    plugins: [
-      Sitemap({
-        hostname: "https://excalidraw.com",
-        outDir: "build",
-        changefreq: "monthly",
-        // its static in public folder
-        generateRobotsTxt: false,
-      }),
-      woff2BrowserPlugin(),
-      react(),
-      checker({
-        typescript: true,
-        eslint:
-          envVars.VITE_APP_ENABLE_ESLINT === "false"
-            ? undefined
-            : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
-        overlay: {
-          initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
-          badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
-        },
-      }),
-      svgrPlugin(),
-      ViteEjsPlugin(),
-      VitePWA({
-        registerType: "autoUpdate",
-        devOptions: {
-          /* set this flag to true to enable in Development mode */
-          enabled: envVars.VITE_APP_ENABLE_PWA === "true",
-        },
+    sourcemap: true,
+  },
+  plugins: [
+    woff2BrowserPlugin(),
+    react(),
+    checker({
+      typescript: true,
+      eslint:
+        envVars.VITE_APP_ENABLE_ESLINT === "false"
+          ? undefined
+          : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
+      overlay: {
+        initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
+        badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
+      },
+    }),
+    svgrPlugin(),
+    ViteEjsPlugin(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        /* set this flag to true to enable in Development mode */
+        enabled: false,
+      },
 
-        workbox: {
-          // don't precache fonts, locales and separate chunks
-          globIgnores: [
-            "fonts.css",
-            "**/locales/**",
-            "service-worker.js",
-            "**/*.chunk-*.js",
-          ],
-          runtimeCaching: [
-            {
-              urlPattern: new RegExp(".+.woff2"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 1000,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
-                },
-                cacheableResponse: {
-                  // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
-                  statuses: [0, 200],
-                },
+      workbox: {
+        // Don't push fonts, locales and wasm to app precache
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js", "**/*.wasm-*.js"],
+        runtimeCaching: [
+          {
+            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
               },
             },
-            {
-              urlPattern: new RegExp("fonts.css"),
-              handler: "StaleWhileRevalidate",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 50,
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp("locales/[^/]+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "locales",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp(".chunk-.+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "chunk",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-                },
-              },
-            },
-          ],
-        },
-        manifest: {
-          short_name: "Excalidraw",
-          name: "Excalidraw",
-          description:
-            "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
-          icons: [
-            {
-              src: "android-chrome-192x192.png",
-              sizes: "192x192",
-              type: "image/png",
-            },
-            {
-              src: "apple-touch-icon.png",
-              type: "image/png",
-              sizes: "180x180",
-            },
-            {
-              src: "favicon-32x32.png",
-              sizes: "32x32",
-              type: "image/png",
-            },
-            {
-              src: "favicon-16x16.png",
-              sizes: "16x16",
-              type: "image/png",
-            },
-          ],
-          start_url: "/",
-          id:"excalidraw",
-          display: "standalone",
-          theme_color: "#121212",
-          background_color: "#ffffff",
-          file_handlers: [
-            {
-              action: "/",
-              accept: {
-                "application/vnd.excalidraw+json": [".excalidraw"],
-              },
-            },
-          ],
-          share_target: {
-            action: "/web-share-target",
-            method: "POST",
-            enctype: "multipart/form-data",
-            params: {
-              files: [
-                {
-                  name: "file",
-                  accept: [
-                    "application/vnd.excalidraw+json",
-                    "application/json",
-                    ".excalidraw",
-                  ],
-                },
-              ],
-            },
           },
-          screenshots: [
-            {
-              src: "/screenshots/virtual-whiteboard.png",
-              type: "image/png",
-              sizes: "462x945",
+          {
+            urlPattern: new RegExp("fonts.css"),
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+              },
             },
-            {
-              src: "/screenshots/wireframe.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp("locales/[^/]+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "locales",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
+              },
             },
-            {
-              src: "/screenshots/illustration.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp(".wasm-.+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "wasm",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
+              },
             },
-            {
-              src: "/screenshots/shapes.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+        ],
+      },
+      manifest: {
+        short_name: "Excalidraw",
+        name: "Excalidraw",
+        description:
+          "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
+        icons: [
+          {
+            src: "android-chrome-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "apple-touch-icon.png",
+            type: "image/png",
+            sizes: "180x180",
+          },
+          {
+            src: "favicon-32x32.png",
+            sizes: "32x32",
+            type: "image/png",
+          },
+          {
+            src: "favicon-16x16.png",
+            sizes: "16x16",
+            type: "image/png",
+          },
+        ],
+        start_url: "/",
+        display: "standalone",
+        theme_color: "#121212",
+        background_color: "#ffffff",
+        file_handlers: [
+          {
+            action: "/",
+            accept: {
+              "application/vnd.excalidraw+json": [".excalidraw"],
             },
-            {
-              src: "/screenshots/collaboration.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-            {
-              src: "/screenshots/export.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-          ],
+          },
+        ],
+        share_target: {
+          action: "/web-share-target",
+          method: "POST",
+          enctype: "multipart/form-data",
+          params: {
+            files: [
+              {
+                name: "file",
+                accept: [
+                  "application/vnd.excalidraw+json",
+                  "application/json",
+                  ".excalidraw",
+                ],
+              },
+            ],
+          },
         },
-      }),
-      createHtmlPlugin({
-        minify: true,
-      }),
-    ],
-    publicDir: "../public",
-  };
+        screenshots: [
+          {
+            src: "/screenshots/virtual-whiteboard.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/wireframe.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/illustration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/shapes.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/collaboration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/export.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+        ],
+      },
+    }),
+    createHtmlPlugin({
+      minify: true,
+    }),
+  ],
+  publicDir: "../public",
 });

package.json

@@ -45,7 +45,7 @@
     "vitest-canvas-mock": "0.3.3"
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": "18.0.0 - 20.x.x"
   },
   "homepage": ".",
   "prettier": "@excalidraw/prettier-config",
@@ -55,9 +55,15 @@
     "build:app": "yarn --cwd ./excalidraw-app build:app",
     "build:version": "yarn --cwd ./excalidraw-app build:version",
     "build": "yarn --cwd ./excalidraw-app build",
-    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
+    "fix:code": "yarn test:code --fix",
+    "fix:other": "yarn prettier --write",
+    "fix": "yarn fix:other && yarn fix:code",
+    "locales-coverage": "node scripts/build-locales-coverage.js",
+    "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "prepare": "husky install",
+    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "yarn --cwd ./excalidraw-app start",
-    "start:production": "yarn --cwd ./excalidraw-app start:production",
+    "start:app:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
     "test:app": "vitest",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
@@ -68,15 +74,9 @@
     "test:coverage": "vitest --coverage",
     "test:coverage:watch": "vitest --coverage --watch",
     "test:ui": "yarn test --ui --coverage.enabled=true",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
-    "locales-coverage": "node scripts/build-locales-coverage.js",
-    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "prepare": "husky install",
-    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
+    "build:preview": "yarn build && vite preview --port 5000",
     "release:excalidraw": "node scripts/release.js",
     "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/*/{build,dist}",
     "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",

packages/excalidraw/CHANGELOG.md

@@ -15,10 +15,6 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Added hand-drawn font for Chinese, Japanese and Korean (CJK) as a fallback for Excalifont. Improved overal text wrapping algorithm, not only accounting for CJK, but covering various edge cases with white spaces and text-align center/right. Added support for multi-codepoint emojis wrapping. Offloaded SVG export to Web Workers, with an automatic fallback to the main thread if not supported or not desired.[#8530](https://github.com/excalidraw/excalidraw/pull/8530)
-
-- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
-
 - `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
 
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)

packages/excalidraw/actions/actionAlign.tsx

@@ -21,8 +21,10 @@ import type { AppClassProperties, AppState, UIAppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
-export const alignActionsPredicate = (
+const alignActionsPredicate = (
+  elements: readonly ExcalidrawElement[],
   appState: UIAppState,
+  _: unknown,
   app: AppClassProperties,
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
@@ -46,7 +48,6 @@ const alignSelectedElements = (
     selectedElements,
     elementsMap,
     alignment,
-    app.scene,
   );
 
   const updatedElementsMap = arrayToMap(updatedElements);
@@ -63,8 +64,7 @@ export const actionAlignTop = register({
   label: "labels.alignTop",
   icon: AlignTopIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -79,7 +79,7 @@ export const actionAlignTop = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignTopIcon}
       onClick={() => updateData(null)}
@@ -97,8 +97,7 @@ export const actionAlignBottom = register({
   label: "labels.alignBottom",
   icon: AlignBottomIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -113,7 +112,7 @@ export const actionAlignBottom = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignBottomIcon}
       onClick={() => updateData(null)}
@@ -131,8 +130,7 @@ export const actionAlignLeft = register({
   label: "labels.alignLeft",
   icon: AlignLeftIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -147,7 +145,7 @@ export const actionAlignLeft = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignLeftIcon}
       onClick={() => updateData(null)}
@@ -165,8 +163,7 @@ export const actionAlignRight = register({
   label: "labels.alignRight",
   icon: AlignRightIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -181,7 +178,7 @@ export const actionAlignRight = register({
     event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={AlignRightIcon}
       onClick={() => updateData(null)}
@@ -199,8 +196,7 @@ export const actionAlignVerticallyCentered = register({
   label: "labels.centerVertically",
   icon: CenterVerticallyIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -213,7 +209,7 @@ export const actionAlignVerticallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterVerticallyIcon}
       onClick={() => updateData(null)}
@@ -229,8 +225,7 @@ export const actionAlignHorizontallyCentered = register({
   label: "labels.centerHorizontally",
   icon: CenterHorizontallyIcon,
   trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
     return {
       appState,
@@ -243,7 +238,7 @@ export const actionAlignHorizontallyCentered = register({
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
     <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
       type="button"
       icon={CenterHorizontallyIcon}
       onClick={() => updateData(null)}

packages/excalidraw/actions/actionCanvas.tsx

@@ -87,8 +87,7 @@ export const actionClearCanvas = register({
   predicate: (elements, appState, props, app) => {
     return (
       !!app.props.UIOptions.canvasActions.clearCanvas &&
-      !appState.viewModeEnabled &&
-      appState.openDialog?.name !== "elementLinkSelector"
+      !appState.viewModeEnabled
     );
   },
   perform: (elements, appState, _, app) => {

packages/excalidraw/actions/actionClipboard.tsx

@@ -147,32 +147,14 @@ export const actionCopyAsSvg = register({
           name: app.getName(),
         },
       );
-
-      const selectedElements = app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      });
-
       return {
-        appState: {
-          toast: {
-            message: t("toast.copyToClipboardAsSvg", {
-              exportSelection: selectedElements.length
-                ? t("toast.selection")
-                : t("toast.canvas"),
-              exportColorScheme: appState.exportWithDarkMode
-                ? t("buttons.darkMode")
-                : t("buttons.lightMode"),
-            }),
-          },
-        },
         storeAction: StoreAction.NONE,
       };
     } catch (error: any) {
       console.error(error);
       return {
         appState: {
+          ...appState,
           errorMessage: error.message,
         },
         storeAction: StoreAction.NONE,

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,55 +0,0 @@
-import { register } from "./register";
-import { cropIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { isImageElement } from "../element/typeChecks";
-import type { ExcalidrawImageElement } from "../element/types";
-
-export const actionToggleCropEditor = register({
-  name: "cropEditor",
-  label: "helpDialog.cropStart",
-  icon: cropIcon,
-  viewMode: true,
-  trackEvent: { category: "menu" },
-  keywords: ["image", "crop"],
-  perform(elements, appState, _, app) {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    })[0] as ExcalidrawImageElement;
-
-    return {
-      appState: {
-        ...appState,
-        isCropping: false,
-        croppingElementId: selectedElement.id,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    if (
-      !appState.croppingElementId &&
-      selectedElements.length === 1 &&
-      isImageElement(selectedElements[0])
-    ) {
-      return true;
-    }
-    return false;
-  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const label = t("helpDialog.cropStart");
-
-    return (
-      <ToolButton
-        type="button"
-        icon={cropIcon}
-        title={label}
-        aria-label={label}
-        onClick={() => updateData(null)}
-      />
-    );
-  },
-});

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -7,7 +7,7 @@ import { getNonDeletedElements } from "../element";
 import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState } from "../types";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
+import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import {
@@ -18,12 +18,14 @@ import {
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 import { StoreAction } from "../store";
+import { mutateElbowArrow } from "../element/routing";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   app: AppClassProperties,
 ) => {
+  const elementsMap = app.scene.getNonDeletedElementsMap();
   const framesToBeDeleted = new Set(
     getSelectedElements(
       elements.filter((el) => isFrameLikeElement(el)),
@@ -31,99 +33,48 @@ const deleteSelectedElements = (
     ).map((el) => el.id),
   );
 
-  const selectedElementIds: Record<ExcalidrawElement["id"], true> = {};
-
-  let shouldSelectEditingGroup = true;
-
-  const nextElements = elements.map((el) => {
-    if (appState.selectedElementIds[el.id]) {
-      if (el.boundElements) {
-        el.boundElements.forEach((candidate) => {
-          const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
-          if (bound && isElbowArrow(bound)) {
-            mutateElement(bound, {
-              startBinding:
-                el.id === bound.startBinding?.elementId
-                  ? null
-                  : bound.startBinding,
-              endBinding:
-                el.id === bound.endBinding?.elementId ? null : bound.endBinding,
-            });
-            mutateElement(bound, { points: bound.points });
-          }
-        });
-      }
-      return newElementWith(el, { isDeleted: true });
-    }
-
-    // if deleting a frame, remove the children from it and select them
-    if (el.frameId && framesToBeDeleted.has(el.frameId)) {
-      shouldSelectEditingGroup = false;
-      selectedElementIds[el.id] = true;
-      return newElementWith(el, { frameId: null });
-    }
-
-    if (isBoundToContainer(el) && appState.selectedElementIds[el.containerId]) {
-      return newElementWith(el, { isDeleted: true });
-    }
-    return el;
-  });
-
-  let nextEditingGroupId = appState.editingGroupId;
-
-  // select next eligible element in currently editing group or supergroup
-  if (shouldSelectEditingGroup && appState.editingGroupId) {
-    const elems = getElementsInGroup(
-      nextElements,
-      appState.editingGroupId,
-    ).filter((el) => !el.isDeleted);
-    if (elems.length > 1) {
-      if (elems[0]) {
-        selectedElementIds[elems[0].id] = true;
-      }
-    } else {
-      nextEditingGroupId = null;
-      if (elems[0]) {
-        selectedElementIds[elems[0].id] = true;
-      }
-
-      const lastElementInGroup = elems[0];
-      if (lastElementInGroup) {
-        const editingGroupIdx = lastElementInGroup.groupIds.findIndex(
-          (groupId) => {
-            return groupId === appState.editingGroupId;
-          },
-        );
-        const superGroupId = lastElementInGroup.groupIds[editingGroupIdx + 1];
-        if (superGroupId) {
-          const elems = getElementsInGroup(nextElements, superGroupId).filter(
-            (el) => !el.isDeleted,
-          );
-          if (elems.length > 1) {
-            nextEditingGroupId = superGroupId;
-
-            elems.forEach((el) => {
-              selectedElementIds[el.id] = true;
-            });
-          }
-        }
-      }
-    }
-  }
-
   return {
-    elements: nextElements,
+    elements: elements.map((el) => {
+      if (appState.selectedElementIds[el.id]) {
+        if (el.boundElements) {
+          el.boundElements.forEach((candidate) => {
+            const bound = app.scene
+              .getNonDeletedElementsMap()
+              .get(candidate.id);
+            if (bound && isElbowArrow(bound)) {
+              mutateElement(bound, {
+                startBinding:
+                  el.id === bound.startBinding?.elementId
+                    ? null
+                    : bound.startBinding,
+                endBinding:
+                  el.id === bound.endBinding?.elementId
+                    ? null
+                    : bound.endBinding,
+              });
+              mutateElbowArrow(bound, elementsMap, bound.points);
+            }
+          });
+        }
+        return newElementWith(el, { isDeleted: true });
+      }
+
+      if (el.frameId && framesToBeDeleted.has(el.frameId)) {
+        return newElementWith(el, { isDeleted: true });
+      }
+
+      if (
+        isBoundToContainer(el) &&
+        appState.selectedElementIds[el.containerId]
+      ) {
+        return newElementWith(el, { isDeleted: true });
+      }
+      return el;
+    }),
     appState: {
       ...appState,
-      ...selectGroupsForSelectedElements(
-        {
-          selectedElementIds,
-          editingGroupId: nextEditingGroupId,
-        },
-        nextElements,
-        appState,
-        null,
-      ),
+      selectedElementIds: {},
+      selectedGroupIds: {},
     },
   };
 };
@@ -206,7 +157,11 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        element,
+        selectedPointsIndices,
+        elementsMap,
+      );
 
       return {
         elements,

packages/excalidraw/actions/actionElementLink.ts

@@ -1,105 +0,0 @@
-import { copyTextToSystemClipboard } from "../clipboard";
-import { copyIcon, elementLinkIcon } from "../components/icons";
-import {
-  canCreateLinkFromElements,
-  defaultGetElementLinkFromSelection,
-  getLinkIdAndTypeFromSelection,
-} from "../element/elementLink";
-import { t } from "../i18n";
-import { getSelectedElements } from "../scene";
-import { StoreAction } from "../store";
-import { register } from "./register";
-
-export const actionCopyElementLink = register({
-  name: "copyElementLink",
-  label: "labels.copyElementLink",
-  icon: copyIcon,
-  trackEvent: { category: "element" },
-  perform: async (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    try {
-      if (window.location) {
-        const idAndType = getLinkIdAndTypeFromSelection(
-          selectedElements,
-          appState,
-        );
-
-        if (idAndType) {
-          await copyTextToSystemClipboard(
-            app.props.generateLinkForSelection
-              ? app.props.generateLinkForSelection(idAndType.id, idAndType.type)
-              : defaultGetElementLinkFromSelection(
-                  idAndType.id,
-                  idAndType.type,
-                ),
-          );
-
-          return {
-            appState: {
-              toast: {
-                message: t("toast.elementLinkCopied"),
-                closable: true,
-              },
-            },
-            storeAction: StoreAction.NONE,
-          };
-        }
-        return {
-          appState,
-          elements,
-          app,
-          storeAction: StoreAction.NONE,
-        };
-      }
-    } catch (error: any) {
-      console.error(error);
-    }
-
-    return {
-      appState,
-      elements,
-      app,
-      storeAction: StoreAction.NONE,
-    };
-  },
-  predicate: (elements, appState) =>
-    canCreateLinkFromElements(getSelectedElements(elements, appState)),
-});
-
-export const actionLinkToElement = register({
-  name: "linkToElement",
-  label: "labels.linkToElement",
-  icon: elementLinkIcon,
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    if (
-      selectedElements.length !== 1 ||
-      !canCreateLinkFromElements(selectedElements)
-    ) {
-      return { elements, appState, app, storeAction: StoreAction.NONE };
-    }
-
-    return {
-      appState: {
-        ...appState,
-        openDialog: {
-          name: "elementLinkSelector",
-          sourceElementId: getSelectedElements(elements, appState)[0].id,
-        },
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, appProps, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      appState.openDialog?.name !== "elementLinkSelector" &&
-      selectedElements.length === 1 &&
-      canCreateLinkFromElements(selectedElements)
-    );
-  },
-  trackEvent: false,
-});

packages/excalidraw/actions/actionFinalize.tsx

@@ -15,7 +15,7 @@ import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
 import { resetCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { isPathALoop } from "../shapes";
 
 export const actionFinalize = register({
@@ -115,7 +115,7 @@ export const actionFinalize = register({
           mutateElement(multiPointElement, {
             points: linePoints.map((p, index) =>
               index === linePoints.length - 1
-                ? pointFrom(firstPoint[0], firstPoint[1])
+                ? point(firstPoint[0], firstPoint[1])
                 : p,
             ),
           });

packages/excalidraw/actions/actionFlip.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Excalidraw } from "../index";
 import { render } from "../tests/test-utils";
 import { API } from "../tests/helpers/api";
-import { pointFrom } from "../../math";
+import { point } from "../../math";
 import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
 
 const { h } = window;
@@ -49,13 +49,12 @@ describe("flipping re-centers selection", () => {
         },
         startArrowhead: null,
         endArrowhead: "arrow",
-        fixedSegments: null,
         points: [
-          pointFrom(0, 0),
-          pointFrom(0, -35),
-          pointFrom(-90, -35),
-          pointFrom(-90, 204),
-          pointFrom(66, 204),
+          point(0, 0),
+          point(0, -35),
+          point(-90.9, -35),
+          point(-90.9, 204.9),
+          point(65.1, 204.9),
         ],
         elbowed: true,
       }),
@@ -71,13 +70,13 @@ describe("flipping re-centers selection", () => {
     API.executeAction(actionFlipHorizontal);
     API.executeAction(actionFlipHorizontal);
 
-    const rec1 = h.elements.find((el) => el.id === "rec1")!;
-    expect(rec1.x).toBeCloseTo(100, 0);
-    expect(rec1.y).toBeCloseTo(100, 0);
+    const rec1 = h.elements.find((el) => el.id === "rec1");
+    expect(rec1?.x).toBeCloseTo(100);
+    expect(rec1?.y).toBeCloseTo(100);
 
-    const rec2 = h.elements.find((el) => el.id === "rec2")!;
-    expect(rec2.x).toBeCloseTo(220, 0);
-    expect(rec2.y).toBeCloseTo(250, 0);
+    const rec2 = h.elements.find((el) => el.id === "rec2");
+    expect(rec2?.x).toBeCloseTo(220);
+    expect(rec2?.y).toBeCloseTo(250);
   });
 });
 

packages/excalidraw/actions/actionFlip.ts

@@ -12,6 +12,7 @@ import { resizeMultipleElements } from "../element/resizeElements";
 import type { AppClassProperties, AppState } from "../types";
 import { arrayToMap } from "../utils";
 import { CODES, KEYS } from "../keys";
+import { getCommonBoundingBox } from "../element/bounds";
 import {
   bindOrUnbindLinearElements,
   isBindingEnabled,
@@ -24,9 +25,8 @@ import {
   isElbowArrow,
   isLinearElement,
 } from "../element/typeChecks";
+import { mutateElbowArrow } from "../element/routing";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { deepCopyElement } from "../element/newElement";
-import { getCommonBoundingBox } from "../element/bounds";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
@@ -132,25 +132,18 @@ const flipElements = (
     });
   }
 
-  const { midX, midY } = getCommonBoundingBox(selectedElements);
+  const { minX, minY, maxX, maxY, midX, midY } =
+    getCommonBoundingBox(selectedElements);
 
   resizeMultipleElements(
+    elementsMap,
     selectedElements,
     elementsMap,
     "nw",
-    app.scene,
-    new Map(
-      Array.from(elementsMap.values()).map((element) => [
-        element.id,
-        deepCopyElement(element),
-      ]),
-    ),
-    {
-      flipByX: flipDirection === "horizontal",
-      flipByY: flipDirection === "vertical",
-      shouldResizeFromCenter: true,
-      shouldMaintainAspectRatio: true,
-    },
+    true,
+    true,
+    flipDirection === "horizontal" ? maxX : minX,
+    flipDirection === "horizontal" ? minY : maxY,
   );
 
   bindOrUnbindLinearElements(
@@ -160,7 +153,6 @@ const flipElements = (
     app.scene,
     isBindingEnabled(appState),
     [],
-    appState.zoom,
   );
 
   // ---------------------------------------------------------------------------
@@ -193,10 +185,16 @@ const flipElements = (
     }),
   );
   elbowArrows.forEach((element) =>
-    mutateElement(element, {
-      x: element.x + diffX,
-      y: element.y + diffY,
-    }),
+    mutateElbowArrow(
+      element,
+      elementsMap,
+      element.points,
+      undefined,
+      undefined,
+      {
+        informMutation: false,
+      },
+    ),
   );
   // ---------------------------------------------------------------------------
 

packages/excalidraw/actions/actionFrame.ts

@@ -1,6 +1,6 @@
-import { getCommonBounds, getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "../element";
 import type { ExcalidrawElement } from "../element/types";
-import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
+import { removeAllElementsFromFrame } from "../frame";
 import { getFrameChildren } from "../frame";
 import { KEYS } from "../keys";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
@@ -10,10 +10,6 @@ import { register } from "./register";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { frameToolIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { getSelectedElements } from "../scene";
-import { newFrameElement } from "../element/newElement";
-import { getElementsInGroup } from "../groups";
-import { mutateElement } from "../element/mutateElement";
 
 const isSingleFrameSelected = (
   appState: UIAppState,
@@ -148,67 +144,3 @@ export const actionSetFrameAsActiveTool = register({
     !event.altKey &&
     event.key.toLocaleLowerCase() === KEYS.F,
 });
-
-export const actionWrapSelectionInFrame = register({
-  name: "wrapSelectionInFrame",
-  label: "labels.wrapSelectionInFrame",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      selectedElements.length > 0 &&
-      !selectedElements.some((element) => isFrameLikeElement(element))
-    );
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    const [x1, y1, x2, y2] = getCommonBounds(
-      selectedElements,
-      app.scene.getNonDeletedElementsMap(),
-    );
-    const PADDING = 16;
-    const frame = newFrameElement({
-      x: x1 - PADDING,
-      y: y1 - PADDING,
-      width: x2 - x1 + PADDING * 2,
-      height: y2 - y1 + PADDING * 2,
-    });
-
-    // for a selected partial group, we want to remove it from the remainder of the group
-    if (appState.editingGroupId) {
-      const elementsInGroup = getElementsInGroup(
-        selectedElements,
-        appState.editingGroupId,
-      );
-
-      for (const elementInGroup of elementsInGroup) {
-        const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
-
-        mutateElement(
-          elementInGroup,
-          {
-            groupIds: elementInGroup.groupIds.slice(0, index),
-          },
-          false,
-        );
-      }
-    }
-
-    const nextElements = addElementsToFrame(
-      [...app.scene.getElementsIncludingDeleted(), frame],
-      selectedElements,
-      frame,
-      appState,
-    );
-
-    return {
-      elements: nextElements,
-      appState: {
-        selectedElementIds: { [frame.id]: true },
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-});

packages/excalidraw/actions/actionGroup.tsx

@@ -25,10 +25,8 @@ import type {
 import type { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
-  frameAndChildrenSelectedTogether,
   getElementsInResizingFrame,
   getFrameLikeElements,
-  getRootElements,
   groupByFrameLikes,
   removeElementsFromFrame,
   replaceAllElementsInFrame,
@@ -62,11 +60,8 @@ const enableActionGroup = (
     selectedElementIds: appState.selectedElementIds,
     includeBoundTextElement: true,
   });
-
   return (
-    selectedElements.length >= 2 &&
-    !allElementsInSameGroup(selectedElements) &&
-    !frameAndChildrenSelectedTogether(selectedElements)
+    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
   );
 };
 
@@ -76,12 +71,10 @@ export const actionGroup = register({
   icon: (appState) => <GroupIcon theme={appState.theme} />,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    const selectedElements = getRootElements(
-      app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-      }),
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
     if (selectedElements.length < 2) {
       // nothing to group
       return { appState, elements, storeAction: StoreAction.NONE };

packages/excalidraw/actions/actionHistory.tsx

@@ -5,7 +5,7 @@ import { t } from "../i18n";
 import type { History } from "../history";
 import { HistoryChangedEvent } from "../history";
 import type { AppClassProperties, AppState } from "../types";
-import { KEYS, matchKey } from "../keys";
+import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
 import type { SceneElementsMap } from "../element/types";
@@ -63,7 +63,9 @@ export const createUndoAction: ActionCreator = (history, store) => ({
       ),
     ),
   keyTest: (event) =>
-    event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
+    event[KEYS.CTRL_OR_CMD] &&
+    event.key.toLowerCase() === KEYS.Z &&
+    !event.shiftKey,
   PanelComponent: ({ updateData, data }) => {
     const { isUndoStackEmpty } = useEmitter<HistoryChangedEvent>(
       history.onHistoryChangedEmitter,
@@ -102,8 +104,10 @@ export const createRedoAction: ActionCreator = (history, store) => ({
       ),
     ),
   keyTest: (event) =>
-    (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
-    (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
+    (event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      event.key.toLowerCase() === KEYS.Z) ||
+    (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
   PanelComponent: ({ updateData, data }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,

packages/excalidraw/actions/actionProperties.tsx

@@ -53,9 +53,6 @@ import {
   sharpArrowIcon,
   roundArrowIcon,
   elbowArrowIcon,
-  ArrowheadCrowfootIcon,
-  ArrowheadCrowfootOneIcon,
-  ArrowheadCrowfootOneOrManyIcon,
 } from "../components/icons";
 import {
   ARROW_TYPE,
@@ -89,7 +86,6 @@ import type {
   FontFamilyValues,
   TextAlign,
   VerticalAlign,
-  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
@@ -116,11 +112,11 @@ import {
   bindPointToSnapToElementOutline,
   calculateFixedPointForElbowArrowBinding,
   getHoveredElementForBinding,
-  updateBoundElements,
 } from "../element/binding";
+import { mutateElbowArrow } from "../element/routing";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import type { LocalPoint } from "../../math";
-import { pointFrom } from "../../math";
+import { point, vector } from "../../math";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -220,47 +216,33 @@ const changeFontSize = (
 ) => {
   const newFontSizes = new Set<number>();
 
-  const updatedElements = changeProperty(
-    elements,
-    appState,
-    (oldElement) => {
-      if (isTextElement(oldElement)) {
-        const newFontSize = getNewFontSize(oldElement);
-        newFontSizes.add(newFontSize);
-
-        let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-          fontSize: newFontSize,
-        });
-        redrawTextBoundingBox(
-          newElement,
-          app.scene.getContainerElement(oldElement),
-          app.scene.getNonDeletedElementsMap(),
-        );
-
-        newElement = offsetElementAfterFontResize(oldElement, newElement);
-
-        return newElement;
-      }
-      return oldElement;
-    },
-    true,
-  );
-
-  // Update arrow elements after text elements have been updated
-  const updatedElementsMap = arrayToMap(updatedElements);
-  getSelectedElements(elements, appState, {
-    includeBoundTextElement: true,
-  }).forEach((element) => {
-    if (isTextElement(element)) {
-      updateBoundElements(
-        element,
-        updatedElementsMap as NonDeletedSceneElementsMap,
-      );
-    }
-  });
-
   return {
-    elements: updatedElements,
+    elements: changeProperty(
+      elements,
+      appState,
+      (oldElement) => {
+        if (isTextElement(oldElement)) {
+          const newFontSize = getNewFontSize(oldElement);
+          newFontSizes.add(newFontSize);
+
+          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
+            fontSize: newFontSize,
+          });
+          redrawTextBoundingBox(
+            newElement,
+            app.scene.getContainerElement(oldElement),
+            app.scene.getNonDeletedElementsMap(),
+          );
+
+          newElement = offsetElementAfterFontResize(oldElement, newElement);
+
+          return newElement;
+        }
+
+        return oldElement;
+      },
+      true,
+    ),
     appState: {
       ...appState,
       // update state only if we've set all select text elements to
@@ -1423,65 +1405,59 @@ const getArrowheadOptions = (flip: boolean) => {
       keyBinding: "w",
       icon: <ArrowheadArrowIcon flip={flip} />,
     },
+    {
+      value: "bar",
+      text: t("labels.arrowhead_bar"),
+      keyBinding: "e",
+      icon: <ArrowheadBarIcon flip={flip} />,
+    },
+    {
+      value: "dot",
+      text: t("labels.arrowhead_circle"),
+      keyBinding: null,
+      icon: <ArrowheadCircleIcon flip={flip} />,
+      showInPicker: false,
+    },
+    {
+      value: "circle",
+      text: t("labels.arrowhead_circle"),
+      keyBinding: "r",
+      icon: <ArrowheadCircleIcon flip={flip} />,
+      showInPicker: false,
+    },
+    {
+      value: "circle_outline",
+      text: t("labels.arrowhead_circle_outline"),
+      keyBinding: null,
+      icon: <ArrowheadCircleOutlineIcon flip={flip} />,
+      showInPicker: false,
+    },
     {
       value: "triangle",
       text: t("labels.arrowhead_triangle"),
       icon: <ArrowheadTriangleIcon flip={flip} />,
-      keyBinding: "e",
+      keyBinding: "t",
     },
     {
       value: "triangle_outline",
       text: t("labels.arrowhead_triangle_outline"),
       icon: <ArrowheadTriangleOutlineIcon flip={flip} />,
-      keyBinding: "r",
-    },
-    {
-      value: "circle",
-      text: t("labels.arrowhead_circle"),
-      keyBinding: "a",
-      icon: <ArrowheadCircleIcon flip={flip} />,
-    },
-    {
-      value: "circle_outline",
-      text: t("labels.arrowhead_circle_outline"),
-      keyBinding: "s",
-      icon: <ArrowheadCircleOutlineIcon flip={flip} />,
+      keyBinding: null,
+      showInPicker: false,
     },
     {
       value: "diamond",
       text: t("labels.arrowhead_diamond"),
       icon: <ArrowheadDiamondIcon flip={flip} />,
-      keyBinding: "d",
+      keyBinding: null,
+      showInPicker: false,
     },
     {
       value: "diamond_outline",
       text: t("labels.arrowhead_diamond_outline"),
       icon: <ArrowheadDiamondOutlineIcon flip={flip} />,
-      keyBinding: "f",
-    },
-    {
-      value: "bar",
-      text: t("labels.arrowhead_bar"),
-      keyBinding: "z",
-      icon: <ArrowheadBarIcon flip={flip} />,
-    },
-    {
-      value: "crowfoot_one",
-      text: t("labels.arrowhead_crowfoot_one"),
-      icon: <ArrowheadCrowfootOneIcon flip={flip} />,
-      keyBinding: "c",
-    },
-    {
-      value: "crowfoot_many",
-      text: t("labels.arrowhead_crowfoot_many"),
-      icon: <ArrowheadCrowfootIcon flip={flip} />,
-      keyBinding: "x",
-    },
-    {
-      value: "crowfoot_one_or_many",
-      text: t("labels.arrowhead_crowfoot_one_or_many"),
-      icon: <ArrowheadCrowfootOneOrManyIcon flip={flip} />,
-      keyBinding: "v",
+      keyBinding: null,
+      showInPicker: false,
     },
   ] as const;
 };
@@ -1545,7 +1521,6 @@ export const actionChangeArrowhead = register({
               appState.currentItemStartArrowhead,
             )}
             onChange={(value) => updateData({ position: "start", type: value })}
-            numberOfOptionsToAlwaysShow={4}
           />
           <IconPicker
             label="arrowhead_end"
@@ -1562,7 +1537,6 @@ export const actionChangeArrowhead = register({
               appState.currentItemEndArrowhead,
             )}
             onChange={(value) => updateData({ position: "end", type: value })}
-            numberOfOptionsToAlwaysShow={4}
           />
         </div>
       </fieldset>
@@ -1575,162 +1549,150 @@ export const actionChangeArrowType = register({
   label: "Change arrow types",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
-    const newElements = changeProperty(elements, appState, (el) => {
-      if (!isArrowElement(el)) {
-        return el;
-      }
-      const newElement = newElementWith(el, {
-        roundness:
-          value === ARROW_TYPE.round
-            ? {
-                type: ROUNDNESS.PROPORTIONAL_RADIUS,
-              }
-            : null,
-        elbowed: value === ARROW_TYPE.elbow,
-        points:
-          value === ARROW_TYPE.elbow || el.elbowed
-            ? [el.points[0], el.points[el.points.length - 1]]
-            : el.points,
-      });
-
-      if (isElbowArrow(newElement)) {
-        const elementsMap = app.scene.getNonDeletedElementsMap();
-
-        app.dismissLinearEditor();
-
-        const startGlobalPoint =
-          LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            newElement,
-            0,
-            elementsMap,
-          );
-        const endGlobalPoint =
-          LinearElementEditor.getPointAtIndexGlobalCoordinates(
-            newElement,
-            -1,
-            elementsMap,
-          );
-        const startHoveredElement =
-          !newElement.startBinding &&
-          getHoveredElementForBinding(
-            tupleToCoors(startGlobalPoint),
-            elements,
-            elementsMap,
-            appState.zoom,
-          );
-        const endHoveredElement =
-          !newElement.endBinding &&
-          getHoveredElementForBinding(
-            tupleToCoors(endGlobalPoint),
-            elements,
-            elementsMap,
-            appState.zoom,
-          );
-        const startElement = startHoveredElement
-          ? startHoveredElement
-          : newElement.startBinding &&
-            (elementsMap.get(
-              newElement.startBinding.elementId,
-            ) as ExcalidrawBindableElement);
-        const endElement = endHoveredElement
-          ? endHoveredElement
-          : newElement.endBinding &&
-            (elementsMap.get(
-              newElement.endBinding.elementId,
-            ) as ExcalidrawBindableElement);
-
-        const finalStartPoint = startHoveredElement
-          ? bindPointToSnapToElementOutline(
-              startGlobalPoint,
-              endGlobalPoint,
-              startHoveredElement,
-              elementsMap,
-            )
-          : startGlobalPoint;
-        const finalEndPoint = endHoveredElement
-          ? bindPointToSnapToElementOutline(
-              endGlobalPoint,
-              startGlobalPoint,
-              endHoveredElement,
-              elementsMap,
-            )
-          : endGlobalPoint;
-
-        startHoveredElement &&
-          bindLinearElement(
-            newElement,
-            startHoveredElement,
-            "start",
-            elementsMap,
-          );
-        endHoveredElement &&
-          bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
-
-        mutateElement(newElement, {
-          points: [finalStartPoint, finalEndPoint].map(
-            (p): LocalPoint =>
-              pointFrom(p[0] - newElement.x, p[1] - newElement.y),
-          ),
-          ...(startElement && newElement.startBinding
-            ? {
-                startBinding: {
-                  // @ts-ignore TS cannot discern check above
-                  ...newElement.startBinding!,
-                  ...calculateFixedPointForElbowArrowBinding(
-                    newElement,
-                    startElement,
-                    "start",
-                    elementsMap,
-                  ),
-                },
-              }
-            : {}),
-          ...(endElement && newElement.endBinding
-            ? {
-                endBinding: {
-                  // @ts-ignore TS cannot discern check above
-                  ...newElement.endBinding,
-                  ...calculateFixedPointForElbowArrowBinding(
-                    newElement,
-                    endElement,
-                    "end",
-                    elementsMap,
-                  ),
-                },
-              }
-            : {}),
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (!isArrowElement(el)) {
+          return el;
+        }
+        const newElement = newElementWith(el, {
+          roundness:
+            value === ARROW_TYPE.round
+              ? {
+                  type: ROUNDNESS.PROPORTIONAL_RADIUS,
+                }
+              : null,
+          elbowed: value === ARROW_TYPE.elbow,
+          points:
+            value === ARROW_TYPE.elbow || el.elbowed
+              ? [el.points[0], el.points[el.points.length - 1]]
+              : el.points,
         });
 
-        LinearElementEditor.updateEditorMidPointsCache(
-          newElement,
-          elementsMap,
-          app.state,
-        );
-      }
+        if (isElbowArrow(newElement)) {
+          const elementsMap = app.scene.getNonDeletedElementsMap();
 
-      return newElement;
-    });
+          app.dismissLinearEditor();
 
-    const newState = {
-      ...appState,
-      currentItemArrowType: value,
-    };
+          const startGlobalPoint =
+            LinearElementEditor.getPointAtIndexGlobalCoordinates(
+              newElement,
+              0,
+              elementsMap,
+            );
+          const endGlobalPoint =
+            LinearElementEditor.getPointAtIndexGlobalCoordinates(
+              newElement,
+              -1,
+              elementsMap,
+            );
+          const startHoveredElement =
+            !newElement.startBinding &&
+            getHoveredElementForBinding(
+              tupleToCoors(startGlobalPoint),
+              elements,
+              elementsMap,
+              true,
+            );
+          const endHoveredElement =
+            !newElement.endBinding &&
+            getHoveredElementForBinding(
+              tupleToCoors(endGlobalPoint),
+              elements,
+              elementsMap,
+              true,
+            );
+          const startElement = startHoveredElement
+            ? startHoveredElement
+            : newElement.startBinding &&
+              (elementsMap.get(
+                newElement.startBinding.elementId,
+              ) as ExcalidrawBindableElement);
+          const endElement = endHoveredElement
+            ? endHoveredElement
+            : newElement.endBinding &&
+              (elementsMap.get(
+                newElement.endBinding.elementId,
+              ) as ExcalidrawBindableElement);
 
-    // Change the arrow type and update any other state settings for
-    // the arrow.
-    const selectedId = appState.selectedLinearElement?.elementId;
-    if (selectedId) {
-      const selected = newElements.find((el) => el.id === selectedId);
-      if (selected) {
-        newState.selectedLinearElement = new LinearElementEditor(
-          selected as ExcalidrawLinearElement,
-        );
-      }
-    }
+          const finalStartPoint = startHoveredElement
+            ? bindPointToSnapToElementOutline(
+                startGlobalPoint,
+                endGlobalPoint,
+                startHoveredElement,
+                elementsMap,
+              )
+            : startGlobalPoint;
+          const finalEndPoint = endHoveredElement
+            ? bindPointToSnapToElementOutline(
+                endGlobalPoint,
+                startGlobalPoint,
+                endHoveredElement,
+                elementsMap,
+              )
+            : endGlobalPoint;
 
-    return {
-      elements: newElements,
-      appState: newState,
+          startHoveredElement &&
+            bindLinearElement(
+              newElement,
+              startHoveredElement,
+              "start",
+              elementsMap,
+            );
+          endHoveredElement &&
+            bindLinearElement(
+              newElement,
+              endHoveredElement,
+              "end",
+              elementsMap,
+            );
+
+          mutateElbowArrow(
+            newElement,
+            elementsMap,
+            [finalStartPoint, finalEndPoint].map(
+              (p): LocalPoint =>
+                point(p[0] - newElement.x, p[1] - newElement.y),
+            ),
+            vector(0, 0),
+            {
+              ...(startElement && newElement.startBinding
+                ? {
+                    startBinding: {
+                      // @ts-ignore TS cannot discern check above
+                      ...newElement.startBinding!,
+                      ...calculateFixedPointForElbowArrowBinding(
+                        newElement,
+                        startElement,
+                        "start",
+                        elementsMap,
+                      ),
+                    },
+                  }
+                : {}),
+              ...(endElement && newElement.endBinding
+                ? {
+                    endBinding: {
+                      // @ts-ignore TS cannot discern check above
+                      ...newElement.endBinding,
+                      ...calculateFixedPointForElbowArrowBinding(
+                        newElement,
+                        endElement,
+                        "end",
+                        elementsMap,
+                      ),
+                    },
+                  }
+                : {}),
+            },
+          );
+        }
+
+        return newElement;
+      }),
+      appState: {
+        ...appState,
+        currentItemArrowType: value,
+      },
       storeAction: StoreAction.CAPTURE,
     };
   },

packages/excalidraw/actions/actionSelectAll.ts

@@ -5,6 +5,7 @@ import { getNonDeletedElements, isTextElement } from "../element";
 import type { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { selectAllIcon } from "../components/icons";
 import { StoreAction } from "../store";
 
@@ -19,17 +20,17 @@ export const actionSelectAll = register({
       return false;
     }
 
-    const selectedElementIds = elements
-      .filter(
+    const selectedElementIds = excludeElementsInFramesFromSelection(
+      elements.filter(
         (element) =>
           !element.isDeleted &&
           !(isTextElement(element) && element.containerId) &&
           !element.locked,
-      )
-      .reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
-        map[element.id] = true;
-        return map;
-      }, {});
+      ),
+    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
+      map[element.id] = true;
+      return map;
+    }, {});
 
     return {
       appState: {

packages/excalidraw/actions/index.ts

@@ -88,5 +88,3 @@ export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
 
 export { actionToggleSearchMenu } from "./actionToggleSearchMenu";
-
-export { actionToggleCropEditor } from "./actionCropEditor";

packages/excalidraw/actions/shortcuts.ts

@@ -23,6 +23,7 @@ export type ShortcutName =
       | "sendToBack"
       | "bringToFront"
       | "copyAsPng"
+      | "copyAsSvg"
       | "group"
       | "ungroup"
       | "gridMode"
@@ -47,7 +48,6 @@ export type ShortcutName =
       | "saveFileToDisk"
       | "saveToActiveFile"
       | "toggleShortcuts"
-      | "wrapSelectionInFrame"
     >
   | "saveScene"
   | "imageExport"
@@ -88,6 +88,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
       : getShortcutKey("CtrlOrCmd+Shift+]"),
   ],
   copyAsPng: [getShortcutKey("Shift+Alt+C")],
+  copyAsSvg: [],
   group: [getShortcutKey("CtrlOrCmd+G")],
   ungroup: [getShortcutKey("CtrlOrCmd+Shift+G")],
   gridMode: [getShortcutKey("CtrlOrCmd+'")],
@@ -113,7 +114,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
   toggleShortcuts: [getShortcutKey("?")],
   searchMenu: [getShortcutKey("CtrlOrCmd+F")],
-  wrapSelectionInFrame: [],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName, idx = 0) => {

packages/excalidraw/actions/types.ts

@@ -10,6 +10,7 @@ import type {
   BinaryFiles,
   UIAppState,
 } from "../types";
+import type { MarkOptional } from "../utility-types";
 import type { StoreActionType } from "../store";
 
 export type ActionSource =
@@ -23,7 +24,10 @@ export type ActionSource =
 export type ActionResult =
   | {
       elements?: readonly ExcalidrawElement[] | null;
-      appState?: Partial<AppState> | null;
+      appState?: MarkOptional<
+        AppState,
+        "offsetTop" | "offsetLeft" | "width" | "height"
+      > | null;
       files?: BinaryFiles | null;
       storeAction: StoreActionType;
       replaceFiles?: boolean;
@@ -134,11 +138,7 @@ export type ActionName =
   | "commandPalette"
   | "autoResize"
   | "elementStats"
-  | "searchMenu"
-  | "copyElementLink"
-  | "linkToElement"
-  | "cropEditor"
-  | "wrapSelectionInFrame";
+  | "searchMenu";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

packages/excalidraw/align.ts

@@ -1,10 +1,8 @@
 import type { ElementsMap, ExcalidrawElement } from "./element/types";
-import { mutateElement } from "./element/mutateElement";
+import { newElementWith } from "./element/mutateElement";
 import type { BoundingBox } from "./element/bounds";
 import { getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
-import { updateBoundElements } from "./element/binding";
-import type Scene from "./scene/Scene";
 
 export interface Alignment {
   position: "start" | "center" | "end";
@@ -15,7 +13,6 @@ export const alignElements = (
   selectedElements: ExcalidrawElement[],
   elementsMap: ElementsMap,
   alignment: Alignment,
-  scene: Scene,
 ): ExcalidrawElement[] => {
   const groups: ExcalidrawElement[][] = getMaximumGroups(
     selectedElements,
@@ -29,18 +26,12 @@ export const alignElements = (
       selectionBoundingBox,
       alignment,
     );
-    return group.map((element) => {
-      // update element
-      const updatedEle = mutateElement(element, {
+    return group.map((element) =>
+      newElementWith(element, {
         x: element.x + translation.x,
         y: element.y + translation.y,
-      });
-      // update bound elements
-      updateBoundElements(element, scene.getNonDeletedElementsMap(), {
-        simultaneouslyUpdated: group,
-      });
-      return updatedEle;
-    });
+      }),
+    );
   });
 };
 

packages/excalidraw/animated-trail.ts

@@ -20,7 +20,7 @@ export interface AnimatedTrailOptions {
 }
 
 export class AnimatedTrail implements Trail {
-  currentTrail?: LaserPointer;
+  private currentTrail?: LaserPointer;
   private pastTrails: LaserPointer[] = [];
 
   private container?: SVGSVGElement;
@@ -28,7 +28,7 @@ export class AnimatedTrail implements Trail {
 
   constructor(
     private animationFrameHandler: AnimationFrameHandler,
-    protected app: App,
+    private app: App,
     private options: Partial<LaserPointerOptions> &
       Partial<AnimatedTrailOptions>,
   ) {
@@ -98,16 +98,6 @@ export class AnimatedTrail implements Trail {
     }
   }
 
-  getCurrentTrail() {
-    return this.currentTrail;
-  }
-
-  clearTrails() {
-    this.pastTrails = [];
-    this.currentTrail = undefined;
-    this.update();
-  }
-
   private update() {
     this.start();
   }

packages/excalidraw/appState.ts

@@ -84,7 +84,6 @@ export const getDefaultAppState = (): Omit<
     scrollX: 0,
     scrollY: 0,
     selectedElementIds: {},
-    hoveredElementIds: {},
     selectedGroupIds: {},
     selectedElementsAreBeingDragged: false,
     selectionElement: null,
@@ -117,10 +116,7 @@ export const getDefaultAppState = (): Omit<
     objectsSnapModeEnabled: false,
     userToFollow: null,
     followedBy: new Set(),
-    isCropping: false,
-    croppingElementId: null,
     searchMatches: [],
-    lassoSelectionEnabled: false,
   };
 };
 
@@ -212,7 +208,6 @@ const APP_STATE_STORAGE_CONF = (<
   scrollX: { browser: true, export: false, server: false },
   scrollY: { browser: true, export: false, server: false },
   selectedElementIds: { browser: true, export: false, server: false },
-  hoveredElementIds: { browser: false, export: false, server: false },
   selectedGroupIds: { browser: true, export: false, server: false },
   selectedElementsAreBeingDragged: {
     browser: false,
@@ -242,10 +237,7 @@ const APP_STATE_STORAGE_CONF = (<
   objectsSnapModeEnabled: { browser: true, export: false, server: false },
   userToFollow: { browser: false, export: false, server: false },
   followedBy: { browser: false, export: false, server: false },
-  isCropping: { browser: false, export: false, server: false },
-  croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },
-  lassoSelectionEnabled: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

packages/excalidraw/change.ts

@@ -17,16 +17,13 @@ import {
   hasBoundTextElement,
   isBindableElement,
   isBoundToContainer,
-  isImageElement,
   isTextElement,
 } from "./element/typeChecks";
 import type {
   ExcalidrawElement,
-  ExcalidrawImageElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
   NonDeleted,
-  Ordered,
   OrderedExcalidrawElement,
   SceneElementsMap,
 } from "./element/types";
@@ -629,18 +626,6 @@ export class AppStateChange implements Change<AppState> {
             );
 
             break;
-          case "croppingElementId": {
-            const croppingElementId = nextAppState[key];
-            const element =
-              croppingElementId && nextElements.get(croppingElementId);
-
-            if (element && !element.isDeleted) {
-              visibleDifferenceFlag.value = true;
-            } else {
-              nextAppState[key] = null;
-            }
-            break;
-          }
           case "editingGroupId":
             const editingGroupId = nextAppState[key];
 
@@ -771,7 +756,6 @@ export class AppStateChange implements Change<AppState> {
       selectedElementIds,
       editingLinearElementId,
       selectedLinearElementId,
-      croppingElementId,
       ...standaloneProps
     } = delta as ObservedAppState;
 
@@ -795,10 +779,7 @@ export class AppStateChange implements Change<AppState> {
   }
 }
 
-type ElementPartial<T extends ExcalidrawElement = ExcalidrawElement> = Omit<
-  ElementUpdate<Ordered<T>>,
-  "seed"
->;
+type ElementPartial = Omit<ElementUpdate<OrderedExcalidrawElement>, "seed">;
 
 /**
  * Elements change is a low level primitive to capture a change between two sets of elements.
@@ -1235,18 +1216,6 @@ export class ElementsChange implements Change<SceneElementsMap> {
       });
     }
 
-    if (isImageElement(element)) {
-      const _delta = delta as Delta<ElementPartial<ExcalidrawImageElement>>;
-      // we want to override `crop` only if modified so that we don't reset
-      // when undoing/redoing unrelated change
-      if (_delta.deleted.crop || _delta.inserted.crop) {
-        Object.assign(directlyApplicablePartial, {
-          // apply change verbatim
-          crop: _delta.inserted.crop ?? null,
-        });
-      }
-    }
-
     if (!flags.containsVisibleDifference) {
       // strip away fractional as even if it would be different, it doesn't have to result in visible change
       const { index, ...rest } = directlyApplicablePartial;

packages/excalidraw/charts.ts

@@ -1,5 +1,5 @@
 import type { Radians } from "../math";
-import { pointFrom } from "../math";
+import { point } from "../math";
 import {
   COLOR_PALETTE,
   DEFAULT_CHART_COLOR_INDEX,
@@ -260,7 +260,7 @@ const chartLines = (
     x,
     y,
     width: chartWidth,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    points: [point(0, 0), point(chartWidth, 0)],
   });
 
   const yLine = newLinearElement({
@@ -271,7 +271,7 @@ const chartLines = (
     x,
     y,
     height: chartHeight,
-    points: [pointFrom(0, 0), pointFrom(0, -chartHeight)],
+    points: [point(0, 0), point(0, -chartHeight)],
   });
 
   const maxLine = newLinearElement({
@@ -284,7 +284,7 @@ const chartLines = (
     strokeStyle: "dotted",
     width: chartWidth,
     opacity: GRID_OPACITY,
-    points: [pointFrom(0, 0), pointFrom(chartWidth, 0)],
+    points: [point(0, 0), point(chartWidth, 0)],
   });
 
   return [xLine, yLine, maxLine];
@@ -441,7 +441,7 @@ const chartTypeLine = (
       height: cy,
       strokeStyle: "dotted",
       opacity: GRID_OPACITY,
-      points: [pointFrom(0, 0), pointFrom(0, cy)],
+      points: [point(0, 0), point(0, cy)],
     });
   });
 

packages/excalidraw/clipboard.ts

@@ -18,8 +18,6 @@ import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
 import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
-import { createFile, isSupportedImageFileType } from "./data/blob";
-import { ExcalidrawError } from "./errors";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -41,7 +39,7 @@ export interface ClipboardData {
 
 type AllowedPasteMimeTypes = typeof ALLOWED_PASTE_MIME_TYPES[number];
 
-type ParsedClipboardEventTextData =
+type ParsedClipboardEvent =
   | { type: "text"; value: string }
   | { type: "mixedContent"; value: PastedMixedContent };
 
@@ -77,7 +75,7 @@ export const createPasteEvent = ({
   types,
   files,
 }: {
-  types?: { [key in AllowedPasteMimeTypes]?: string | File };
+  types?: { [key in AllowedPasteMimeTypes]?: string };
   files?: File[];
 }) => {
   if (!types && !files) {
@@ -90,11 +88,6 @@ export const createPasteEvent = ({
 
   if (types) {
     for (const [type, value] of Object.entries(types)) {
-      if (typeof value !== "string") {
-        files = files || [];
-        files.push(value);
-        continue;
-      }
       try {
         event.clipboardData?.setData(type, value);
         if (event.clipboardData?.getData(type) !== value) {
@@ -224,14 +217,14 @@ function parseHTMLTree(el: ChildNode) {
 const maybeParseHTMLPaste = (
   event: ClipboardEvent,
 ): { type: "mixedContent"; value: PastedMixedContent } | null => {
-  const html = event.clipboardData?.getData(MIME_TYPES.html);
+  const html = event.clipboardData?.getData("text/html");
 
   if (!html) {
     return null;
   }
 
   try {
-    const doc = new DOMParser().parseFromString(html, MIME_TYPES.html);
+    const doc = new DOMParser().parseFromString(html, "text/html");
 
     const content = parseHTMLTree(doc.body);
 
@@ -245,44 +238,34 @@ const maybeParseHTMLPaste = (
   return null;
 };
 
-/**
- * Reads OS clipboard programmatically. May not work on all browsers.
- * Will prompt user for permission if not granted.
- */
 export const readSystemClipboard = async () => {
-  const types: { [key in AllowedPasteMimeTypes]?: string | File } = {};
+  const types: { [key in AllowedPasteMimeTypes]?: string } = {};
+
+  try {
+    if (navigator.clipboard?.readText) {
+      return { "text/plain": await navigator.clipboard?.readText() };
+    }
+  } catch (error: any) {
+    // @ts-ignore
+    if (navigator.clipboard?.read) {
+      console.warn(
+        `navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`,
+      );
+    } else {
+      throw error;
+    }
+  }
 
   let clipboardItems: ClipboardItems;
 
   try {
     clipboardItems = await navigator.clipboard?.read();
   } catch (error: any) {
-    try {
-      if (navigator.clipboard?.readText) {
-        console.warn(
-          `navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`,
-        );
-        const readText = await navigator.clipboard?.readText();
-        if (readText) {
-          return { [MIME_TYPES.text]: readText };
-        }
-      }
-    } catch (error: any) {
-      // @ts-ignore
-      if (navigator.clipboard?.read) {
-        console.warn(
-          `navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`,
-        );
-      } else {
-        if (error.name === "DataError") {
-          console.warn(
-            `navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`,
-          );
-          return types;
-        }
-
-        throw error;
-      }
+    if (error.name === "DataError") {
+      console.warn(
+        `navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`,
+      );
+      return types;
     }
     throw error;
   }
@@ -293,20 +276,10 @@ export const readSystemClipboard = async () => {
         continue;
       }
       try {
-        if (type === MIME_TYPES.text || type === MIME_TYPES.html) {
-          types[type] = await (await item.getType(type)).text();
-        } else if (isSupportedImageFileType(type)) {
-          const imageBlob = await item.getType(type);
-          const file = createFile(imageBlob, type, undefined);
-          types[type] = file;
-        } else {
-          throw new ExcalidrawError(`Unsupported clipboard type: ${type}`);
-        }
+        types[type] = await (await item.getType(type)).text();
       } catch (error: any) {
         console.warn(
-          error instanceof ExcalidrawError
-            ? error.message
-            : `Cannot retrieve ${type} from clipboardItem: ${error.message}`,
+          `Cannot retrieve ${type} from clipboardItem: ${error.message}`,
         );
       }
     }
@@ -323,10 +296,10 @@ export const readSystemClipboard = async () => {
 /**
  * Parses "paste" ClipboardEvent.
  */
-const parseClipboardEventTextData = async (
+const parseClipboardEvent = async (
   event: ClipboardEvent,
   isPlainPaste = false,
-): Promise<ParsedClipboardEventTextData> => {
+): Promise<ParsedClipboardEvent> => {
   try {
     const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
 
@@ -335,7 +308,7 @@ const parseClipboardEventTextData = async (
         return {
           type: "text",
           value:
-            event.clipboardData?.getData(MIME_TYPES.text) ||
+            event.clipboardData?.getData("text/plain") ||
             mixedContent.value
               .map((item) => item.value)
               .join("\n")
@@ -346,7 +319,7 @@ const parseClipboardEventTextData = async (
       return mixedContent;
     }
 
-    const text = event.clipboardData?.getData(MIME_TYPES.text);
+    const text = event.clipboardData?.getData("text/plain");
 
     return { type: "text", value: (text || "").trim() };
   } catch {
@@ -355,16 +328,13 @@ const parseClipboardEventTextData = async (
 };
 
 /**
- * Attempts to parse clipboard event.
+ * Attempts to parse clipboard. Prefers system clipboard.
  */
 export const parseClipboard = async (
   event: ClipboardEvent,
   isPlainPaste = false,
 ): Promise<ClipboardData> => {
-  const parsedEventData = await parseClipboardEventTextData(
-    event,
-    isPlainPaste,
-  );
+  const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
 
   if (parsedEventData.type === "mixedContent") {
     return {
@@ -453,8 +423,8 @@ export const copyTextToSystemClipboard = async (
   // (2) if fails and we have access to ClipboardEvent, use plain old setData()
   try {
     if (clipboardEvent) {
-      clipboardEvent.clipboardData?.setData(MIME_TYPES.text, text || "");
-      if (clipboardEvent.clipboardData?.getData(MIME_TYPES.text) !== text) {
+      clipboardEvent.clipboardData?.setData("text/plain", text || "");
+      if (clipboardEvent.clipboardData?.getData("text/plain") !== text) {
         throw new Error("Failed to setData on clipboardEvent");
       }
       return;

packages/excalidraw/components/Actions.tsx

@@ -26,7 +26,6 @@ import { trackEvent } from "../analytics";
 import {
   hasBoundTextElement,
   isElbowArrow,
-  isImageElement,
   isLinearElement,
   isTextElement,
 } from "../element/typeChecks";
@@ -51,7 +50,6 @@ import {
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
 import { CLASSES } from "../constants";
-import { alignActionsPredicate } from "../actions/actionAlign";
 
 export const canChangeStrokeColor = (
   appState: UIAppState,
@@ -91,12 +89,10 @@ export const SelectedShapeActions = ({
   appState,
   elementsMap,
   renderAction,
-  app,
 }: {
   appState: UIAppState;
   elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
   renderAction: ActionManager["renderAction"];
-  app: AppClassProperties;
 }) => {
   const targetElements = getTargetElements(elementsMap, appState);
 
@@ -131,14 +127,6 @@ export const SelectedShapeActions = ({
     isLinearElement(targetElements[0]) &&
     !isElbowArrow(targetElements[0]);
 
-  const showCropEditorAction =
-    !appState.croppingElementId &&
-    targetElements.length === 1 &&
-    isImageElement(targetElements[0]);
-
-  const showAlignActions =
-    !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
-
   return (
     <div className="panelColumn">
       <div>
@@ -206,7 +194,7 @@ export const SelectedShapeActions = ({
         </div>
       </fieldset>
 
-      {showAlignActions && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && !isSingleElementBoundContainer && (
         <fieldset>
           <legend>{t("labels.align")}</legend>
           <div className="buttonList">
@@ -257,7 +245,6 @@ export const SelectedShapeActions = ({
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
-            {showCropEditorAction && renderAction("cropEditor")}
             {showLineEditorAction && renderAction("toggleLinearEditor")}
           </div>
         </fieldset>

packages/excalidraw/components/ActiveConfirmDialog.tsx

@@ -1,6 +1,7 @@
+import { atom, useAtom } from "jotai";
 import { actionClearCanvas } from "../actions";
 import { t } from "../i18n";
-import { atom, useAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 
@@ -9,6 +10,7 @@ export const activeConfirmDialogAtom = atom<"clearCanvas" | null>(null);
 export const ActiveConfirmDialog = () => {
   const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(
     activeConfirmDialogAtom,
+    jotaiScope,
   );
   const actionManager = useExcalidrawActionManager();
 

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
+import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
-import { useAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { KEYS } from "../../keys";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import clsx from "clsx";
@@ -56,7 +57,10 @@ export const ColorInput = ({
     }
   }, [activeSection]);
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
 
   useEffect(() => {
     return () => {

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -5,6 +5,7 @@ import { TopPicks } from "./TopPicks";
 import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
+import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { useExcalidrawContainer } from "../App";
@@ -14,7 +15,7 @@ import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
 import { useRef } from "react";
-import { useAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { ColorInput } from "./ColorInput";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
@@ -75,7 +76,10 @@ const ColorPickerPopupContent = ({
   const { container } = useExcalidrawContainer();
   const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
 
-  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
 
   const colorInputJSX = (
     <div>

packages/excalidraw/components/ColorPicker/CustomColorList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import HotkeyLabel from "./HotkeyLabel";

packages/excalidraw/components/ColorPicker/Picker.tsx

@@ -5,7 +5,7 @@ import type { ExcalidrawElement } from "../../element/types";
 import { ShadeList } from "./ShadeList";
 
 import PickerColorList from "./PickerColorList";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { CustomColorList } from "./CustomColorList";
 import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
 import PickerHeading from "./PickerHeading";

packages/excalidraw/components/ColorPicker/PickerColorList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import {
   activeColorPickerSectionAtom,

packages/excalidraw/components/ColorPicker/ShadeList.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef } from "react";
 import {
   activeColorPickerSectionAtom,

packages/excalidraw/components/ColorPicker/colorPickerUtils.ts

@@ -1,7 +1,7 @@
 import type { ExcalidrawElement } from "../../element/types";
+import { atom } from "jotai";
 import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
 import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
-import { atom } from "../../editor-jotai";
 
 export const getColorNameAndShadeFromColor = ({
   palette,

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -36,7 +36,7 @@ import {
   getShortcutKey,
   isWritableElement,
 } from "../../utils";
-import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
+import { atom, useAtom } from "jotai";
 import { deburr } from "../../deburr";
 import type { MarkRequired } from "../../utility-types";
 import { InlineIcon } from "../InlineIcon";
@@ -48,6 +48,7 @@ import {
   actionLink,
   actionToggleSearchMenu,
 } from "../../actions";
+import { jotaiStore } from "../../jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import type { CommandPaletteItem } from "./types";
 import * as defaultItems from "./defaultCommandPaletteItems";
@@ -55,10 +56,6 @@ import { trackEvent } from "../../analytics";
 import { useStable } from "../../hooks/useStable";
 
 import "./CommandPalette.scss";
-import {
-  actionCopyElementLink,
-  actionLinkToElement,
-} from "../../actions/actionElementLink";
 
 const lastUsedPaletteItem = atom<CommandPaletteItem | null>(null);
 
@@ -262,7 +259,6 @@ function CommandPaletteInner({
         actionManager.actions.cut,
         actionManager.actions.copy,
         actionManager.actions.deleteSelectedElements,
-        actionManager.actions.wrapSelectionInFrame,
         actionManager.actions.copyStyles,
         actionManager.actions.pasteStyles,
         actionManager.actions.bringToFront,
@@ -283,10 +279,7 @@ function CommandPaletteInner({
         actionManager.actions.increaseFontSize,
         actionManager.actions.decreaseFontSize,
         actionManager.actions.toggleLinearEditor,
-        actionManager.actions.cropEditor,
         actionLink,
-        actionCopyElementLink,
-        actionLinkToElement,
       ].map((action: Action) =>
         actionToCommand(
           action,
@@ -348,7 +341,7 @@ function CommandPaletteInner({
           keywords: ["delete", "destroy"],
           viewMode: false,
           perform: () => {
-            editorJotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+            jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
           },
         },
         {

packages/excalidraw/components/ConfirmDialog.tsx

@@ -1,13 +1,13 @@
-import { flushSync } from "react-dom";
 import { t } from "../i18n";
 import type { DialogProps } from "./Dialog";
 import { Dialog } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
+import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
-import { useSetAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -26,7 +26,7 @@ const ConfirmDialog = (props: Props) => {
     ...rest
   } = props;
   const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
   const { container } = useExcalidrawContainer();
 
   return (
@@ -43,14 +43,7 @@ const ConfirmDialog = (props: Props) => {
           onClick={() => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
-            // flush any pending updates synchronously,
-            // otherwise it could lead to crash in some chromium versions (131.0.6778.86),
-            // when `.focus` is invoked with container in some intermediate state
-            // (container seems mounted in DOM, but focus still causes a crash)
-            flushSync(() => {
-              onCancel();
-            });
-
+            onCancel();
             container?.focus();
           }}
         />
@@ -59,14 +52,7 @@ const ConfirmDialog = (props: Props) => {
           onClick={() => {
             setAppState({ openMenu: null });
             setIsLibraryMenuOpen(false);
-            // flush any pending updates synchronously,
-            // otherwise it leads to crash in some chromium versions (131.0.6778.86),
-            // when `.focus` is invoked with container in some intermediate state
-            // (container seems mounted in DOM, but focus still causes a crash)
-            flushSync(() => {
-              onConfirm();
-            });
-
+            onConfirm();
             container?.focus();
           }}
           actionType="danger"

packages/excalidraw/components/Dialog.tsx

@@ -11,8 +11,9 @@ import "./Dialog.scss";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { queryFocusableElements } from "../utils";
+import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
-import { useSetAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 import { t } from "../i18n";
 import { CloseIcon } from "./icons";
 
@@ -91,7 +92,7 @@ export const Dialog = (props: DialogProps) => {
   }, [islandNode, props.autofocus]);
 
   const setAppState = useExcalidrawSetAppState();
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom, jotaiScope);
 
   const onClose = () => {
     setAppState({ openMenu: null });

packages/excalidraw/components/ElementLinkDialog.scss

@@ -1,87 +0,0 @@
-@import "../css/variables.module.scss";
-
-.excalidraw {
-  .ElementLinkDialog {
-    position: absolute;
-    top: var(--editor-container-padding);
-    left: var(--editor-container-padding);
-
-    z-index: var(--zIndex-modal);
-
-    border-radius: 10px;
-    padding: 1.5rem;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    box-shadow: var(--shadow-island);
-    background-color: var(--island-bg-color);
-
-    @include isMobile {
-      left: 0;
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-      width: calc(100% - 1rem);
-      box-sizing: border-box;
-      z-index: 5;
-    }
-
-    .ElementLinkDialog__header {
-      h2 {
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-
-        @include isMobile {
-          font-size: 1.25rem;
-        }
-      }
-
-      p {
-        margin: 0;
-
-        @include isMobile {
-          font-size: 0.875rem;
-        }
-      }
-
-      margin-bottom: 1.5rem;
-
-      @include isMobile {
-        margin-bottom: 1rem;
-      }
-    }
-
-    .ElementLinkDialog__input {
-      display: flex;
-
-      .ElementLinkDialog__input-field {
-        flex: 1;
-      }
-
-      .ElementLinkDialog__remove {
-        color: $oc-red-9;
-        margin-left: 1rem;
-
-        .ToolIcon__icon {
-          width: 2rem;
-          height: 2rem;
-        }
-
-        .ToolIcon__icon svg {
-          color: $oc-red-6;
-        }
-      }
-    }
-
-    .ElementLinkDialog__actions {
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 1.5rem;
-
-      @include isMobile {
-        font-size: 0.875rem;
-        margin-top: 1rem;
-      }
-    }
-  }
-}

packages/excalidraw/components/ElementLinkDialog.tsx

@@ -1,174 +0,0 @@
-import { TextField } from "./TextField";
-import type { AppProps, AppState, UIAppState } from "../types";
-import DialogActionButton from "./DialogActionButton";
-import { getSelectedElements } from "../scene";
-import {
-  defaultGetElementLinkFromSelection,
-  getLinkIdAndTypeFromSelection,
-} from "../element/elementLink";
-import { mutateElement } from "../element/mutateElement";
-import { useCallback, useEffect, useState } from "react";
-import { t } from "../i18n";
-import type { ElementsMap, ExcalidrawElement } from "../element/types";
-import { ToolButton } from "./ToolButton";
-import { TrashIcon } from "./icons";
-import { KEYS } from "../keys";
-
-import "./ElementLinkDialog.scss";
-import { normalizeLink } from "../data/url";
-
-const ElementLinkDialog = ({
-  sourceElementId,
-  onClose,
-  elementsMap,
-  appState,
-  generateLinkForSelection = defaultGetElementLinkFromSelection,
-}: {
-  sourceElementId: ExcalidrawElement["id"];
-  elementsMap: ElementsMap;
-  appState: UIAppState;
-  onClose?: () => void;
-  generateLinkForSelection: AppProps["generateLinkForSelection"];
-}) => {
-  const originalLink = elementsMap.get(sourceElementId)?.link ?? null;
-
-  const [nextLink, setNextLink] = useState<string | null>(originalLink);
-  const [linkEdited, setLinkEdited] = useState(false);
-
-  useEffect(() => {
-    const selectedElements = getSelectedElements(elementsMap, appState);
-    let nextLink = originalLink;
-
-    if (selectedElements.length > 0 && generateLinkForSelection) {
-      const idAndType = getLinkIdAndTypeFromSelection(
-        selectedElements,
-        appState as AppState,
-      );
-
-      if (idAndType) {
-        nextLink = normalizeLink(
-          generateLinkForSelection(idAndType.id, idAndType.type),
-        );
-      }
-    }
-
-    setNextLink(nextLink);
-  }, [
-    elementsMap,
-    appState,
-    appState.selectedElementIds,
-    originalLink,
-    generateLinkForSelection,
-  ]);
-
-  const handleConfirm = useCallback(() => {
-    if (nextLink && nextLink !== elementsMap.get(sourceElementId)?.link) {
-      const elementToLink = elementsMap.get(sourceElementId);
-      elementToLink &&
-        mutateElement(elementToLink, {
-          link: nextLink,
-        });
-    }
-
-    if (!nextLink && linkEdited && sourceElementId) {
-      const elementToLink = elementsMap.get(sourceElementId);
-      elementToLink &&
-        mutateElement(elementToLink, {
-          link: null,
-        });
-    }
-
-    onClose?.();
-  }, [sourceElementId, nextLink, elementsMap, linkEdited, onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        appState.openDialog?.name === "elementLinkSelector" &&
-        event.key === KEYS.ENTER
-      ) {
-        handleConfirm();
-      }
-
-      if (
-        appState.openDialog?.name === "elementLinkSelector" &&
-        event.key === KEYS.ESCAPE
-      ) {
-        onClose?.();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [appState, onClose, handleConfirm]);
-
-  return (
-    <div className="ElementLinkDialog">
-      <div className="ElementLinkDialog__header">
-        <h2>{t("elementLink.title")}</h2>
-        <p>{t("elementLink.desc")}</p>
-      </div>
-
-      <div className="ElementLinkDialog__input">
-        <TextField
-          value={nextLink ?? ""}
-          onChange={(value) => {
-            if (!linkEdited) {
-              setLinkEdited(true);
-            }
-            setNextLink(value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === KEYS.ENTER) {
-              handleConfirm();
-            }
-          }}
-          className="ElementLinkDialog__input-field"
-          selectOnRender
-        />
-
-        {originalLink && nextLink && (
-          <ToolButton
-            type="button"
-            title={t("buttons.remove")}
-            aria-label={t("buttons.remove")}
-            label={t("buttons.remove")}
-            onClick={() => {
-              // removes the link from the input
-              // but doesn't update the element
-
-              // when confirmed, will remove the link from the element
-              setNextLink(null);
-              setLinkEdited(true);
-            }}
-            className="ElementLinkDialog__remove"
-            icon={TrashIcon}
-          />
-        )}
-      </div>
-
-      <div className="ElementLinkDialog__actions">
-        <DialogActionButton
-          label={t("buttons.cancel")}
-          onClick={() => {
-            onClose?.();
-          }}
-          style={{
-            marginRight: 10,
-          }}
-        />
-
-        <DialogActionButton
-          label={t("buttons.confirm")}
-          onClick={handleConfirm}
-          actionType="primary"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ElementLinkDialog;

packages/excalidraw/components/EyeDropper.tsx

@@ -1,3 +1,4 @@
+import { atom } from "jotai";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { rgbToHex } from "../colors";
@@ -13,7 +14,6 @@ import { useStable } from "../hooks/useStable";
 import "./EyeDropper.scss";
 import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
 import type { ExcalidrawElement } from "../element/types";
-import { atom } from "../editor-jotai";
 
 export type EyeDropperProperties = {
   keepOpenOnAlt: boolean;

packages/excalidraw/components/FixedSideContainer.scss

@@ -15,6 +15,7 @@
     top: var(--editor-container-padding);
     right: var(--editor-container-padding);
     bottom: var(--editor-container-padding);
+    z-index: 2;
   }
 
   .FixedSideContainer_side_top.zen-mode {

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -21,7 +21,7 @@ export const DEFAULT_FONTS = [
     value: FONT_FAMILY.Excalifont,
     icon: FreedrawIcon,
     text: t("labels.handDrawn"),
-    testId: "font-family-hand-drawn",
+    testId: "font-family-handrawn",
   },
   {
     value: FONT_FAMILY.Nunito,

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -21,7 +21,6 @@ import { t } from "../../i18n";
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 import { Fonts } from "../../fonts";
 import type { ValueOf } from "../../utility-types";
-import { FontFamilyNormalIcon } from "../icons";
 
 export interface FontDescriptor {
   value: number;
@@ -63,14 +62,12 @@ export const FontPickerList = React.memo(
     const allFonts = useMemo(
       () =>
         Array.from(Fonts.registered.entries())
-          .filter(
-            ([_, { metadata }]) => !metadata.serverSide && !metadata.fallback,
-          )
-          .map(([familyId, { metadata, fontFaces }]) => {
+          .filter(([_, { metadata }]) => !metadata.serverSide)
+          .map(([familyId, { metadata, fonts }]) => {
             const fontDescriptor = {
               value: familyId,
-              icon: metadata.icon ?? FontFamilyNormalIcon,
-              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
+              icon: metadata.icon,
+              text: fonts[0].fontFace.family,
             };
 
             if (metadata.deprecated) {
@@ -92,7 +89,7 @@ export const FontPickerList = React.memo(
     );
 
     const sceneFamilies = useMemo(
-      () => new Set(fonts.getSceneFamilies()),
+      () => new Set(fonts.getSceneFontFamilies()),
       // cache per selected font family, so hover re-render won't mess it up
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [selectedFontFamily],

packages/excalidraw/components/HelpDialog.tsx

@@ -22,7 +22,7 @@ const Header = () => (
     </a>
     <a
       className="HelpDialog__btn"
-      href="https://plus.excalidraw.com/blog"
+      href="https://blog.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
     >
@@ -222,16 +222,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               ]}
               isOr={false}
             />
-            <Shortcut
-              label={t("helpDialog.cropStart")}
-              shortcuts={[t("helpDialog.doubleClick"), getShortcutKey("Enter")]}
-              isOr={true}
-            />
-            <Shortcut
-              label={t("helpDialog.cropFinish")}
-              shortcuts={[getShortcutKey("Enter"), getShortcutKey("Escape")]}
-              isOr={true}
-            />
             <Shortcut label={t("toolBar.lock")} shortcuts={[KEYS.Q]} />
             <Shortcut
               label={t("helpDialog.preventBinding")}

packages/excalidraw/components/HintViewer.tsx

@@ -100,14 +100,6 @@ const getHints = ({
     return t("hints.text_editing");
   }
 
-  if (appState.croppingElementId) {
-    return t("hints.leaveCropEditor");
-  }
-
-  if (selectedElements.length === 1 && isImageElement(selectedElements[0])) {
-    return t("hints.enterCropEditor");
-  }
-
   if (activeTool.type === "selection") {
     if (
       appState.selectionElement &&

packages/excalidraw/components/IconPicker.scss

@@ -1,16 +1,19 @@
 @import "../css/variables.module.scss";
 
 .excalidraw {
+  .picker-container {
+    display: inline-block;
+    box-sizing: border-box;
+    margin-right: 0.25rem;
+  }
+
   .picker {
-    padding: 0.5rem;
     background: var(--popup-bg-color);
     border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: var(--shadow-island);
+    // ˇˇ yeah, i dunno, open to suggestions here :D
+    box-shadow: rgb(0 0 0 / 25%) 2px 2px 4px 2px;
     border-radius: 4px;
     position: absolute;
-    :root[dir="rtl"] & {
-      padding: 0.4rem;
-    }
   }
 
   .picker-container button,
@@ -52,16 +55,47 @@
     padding: 0.25rem 0.28rem 0.35rem 0.25rem;
   }
 
-  .picker-content {
-    display: grid;
-    grid-template-columns: repeat(4, auto);
-    grid-gap: 0.5rem;
-    border-radius: 4px;
+  .picker-triangle {
+    width: 0;
+    height: 0;
+    position: relative;
+    top: -10px;
+    :root[dir="ltr"] & {
+      left: 12px;
+    }
+
+    :root[dir="rtl"] & {
+      right: 12px;
+    }
+    z-index: 10;
+
+    &:before {
+      content: "";
+      position: absolute;
+      border-style: solid;
+      border-width: 0 9px 10px;
+      border-color: transparent transparent transparentize($oc-black, 0.9);
+      top: -1px;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      border-style: solid;
+      border-width: 0 9px 10px;
+      border-color: transparent transparent var(--popup-bg-color);
+    }
   }
 
-  .picker-collapsible {
-    font-size: 0.75rem;
-    padding: 0.5rem 0;
+  .picker-content {
+    padding: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    grid-gap: 0.5rem;
+    border-radius: 4px;
+    :root[dir="rtl"] & {
+      padding: 0.4rem;
+    }
   }
 
   .picker-keybinding {

packages/excalidraw/components/IconPicker.tsx

@@ -1,22 +1,10 @@
-import React, { useEffect } from "react";
-import * as Popover from "@radix-ui/react-popover";
-import { isArrowKey, KEYS } from "../keys";
-import { getLanguage, t } from "../i18n";
-import clsx from "clsx";
-import Collapsible from "./Stats/Collapsible";
-import { atom, useAtom } from "../editor-jotai";
-import { useDevice } from "..";
+import React from "react";
+import { Popover } from "./Popover";
 
 import "./IconPicker.scss";
-
-const moreOptionsAtom = atom(false);
-
-type Option<T> = {
-  value: T;
-  text: string;
-  icon: JSX.Element;
-  keyBinding: string | null;
-};
+import { isArrowKey, KEYS } from "../keys";
+import { getLanguage } from "../i18n";
+import clsx from "clsx";
 
 function Picker<T>({
   options,
@@ -24,16 +12,30 @@ function Picker<T>({
   label,
   onChange,
   onClose,
-  numberOfOptionsToAlwaysShow = options.length,
 }: {
   label: string;
   value: T;
-  options: readonly Option<T>[];
+  options: {
+    value: T;
+    text: string;
+    icon: JSX.Element;
+    keyBinding: string | null;
+  }[];
   onChange: (value: T) => void;
   onClose: () => void;
-  numberOfOptionsToAlwaysShow?: number;
 }) {
-  const device = useDevice();
+  const rFirstItem = React.useRef<HTMLButtonElement>();
+  const rActiveItem = React.useRef<HTMLButtonElement>();
+  const rGallery = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    // After the component is first mounted focus on first input
+    if (rActiveItem.current) {
+      rActiveItem.current.focus();
+    } else if (rGallery.current) {
+      rGallery.current.focus();
+    }
+  }, []);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     const pressedOption = options.find(
@@ -42,19 +44,28 @@ function Picker<T>({
 
     if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {
       // Keybinding navigation
-      onChange(pressedOption.value);
-
+      const index = options.indexOf(pressedOption);
+      (rGallery!.current!.children![index] as any).focus();
       event.preventDefault();
     } else if (event.key === KEYS.TAB) {
-      const index = options.findIndex((option) => option.value === value);
-      const nextIndex = event.shiftKey
-        ? (options.length + index - 1) % options.length
-        : (index + 1) % options.length;
-      onChange(options[nextIndex].value);
+      // Tab navigation cycle through options. If the user tabs
+      // away from the picker, close the picker. We need to use
+      // a timeout here to let the stack clear before checking.
+      setTimeout(() => {
+        const active = rActiveItem.current;
+        const docActive = document.activeElement;
+        if (active !== docActive) {
+          onClose();
+        }
+      }, 0);
     } else if (isArrowKey(event.key)) {
       // Arrow navigation
+      const { activeElement } = document;
       const isRTL = getLanguage().rtl;
-      const index = options.findIndex((option) => option.value === value);
+      const index = Array.prototype.indexOf.call(
+        rGallery!.current!.children,
+        activeElement,
+      );
       if (index !== -1) {
         const length = options.length;
         let nextIndex = index;
@@ -62,26 +73,19 @@ function Picker<T>({
         switch (event.key) {
           // Select the next option
           case isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT:
+          case KEYS.ARROW_DOWN: {
             nextIndex = (index + 1) % length;
             break;
+          }
           // Select the previous option
           case isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT:
-            nextIndex = (length + index - 1) % length;
-            break;
-          // Go the next row
-          case KEYS.ARROW_DOWN: {
-            nextIndex = (index + (numberOfOptionsToAlwaysShow ?? 1)) % length;
-            break;
-          }
-          // Go the previous row
           case KEYS.ARROW_UP: {
-            nextIndex =
-              (length + index - (numberOfOptionsToAlwaysShow ?? 1)) % length;
+            nextIndex = (length + index - 1) % length;
             break;
           }
         }
 
-        onChange(options[nextIndex].value);
+        (rGallery.current!.children![nextIndex] as any).focus();
       }
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
@@ -93,26 +97,15 @@ function Picker<T>({
     event.stopPropagation();
   };
 
-  const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
-
-  const alwaysVisibleOptions = React.useMemo(
-    () => options.slice(0, numberOfOptionsToAlwaysShow),
-    [options, numberOfOptionsToAlwaysShow],
-  );
-  const moreOptions = React.useMemo(
-    () => options.slice(numberOfOptionsToAlwaysShow),
-    [options, numberOfOptionsToAlwaysShow],
-  );
-
-  useEffect(() => {
-    if (!alwaysVisibleOptions.some((option) => option.value === value)) {
-      setShowMoreOptions(true);
-    }
-  }, [value, alwaysVisibleOptions, setShowMoreOptions]);
-
-  const renderOptions = (options: Option<T>[]) => {
-    return (
-      <div className="picker-content">
+  return (
+    <div
+      className={`picker`}
+      role="dialog"
+      aria-modal="true"
+      aria-label={label}
+      onKeyDown={handleKeyDown}
+    >
+      <div className="picker-content" ref={rGallery}>
         {options.map((option, i) => (
           <button
             type="button"
@@ -120,6 +113,7 @@ function Picker<T>({
               active: value === option.value,
             })}
             onClick={(event) => {
+              (event.currentTarget as HTMLButtonElement).focus();
               onChange(option.value);
             }}
             title={`${option.text} ${
@@ -128,13 +122,16 @@ function Picker<T>({
             aria-label={option.text || "none"}
             aria-keyshortcuts={option.keyBinding || undefined}
             key={option.text}
-            ref={(ref) => {
-              if (value === option.value) {
-                // Use a timeout here to render focus properly
-                setTimeout(() => {
-                  ref?.focus();
-                }, 0);
+            ref={(el) => {
+              if (el && i === 0) {
+                rFirstItem.current = el;
               }
+              if (el && option.value === value) {
+                rActiveItem.current = el;
+              }
+            }}
+            onFocus={() => {
+              onChange(option.value);
             }}
           >
             {option.icon}
@@ -144,43 +141,7 @@ function Picker<T>({
           </button>
         ))}
       </div>
-    );
-  };
-
-  return (
-    <Popover.Content
-      side={
-        device.editor.isMobile && !device.viewport.isLandscape
-          ? "top"
-          : "bottom"
-      }
-      align="start"
-      sideOffset={12}
-      style={{ zIndex: "var(--zIndex-popup)" }}
-      onKeyDown={handleKeyDown}
-    >
-      <div
-        className={`picker`}
-        role="dialog"
-        aria-modal="true"
-        aria-label={label}
-      >
-        {renderOptions(alwaysVisibleOptions)}
-
-        {moreOptions.length > 0 && (
-          <Collapsible
-            label={t("labels.more_options")}
-            open={showMoreOptions}
-            openTrigger={() => {
-              setShowMoreOptions((value) => !value);
-            }}
-            className="picker-collapsible"
-          >
-            {renderOptions(moreOptions)}
-          </Collapsible>
-        )}
-      </div>
-    </Popover.Content>
+    </div>
   );
 }
 
@@ -190,7 +151,6 @@ export function IconPicker<T>({
   options,
   onChange,
   group = "",
-  numberOfOptionsToAlwaysShow,
 }: {
   label: string;
   value: T;
@@ -199,40 +159,51 @@ export function IconPicker<T>({
     text: string;
     icon: JSX.Element;
     keyBinding: string | null;
+    showInPicker?: boolean;
   }[];
   onChange: (value: T) => void;
-  numberOfOptionsToAlwaysShow?: number;
   group?: string;
 }) {
   const [isActive, setActive] = React.useState(false);
   const rPickerButton = React.useRef<any>(null);
+  const isRTL = getLanguage().rtl;
 
   return (
     <div>
-      <Popover.Root open={isActive} onOpenChange={(open) => setActive(open)}>
-        <Popover.Trigger
-          name={group}
-          type="button"
-          aria-label={label}
-          onClick={() => setActive(!isActive)}
-          ref={rPickerButton}
-          className={isActive ? "active" : ""}
-        >
-          {options.find((option) => option.value === value)?.icon}
-        </Popover.Trigger>
-        {isActive && (
-          <Picker
-            options={options}
-            value={value}
-            label={label}
-            onChange={onChange}
-            onClose={() => {
-              setActive(false);
-            }}
-            numberOfOptionsToAlwaysShow={numberOfOptionsToAlwaysShow}
-          />
-        )}
-      </Popover.Root>
+      <button
+        name={group}
+        type="button"
+        className={isActive ? "active" : ""}
+        aria-label={label}
+        onClick={() => setActive(!isActive)}
+        ref={rPickerButton}
+      >
+        {options.find((option) => option.value === value)?.icon}
+      </button>
+      <React.Suspense fallback="">
+        {isActive ? (
+          <>
+            <Popover
+              onCloseRequest={(event) =>
+                event.target !== rPickerButton.current && setActive(false)
+              }
+              {...(isRTL ? { right: 5.5 } : { left: -5.5 })}
+            >
+              <Picker
+                options={options.filter((opt) => opt.showInPicker !== false)}
+                value={value}
+                label={label}
+                onChange={onChange}
+                onClose={() => {
+                  setActive(false);
+                  rPickerButton.current?.focus();
+                }}
+              />
+            </Popover>
+            <div className="picker-triangle" />
+          </>
+        ) : null}
+      </React.Suspense>
     </div>
   );
 }

packages/excalidraw/components/LayerUI.tsx

@@ -41,7 +41,8 @@ import { trackEvent } from "../analytics";
 import { useDevice } from "./App";
 import Footer from "./footer/Footer";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
-import { useAtom, useAtomValue } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
+import { Provider, useAtom, useAtomValue } from "jotai";
 import MainMenu from "./main-menu/MainMenu";
 import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
 import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
@@ -59,7 +60,6 @@ import { LaserPointerButton } from "./LaserPointerButton";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
-import ElementLinkDialog from "./ElementLinkDialog";
 
 import "./LayerUI.scss";
 import "./Toolbar.scss";
@@ -84,7 +84,6 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
-  generateLinkForSelection?: AppProps["generateLinkForSelection"];
 }
 
 const DefaultMainMenu: React.FC<{
@@ -142,14 +141,14 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
-  generateLinkForSelection,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
 
-  const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
-
-  const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
+  const [eyeDropperState, setEyeDropperState] = useAtom(
+    activeEyeDropperAtom,
+    jotaiScope,
+  );
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -219,7 +218,6 @@ const LayerUI = ({
           appState={appState}
           elementsMap={app.scene.getNonDeletedElementsMap()}
           renderAction={actionManager.renderAction}
-          app={app}
         />
       </Island>
     </Section>
@@ -234,8 +232,7 @@ const LayerUI = ({
     const shouldShowStats =
       appState.stats.open &&
       !appState.zenModeEnabled &&
-      !appState.viewModeEnabled &&
-      appState.openDialog?.name !== "elementLinkSelector";
+      !appState.viewModeEnabled;
 
     return (
       <FixedSideContainer side="top">
@@ -244,91 +241,90 @@ const LayerUI = ({
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
-          {!appState.viewModeEnabled &&
-            appState.openDialog?.name !== "elementLinkSelector" && (
-              <Section heading="shapes" className="shapes-section">
-                {(heading: React.ReactNode) => (
-                  <div style={{ position: "relative" }}>
-                    {renderWelcomeScreen && (
-                      <tunnels.WelcomeScreenToolbarHintTunnel.Out />
-                    )}
-                    <Stack.Col gap={4} align="start">
-                      <Stack.Row
-                        gap={1}
-                        className={clsx("App-toolbar-container", {
+          {!appState.viewModeEnabled && (
+            <Section heading="shapes" className="shapes-section">
+              {(heading: React.ReactNode) => (
+                <div style={{ position: "relative" }}>
+                  {renderWelcomeScreen && (
+                    <tunnels.WelcomeScreenToolbarHintTunnel.Out />
+                  )}
+                  <Stack.Col gap={4} align="start">
+                    <Stack.Row
+                      gap={1}
+                      className={clsx("App-toolbar-container", {
+                        "zen-mode": appState.zenModeEnabled,
+                      })}
+                    >
+                      <Island
+                        padding={1}
+                        className={clsx("App-toolbar", {
                           "zen-mode": appState.zenModeEnabled,
                         })}
                       >
-                        <Island
-                          padding={1}
-                          className={clsx("App-toolbar", {
-                            "zen-mode": appState.zenModeEnabled,
-                          })}
-                        >
-                          <HintViewer
+                        <HintViewer
+                          appState={appState}
+                          isMobile={device.editor.isMobile}
+                          device={device}
+                          app={app}
+                        />
+                        {heading}
+                        <Stack.Row gap={1}>
+                          <PenModeButton
+                            zenModeEnabled={appState.zenModeEnabled}
+                            checked={appState.penMode}
+                            onChange={() => onPenModeToggle(null)}
+                            title={t("toolBar.penMode")}
+                            penDetected={appState.penDetected}
+                          />
+                          <LockButton
+                            checked={appState.activeTool.locked}
+                            onChange={onLockToggle}
+                            title={t("toolBar.lock")}
+                          />
+
+                          <div className="App-toolbar__divider" />
+
+                          <HandButton
+                            checked={isHandToolActive(appState)}
+                            onChange={() => onHandToolToggle()}
+                            title={t("toolBar.hand")}
+                            isMobile
+                          />
+
+                          <ShapesSwitcher
                             appState={appState}
-                            isMobile={device.editor.isMobile}
-                            device={device}
+                            activeTool={appState.activeTool}
+                            UIOptions={UIOptions}
                             app={app}
                           />
-                          {heading}
-                          <Stack.Row gap={1}>
-                            <PenModeButton
-                              zenModeEnabled={appState.zenModeEnabled}
-                              checked={appState.penMode}
-                              onChange={() => onPenModeToggle(null)}
-                              title={t("toolBar.penMode")}
-                              penDetected={appState.penDetected}
-                            />
-                            <LockButton
-                              checked={appState.activeTool.locked}
-                              onChange={onLockToggle}
-                              title={t("toolBar.lock")}
-                            />
-
-                            <div className="App-toolbar__divider" />
-
-                            <HandButton
-                              checked={isHandToolActive(appState)}
-                              onChange={() => onHandToolToggle()}
-                              title={t("toolBar.hand")}
-                              isMobile
-                            />
-
-                            <ShapesSwitcher
-                              appState={appState}
-                              activeTool={appState.activeTool}
-                              UIOptions={UIOptions}
-                              app={app}
-                            />
-                          </Stack.Row>
+                        </Stack.Row>
+                      </Island>
+                      {isCollaborating && (
+                        <Island
+                          style={{
+                            marginLeft: 8,
+                            alignSelf: "center",
+                            height: "fit-content",
+                          }}
+                        >
+                          <LaserPointerButton
+                            title={t("toolBar.laser")}
+                            checked={
+                              appState.activeTool.type === TOOL_TYPE.laser
+                            }
+                            onChange={() =>
+                              app.setActiveTool({ type: TOOL_TYPE.laser })
+                            }
+                            isMobile
+                          />
                         </Island>
-                        {isCollaborating && (
-                          <Island
-                            style={{
-                              marginLeft: 8,
-                              alignSelf: "center",
-                              height: "fit-content",
-                            }}
-                          >
-                            <LaserPointerButton
-                              title={t("toolBar.laser")}
-                              checked={
-                                appState.activeTool.type === TOOL_TYPE.laser
-                              }
-                              onChange={() =>
-                                app.setActiveTool({ type: TOOL_TYPE.laser })
-                              }
-                              isMobile
-                            />
-                          </Island>
-                        )}
-                      </Stack.Row>
-                    </Stack.Col>
-                  </div>
-                )}
-              </Section>
-            )}
+                      )}
+                    </Stack.Row>
+                  </Stack.Col>
+                </div>
+              )}
+            </Section>
+          )}
           <div
             className={clsx(
               "layer-ui__wrapper__top-right zen-mode-transition",
@@ -345,7 +341,6 @@ const LayerUI = ({
             )}
             {renderTopRightUI?.(device.editor.isMobile, appState)}
             {!appState.viewModeEnabled &&
-              appState.openDialog?.name !== "elementLinkSelector" &&
               // hide button when sidebar docked
               (!isSidebarDocked ||
                 appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (
@@ -381,7 +376,7 @@ const LayerUI = ({
     );
   };
 
-  const isSidebarDocked = useAtomValue(isSidebarDockedAtom);
+  const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
 
   const layerUIJSX = (
     <>
@@ -476,19 +471,6 @@ const LayerUI = ({
         />
       )}
       <ActiveConfirmDialog />
-      {appState.openDialog?.name === "elementLinkSelector" && (
-        <ElementLinkDialog
-          sourceElementId={appState.openDialog.sourceElementId}
-          onClose={() => {
-            setAppState({
-              openDialog: null,
-            });
-          }}
-          elementsMap={app.scene.getNonDeletedElementsMap()}
-          appState={appState}
-          generateLinkForSelection={generateLinkForSelection}
-        />
-      )}
       <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}
       {renderJSONExportDialog()}
@@ -565,11 +547,11 @@ const LayerUI = ({
 
   return (
     <UIAppStateContext.Provider value={appState}>
-      <TunnelsJotaiProvider>
+      <Provider scope={tunnels.jotaiScope}>
         <TunnelsContext.Provider value={tunnels}>
           {layerUIJSX}
         </TunnelsContext.Provider>
-      </TunnelsJotaiProvider>
+      </Provider>
     </UIAppStateContext.Provider>
   );
 };

packages/excalidraw/components/LibraryMenu.tsx

@@ -14,7 +14,8 @@ import type {
 } from "../types";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { trackEvent } from "../analytics";
-import { atom, useAtom } from "../editor-jotai";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
 import {
   useApp,
@@ -60,7 +61,7 @@ export const LibraryMenuContent = ({
   selectedItems: LibraryItem["id"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
-  const [libraryItemsData] = useAtom(libraryItemsAtom);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
   const _onAddToLibrary = useCallback(
     (elements: LibraryItem["elements"]) => {

packages/excalidraw/components/LibraryMenuHeaderContent.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 import { t } from "../i18n";
 import Trans from "./Trans";
-import { useAtom } from "../editor-jotai";
+import { jotaiScope } from "../jotai";
 import type { LibraryItem, LibraryItems, UIAppState } from "../types";
 import { useApp, useExcalidrawSetAppState } from "./App";
 import { saveLibraryAsJSON } from "../data/json";
@@ -17,6 +17,7 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
+import { useAtom } from "jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
@@ -50,9 +51,10 @@ export const LibraryDropdownMenuButton: React.FC<{
   appState,
   className,
 }) => {
-  const [libraryItemsData] = useAtom(libraryItemsAtom);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
   const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
     isLibraryMenuOpenAtom,
+    jotaiScope,
   );
 
   const renderRemoveLibAlert = () => {
@@ -284,7 +286,7 @@ export const LibraryDropdownMenu = ({
   const appState = useUIAppState();
   const setAppState = useExcalidrawSetAppState();
 
-  const [libraryItemsData] = useAtom(libraryItemsAtom);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
   const removeFromLibrary = async (libraryItems: LibraryItems) => {
     const nextItems = libraryItems.filter(

packages/excalidraw/components/MobileMenu.tsx

@@ -91,10 +91,9 @@ export const MobileMenu = ({
                 </Island>
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
-                  {!appState.viewModeEnabled &&
-                    appState.openDialog?.name !== "elementLinkSelector" && (
-                      <DefaultSidebarTriggerTunnel.Out />
-                    )}
+                  {!appState.viewModeEnabled && (
+                    <DefaultSidebarTriggerTunnel.Out />
+                  )}
                   <PenModeButton
                     checked={appState.penMode}
                     onChange={() => onPenModeToggle(null)}
@@ -130,10 +129,7 @@ export const MobileMenu = ({
   };
 
   const renderAppToolbar = () => {
-    if (
-      appState.viewModeEnabled ||
-      appState.openDialog?.name === "elementLinkSelector"
-    ) {
+    if (appState.viewModeEnabled) {
       return (
         <div className="App-toolbar-content">
           <MainMenuTunnel.Out />
@@ -158,9 +154,7 @@ export const MobileMenu = ({
   return (
     <>
       {renderSidebars()}
-      {!appState.viewModeEnabled &&
-        appState.openDialog?.name !== "elementLinkSelector" &&
-        renderToolbar()}
+      {!appState.viewModeEnabled && renderToolbar()}
       <div
         className="App-bottom-bar"
         style={{
@@ -172,14 +166,12 @@ export const MobileMenu = ({
         <Island padding={0}>
           {appState.openMenu === "shape" &&
           !appState.viewModeEnabled &&
-          appState.openDialog?.name !== "elementLinkSelector" &&
           showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}
                 elementsMap={app.scene.getNonDeletedElementsMap()}
                 renderAction={actionManager.renderAction}
-                app={app}
               />
             </Section>
           ) : null}

packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx

@@ -1,7 +1,8 @@
 import React from "react";
+import { useAtom } from "jotai";
 
 import { useTunnels } from "../../context/tunnels";
-import { useAtom } from "../../editor-jotai";
+import { jotaiScope } from "../../jotai";
 import { Dialog } from "../Dialog";
 import { withInternalFallback } from "../hoc/withInternalFallback";
 import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
@@ -22,6 +23,7 @@ const OverwriteConfirmDialog = Object.assign(
       const { OverwriteConfirmDialogTunnel } = useTunnels();
       const [overwriteConfirmState, setState] = useAtom(
         overwriteConfirmStateAtom,
+        jotaiScope,
       );
 
       if (!overwriteConfirmState.active) {

packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts

@@ -1,4 +1,5 @@
-import { atom, editorJotaiStore } from "../../editor-jotai";
+import { atom } from "jotai";
+import { jotaiStore } from "../../jotai";
 import type React from "react";
 
 export type OverwriteConfirmState =
@@ -31,7 +32,7 @@ export async function openConfirmModal({
   color: "danger" | "warning";
 }) {
   return new Promise<boolean>((resolve) => {
-    editorJotaiStore.set(overwriteConfirmStateAtom, {
+    jotaiStore.set(overwriteConfirmStateAtom, {
       active: true,
       onConfirm: () => resolve(true),
       onClose: () => resolve(false),

packages/excalidraw/components/PasteChartDialog.tsx

@@ -48,9 +48,6 @@ const ChartPreviewBtn = (props: {
           viewBackgroundColor: oc.white,
         },
         null, // files
-        {
-          skipInliningFonts: true,
-        },
       );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();

packages/excalidraw/components/SearchMenu.tsx

@@ -11,7 +11,8 @@ import { measureText } from "../element/textElement";
 import { addEventListener, getFontString } from "../utils";
 import { KEYS } from "../keys";
 import clsx from "clsx";
-import { atom, useAtom } from "../editor-jotai";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
 import { t } from "../i18n";
 import { isElementCompletelyInViewport } from "../element/sizeHelpers";
 import { randomInteger } from "../random";
@@ -57,7 +58,7 @@ export const SearchMenu = () => {
 
   const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const [inputValue, setInputValue] = useAtom(searchQueryAtom);
+  const [inputValue, setInputValue] = useAtom(searchQueryAtom, jotaiScope);
   const searchQuery = inputValue.trim() as SearchQuery;
 
   const [isSearching, setIsSearching] = useState(false);
@@ -69,7 +70,10 @@ export const SearchMenu = () => {
   const searchedQueryRef = useRef<SearchQuery | null>(null);
   const lastSceneNonceRef = useRef<number | undefined>(undefined);
 
-  const [focusIndex, setFocusIndex] = useAtom(searchItemInFocusAtom);
+  const [focusIndex, setFocusIndex] = useAtom(
+    searchItemInFocusAtom,
+    jotaiScope,
+  );
   const elementsMap = app.scene.getNonDeletedElementsMap();
 
   useEffect(() => {
@@ -290,7 +294,6 @@ export const SearchMenu = () => {
     // as well as to handle events before App ones
     return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
       capture: true,
-      passive: false,
     });
   }, [setAppState, stableState, app]);
 

packages/excalidraw/components/Sidebar/Sidebar.tsx

@@ -8,7 +8,8 @@ import React, {
   useCallback,
 } from "react";
 import { Island } from "../Island";
-import { atom, useSetAtom } from "../../editor-jotai";
+import { atom, useSetAtom } from "jotai";
+import { jotaiScope } from "../../jotai";
 import type { SidebarProps, SidebarPropsContextValue } from "./common";
 import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
@@ -57,7 +58,7 @@ export const SidebarInner = forwardRef(
 
     const setAppState = useExcalidrawSetAppState();
 
-    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom);
+    const setIsSidebarDockedAtom = useSetAtom(isSidebarDockedAtom, jotaiScope);
 
     useLayoutEffect(() => {
       setIsSidebarDockedAtom(!!docked);

packages/excalidraw/components/Stats/Collapsible.tsx

@@ -9,7 +9,6 @@ interface CollapsibleProps {
   open: boolean;
   openTrigger: () => void;
   children: React.ReactNode;
-  className?: string;
 }
 
 const Collapsible = ({
@@ -17,7 +16,6 @@ const Collapsible = ({
   open,
   openTrigger,
   children,
-  className,
 }: CollapsibleProps) => {
   return (
     <>
@@ -28,7 +26,6 @@ const Collapsible = ({
           justifyContent: "space-between",
           alignItems: "center",
         }}
-        className={className}
         onClick={openTrigger}
       >
         {label}

packages/excalidraw/components/Stats/Dimension.tsx

@@ -1,18 +1,10 @@
 import type { ExcalidrawElement } from "../../element/types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
+import { getStepSizedValue, isPropertyEditable, resizeElement } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { resizeSingleElement } from "../../element/resizeElements";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { isImageElement } from "../../element/typeChecks";
-import {
-  MINIMAL_CROP_SIZE,
-  getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
-import { clamp, round } from "../../../math";
 
 interface DimensionDragInputProps {
   property: "width" | "height";
@@ -31,124 +23,20 @@ const handleDimensionChange: DragInputCallbackType<
 > = ({
   accumulatedChange,
   originalElements,
-  originalElementsMap,
   shouldKeepAspectRatio,
   shouldChangeByStepSize,
   nextValue,
   property,
-  originalAppState,
-  instantChange,
   scene,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
+  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
-  const latestElement = elementsMap.get(origElement.id);
-  if (origElement && latestElement) {
+  if (origElement) {
     const keepAspectRatio =
       shouldKeepAspectRatio || _shouldKeepAspectRatio(origElement);
     const aspectRatio = origElement.width / origElement.height;
 
-    if (originalAppState.croppingElementId === origElement.id) {
-      const element = elementsMap.get(origElement.id);
-
-      if (!element || !isImageElement(element) || !element.crop) {
-        return;
-      }
-
-      const crop = element.crop;
-      let nextCrop = { ...crop };
-
-      const isFlippedByX = element.scale[0] === -1;
-      const isFlippedByY = element.scale[1] === -1;
-
-      const { width: uncroppedWidth, height: uncroppedHeight } =
-        getUncroppedWidthAndHeight(element);
-
-      const naturalToUncroppedWidthRatio = crop.naturalWidth / uncroppedWidth;
-      const naturalToUncroppedHeightRatio =
-        crop.naturalHeight / uncroppedHeight;
-
-      const MAX_POSSIBLE_WIDTH = isFlippedByX
-        ? crop.width + crop.x
-        : crop.naturalWidth - crop.x;
-
-      const MAX_POSSIBLE_HEIGHT = isFlippedByY
-        ? crop.height + crop.y
-        : crop.naturalHeight - crop.y;
-
-      const MIN_WIDTH = MINIMAL_CROP_SIZE * naturalToUncroppedWidthRatio;
-      const MIN_HEIGHT = MINIMAL_CROP_SIZE * naturalToUncroppedHeightRatio;
-
-      if (nextValue !== undefined) {
-        if (property === "width") {
-          const nextValueInNatural = nextValue * naturalToUncroppedWidthRatio;
-
-          const nextCropWidth = clamp(
-            nextValueInNatural,
-            MIN_WIDTH,
-            MAX_POSSIBLE_WIDTH,
-          );
-
-          nextCrop = {
-            ...nextCrop,
-            width: nextCropWidth,
-            x: isFlippedByX ? crop.x + crop.width - nextCropWidth : crop.x,
-          };
-        } else if (property === "height") {
-          const nextValueInNatural = nextValue * naturalToUncroppedHeightRatio;
-          const nextCropHeight = clamp(
-            nextValueInNatural,
-            MIN_HEIGHT,
-            MAX_POSSIBLE_HEIGHT,
-          );
-
-          nextCrop = {
-            ...nextCrop,
-            height: nextCropHeight,
-            y: isFlippedByY ? crop.y + crop.height - nextCropHeight : crop.y,
-          };
-        }
-
-        mutateElement(element, {
-          crop: nextCrop,
-          width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
-          height: nextCrop.height / (crop.naturalHeight / uncroppedHeight),
-        });
-        return;
-      }
-
-      const changeInWidth = property === "width" ? instantChange : 0;
-      const changeInHeight = property === "height" ? instantChange : 0;
-
-      const nextCropWidth = clamp(
-        crop.width + changeInWidth,
-        MIN_WIDTH,
-        MAX_POSSIBLE_WIDTH,
-      );
-
-      const nextCropHeight = clamp(
-        crop.height + changeInHeight,
-        MIN_WIDTH,
-        MAX_POSSIBLE_HEIGHT,
-      );
-
-      nextCrop = {
-        ...crop,
-        x: isFlippedByX ? crop.x + crop.width - nextCropWidth : crop.x,
-        y: isFlippedByY ? crop.y + crop.height - nextCropHeight : crop.y,
-        width: nextCropWidth,
-        height: nextCropHeight,
-      };
-
-      mutateElement(element, {
-        crop: nextCrop,
-        width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
-        height: nextCrop.height / (crop.naturalHeight / uncroppedHeight),
-      });
-
-      return;
-    }
-
     if (nextValue !== undefined) {
       const nextWidth = Math.max(
         property === "width"
@@ -167,17 +55,14 @@ const handleDimensionChange: DragInputCallbackType<
         MIN_WIDTH_OR_HEIGHT,
       );
 
-      resizeSingleElement(
+      resizeElement(
         nextWidth,
         nextHeight,
-        latestElement,
+        keepAspectRatio,
         origElement,
         elementsMap,
-        originalElementsMap,
-        property === "width" ? "e" : "s",
-        {
-          shouldMaintainAspectRatio: keepAspectRatio,
-        },
+        elements,
+        scene,
       );
 
       return;
@@ -214,17 +99,14 @@ const handleDimensionChange: DragInputCallbackType<
     nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
     nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
 
-    resizeSingleElement(
+    resizeElement(
       nextWidth,
       nextHeight,
-      latestElement,
+      keepAspectRatio,
       origElement,
       elementsMap,
-      originalElementsMap,
-      property === "width" ? "e" : "s",
-      {
-        shouldMaintainAspectRatio: keepAspectRatio,
-      },
+      elements,
+      scene,
     );
   }
 };
@@ -235,25 +117,9 @@ const DimensionDragInput = ({
   scene,
   appState,
 }: DimensionDragInputProps) => {
-  let value = round(property === "width" ? element.width : element.height, 2);
-
-  if (
-    appState.croppingElementId &&
-    appState.croppingElementId === element.id &&
-    isImageElement(element) &&
-    element.crop
-  ) {
-    const { width: uncroppedWidth, height: uncroppedHeight } =
-      getUncroppedWidthAndHeight(element);
-    if (property === "width") {
-      const ratio = uncroppedWidth / element.crop.naturalWidth;
-      value = round(element.crop.width * ratio, 2);
-    }
-    if (property === "height") {
-      const ratio = uncroppedHeight / element.crop.naturalHeight;
-      value = round(element.crop.height * ratio, 2);
-    }
-  }
+  const value =
+    Math.round((property === "width" ? element.width : element.height) * 100) /
+    100;
 
   return (
     <DragInput

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -2,10 +2,7 @@ import { useMemo } from "react";
 import { getCommonBounds, isTextElement } from "../../element";
 import { updateBoundElements } from "../../element/binding";
 import { mutateElement } from "../../element/mutateElement";
-import {
-  rescalePointsInElement,
-  resizeSingleElement,
-} from "../../element/resizeElements";
+import { rescalePointsInElement } from "../../element/resizeElements";
 import {
   getBoundTextElement,
   handleBindTextResize,
@@ -20,10 +17,10 @@ import type { AppState } from "../../types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
-import { getElementsInAtomicUnit } from "./utils";
+import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { pointFrom, type GlobalPoint } from "../../../math";
+import { point, type GlobalPoint } from "../../../math";
 
 interface MultiDimensionProps {
   property: "width" | "height";
@@ -72,6 +69,7 @@ const resizeElementInGroup = (
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+  const { width: oldWidth, height: oldHeight } = latestElement;
 
   mutateElement(latestElement, updates, false);
   const boundTextElement = getBoundTextElement(
@@ -81,7 +79,7 @@ const resizeElementInGroup = (
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
     updateBoundElements(latestElement, elementsMap, {
-      newSize: { width: updates.width, height: updates.height },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
@@ -153,6 +151,7 @@ const handleDimensionChange: DragInputCallbackType<
   property,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
+  const elements = scene.getNonDeletedElements();
   const atomicUnits = getAtomicUnits(originalElements, originalAppState);
   if (nextValue !== undefined) {
     for (const atomicUnit of atomicUnits) {
@@ -183,7 +182,7 @@ const handleDimensionChange: DragInputCallbackType<
           nextHeight,
           initialHeight,
           aspectRatio,
-          pointFrom(x1, y1),
+          point(x1, y1),
           property,
           latestElements,
           originalElements,
@@ -225,17 +224,15 @@ const handleDimensionChange: DragInputCallbackType<
           nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
           nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
 
-          resizeSingleElement(
+          resizeElement(
             nextWidth,
             nextHeight,
-            latestElement,
+            false,
             origElement,
             elementsMap,
-            originalElementsMap,
-            property === "width" ? "e" : "s",
-            {
-              shouldInformMutation: false,
-            },
+            elements,
+            scene,
+            false,
           );
         }
       }
@@ -290,7 +287,7 @@ const handleDimensionChange: DragInputCallbackType<
         nextHeight,
         initialHeight,
         aspectRatio,
-        pointFrom(x1, y1),
+        point(x1, y1),
         property,
         latestElements,
         originalElements,
@@ -328,17 +325,14 @@ const handleDimensionChange: DragInputCallbackType<
         nextWidth = Math.max(MIN_WIDTH_OR_HEIGHT, nextWidth);
         nextHeight = Math.max(MIN_WIDTH_OR_HEIGHT, nextHeight);
 
-        resizeSingleElement(
+        resizeElement(
           nextWidth,
           nextHeight,
-          latestElement,
+          false,
           origElement,
           elementsMap,
-          originalElementsMap,
-          property === "width" ? "e" : "s",
-          {
-            shouldInformMutation: false,
-          },
+          elements,
+          scene,
         );
       }
     }

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -13,7 +13,7 @@ import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import type { AppState } from "../../types";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 
 interface MultiPositionProps {
   property: "x" | "y";
@@ -44,8 +44,8 @@ const moveElements = (
       origElement.y + origElement.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(origElement.x, origElement.y),
-      pointFrom(cx, cy),
+      point(origElement.x, origElement.y),
+      point(cx, cy),
       origElement.angle,
     );
 
@@ -97,8 +97,8 @@ const moveGroupTo = (
       ];
 
       const [topLeftX, topLeftY] = pointRotateRads(
-        pointFrom(latestElement.x, latestElement.y),
-        pointFrom(cx, cy),
+        point(latestElement.x, latestElement.y),
+        point(cx, cy),
         latestElement.angle,
       );
 
@@ -171,8 +171,8 @@ const handlePositionChange: DragInputCallbackType<
             origElement.y + origElement.height / 2,
           ];
           const [topLeftX, topLeftY] = pointRotateRads(
-            pointFrom(origElement.x, origElement.y),
-            pointFrom(cx, cy),
+            point(origElement.x, origElement.y),
+            point(cx, cy),
             origElement.angle,
           );
 
@@ -237,13 +237,12 @@ const MultiPosition = ({
           const [x1, y1] = getCommonBounds(elementsInUnit);
           return Math.round((property === "x" ? x1 : y1) * 100) / 100;
         }
-
         const [el] = elementsInUnit;
         const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
 
         const [topLeftX, topLeftY] = pointRotateRads(
-          pointFrom(el.x, el.y),
-          pointFrom(cx, cy),
+          point(el.x, el.y),
+          point(cx, cy),
           el.angle,
         );
 

packages/excalidraw/components/Stats/Position.tsx

@@ -4,13 +4,7 @@ import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { clamp, pointFrom, pointRotateRads, round } from "../../../math";
-import { isImageElement } from "../../element/typeChecks";
-import {
-  getFlipAdjustedCropPosition,
-  getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
+import { point, pointRotateRads } from "../../../math";
 
 interface PositionProps {
   property: "x" | "y";
@@ -24,14 +18,12 @@ const STEP_SIZE = 10;
 
 const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
   accumulatedChange,
-  instantChange,
   originalElements,
   originalElementsMap,
   shouldChangeByStepSize,
   nextValue,
   property,
   scene,
-  originalAppState,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   const elements = scene.getNonDeletedElements();
@@ -41,87 +33,11 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     origElement.y + origElement.height / 2,
   ];
   const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(origElement.x, origElement.y),
-    pointFrom(cx, cy),
+    point(origElement.x, origElement.y),
+    point(cx, cy),
     origElement.angle,
   );
 
-  if (originalAppState.croppingElementId === origElement.id) {
-    const element = elementsMap.get(origElement.id);
-
-    if (!element || !isImageElement(element) || !element.crop) {
-      return;
-    }
-
-    const crop = element.crop;
-    let nextCrop = crop;
-    const isFlippedByX = element.scale[0] === -1;
-    const isFlippedByY = element.scale[1] === -1;
-    const { width: uncroppedWidth, height: uncroppedHeight } =
-      getUncroppedWidthAndHeight(element);
-
-    if (nextValue !== undefined) {
-      if (property === "x") {
-        const nextValueInNatural =
-          nextValue * (crop.naturalWidth / uncroppedWidth);
-
-        if (isFlippedByX) {
-          nextCrop = {
-            ...crop,
-            x: clamp(
-              crop.naturalWidth - nextValueInNatural - crop.width,
-              0,
-              crop.naturalWidth - crop.width,
-            ),
-          };
-        } else {
-          nextCrop = {
-            ...crop,
-            x: clamp(
-              nextValue * (crop.naturalWidth / uncroppedWidth),
-              0,
-              crop.naturalWidth - crop.width,
-            ),
-          };
-        }
-      }
-
-      if (property === "y") {
-        nextCrop = {
-          ...crop,
-          y: clamp(
-            nextValue * (crop.naturalHeight / uncroppedHeight),
-            0,
-            crop.naturalHeight - crop.height,
-          ),
-        };
-      }
-
-      mutateElement(element, {
-        crop: nextCrop,
-      });
-
-      return;
-    }
-
-    const changeInX =
-      (property === "x" ? instantChange : 0) * (isFlippedByX ? -1 : 1);
-    const changeInY =
-      (property === "y" ? instantChange : 0) * (isFlippedByY ? -1 : 1);
-
-    nextCrop = {
-      ...crop,
-      x: clamp(crop.x + changeInX, 0, crop.naturalWidth - crop.width),
-      y: clamp(crop.y + changeInY, 0, crop.naturalHeight - crop.height),
-    };
-
-    mutateElement(element, {
-      crop: nextCrop,
-    });
-
-    return;
-  }
-
   if (nextValue !== undefined) {
     const newTopLeftX = property === "x" ? nextValue : topLeftX;
     const newTopLeftY = property === "y" ? nextValue : topLeftY;
@@ -177,26 +93,12 @@ const Position = ({
   appState,
 }: PositionProps) => {
   const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(element.x, element.y),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
+    point(element.x, element.y),
+    point(element.x + element.width / 2, element.y + element.height / 2),
     element.angle,
   );
-  let value = round(property === "x" ? topLeftX : topLeftY, 2);
-
-  if (
-    appState.croppingElementId === element.id &&
-    isImageElement(element) &&
-    element.crop
-  ) {
-    const flipAdjustedPosition = getFlipAdjustedCropPosition(element);
-
-    if (flipAdjustedPosition) {
-      value = round(
-        property === "x" ? flipAdjustedPosition.x : flipAdjustedPosition.y,
-        2,
-      );
-    }
-  }
+  const value =
+    Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
 
   return (
     <StatsDragInput

packages/excalidraw/components/Stats/index.tsx

@@ -23,15 +23,12 @@ import Collapsible from "./Collapsible";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
 import { getAtomicUnits } from "./utils";
 import { STATS_PANELS } from "../../constants";
-import { isElbowArrow, isImageElement } from "../../element/typeChecks";
+import { isElbowArrow } from "../../element/typeChecks";
 import CanvasGrid from "./CanvasGrid";
 import clsx from "clsx";
 
 import "./Stats.scss";
 import { isGridModeEnabled } from "../../snapping";
-import { getUncroppedWidthAndHeight } from "../../element/cropElement";
-import { round } from "../../../math";
-import { frameAndChildrenSelectedTogether } from "../../frame";
 
 interface StatsProps {
   app: AppClassProperties;
@@ -131,13 +128,6 @@ export const StatsInner = memo(
     const multipleElements =
       selectedElements.length > 1 ? selectedElements : null;
 
-    const cropMode =
-      appState.croppingElementId && isImageElement(singleElement);
-
-    const unCroppedDimension = cropMode
-      ? getUncroppedWidthAndHeight(singleElement)
-      : null;
-
     const [sceneDimension, setSceneDimension] = useState<{
       width: number;
       height: number;
@@ -171,10 +161,6 @@ export const StatsInner = memo(
       return getAtomicUnits(selectedElements, appState);
     }, [selectedElements, appState]);
 
-    const _frameAndChildrenSelectedTogether = useMemo(() => {
-      return frameAndChildrenSelectedTogether(selectedElements);
-    }, [selectedElements]);
-
     return (
       <div className="exc-stats">
         <Island padding={3}>
@@ -231,7 +217,7 @@ export const StatsInner = memo(
             {renderCustomStats?.(elements, appState)}
           </Collapsible>
 
-          {!_frameAndChildrenSelectedTogether && selectedElements.length > 0 && (
+          {selectedElements.length > 0 && (
             <div
               id="elementStats"
               style={{
@@ -258,34 +244,8 @@ export const StatsInner = memo(
                 <StatsRows>
                   {singleElement && (
                     <>
-                      {cropMode && (
-                        <StatsRow heading>
-                          {t("labels.unCroppedDimension")}
-                        </StatsRow>
-                      )}
-
-                      {appState.croppingElementId &&
-                        isImageElement(singleElement) &&
-                        unCroppedDimension && (
-                          <StatsRow columns={2}>
-                            <div>{t("stats.width")}</div>
-                            <div>{round(unCroppedDimension.width, 2)}</div>
-                          </StatsRow>
-                        )}
-
-                      {appState.croppingElementId &&
-                        isImageElement(singleElement) &&
-                        unCroppedDimension && (
-                          <StatsRow columns={2}>
-                            <div>{t("stats.height")}</div>
-                            <div>{round(unCroppedDimension.height, 2)}</div>
-                          </StatsRow>
-                        )}
-
                       <StatsRow heading data-testid="stats-element-type">
-                        {appState.croppingElementId
-                          ? t("labels.imageCropping")
-                          : t(`element.${singleElement.type}`)}
+                        {t(`element.${singleElement.type}`)}
                       </StatsRow>
 
                       <StatsRow>
@@ -427,8 +387,7 @@ export const StatsInner = memo(
       prev.selectedElements === next.selectedElements &&
       prev.appState.stats.panels === next.appState.stats.panels &&
       prev.gridModeEnabled === next.gridModeEnabled &&
-      prev.appState.gridStep === next.appState.gridStep &&
-      prev.appState.croppingElementId === next.appState.croppingElementId
+      prev.appState.gridStep === next.appState.gridStep
     );
   },
 );

packages/excalidraw/components/Stats/stats.test.tsx

@@ -25,7 +25,7 @@ import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
 import type { Degrees } from "../../../math";
-import { degreesToRadians, pointFrom, pointRotateRads } from "../../../math";
+import { degreesToRadians, point, pointRotateRads } from "../../../math";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -264,8 +264,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -283,8 +283,8 @@ describe("stats for a generic element", () => {
     testInputProperty(rectangle, "angle", "A", 0, 45);
 
     let [newTopLeftX, newTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 
@@ -294,8 +294,8 @@ describe("stats for a generic element", () => {
     testInputProperty(rectangle, "angle", "A", 45, 66);
 
     [newTopLeftX, newTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@@ -311,8 +311,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     const [topLeftX, topLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@@ -321,8 +321,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
     expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@@ -334,8 +334,8 @@ describe("stats for a generic element", () => {
       rectangle.y + rectangle.height / 2,
     ];
     [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      pointFrom(rectangle.x, rectangle.y),
-      pointFrom(cx, cy),
+      point(rectangle.x, rectangle.y),
+      point(cx, cy),
       rectangle.angle,
     );
 

packages/excalidraw/components/Stats/utils.ts

@@ -1,11 +1,21 @@
 import type { Radians } from "../../../math";
-import { pointFrom, pointRotateRads } from "../../../math";
+import { point, pointRotateRads } from "../../../math";
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
 } from "../../element/binding";
 import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
+import {
+  measureFontSizeFromWidth,
+  rescalePointsInElement,
+} from "../../element/resizeElements";
+import {
+  getApproxMinLineHeight,
+  getApproxMinLineWidth,
+  getBoundTextElement,
+  getBoundTextMaxWidth,
+  handleBindTextResize,
+} from "../../element/textElement";
 import {
   isFrameLikeElement,
   isLinearElement,
@@ -24,6 +34,7 @@ import {
 } from "../../groups";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
+import { getFontString } from "../../utils";
 
 export type StatsInputProperty =
   | "x"
@@ -110,6 +121,97 @@ export const newOrigin = (
   };
 };
 
+export const resizeElement = (
+  nextWidth: number,
+  nextHeight: number,
+  keepAspectRatio: boolean,
+  origElement: ExcalidrawElement,
+  elementsMap: NonDeletedSceneElementsMap,
+  elements: readonly NonDeletedExcalidrawElement[],
+  scene: Scene,
+  shouldInformMutation = true,
+) => {
+  const latestElement = elementsMap.get(origElement.id);
+  if (!latestElement) {
+    return;
+  }
+  let boundTextFont: { fontSize?: number } = {};
+  const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+
+  if (boundTextElement) {
+    const minWidth = getApproxMinLineWidth(
+      getFontString(boundTextElement),
+      boundTextElement.lineHeight,
+    );
+    const minHeight = getApproxMinLineHeight(
+      boundTextElement.fontSize,
+      boundTextElement.lineHeight,
+    );
+    nextWidth = Math.max(nextWidth, minWidth);
+    nextHeight = Math.max(nextHeight, minHeight);
+  }
+
+  const { width: oldWidth, height: oldHeight } = latestElement;
+
+  mutateElement(
+    latestElement,
+    {
+      ...newOrigin(
+        latestElement.x,
+        latestElement.y,
+        latestElement.width,
+        latestElement.height,
+        nextWidth,
+        nextHeight,
+        latestElement.angle,
+      ),
+      width: nextWidth,
+      height: nextHeight,
+      ...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
+    },
+    shouldInformMutation,
+  );
+  updateBindings(latestElement, elementsMap, elements, scene, {
+    newSize: {
+      width: nextWidth,
+      height: nextHeight,
+    },
+  });
+
+  if (boundTextElement) {
+    boundTextFont = {
+      fontSize: boundTextElement.fontSize,
+    };
+    if (keepAspectRatio) {
+      const updatedElement = {
+        ...latestElement,
+        width: nextWidth,
+        height: nextHeight,
+      };
+
+      const nextFont = measureFontSizeFromWidth(
+        boundTextElement,
+        elementsMap,
+        getBoundTextMaxWidth(updatedElement, boundTextElement),
+      );
+      boundTextFont = {
+        fontSize: nextFont?.size ?? boundTextElement.fontSize,
+      };
+    }
+  }
+
+  updateBoundElements(latestElement, elementsMap, {
+    oldSize: { width: oldWidth, height: oldHeight },
+  });
+
+  if (boundTextElement && boundTextFont) {
+    mutateElement(boundTextElement, {
+      fontSize: boundTextFont.fontSize,
+    });
+  }
+  handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
+};
+
 export const moveElement = (
   newTopLeftX: number,
   newTopLeftY: number,
@@ -129,8 +231,8 @@ export const moveElement = (
     originalElement.y + originalElement.height / 2,
   ];
   const [topLeftX, topLeftY] = pointRotateRads(
-    pointFrom(originalElement.x, originalElement.y),
-    pointFrom(cx, cy),
+    point(originalElement.x, originalElement.y),
+    point(cx, cy),
     originalElement.angle,
   );
 
@@ -138,8 +240,8 @@ export const moveElement = (
   const changeInY = newTopLeftY - topLeftY;
 
   const [x, y] = pointRotateRads(
-    pointFrom(newTopLeftX, newTopLeftY),
-    pointFrom(cx + changeInX, cy + changeInY),
+    point(newTopLeftX, newTopLeftY),
+    point(cx + changeInX, cy + changeInY),
     -originalElement.angle as Radians,
   );
 
@@ -200,7 +302,6 @@ export const updateBindings = (
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: { width: number; height: number };
-    zoom?: AppState["zoom"];
   },
 ) => {
   if (isLinearElement(latestElement)) {
@@ -211,7 +312,6 @@ export const updateBindings = (
       scene,
       true,
       [],
-      options?.zoom,
     );
   } else {
     updateBoundElements(latestElement, elementsMap, options);

packages/excalidraw/components/TTDDialog/TTDDialog.tsx

@@ -25,7 +25,7 @@ import type { BinaryFiles } from "../../types";
 import { ArrowRightIcon } from "../icons";
 
 import "./TTDDialog.scss";
-import { atom, useAtom } from "../../editor-jotai";
+import { atom, useAtom } from "jotai";
 import { trackEvent } from "../../analytics";
 import { InlineIcon } from "../InlineIcon";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";