fix: backport mermaid xss fix to 0.18.1

.env.development

@@ -48,6 +48,3 @@ UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
 s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
 kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
 HQIDAQAB'
-
-# set to true in .env.development.local to disable the prevent unload dialog
-VITE_APP_DISABLE_PREVENT_UNLOAD=

.eslintrc.json

@@ -1,21 +1,6 @@
 {
   "extends": ["@excalidraw/eslint-config", "react-app"],
   "rules": {
-    "import/order": [
-      "warn",
-      {
-        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
-        "pathGroups": [
-          {
-            "pattern": "@excalidraw/**",
-            "group": "external",
-            "position": "after"
-          }
-        ],
-        "newlines-between": "always-and-inside-groups",
-        "warnOnUnassignedImports": true
-      }
-    ],
     "import/no-anonymous-default-export": "off",
     "no-restricted-globals": "off",
     "@typescript-eslint/consistent-type-imports": [

dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx

@@ -2,7 +2,7 @@
 
 Earlier we were using `renderFooter` prop to render custom footer which was removed in [#5970](https://github.com/excalidraw/excalidraw/pull/5970). Now you can pass a `Footer` component instead to render the custom UI for footer.
 
-You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should be a valid React Node.
+You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should a valid React Node.
 
 **Usage**
 
@@ -25,7 +25,7 @@ function App() {
 }
 ```
 
-This will only work for `Desktop` devices.
+This will only for `Desktop` devices.
 
 For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
 
@@ -65,4 +65,4 @@ const App = () => (
 // Need to render when code is span across multiple components
 // in Live Code blocks editor
 render(<App />);
-```
+```

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

@@ -3,7 +3,7 @@
 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 |
@@ -13,7 +13,7 @@ All `props` are _optional_.
 | [`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. |
+| [`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. |
 | [`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 |
@@ -29,9 +29,8 @@ All `props` are _optional_.
 | [`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 |
-| [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| <code>((link: string) => boolean &#124; undefined)</code> | \_ | use for custom src url validation |
+| [`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>` |
-| [`renderScrollbars`] | `boolean`| | `false` | Indicates whether scrollbars will be shown
 
 ### Storing custom data on Excalidraw elements
 

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

@@ -1,6 +1,5 @@
-import clsx from "clsx";
 import React from "react";
-
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 const FeatureList = [

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

@@ -1,6 +1,5 @@
-import clsx from "clsx";
 import React from "react";
-
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 type FeatureItem = {

dev-docs/src/pages/index.tsx

@@ -1,11 +1,10 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import HomepageFeatures from "@site/src/components/Homepage";
-import Layout from "@theme/Layout";
-import clsx from "clsx";
-import React from "react";
-
 import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/Homepage";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();

dev-docs/src/theme/MDXComponents.js

@@ -1,6 +1,6 @@
 // Import the original mapper
-import Highlight from "@site/src/components/Highlight";
 import MDXComponents from "@theme-original/MDXComponents";
+import Highlight from "@site/src/components/Highlight";
 
 export default {
   // Re-use the default mapping

examples/with-nextjs/src/app/page.tsx

@@ -1,6 +1,5 @@
 import dynamic from "next/dynamic";
 import Script from "next/script";
-
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically

examples/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,11 +1,10 @@
 "use client";
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
+import App from "../../with-script-in-browser/components/ExampleApp";
 
 import "@excalidraw/excalidraw/index.css";
 
-import App from "../../with-script-in-browser/components/ExampleApp";
-
 const ExcalidrawWrapper: React.FC = () => {
   return (
     <>

examples/with-nextjs/src/pages/excalidraw-in-pages.tsx

@@ -1,5 +1,4 @@
 import dynamic from "next/dynamic";
-
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically

examples/with-script-in-browser/components/CustomFooter.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from "nanoid";
 import React, {
   useEffect,
   useState,
@@ -7,24 +6,13 @@ import React, {
   Children,
   cloneElement,
 } from "react";
+import ExampleSidebar from "./sidebar/ExampleSidebar";
 
 import type * as TExcalidraw from "@excalidraw/excalidraw";
-import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
-import type {
-  NonDeletedExcalidrawElement,
-  Theme,
-} from "@excalidraw/excalidraw/element/types";
-import type {
-  AppState,
-  BinaryFileData,
-  ExcalidrawImperativeAPI,
-  ExcalidrawInitialDataState,
-  Gesture,
-  LibraryItems,
-  PointerDownState as ExcalidrawPointerDownState,
-} from "@excalidraw/excalidraw/types";
 
-import initialData from "../initialData";
+import { nanoid } from "nanoid";
+
+import type { ResolvablePromise } from "../utils";
 import {
   resolvablePromise,
   distance2d,
@@ -35,12 +23,25 @@ import {
 
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
-import ExampleSidebar from "./sidebar/ExampleSidebar";
+import initialData from "../initialData";
+
+import type {
+  AppState,
+  BinaryFileData,
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState,
+  Gesture,
+  LibraryItems,
+  PointerDownState as ExcalidrawPointerDownState,
+} from "@excalidraw/excalidraw/types";
+import type {
+  NonDeletedExcalidrawElement,
+  Theme,
+} from "@excalidraw/excalidraw/element/types";
+import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
 
 import "./ExampleApp.scss";
 
-import type { ResolvablePromise } from "../utils";
-
 type Comment = {
   x: number;
   y: number;
@@ -104,7 +105,6 @@ export default function ExampleApp({
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
-  const [renderScrollbars, setRenderScrollbars] = useState(false);
   const [blobUrl, setBlobUrl] = useState<string>("");
   const [canvasUrl, setCanvasUrl] = useState<string>("");
   const [exportWithDarkMode, setExportWithDarkMode] = useState(false);
@@ -193,7 +193,6 @@ export default function ExampleApp({
         }) => setPointerData(payload),
         viewModeEnabled,
         zenModeEnabled,
-        renderScrollbars,
         gridModeEnabled,
         theme,
         name: "Custom name of drawing",
@@ -712,14 +711,6 @@ export default function ExampleApp({
             />
             Grid mode
           </label>
-          <label>
-            <input
-              type="checkbox"
-              checked={renderScrollbars}
-              onChange={() => setRenderScrollbars(!renderScrollbars)}
-            />
-            Render scrollbars
-          </label>
           <label>
             <input
               type="checkbox"

examples/with-script-in-browser/components/MobileFooter.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-
-import type * as TExcalidraw from "@excalidraw/excalidraw";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-
 import CustomFooter from "./CustomFooter";
+import type * as TExcalidraw from "@excalidraw/excalidraw";
 
 const MobileFooter = ({
   excalidrawAPI,

examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-
 import "./ExampleSidebar.scss";
 
 export default function Sidebar({ children }: { children: React.ReactNode }) {

examples/with-script-in-browser/index.tsx

@@ -1,11 +1,10 @@
+import App from "./components/ExampleApp";
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import "@excalidraw/excalidraw/index.css";
-
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 
-import App from "./components/ExampleApp";
+import "@excalidraw/excalidraw/index.css";
 
 declare global {
   interface Window {

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

@@ -15,8 +15,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "preview": "vite preview --port 5002",
-    "build:preview": "yarn build && yarn preview",
+    "build:preview": "yarn build && vite preview --port 5002",
     "build:package": "yarn workspace @excalidraw/excalidraw run build:esm"
   }
 }

examples/with-script-in-browser/utils.ts

@@ -1,6 +1,6 @@
-import { MIME_TYPES } from "@excalidraw/excalidraw";
-import { fileOpen as _fileOpen } from "browser-fs-access";
 import { unstable_batchedUpdates } from "react-dom";
+import { fileOpen as _fileOpen } from "browser-fs-access";
+import { MIME_TYPES } from "@excalidraw/excalidraw";
 
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 

excalidraw-app/App.tsx

@@ -1,7 +1,24 @@
-import Slider from "rc-slider";
-
-import "rc-slider/assets/index.css";
-
+import polyfill from "@excalidraw/excalidraw/polyfill";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
+import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
+import { TopErrorBoundary } from "./components/TopErrorBoundary";
+import {
+  APP_NAME,
+  EVENT,
+  THEME,
+  TITLE_TIMEOUT,
+  VERSION_TIMEOUT,
+} from "@excalidraw/excalidraw/constants";
+import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
+import type {
+  FileId,
+  NonDeletedExcalidrawElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/excalidraw/element/types";
+import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
+import { t } from "@excalidraw/excalidraw/i18n";
 import {
   Excalidraw,
   LiveCollaborationTrigger,
@@ -9,23 +26,15 @@ import {
   CaptureUpdateAction,
   reconcileElements,
 } from "@excalidraw/excalidraw";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
+import type {
+  AppState,
+  ExcalidrawImperativeAPI,
+  BinaryFiles,
+  ExcalidrawInitialDataState,
+  UIAppState,
+} from "@excalidraw/excalidraw/types";
+import type { ResolvablePromise } from "@excalidraw/excalidraw/utils";
 import {
-  CommandPalette,
-  DEFAULT_CATEGORIES,
-} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette";
-import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
-import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
-import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog";
-import Trans from "@excalidraw/excalidraw/components/Trans";
-import {
-  APP_NAME,
-  EVENT,
-  THEME,
-  TITLE_TIMEOUT,
-  VERSION_TIMEOUT,
   debounce,
   getVersion,
   getFrame,
@@ -33,15 +42,75 @@ import {
   preventUnload,
   resolvablePromise,
   isRunningInIframe,
-  isDevEnv,
-  assertNever,
-} from "@excalidraw/common";
-import polyfill from "@excalidraw/excalidraw/polyfill";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
-import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
-import { t } from "@excalidraw/excalidraw/i18n";
+} from "@excalidraw/excalidraw/utils";
+import {
+  FIREBASE_STORAGE_PREFIXES,
+  isExcalidrawPlusSignedUser,
+  STORAGE_KEYS,
+  SYNC_BROWSER_TABS_TIMEOUT,
+} from "./app_constants";
+import type { CollabAPI } from "./collab/Collab";
+import Collab, {
+  collabAPIAtom,
+  isCollaboratingAtom,
+  isOfflineAtom,
+} from "./collab/Collab";
+import {
+  exportToBackend,
+  getCollaborationLinkData,
+  isCollaborationLink,
+  loadScene,
+} from "./data";
+import {
+  importFromLocalStorage,
+  importUsernameFromLocalStorage,
+} from "./data/localStorage";
+import CustomStats from "./CustomStats";
+import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
+import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
+import {
+  ExportToExcalidrawPlus,
+  exportToExcalidrawPlus,
+} from "./components/ExportToExcalidrawPlus";
+import { updateStaleImageStatuses } from "./data/FileManager";
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
+import { loadFilesFromFirebase } from "./data/firebase";
+import {
+  LibraryIndexedDBAdapter,
+  LibraryLocalStorageMigrationAdapter,
+  LocalData,
+} from "./data/LocalData";
+import { isBrowserStorageStateNewer } from "./data/tabSync";
+import clsx from "clsx";
+import {
+  parseLibraryTokensFromUrl,
+  useHandleLibrary,
+} from "@excalidraw/excalidraw/data/library";
+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 "./index.scss";
+import type { ResolutionType } from "@excalidraw/excalidraw/utility-types";
+import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog";
+import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
+import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
+import Trans from "@excalidraw/excalidraw/components/Trans";
+import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
+import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
+import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
+import {
+  CommandPalette,
+  DEFAULT_CATEGORIES,
+} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette";
 import {
   GithubIcon,
   XBrandIcon,
@@ -52,86 +121,6 @@ import {
   share,
   youtubeIcon,
 } from "@excalidraw/excalidraw/components/icons";
-import { isElementLink } from "@excalidraw/element/elementLink";
-import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
-import clsx from "clsx";
-import {
-  parseLibraryTokensFromUrl,
-  useHandleLibrary,
-} from "@excalidraw/excalidraw/data/library";
-import { StoreDelta, DurableStoreIncrement, EphemeralStoreIncrement, StoreIncrement } from "@excalidraw/excalidraw/store";
-
-import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
-import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
-import type {
-  FileId,
-  NonDeletedExcalidrawElement,
-  OrderedExcalidrawElement,
-  SceneElementsMap,
-} from "@excalidraw/element/types";
-import type {
-  AppState,
-  ExcalidrawImperativeAPI,
-  BinaryFiles,
-  ExcalidrawInitialDataState,
-  UIAppState,
-} from "@excalidraw/excalidraw/types";
-import type { ResolutionType } from "@excalidraw/common/utility-types";
-import type { ResolvablePromise } from "@excalidraw/common/utils";
-
-import CustomStats from "./CustomStats";
-import {
-  Provider,
-  useAtom,
-  useAtomValue,
-  useAtomWithInitialValue,
-  appJotaiStore,
-} from "./app-jotai";
-import {
-  FIREBASE_STORAGE_PREFIXES,
-  isExcalidrawPlusSignedUser,
-  STORAGE_KEYS,
-  SYNC_BROWSER_TABS_TIMEOUT,
-} from "./app_constants";
-import Collab, {
-  collabAPIAtom,
-  isCollaboratingAtom,
-  isOfflineAtom,
-  syncApiAtom,
-} from "./collab/Collab";
-import { AppFooter } from "./components/AppFooter";
-import { AppMainMenu } from "./components/AppMainMenu";
-import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
-import {
-  ExportToExcalidrawPlus,
-  exportToExcalidrawPlus,
-} from "./components/ExportToExcalidrawPlus";
-import { TopErrorBoundary } from "./components/TopErrorBoundary";
-
-import {
-  exportToBackend,
-  getCollaborationLinkData,
-  isCollaborationLink,
-  loadScene,
-} from "./data";
-
-import { updateStaleImageStatuses } from "./data/FileManager";
-import {
-  importFromLocalStorage,
-  importUsernameFromLocalStorage,
-} from "./data/localStorage";
-
-import { loadFilesFromFirebase } from "./data/firebase";
-import {
-  LibraryIndexedDBAdapter,
-  LibraryLocalStorageMigrationAdapter,
-  LocalData,
-} from "./data/LocalData";
-import { isBrowserStorageStateNewer } from "./data/tabSync";
-import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
-import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
 import { useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
@@ -142,10 +131,7 @@ import DebugCanvas, {
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
 import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-
-import "./index.scss";
-
-import type { CollabAPI } from "./collab/Collab";
+import { isElementLink } from "@excalidraw/excalidraw/element/elementLink";
 
 polyfill();
 
@@ -376,40 +362,11 @@ const ExcalidrawWrapper = () => {
 
   const [, setShareDialogState] = useAtom(shareDialogStateAtom);
   const [collabAPI] = useAtom(collabAPIAtom);
-  const [syncAPI] = useAtom(syncApiAtom);
-  const [sliderVersion, setSliderVersion] = useState(0);
-  const [acknowledgedDeltas, setAcknowledgedDeltas] = useState<StoreDelta[]>(
-    [],
-  );
-  const acknowledgedDeltasRef = useRef<StoreDelta[]>(acknowledgedDeltas);
   const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
     return isCollaborationLink(window.location.href);
   });
   const collabError = useAtomValue(collabErrorIndicatorAtom);
 
-  useEffect(() => {
-    acknowledgedDeltasRef.current = acknowledgedDeltas;
-  }, [acknowledgedDeltas]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const deltas = syncAPI?.acknowledgedDeltas ?? [];
-
-      // CFDO: buffer local deltas as well, not only acknowledged ones
-      if (deltas.length > acknowledgedDeltasRef.current.length) {
-        setAcknowledgedDeltas([...deltas]);
-        setSliderVersion(deltas.length);
-      }
-    }, 1000);
-
-    syncAPI?.connect();
-
-    return () => {
-      syncAPI?.disconnect();
-      clearInterval(interval);
-    };
-  }, [syncAPI]);
-
   useHandleLibrary({
     excalidrawAPI,
     adapter: LibraryIndexedDBAdapter,
@@ -420,7 +377,7 @@ const ExcalidrawWrapper = () => {
   const [, forceRefresh] = useState(false);
 
   useEffect(() => {
-    if (isDevEnv()) {
+    if (import.meta.env.DEV) {
       const debugState = loadSavedDebugState();
 
       if (debugState.enabled && !window.visualDebug) {
@@ -645,13 +602,7 @@ const ExcalidrawWrapper = () => {
           excalidrawAPI.getSceneElements(),
         )
       ) {
-        if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
-          preventUnload(event);
-        } else {
-          console.warn(
-            "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
-          );
-        }
+        preventUnload(event);
       }
     };
     window.addEventListener(EVENT.BEFORE_UNLOAD, unloadHandler);
@@ -712,34 +663,6 @@ const ExcalidrawWrapper = () => {
     }
   };
 
-  const onIncrement = (
-    increment: DurableStoreIncrement | EphemeralStoreIncrement,
-  ) => {
-    try {
-      if (!syncAPI) {
-        return;
-      }
-
-      if (StoreIncrement.isDurable(increment)) {
-        // push only if there are element changes
-        if (!increment.delta.elements.isEmpty()) {
-          syncAPI.push(increment.delta);
-        }
-
-        return;
-      }
-
-      if (StoreIncrement.isEphemeral(increment)) {
-        syncAPI.relay(increment.change);
-        return;
-      }
-
-      assertNever(increment, `Unknown increment type`);
-    } catch (e) {
-      console.error("Error during onIncrement handler", e);
-    }
-  };
-
   const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
     null,
   );
@@ -862,57 +785,6 @@ const ExcalidrawWrapper = () => {
     },
   };
 
-  const debouncedTimeTravel = debounce(
-    (value: number, direction: "forward" | "backward") => {
-      if (!excalidrawAPI) {
-        return;
-      }
-
-      let nextAppState = excalidrawAPI.getAppState();
-      // CFDO: retrieve the scene map already
-      let nextElements = new Map(
-        excalidrawAPI.getSceneElements().map((x) => [x.id, x]),
-      ) as SceneElementsMap;
-
-      let deltas: StoreDelta[] = [];
-
-      // CFDO I: going both in collaborative setting means the (acknowledge) deltas need to have applied latest changes
-      switch (direction) {
-        case "forward": {
-          deltas = acknowledgedDeltas.slice(sliderVersion, value) ?? [];
-          break;
-        }
-        case "backward": {
-          deltas = acknowledgedDeltas
-            .slice(value)
-            .reverse()
-            .map((x) => StoreDelta.inverse(x));
-          break;
-        }
-        default:
-          assertNever(direction, `Unknown direction: ${direction}`);
-      }
-
-      for (const delta of deltas) {
-        [nextElements, nextAppState] = excalidrawAPI.store.applyDeltaTo(
-          delta,
-          nextElements,
-          nextAppState,
-        );
-      }
-
-      excalidrawAPI?.updateScene({
-        appState: {
-          ...nextAppState,
-          viewModeEnabled: value !== acknowledgedDeltas.length,
-        },
-        elements: Array.from(nextElements.values()),
-        captureUpdate: CaptureUpdateAction.NEVER,
-      });
-    },
-    0,
-  );
-
   return (
     <div
       style={{ height: "100%" }}
@@ -920,45 +792,9 @@ const ExcalidrawWrapper = () => {
         "is-collaborating": isCollaborating,
       })}
     >
-      <Slider
-        style={{
-          position: "fixed",
-          bottom: "25px",
-          zIndex: 999,
-          width: "60%",
-          left: "25%",
-        }}
-        step={1}
-        min={0}
-        max={acknowledgedDeltas.length}
-        value={sliderVersion}
-        onChange={(value) => {
-          const nextSliderVersion = value as number;
-          // CFDO: in safari the whole canvas gets selected when dragging
-          if (nextSliderVersion !== acknowledgedDeltas.length) {
-            // don't listen to updates in the detached mode
-            syncAPI?.disconnect();
-          } else {
-            // reconnect once we're back to the latest version
-            syncAPI?.connect();
-          }
-
-          if (nextSliderVersion === sliderVersion) {
-            return;
-          }
-
-          debouncedTimeTravel(
-            nextSliderVersion,
-            nextSliderVersion < sliderVersion ? "backward" : "forward",
-          );
-
-          setSliderVersion(nextSliderVersion);
-        }}
-      />
       <Excalidraw
         excalidrawAPI={excalidrawRefCallback}
         onChange={onChange}
-        onIncrement={onIncrement}
         initialData={initialStatePromiseRef.current.promise}
         isCollaborating={isCollaborating}
         onPointerUpdate={collabAPI?.onPointerUpdate}
@@ -1037,6 +873,7 @@ const ExcalidrawWrapper = () => {
         />
         <OverwriteConfirmDialog>
           <OverwriteConfirmDialog.Actions.ExportToImage />
+          <OverwriteConfirmDialog.Actions.SaveToDisk />
           {excalidrawAPI && (
             <OverwriteConfirmDialog.Action
               title={t("overwriteConfirm.action.excalidrawPlus.title")}

excalidraw-app/CustomStats.tsx

@@ -1,21 +1,15 @@
-import { Stats } from "@excalidraw/excalidraw";
-import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
-import {
-  DEFAULT_VERSION,
-  debounce,
-  getVersion,
-  nFormatter,
-} from "@excalidraw/common";
-import { t } from "@excalidraw/excalidraw/i18n";
 import { useEffect, useState } from "react";
-
-import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-import type { UIAppState } from "@excalidraw/excalidraw/types";
-
+import { debounce, getVersion, nFormatter } from "@excalidraw/excalidraw/utils";
 import {
   getElementsStorageSize,
   getTotalStorageSize,
 } from "./data/localStorage";
+import { DEFAULT_VERSION } from "@excalidraw/excalidraw/constants";
+import { t } from "@excalidraw/excalidraw/i18n";
+import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
+import type { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import type { UIAppState } from "@excalidraw/excalidraw/types";
+import { Stats } from "@excalidraw/excalidraw";
 
 type StorageSizes = { scene: number; total: number };
 

excalidraw-app/ExcalidrawPlusIframeExport.tsx

@@ -1,15 +1,13 @@
-import { base64urlToString } from "@excalidraw/excalidraw/data/encode";
-import { ExcalidrawError } from "@excalidraw/excalidraw/errors";
 import { useLayoutEffect, useRef } from "react";
-
+import { STORAGE_KEYS } from "./app_constants";
+import { LocalData } from "./data/LocalData";
 import type {
   FileId,
   OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
 import type { AppState, BinaryFileData } from "@excalidraw/excalidraw/types";
-
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
+import { ExcalidrawError } from "@excalidraw/excalidraw/errors";
+import { base64urlToString } from "@excalidraw/excalidraw/data/encode";
 
 const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
 

excalidraw-app/app-language/LanguageList.tsx

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

excalidraw-app/app-language/language-detector.ts

@@ -1,5 +1,5 @@
-import { defaultLang, languages } from "@excalidraw/excalidraw";
 import LanguageDetector from "i18next-browser-languagedetector";
+import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 export const languageDetector = new LanguageDetector();
 

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

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

excalidraw-app/app_constants.ts

@@ -45,7 +45,6 @@ export const STORAGE_KEYS = {
   VERSION_FILES: "version-files",
 
   IDB_LIBRARY: "excalidraw-library",
-  IDB_SYNC: "excalidraw-sync",
 
   // do not use apart from migrations
   __LEGACY_LOCAL_STORAGE_LIBRARY: "excalidraw-library",

excalidraw-app/collab/Collab.tsx

@@ -1,48 +1,5 @@
-import {
-  CaptureUpdateAction,
-  getSceneVersion,
-  restoreElements,
-  zoomToFitBounds,
-  reconcileElements,
-} from "@excalidraw/excalidraw";
-import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, EVENT } from "@excalidraw/common";
-import {
-  IDLE_THRESHOLD,
-  ACTIVE_THRESHOLD,
-  UserIdleState,
-  assertNever,
-  isDevEnv,
-  isTestEnv,
-  preventUnload,
-  resolvablePromise,
-  throttleRAF,
-} from "@excalidraw/common";
-import { decryptData } from "@excalidraw/excalidraw/data/encryption";
-import { getVisibleSceneBounds } from "@excalidraw/element/bounds";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import {
-  isImageElement,
-  isInitializedImageElement,
-} from "@excalidraw/element/typeChecks";
-import { AbortError } from "@excalidraw/excalidraw/errors";
-import { t } from "@excalidraw/excalidraw/i18n";
-import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
-
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-
-import type {
-  ReconciledExcalidrawElement,
-  RemoteExcalidrawElement,
-} from "@excalidraw/excalidraw/data/reconcile";
-import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type {
-  ExcalidrawElement,
-  FileId,
-  InitializedExcalidrawImageElement,
-  OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
 import type {
   BinaryFileData,
   ExcalidrawImperativeAPI,
@@ -50,9 +7,28 @@ import type {
   Collaborator,
   Gesture,
 } from "@excalidraw/excalidraw/types";
-import type { Mutable, ValueOf } from "@excalidraw/common/utility-types";
-
-import { appJotaiStore, atom } from "../app-jotai";
+import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
+import { APP_NAME, ENV, EVENT } from "@excalidraw/excalidraw/constants";
+import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
+import type {
+  ExcalidrawElement,
+  FileId,
+  InitializedExcalidrawImageElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/excalidraw/element/types";
+import {
+  CaptureUpdateAction,
+  getSceneVersion,
+  restoreElements,
+  zoomToFitBounds,
+  reconcileElements,
+} from "@excalidraw/excalidraw";
+import {
+  assertNever,
+  preventUnload,
+  resolvablePromise,
+  throttleRAF,
+} from "@excalidraw/excalidraw/utils";
 import {
   CURSOR_SYNC_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
@@ -63,17 +39,15 @@ import {
   SYNC_FULL_SCENE_INTERVAL_MS,
   WS_EVENTS,
 } from "../app_constants";
+import type {
+  SocketUpdateDataSource,
+  SyncableExcalidrawElement,
+} from "../data";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
   getSyncableElements,
 } from "../data";
-import {
-  encodeFilesForUpload,
-  FileManager,
-  updateStaleImageStatuses,
-} from "../data/FileManager";
-import { LocalData, SyncIndexedDBAdapter } from "../data/LocalData";
 import {
   isSavedToFirebase,
   loadFilesFromFirebase,
@@ -85,17 +59,37 @@ import {
   importUsernameFromLocalStorage,
   saveUsernameToLocalStorage,
 } from "../data/localStorage";
-import { resetBrowserStateVersions } from "../data/tabSync";
-
-import { collabErrorIndicatorAtom } from "./CollabError";
 import Portal from "./Portal";
-
+import { t } from "@excalidraw/excalidraw/i18n";
+import {
+  IDLE_THRESHOLD,
+  ACTIVE_THRESHOLD,
+  UserIdleState,
+} from "@excalidraw/excalidraw/constants";
+import {
+  encodeFilesForUpload,
+  FileManager,
+  updateStaleImageStatuses,
+} from "../data/FileManager";
+import { AbortError } from "@excalidraw/excalidraw/errors";
+import {
+  isImageElement,
+  isInitializedImageElement,
+} from "@excalidraw/excalidraw/element/typeChecks";
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { decryptData } from "@excalidraw/excalidraw/data/encryption";
+import { resetBrowserStateVersions } from "../data/tabSync";
+import { LocalData } from "../data/LocalData";
+import { appJotaiStore, atom } from "../app-jotai";
+import type { Mutable, ValueOf } from "@excalidraw/excalidraw/utility-types";
+import { getVisibleSceneBounds } from "@excalidraw/excalidraw/element/bounds";
+import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
+import { collabErrorIndicatorAtom } from "./CollabError";
 import type {
-  SocketUpdateDataSource,
-  SyncableExcalidrawElement,
-} from "../data";
+  ReconciledExcalidrawElement,
+  RemoteExcalidrawElement,
+} from "@excalidraw/excalidraw/data/reconcile";
 
-export const syncApiAtom = atom<SyncClient | null>(null);
 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const isCollaboratingAtom = atom(false);
 export const isOfflineAtom = atom(false);
@@ -242,13 +236,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
 
-    SyncClient.create(this.excalidrawAPI, SyncIndexedDBAdapter).then(
-      (syncAPI) => {
-        appJotaiStore.set(syncApiAtom, syncAPI);
-      },
-    );
-
-    if (isTestEnv() || isDevEnv()) {
+    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
       window.collab = window.collab || ({} as Window["collab"]);
       Object.defineProperties(window, {
         collab: {
@@ -281,8 +269,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       window.clearTimeout(this.idleTimeoutId);
       this.idleTimeoutId = null;
     }
-
-    appJotaiStore.get(syncApiAtom)?.disconnect();
     this.onUmmount?.();
   }
 
@@ -310,13 +296,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       //  the purpose is to run in immediately after user decides to stay
       this.saveCollabRoomToFirebase(syncableElements);
 
-      if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
-        preventUnload(event);
-      } else {
-        console.warn(
-          "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
-        );
-      }
+      preventUnload(event);
     }
   });
 
@@ -1029,7 +1009,7 @@ declare global {
   }
 }
 
-if (isTestEnv() || isDevEnv()) {
+if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
   window.collab = window.collab || ({} as Window["collab"]);
 }
 

excalidraw-app/collab/CollabError.tsx

@@ -2,7 +2,6 @@ import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { warning } from "@excalidraw/excalidraw/components/icons";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
-
 import { atom } from "../app-jotai";
 
 import "./CollabError.scss";

excalidraw-app/collab/Portal.tsx

@@ -1,26 +1,25 @@
-import { CaptureUpdateAction } from "@excalidraw/excalidraw";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { encryptData } from "@excalidraw/excalidraw/data/encryption";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import throttle from "lodash.throttle";
-
-import type { UserIdleState } from "@excalidraw/common";
-import type { OrderedExcalidrawElement } from "@excalidraw/element/types";
-import type {
-  OnUserFollowedPayload,
-  SocketId,
-} from "@excalidraw/excalidraw/types";
-
-import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
-import { isSyncableElement } from "../data";
-
 import type {
   SocketUpdateData,
   SocketUpdateDataSource,
   SyncableExcalidrawElement,
 } from "../data";
+import { isSyncableElement } from "../data";
+
 import type { TCollabClass } from "./Collab";
+
+import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
+import type {
+  OnUserFollowedPayload,
+  SocketId,
+} from "@excalidraw/excalidraw/types";
+import type { UserIdleState } from "@excalidraw/excalidraw/constants";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import throttle from "lodash.throttle";
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { encryptData } from "@excalidraw/excalidraw/data/encryption";
 import type { Socket } from "socket.io-client";
+import { CaptureUpdateAction } from "@excalidraw/excalidraw";
 
 class Portal {
   collab: TCollabClass;

excalidraw-app/components/AI.tsx

@@ -1,3 +1,4 @@
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 import {
   DiagramToCodePlugin,
   exportToBlob,
@@ -6,9 +7,7 @@ import {
   TTDDialog,
 } from "@excalidraw/excalidraw";
 import { getDataURL } from "@excalidraw/excalidraw/data/blob";
-import { safelyParseJSON } from "@excalidraw/common";
-
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import { safelyParseJSON } from "@excalidraw/excalidraw/utils";
 
 export const AIComponents = ({
   excalidrawAPI,

excalidraw-app/components/AppFooter.tsx

@@ -1,11 +1,9 @@
-import { Footer } from "@excalidraw/excalidraw/index";
 import React from "react";
-
-import { isExcalidrawPlusSignedUser } from "../app_constants";
-
-import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
+import { Footer } from "@excalidraw/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
+import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 
 export const AppFooter = React.memo(
   ({ onChange }: { onChange: () => void }) => {

excalidraw-app/components/AppMainMenu.tsx

@@ -1,18 +1,13 @@
+import React from "react";
 import {
   loginIcon,
   ExcalLogo,
   eyeIcon,
 } from "@excalidraw/excalidraw/components/icons";
+import type { Theme } from "@excalidraw/excalidraw/element/types";
 import { MainMenu } from "@excalidraw/excalidraw/index";
-import React from "react";
-
-import { isDevEnv } from "@excalidraw/common";
-
-import type { Theme } from "@excalidraw/element/types";
-
-import { LanguageList } from "../app-language/LanguageList";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-
+import { LanguageList } from "../app-language/LanguageList";
 import { saveDebugState } from "./DebugCanvas";
 
 export const AppMainMenu: React.FC<{
@@ -59,7 +54,7 @@ export const AppMainMenu: React.FC<{
       >
         {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
       </MainMenu.ItemLink>
-      {isDevEnv() && (
+      {import.meta.env.DEV && (
         <MainMenu.Item
           icon={eyeIcon}
           onClick={() => {

excalidraw-app/components/AppWelcomeScreen.tsx

@@ -1,10 +1,9 @@
+import React from "react";
 import { loginIcon } from "@excalidraw/excalidraw/components/icons";
-import { POINTER_EVENTS } from "@excalidraw/common";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
 import { WelcomeScreen } from "@excalidraw/excalidraw/index";
-import React from "react";
-
 import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { POINTER_EVENTS } from "@excalidraw/excalidraw/constants";
 
 export const AppWelcomeScreen: React.FC<{
   onCollabDialogOpen: () => any;

excalidraw-app/components/DebugCanvas.tsx

@@ -1,28 +1,24 @@
+import { useCallback, useImperativeHandle, useRef } from "react";
+import { type AppState } from "@excalidraw/excalidraw/types";
+import { throttleRAF } from "@excalidraw/excalidraw/utils";
+import {
+  bootstrapCanvas,
+  getNormalizedCanvasDimensions,
+} from "@excalidraw/excalidraw/renderer/helpers";
+import type { DebugElement } from "@excalidraw/excalidraw/visualdebug";
 import {
   ArrowheadArrowIcon,
   CloseIcon,
   TrashIcon,
 } from "@excalidraw/excalidraw/components/icons";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "@excalidraw/excalidraw/renderer/helpers";
-import { type AppState } from "@excalidraw/excalidraw/types";
-import { throttleRAF } from "@excalidraw/common";
-import { useCallback, useImperativeHandle, useRef } from "react";
-
+import { STORAGE_KEYS } from "../app_constants";
+import type { Curve } from "../../packages/math";
 import {
   isLineSegment,
   type GlobalPoint,
   type LineSegment,
-} from "@excalidraw/math";
-import { isCurve } from "@excalidraw/math/curve";
-
-import type { DebugElement } from "@excalidraw/excalidraw/visualdebug";
-
-import type { Curve } from "@excalidraw/math";
-
-import { STORAGE_KEYS } from "../app_constants";
+} from "../../packages/math";
+import { isCurve } from "../../packages/math/curve";
 
 const renderLine = (
   context: CanvasRenderingContext2D,

excalidraw-app/components/EncryptedIcon.tsx

@@ -1,5 +1,5 @@
-import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { shield } from "@excalidraw/excalidraw/components/icons";
+import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
 
 export const EncryptedIcon = () => {

excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -1,33 +1,31 @@
 import React from "react";
-import { uploadBytes, ref } from "firebase/storage";
-import { nanoid } from "nanoid";
-
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { Card } from "@excalidraw/excalidraw/components/Card";
-import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo";
 import { ToolButton } from "@excalidraw/excalidraw/components/ToolButton";
-import { MIME_TYPES, getFrame } from "@excalidraw/common";
-import {
-  encryptData,
-  generateEncryptionKey,
-} from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
-import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
-import { useI18n } from "@excalidraw/excalidraw/i18n";
-
+import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
 import type {
   FileId,
   NonDeletedExcalidrawElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
 } from "@excalidraw/excalidraw/types";
-
+import { nanoid } from "nanoid";
+import { useI18n } from "@excalidraw/excalidraw/i18n";
+import {
+  encryptData,
+  generateEncryptionKey,
+} from "@excalidraw/excalidraw/data/encryption";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
 import { encodeFilesForUpload } from "../data/FileManager";
-import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
+import { uploadBytes, ref } from "firebase/storage";
+import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getFrame } from "@excalidraw/excalidraw/utils";
+import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],

excalidraw-app/components/GitHubCorner.tsx

@@ -1,8 +1,7 @@
-import { THEME } from "@excalidraw/common";
 import oc from "open-color";
 import React from "react";
-
-import type { Theme } from "@excalidraw/element/types";
+import { THEME } from "@excalidraw/excalidraw/constants";
+import type { Theme } from "@excalidraw/excalidraw/element/types";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(

excalidraw-app/components/TopErrorBoundary.tsx

@@ -1,7 +1,7 @@
-import Trans from "@excalidraw/excalidraw/components/Trans";
-import { t } from "@excalidraw/excalidraw/i18n";
-import * as Sentry from "@sentry/browser";
 import React from "react";
+import * as Sentry from "@sentry/browser";
+import { t } from "@excalidraw/excalidraw/i18n";
+import Trans from "@excalidraw/excalidraw/components/Trans";
 
 interface TopErrorBoundaryState {
   hasError: boolean;

excalidraw-app/data/FileManager.ts

@@ -1,15 +1,14 @@
 import { CaptureUpdateAction } from "@excalidraw/excalidraw";
 import { compressData } from "@excalidraw/excalidraw/data/encode";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
-import { t } from "@excalidraw/excalidraw/i18n";
-
+import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
   FileId,
   InitializedExcalidrawImageElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
+import { t } from "@excalidraw/excalidraw/i18n";
 import type {
   BinaryFileData,
   BinaryFileMetadata,

excalidraw-app/data/LocalData.ts

@@ -10,13 +10,6 @@
  *   (localStorage, indexedDB).
  */
 
-import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState";
-import {
-  CANVAS_SEARCH_TAB,
-  DEFAULT_SIDEBAR,
-  debounce,
-} from "@excalidraw/common";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
 import {
   createStore,
   entries,
@@ -26,21 +19,26 @@ import {
   setMany,
   get,
 } from "idb-keyval";
-
-import { StoreDelta } from "@excalidraw/excalidraw/store";
-
+import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState";
+import {
+  CANVAS_SEARCH_TAB,
+  DEFAULT_SIDEBAR,
+} from "@excalidraw/excalidraw/constants";
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
+import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element";
+import type {
+  ExcalidrawElement,
+  FileId,
+} from "@excalidraw/excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
 } from "@excalidraw/excalidraw/types";
-import type { DTO, MaybePromise } from "@excalidraw/common/utility-types";
-
+import type { MaybePromise } from "@excalidraw/excalidraw/utility-types";
+import { debounce } from "@excalidraw/excalidraw/utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
-
 import { FileManager } from "./FileManager";
 import { Locker } from "./Locker";
 import { updateBrowserStateVersion } from "./tabSync";
@@ -106,12 +104,13 @@ export class LocalData {
       files: BinaryFiles,
       onFilesSaved: () => void,
     ) => {
-      // saveDataStateToLocalStorage(elements, appState);
-      // await this.fileStorage.saveFiles({
-      //   elements,
-      //   files,
-      // });
-      // onFilesSaved();
+      saveDataStateToLocalStorage(elements, appState);
+
+      await this.fileStorage.saveFiles({
+        elements,
+        files,
+      });
+      onFilesSaved();
     },
     SAVE_TO_LOCAL_STORAGE_TIMEOUT,
   );
@@ -257,60 +256,3 @@ export class LibraryLocalStorageMigrationAdapter {
     localStorage.removeItem(STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY);
   }
 }
-
-type SyncDeltaPersistedData = DTO<StoreDelta>[];
-
-type SyncMetaPersistedData = {
-  lastAcknowledgedVersion: number;
-};
-
-export class SyncIndexedDBAdapter {
-  /** IndexedDB database and store name */
-  private static idb_name = STORAGE_KEYS.IDB_SYNC;
-  /** library data store keys */
-  private static deltasKey = "deltas";
-  private static metadataKey = "metadata";
-
-  private static store = createStore(
-    `${SyncIndexedDBAdapter.idb_name}-db`,
-    `${SyncIndexedDBAdapter.idb_name}-store`,
-  );
-
-  static async loadDeltas() {
-    const deltas = await get<SyncDeltaPersistedData>(
-      SyncIndexedDBAdapter.deltasKey,
-      SyncIndexedDBAdapter.store,
-    );
-
-    if (deltas?.length) {
-      return deltas.map((storeDeltaDTO) => StoreDelta.restore(storeDeltaDTO));
-    }
-
-    return null;
-  }
-
-  static async saveDeltas(data: SyncDeltaPersistedData): Promise<void> {
-    return set(
-      SyncIndexedDBAdapter.deltasKey,
-      data,
-      SyncIndexedDBAdapter.store,
-    );
-  }
-
-  static async loadMetadata() {
-    const metadata = await get<SyncMetaPersistedData>(
-      SyncIndexedDBAdapter.metadataKey,
-      SyncIndexedDBAdapter.store,
-    );
-
-    return metadata || null;
-  }
-
-  static async saveMetadata(data: SyncMetaPersistedData): Promise<void> {
-    return set(
-      SyncIndexedDBAdapter.metadataKey,
-      data,
-      SyncIndexedDBAdapter.store,
-    );
-  }
-}

excalidraw-app/data/firebase.ts

@@ -1,12 +1,27 @@
 import { reconcileElements } from "@excalidraw/excalidraw";
-import { MIME_TYPES } from "@excalidraw/common";
+import type {
+  ExcalidrawElement,
+  FileId,
+  OrderedExcalidrawElement,
+} from "@excalidraw/excalidraw/element/types";
+import { getSceneVersion } from "@excalidraw/excalidraw/element";
+import type Portal from "../collab/Portal";
+import { restoreElements } from "@excalidraw/excalidraw/data/restore";
+import type {
+  AppState,
+  BinaryFileData,
+  BinaryFileMetadata,
+  DataURL,
+} from "@excalidraw/excalidraw/types";
+import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
 import { decompressData } from "@excalidraw/excalidraw/data/encode";
 import {
   encryptData,
   decryptData,
 } from "@excalidraw/excalidraw/data/encryption";
-import { restoreElements } from "@excalidraw/excalidraw/data/restore";
-import { getSceneVersion } from "@excalidraw/element";
+import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import type { SyncableExcalidrawElement } from ".";
+import { getSyncableElements } from ".";
 import { initializeApp } from "firebase/app";
 import {
   getFirestore,
@@ -16,27 +31,8 @@ import {
   Bytes,
 } from "firebase/firestore";
 import { getStorage, ref, uploadBytes } from "firebase/storage";
-
-import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
-import type {
-  ExcalidrawElement,
-  FileId,
-  OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
-import type {
-  AppState,
-  BinaryFileData,
-  BinaryFileMetadata,
-  DataURL,
-} from "@excalidraw/excalidraw/types";
-
-import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
-
-import { getSyncableElements } from ".";
-
-import type { SyncableExcalidrawElement } from ".";
-import type Portal from "../collab/Portal";
 import type { Socket } from "socket.io-client";
+import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
 
 // private
 // -----------------------------------------------------------------------------

excalidraw-app/data/index.ts

@@ -9,38 +9,34 @@ import {
 } from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
 import { restore } from "@excalidraw/excalidraw/data/restore";
-import { isInvisiblySmallElement } from "@excalidraw/element/sizeHelpers";
-import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
-import { t } from "@excalidraw/excalidraw/i18n";
-import { bytesToHexString } from "@excalidraw/common";
-
-import type { UserIdleState } from "@excalidraw/common";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type { SceneBounds } from "@excalidraw/element/bounds";
+import type { SceneBounds } from "@excalidraw/excalidraw/element/bounds";
+import { isInvisiblySmallElement } from "@excalidraw/excalidraw/element/sizeHelpers";
+import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
 import type {
   ExcalidrawElement,
   FileId,
   OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
+} from "@excalidraw/excalidraw/element/types";
+import { t } from "@excalidraw/excalidraw/i18n";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
   SocketId,
 } from "@excalidraw/excalidraw/types";
-import type { MakeBrand } from "@excalidraw/common/utility-types";
-
+import type { UserIdleState } from "@excalidraw/excalidraw/constants";
+import type { MakeBrand } from "@excalidraw/excalidraw/utility-types";
+import { bytesToHexString } from "@excalidraw/excalidraw/utils";
+import type { WS_SUBTYPES } from "../app_constants";
 import {
   DELETED_ELEMENT_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
   ROOM_ID_BYTES,
 } from "../app_constants";
-
 import { encodeFilesForUpload } from "./FileManager";
 import { saveFilesToFirebase } from "./firebase";
 
-import type { WS_SUBTYPES } from "../app_constants";
-
 export type SyncableExcalidrawElement = OrderedExcalidrawElement &
   MakeBrand<"SyncableExcalidrawElement">;
 

excalidraw-app/data/localStorage.ts

@@ -1,12 +1,10 @@
+import type { ExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+import type { AppState } from "@excalidraw/excalidraw/types";
 import {
   clearAppStateForLocalStorage,
   getDefaultAppState,
 } from "@excalidraw/excalidraw/appState";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-import type { AppState } from "@excalidraw/excalidraw/types";
-
+import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element";
 import { STORAGE_KEYS } from "../app_constants";
 
 export const saveUsernameToLocalStorage = (username: string) => {

excalidraw-app/index.tsx

@@ -1,11 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import ExcalidrawApp from "./App";
 import { registerSW } from "virtual:pwa-register";
 
 import "../excalidraw-app/sentry";
-
-import ExcalidrawApp from "./App";
-
 window.__EXCALIDRAW_SHA__ = import.meta.env.VITE_APP_GIT_SHA;
 const rootElement = document.getElementById("root")!;
 const root = createRoot(rootElement);

excalidraw-app/package.json

@@ -33,7 +33,6 @@
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "jotai": "2.11.0",
-    "rc-slider": "11.1.7",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "socket.io-client": "4.7.2",

excalidraw-app/share/ShareDialog.tsx

@@ -1,8 +1,10 @@
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { useEffect, useRef, useState } from "react";
 import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getFrame } from "@excalidraw/excalidraw/utils";
+import { useI18n } from "@excalidraw/excalidraw/i18n";
+import { KEYS } from "@excalidraw/excalidraw/keys";
 import { Dialog } from "@excalidraw/excalidraw/components/Dialog";
-import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton";
-import { TextField } from "@excalidraw/excalidraw/components/TextField";
 import {
   copyIcon,
   LinkIcon,
@@ -12,19 +14,16 @@ import {
   shareIOS,
   shareWindows,
 } from "@excalidraw/excalidraw/components/icons";
+import { TextField } from "@excalidraw/excalidraw/components/TextField";
+import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton";
+import type { CollabAPI } from "../collab/Collab";
+import { activeRoomLinkAtom } from "../collab/Collab";
 import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState";
 import { useCopyStatus } from "@excalidraw/excalidraw/hooks/useCopiedIndicator";
-import { useI18n } from "@excalidraw/excalidraw/i18n";
-import { KEYS, getFrame } from "@excalidraw/common";
-import { useEffect, useRef, useState } from "react";
-
 import { atom, useAtom, useAtomValue } from "../app-jotai";
-import { activeRoomLinkAtom } from "../collab/Collab";
 
 import "./ShareDialog.scss";
 
-import type { CollabAPI } from "../collab/Collab";
-
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
 

excalidraw-app/tests/MobileMenu.test.tsx

@@ -1,11 +1,11 @@
-import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+import ExcalidrawApp from "../App";
 import {
   mockBoundingClientRect,
   render,
   restoreOriginalGetBoundingClientRect,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
-import ExcalidrawApp from "../App";
+import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
 
 describe("Test MobileMenu", () => {
   const { h } = window;

excalidraw-app/tests/collab.test.tsx

@@ -1,14 +1,13 @@
-import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw";
+import { vi } from "vitest";
+import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils";
+import ExcalidrawApp from "../App";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { syncInvalidIndices } from "@excalidraw/excalidraw/fractionalIndex";
 import {
   createRedoAction,
   createUndoAction,
 } from "@excalidraw/excalidraw/actions/actionHistory";
-import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils";
-import { vi } from "vitest";
-
-import ExcalidrawApp from "../App";
+import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw";
 
 const { h } = window;
 
@@ -122,7 +121,7 @@ describe("collaboration", () => {
       expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
     });
 
-    const undoAction = createUndoAction(h.history);
+    const undoAction = createUndoAction(h.history, h.store);
     act(() => h.app.actionManager.executeAction(undoAction));
 
     // with explicit undo (as addition) we expect our item to be restored from the snapshot!
@@ -154,7 +153,7 @@ describe("collaboration", () => {
       expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
     });
 
-    const redoAction = createRedoAction(h.history);
+    const redoAction = createRedoAction(h.history, h.store);
     act(() => h.app.actionManager.executeAction(redoAction));
 
     // with explicit redo (as removal) we again restore the element from the snapshot!

excalidraw-app/useHandleAppTheme.ts

@@ -1,9 +1,8 @@
-import { THEME } from "@excalidraw/excalidraw";
-import { EVENT, CODES, KEYS } from "@excalidraw/common";
 import { useEffect, useLayoutEffect, useState } from "react";
-
-import type { Theme } from "@excalidraw/element/types";
-
+import { THEME } from "@excalidraw/excalidraw";
+import { EVENT } from "@excalidraw/excalidraw/constants";
+import type { Theme } from "@excalidraw/excalidraw/element/types";
+import { CODES, KEYS } from "@excalidraw/excalidraw/keys";
 import { STORAGE_KEYS } from "./app_constants";
 
 const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>

excalidraw-app/vite.config.mts

@@ -23,57 +23,29 @@ export default defineConfig(({ mode }) => {
     envDir: "../",
     resolve: {
       alias: [
-        {
-          find: /^@excalidraw\/common$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/common/src/index.ts",
-          ),
-        },
-        {
-          find: /^@excalidraw\/common\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/common/src/$1"),
-        },
-        {
-          find: /^@excalidraw\/element$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/element/src/index.ts",
-          ),
-        },
-        {
-          find: /^@excalidraw\/element\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/element/src/$1"),
-        },
         {
           find: /^@excalidraw\/excalidraw$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/excalidraw/index.tsx",
-          ),
+          replacement: path.resolve(__dirname, "../packages/excalidraw/index.tsx"),
         },
         {
           find: /^@excalidraw\/excalidraw\/(.*?)/,
           replacement: path.resolve(__dirname, "../packages/excalidraw/$1"),
         },
-        {
-          find: /^@excalidraw\/math$/,
-          replacement: path.resolve(__dirname, "../packages/math/src/index.ts"),
-        },
-        {
-          find: /^@excalidraw\/math\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/math/src/$1"),
-        },
         {
           find: /^@excalidraw\/utils$/,
-          replacement: path.resolve(
-            __dirname,
-            "../packages/utils/src/index.ts",
-          ),
+          replacement: path.resolve(__dirname, "../packages/utils/index.ts"),
         },
         {
           find: /^@excalidraw\/utils\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/utils/src/$1"),
+          replacement: path.resolve(__dirname, "../packages/utils/$1"),
+        },
+        {
+          find: /^@excalidraw\/math$/,
+          replacement: path.resolve(__dirname, "../packages/math/index.ts"),
+        },
+        {
+          find: /^@excalidraw\/math\/(.*?)/,
+          replacement: path.resolve(__dirname, "../packages/math/$1"),
         },
       ],
     },
@@ -225,7 +197,7 @@ export default defineConfig(({ mode }) => {
             },
           ],
           start_url: "/",
-          id: "excalidraw",
+          id:"excalidraw",
           display: "standalone",
           theme_color: "#121212",
           background_color: "#ffffff",

package.json

@@ -4,7 +4,9 @@
   "packageManager": "yarn@1.22.22",
   "workspaces": [
     "excalidraw-app",
-    "packages/*",
+    "packages/excalidraw",
+    "packages/utils",
+    "packages/math",
     "examples/*"
   ],
   "devDependencies": {
@@ -24,7 +26,6 @@
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "3.3.1",
     "http-server": "14.1.1",
     "husky": "7.0.4",
@@ -83,6 +84,7 @@
     "clean-install": "yarn rm:node_modules && yarn install"
   },
   "resolutions": {
+    "@types/d3-dispatch": "3.0.6",
     "strip-ansi": "6.0.1"
   }
 }

packages/common/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["../eslintrc.base.json"]
-}

packages/common/README.md

@@ -1,19 +0,0 @@
-# @excalidraw/common
-
-## Install
-
-```bash
-npm install @excalidraw/common
-```
-
-If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
-
-```bash
-yarn add @excalidraw/common
-```
-
-With PNPM, similarly install the package with this command:
-
-```bash
-pnpm add @excalidraw/common
-```

packages/common/global.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-import "@excalidraw/excalidraw/global";
-import "@excalidraw/excalidraw/css";

packages/common/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "@excalidraw/common",
-  "version": "0.1.0",
-  "type": "module",
-  "types": "./dist/types/common/src/index.d.ts",
-  "main": "./dist/prod/index.js",
-  "module": "./dist/prod/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/common/src/index.d.ts",
-      "development": "./dist/dev/index.js",
-      "production": "./dist/prod/index.js",
-      "default": "./dist/prod/index.js"
-    },
-    "./*": {
-      "types": "./../common/dist/types/common/src/*.d.ts"
-    }
-  },
-  "files": [
-    "dist/*"
-  ],
-  "description": "Excalidraw common functions, constants, etc.",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-utils"
-  ],
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not ie <= 11",
-      "not op_mini all",
-      "not safari < 12",
-      "not kaios <= 2.5",
-      "not edge < 79",
-      "not chrome < 70",
-      "not and_uc < 13",
-      "not samsung < 10"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
-  }
-}

packages/common/src/index.ts

@@ -1,11 +0,0 @@
-export * from "./binary-heap";
-export * from "./colors";
-export * from "./constants";
-export * from "./font-metadata";
-export * from "./queue";
-export * from "./keys";
-export * from "./points";
-export * from "./promise-pool";
-export * from "./random";
-export * from "./url";
-export * from "./utils";

packages/common/src/promise-pool.ts

@@ -1,50 +0,0 @@
-import Pool from "es6-promise-pool";
-
-// extending the missing types
-// relying on the [Index, T] to keep a correct order
-type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
-  addEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => (event: { data: { result: [Index, T] } }) => void;
-  removeEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => void;
-};
-
-export class PromisePool<T> {
-  private readonly pool: TPromisePool<T>;
-  private readonly entries: Record<number, T> = {};
-
-  constructor(
-    source: IterableIterator<Promise<void | readonly [number, T]>>,
-    concurrency: number,
-  ) {
-    this.pool = new Pool(
-      source as unknown as () => void | PromiseLike<[number, T][]>,
-      concurrency,
-    ) as TPromisePool<T>;
-  }
-
-  public all() {
-    const listener = (event: { data: { result: void | [number, T] } }) => {
-      if (event.data.result) {
-        // by default pool does not return the results, so we are gathering them manually
-        // with the correct call order (represented by the index in the tuple)
-        const [index, value] = event.data.result;
-        this.entries[index] = value;
-      }
-    };
-
-    this.pool.addEventListener("fulfilled", listener);
-
-    return this.pool.start().then(() => {
-      setTimeout(() => {
-        this.pool.removeEventListener("fulfilled", listener);
-      });
-
-      return Object.values(this.entries);
-    });
-  }
-}

packages/common/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist/types"
-  },
-  "include": ["src/**/*", "global.d.ts"],
-  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
-}

packages/deltas/package.json

@@ -1,38 +0,0 @@
-{
-  "name": "@excalidraw/deltas",
-  "version": "0.0.1",
-  "main": "./dist/prod/index.js",
-  "type": "module",
-  "module": "./dist/prod/index.js",
-  "exports": {
-    ".": {
-      "development": "./dist/dev/index.js",
-      "default": "./dist/prod/index.js"
-    }
-  },
-  "types": "./dist/types/index.d.ts",
-  "files": [
-    "dist/*"
-  ],
-  "description": "Excalidraw utilities for handling deltas",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-deltas"
-  ],
-  "dependencies": {
-    "nanoid": "5.0.9",
-    "roughjs": "4.6.6"
-  },
-  "devDependencies": {},
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildShared.js && yarn gen:types",
-    "pack": "yarn build:umd && yarn pack"
-  }
-}

packages/deltas/src/common/delta.ts

@@ -1,357 +0,0 @@
-import { arrayToObject, assertNever } from "./utils";
-
-/**
- * Represents the difference between two objects of the same type.
- *
- * Both `deleted` and `inserted` partials represent the same set of added, removed or updated properties, where:
- * - `deleted` is a set of all the deleted values
- * - `inserted` is a set of all the inserted (added, updated) values
- *
- * Keeping it as pure object (without transient state, side-effects, etc.), so we won't have to instantiate it on load.
- */
-export class Delta<T> {
-  private constructor(
-    public readonly deleted: Partial<T>,
-    public readonly inserted: Partial<T>,
-  ) {}
-
-  public static create<T>(
-    deleted: Partial<T>,
-    inserted: Partial<T>,
-    modifier?: (delta: Partial<T>) => Partial<T>,
-    modifierOptions?: "deleted" | "inserted",
-  ) {
-    const modifiedDeleted =
-      modifier && modifierOptions !== "inserted" ? modifier(deleted) : deleted;
-    const modifiedInserted =
-      modifier && modifierOptions !== "deleted" ? modifier(inserted) : inserted;
-
-    return new Delta(modifiedDeleted, modifiedInserted);
-  }
-
-  /**
-   * Calculates the delta between two objects.
-   *
-   * @param prevObject - The previous state of the object.
-   * @param nextObject - The next state of the object.
-   *
-   * @returns new delta instance.
-   */
-  public static calculate<T extends { [key: string]: any }>(
-    prevObject: T,
-    nextObject: T,
-    modifier?: (partial: Partial<T>) => Partial<T>,
-    postProcess?: (
-      deleted: Partial<T>,
-      inserted: Partial<T>,
-    ) => [Partial<T>, Partial<T>],
-  ): Delta<T> {
-    if (prevObject === nextObject) {
-      return Delta.empty();
-    }
-
-    const deleted = {} as Partial<T>;
-    const inserted = {} as Partial<T>;
-
-    // O(n^3) here for elements, but it's not as bad as it looks:
-    // - we do this only on store recordings, not on every frame (not for ephemerals)
-    // - we do this only on previously detected changed elements
-    // - we do shallow compare only on the first level of properties (not going any deeper)
-    // - # of properties is reasonably small
-    for (const key of this.distinctKeysIterator(
-      "full",
-      prevObject,
-      nextObject,
-    )) {
-      deleted[key as keyof T] = prevObject[key];
-      inserted[key as keyof T] = nextObject[key];
-    }
-
-    const [processedDeleted, processedInserted] = postProcess
-      ? postProcess(deleted, inserted)
-      : [deleted, inserted];
-
-    return Delta.create(processedDeleted, processedInserted, modifier);
-  }
-
-  public static empty() {
-    return new Delta({}, {});
-  }
-
-  public static isEmpty<T>(delta: Delta<T>): boolean {
-    return (
-      !Object.keys(delta.deleted).length && !Object.keys(delta.inserted).length
-    );
-  }
-
-  /**
-   * Merges deleted and inserted object partials.
-   */
-  public static mergeObjects<T extends { [key: string]: unknown }>(
-    prev: T,
-    added: T,
-    removed: T,
-  ) {
-    const cloned = { ...prev };
-
-    for (const key of Object.keys(removed)) {
-      delete cloned[key];
-    }
-
-    return { ...cloned, ...added };
-  }
-
-  /**
-   * Merges deleted and inserted array partials.
-   */
-  public static mergeArrays<T>(
-    prev: readonly T[] | null,
-    added: readonly T[] | null | undefined,
-    removed: readonly T[] | null | undefined,
-    predicate?: (value: T) => string,
-  ) {
-    return Object.values(
-      Delta.mergeObjects(
-        arrayToObject(prev ?? [], predicate),
-        arrayToObject(added ?? [], predicate),
-        arrayToObject(removed ?? [], predicate),
-      ),
-    );
-  }
-
-  /**
-   * Diff object partials as part of the `postProcess`.
-   */
-  public static diffObjects<T, K extends keyof T, V extends T[K][keyof T[K]]>(
-    deleted: Partial<T>,
-    inserted: Partial<T>,
-    property: K,
-    setValue: (prevValue: V | undefined) => V,
-  ) {
-    if (!deleted[property] && !inserted[property]) {
-      return;
-    }
-
-    if (
-      typeof deleted[property] === "object" ||
-      typeof inserted[property] === "object"
-    ) {
-      type RecordLike = Record<string, V | undefined>;
-
-      const deletedObject: RecordLike = deleted[property] ?? {};
-      const insertedObject: RecordLike = inserted[property] ?? {};
-
-      const deletedDifferences = Delta.getLeftDifferences(
-        deletedObject,
-        insertedObject,
-      ).reduce((acc, curr) => {
-        acc[curr] = setValue(deletedObject[curr]);
-        return acc;
-      }, {} as RecordLike);
-
-      const insertedDifferences = Delta.getRightDifferences(
-        deletedObject,
-        insertedObject,
-      ).reduce((acc, curr) => {
-        acc[curr] = setValue(insertedObject[curr]);
-        return acc;
-      }, {} as RecordLike);
-
-      if (
-        Object.keys(deletedDifferences).length ||
-        Object.keys(insertedDifferences).length
-      ) {
-        Reflect.set(deleted, property, deletedDifferences);
-        Reflect.set(inserted, property, insertedDifferences);
-      } else {
-        Reflect.deleteProperty(deleted, property);
-        Reflect.deleteProperty(inserted, property);
-      }
-    }
-  }
-
-  /**
-   * Diff array partials as part of the `postProcess`.
-   */
-  public static diffArrays<T, K extends keyof T, V extends T[K]>(
-    deleted: Partial<T>,
-    inserted: Partial<T>,
-    property: K,
-    groupBy: (value: V extends ArrayLike<infer T> ? T : never) => string,
-  ) {
-    if (!deleted[property] && !inserted[property]) {
-      return;
-    }
-
-    if (Array.isArray(deleted[property]) || Array.isArray(inserted[property])) {
-      const deletedArray = (
-        Array.isArray(deleted[property]) ? deleted[property] : []
-      ) as [];
-      const insertedArray = (
-        Array.isArray(inserted[property]) ? inserted[property] : []
-      ) as [];
-
-      const deletedDifferences = arrayToObject(
-        Delta.getLeftDifferences(
-          arrayToObject(deletedArray, groupBy),
-          arrayToObject(insertedArray, groupBy),
-        ),
-      );
-      const insertedDifferences = arrayToObject(
-        Delta.getRightDifferences(
-          arrayToObject(deletedArray, groupBy),
-          arrayToObject(insertedArray, groupBy),
-        ),
-      );
-
-      if (
-        Object.keys(deletedDifferences).length ||
-        Object.keys(insertedDifferences).length
-      ) {
-        const deletedValue = deletedArray.filter(
-          (x) => deletedDifferences[groupBy ? groupBy(x) : String(x)],
-        );
-        const insertedValue = insertedArray.filter(
-          (x) => insertedDifferences[groupBy ? groupBy(x) : String(x)],
-        );
-
-        Reflect.set(deleted, property, deletedValue);
-        Reflect.set(inserted, property, insertedValue);
-      } else {
-        Reflect.deleteProperty(deleted, property);
-        Reflect.deleteProperty(inserted, property);
-      }
-    }
-  }
-
-  /**
-   * Compares if object1 contains any different value compared to the object2.
-   */
-  public static isLeftDifferent<T extends {}>(
-    object1: T,
-    object2: T,
-    skipShallowCompare = false,
-  ): boolean {
-    const anyDistinctKey = this.distinctKeysIterator(
-      "left",
-      object1,
-      object2,
-      skipShallowCompare,
-    ).next().value;
-
-    return !!anyDistinctKey;
-  }
-
-  /**
-   * Compares if object2 contains any different value compared to the object1.
-   */
-  public static isRightDifferent<T extends {}>(
-    object1: T,
-    object2: T,
-    skipShallowCompare = false,
-  ): boolean {
-    const anyDistinctKey = this.distinctKeysIterator(
-      "right",
-      object1,
-      object2,
-      skipShallowCompare,
-    ).next().value;
-
-    return !!anyDistinctKey;
-  }
-
-  /**
-   * Returns all the object1 keys that have distinct values.
-   */
-  public static getLeftDifferences<T extends {}>(
-    object1: T,
-    object2: T,
-    skipShallowCompare = false,
-  ) {
-    return Array.from(
-      this.distinctKeysIterator("left", object1, object2, skipShallowCompare),
-    );
-  }
-
-  /**
-   * Returns all the object2 keys that have distinct values.
-   */
-  public static getRightDifferences<T extends {}>(
-    object1: T,
-    object2: T,
-    skipShallowCompare = false,
-  ) {
-    return Array.from(
-      this.distinctKeysIterator("right", object1, object2, skipShallowCompare),
-    );
-  }
-
-  /**
-   * Iterator comparing values of object properties based on the passed joining strategy.
-   *
-   * @yields keys of properties with different values
-   *
-   * WARN: it's based on shallow compare performed only on the first level and doesn't go deeper than that.
-   */
-  private static *distinctKeysIterator<T extends {}>(
-    join: "left" | "right" | "full",
-    object1: T,
-    object2: T,
-    skipShallowCompare = false,
-  ) {
-    if (object1 === object2) {
-      return;
-    }
-
-    let keys: string[] = [];
-
-    if (join === "left") {
-      keys = Object.keys(object1);
-    } else if (join === "right") {
-      keys = Object.keys(object2);
-    } else if (join === "full") {
-      keys = Array.from(
-        new Set([...Object.keys(object1), ...Object.keys(object2)]),
-      );
-    } else {
-      assertNever(join, "Unknown distinctKeysIterator's join param");
-    }
-
-    for (const key of keys) {
-      const object1Value = object1[key as keyof T];
-      const object2Value = object2[key as keyof T];
-
-      if (object1Value !== object2Value) {
-        if (
-          !skipShallowCompare &&
-          typeof object1Value === "object" &&
-          typeof object2Value === "object" &&
-          object1Value !== null &&
-          object2Value !== null &&
-          this.isShallowEqual(object1Value, object2Value)
-        ) {
-          continue;
-        }
-
-        yield key;
-      }
-    }
-  }
-
-  private static isShallowEqual(object1: any, object2: any) {
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object1);
-
-    if (keys1.length !== keys2.length) {
-      return false;
-    }
-
-    for (const key of keys1) {
-      if (object1[key] !== object2[key]) {
-        return false;
-      }
-    }
-
-    return true;
-  }
-}

packages/deltas/src/common/interfaces.ts

@@ -1,21 +0,0 @@
-/**
- * Encapsulates a set of application-level `Delta`s.
- */
-export interface DeltaContainer<T> {
-  /**
-   * Inverses the `Delta`s while creating a new `DeltaContainer` instance.
-   */
-  inverse(): DeltaContainer<T>;
-
-  /**
-   * Applies the `Delta`s to the previous object.
-   *
-   * @returns a tuple of the next object `T` with applied `Delta`s, and `boolean`, indicating whether the applied deltas resulted in a visible change.
-   */
-  applyTo(previous: T, ...options: unknown[]): [T, boolean];
-
-  /**
-   * Checks whether all `Delta`s are empty.
-   */
-  isEmpty(): boolean;
-}

packages/deltas/src/common/utils.ts

@@ -1,149 +0,0 @@
-import { Random } from "roughjs/bin/math";
-import { nanoid } from "nanoid";
-
-import type {
-  AppState,
-  ObservedAppState,
-  ElementsMap,
-  ExcalidrawElement,
-  ElementUpdate,
-} from "../excalidraw-types";
-
-/**
- * Transform array into an object, use only when array order is irrelevant.
- */
-export const arrayToObject = <T>(
-  array: readonly T[],
-  groupBy?: (value: T) => string | number,
-) =>
-  array.reduce((acc, value) => {
-    acc[groupBy ? groupBy(value) : String(value)] = value;
-    return acc;
-  }, {} as { [key: string]: T });
-
-/**
- * Transforms array of elements with `id` property into into a Map grouped by `id`.
- */
-export const elementsToMap = <T extends { id: string }>(
-  items: readonly T[],
-) => {
-  return items.reduce((acc: Map<string, T>, element) => {
-    acc.set(element.id, element);
-    return acc;
-  }, new Map());
-};
-
-// --
-
-// hidden non-enumerable property for runtime checks
-const hiddenObservedAppStateProp = "__observedAppState";
-
-export const getObservedAppState = (appState: AppState): ObservedAppState => {
-  const observedAppState = {
-    name: appState.name,
-    editingGroupId: appState.editingGroupId,
-    viewBackgroundColor: appState.viewBackgroundColor,
-    selectedElementIds: appState.selectedElementIds,
-    selectedGroupIds: appState.selectedGroupIds,
-    editingLinearElementId: appState.editingLinearElement?.elementId || null,
-    selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
-    croppingElementId: appState.croppingElementId,
-  };
-
-  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
-    value: true,
-    enumerable: false,
-  });
-
-  return observedAppState;
-};
-
-// ------------------------------------------------------------
-
-export const assertNever = (value: never, message: string): never => {
-  throw new Error(`${message}: "${value}".`);
-};
-
-// ------------------------------------------------------------
-
-export const getNonDeletedGroupIds = (elements: ElementsMap) => {
-  const nonDeletedGroupIds = new Set<string>();
-
-  for (const [, element] of elements) {
-    // defensive check
-    if (element.isDeleted) {
-      continue;
-    }
-
-    // defensive fallback
-    for (const groupId of element.groupIds ?? []) {
-      nonDeletedGroupIds.add(groupId);
-    }
-  }
-
-  return nonDeletedGroupIds;
-};
-
-// ------------------------------------------------------------
-
-export const isTestEnv = () => import.meta.env.MODE === "test";
-
-export const isDevEnv = () => import.meta.env.MODE === "development";
-
-export const isServerEnv = () => import.meta.env.MODE === "server";
-
-export const shouldThrow = () => isDevEnv() || isTestEnv() || isServerEnv();
-
-// ------------------------------------------------------------
-
-let random = new Random(Date.now());
-let testIdBase = 0;
-
-export const randomInteger = () => Math.floor(random.next() * 2 ** 31);
-
-export const reseed = (seed: number) => {
-  random = new Random(seed);
-  testIdBase = 0;
-};
-
-export const randomId = () => (isTestEnv() ? `id${testIdBase++}` : nanoid());
-
-// ------------------------------------------------------------
-
-export const getUpdatedTimestamp = () => (isTestEnv() ? 1 : Date.now());
-
-// ------------------------------------------------------------
-
-export const newElementWith = <TElement extends ExcalidrawElement>(
-  element: TElement,
-  updates: ElementUpdate<TElement>,
-  /** pass `true` to always regenerate */
-  force = false,
-): TElement => {
-  let didChange = false;
-  for (const key in updates) {
-    const value = (updates as any)[key];
-    if (typeof value !== "undefined") {
-      if (
-        (element as any)[key] === value &&
-        // if object, always update because its attrs could have changed
-        (typeof value !== "object" || value === null)
-      ) {
-        continue;
-      }
-      didChange = true;
-    }
-  }
-
-  if (!didChange && !force) {
-    return element;
-  }
-
-  return {
-    ...element,
-    ...updates,
-    updated: getUpdatedTimestamp(),
-    version: element.version + 1,
-    versionNonce: randomInteger(),
-  };
-};

packages/deltas/src/containers/appstate.ts

@@ -1,404 +0,0 @@
-import { Delta } from "../common/delta";
-import {
-  assertNever,
-  getNonDeletedGroupIds,
-  getObservedAppState,
-  isDevEnv,
-  isTestEnv,
-  shouldThrow,
-} from "../common/utils";
-
-import type { DeltaContainer } from "../common/interfaces";
-import type {
-  AppState,
-  ObservedAppState,
-  DTO,
-  SceneElementsMap,
-  ValueOf,
-  ObservedElementsAppState,
-  ObservedStandaloneAppState,
-  SubtypeOf,
-} from "../excalidraw-types";
-
-export class AppStateDelta implements DeltaContainer<AppState> {
-  private constructor(public readonly delta: Delta<ObservedAppState>) {}
-
-  public static calculate<T extends ObservedAppState>(
-    prevAppState: T,
-    nextAppState: T,
-  ): AppStateDelta {
-    const delta = Delta.calculate(
-      prevAppState,
-      nextAppState,
-      undefined,
-      AppStateDelta.postProcess,
-    );
-
-    return new AppStateDelta(delta);
-  }
-
-  public static restore(appStateDeltaDTO: DTO<AppStateDelta>): AppStateDelta {
-    const { delta } = appStateDeltaDTO;
-    return new AppStateDelta(delta);
-  }
-
-  public static empty() {
-    return new AppStateDelta(Delta.create({}, {}));
-  }
-
-  public inverse(): AppStateDelta {
-    const inversedDelta = Delta.create(this.delta.inserted, this.delta.deleted);
-    return new AppStateDelta(inversedDelta);
-  }
-
-  public applyTo(
-    appState: AppState,
-    nextElements: SceneElementsMap,
-  ): [AppState, boolean] {
-    try {
-      const {
-        selectedElementIds: removedSelectedElementIds = {},
-        selectedGroupIds: removedSelectedGroupIds = {},
-      } = this.delta.deleted;
-
-      const {
-        selectedElementIds: addedSelectedElementIds = {},
-        selectedGroupIds: addedSelectedGroupIds = {},
-        selectedLinearElementId,
-        editingLinearElementId,
-        ...directlyApplicablePartial
-      } = this.delta.inserted;
-
-      const mergedSelectedElementIds = Delta.mergeObjects(
-        appState.selectedElementIds,
-        addedSelectedElementIds,
-        removedSelectedElementIds,
-      );
-
-      const mergedSelectedGroupIds = Delta.mergeObjects(
-        appState.selectedGroupIds,
-        addedSelectedGroupIds,
-        removedSelectedGroupIds,
-      );
-
-      //   const selectedLinearElement =
-      //     selectedLinearElementId && nextElements.has(selectedLinearElementId)
-      //       ? new LinearElementEditor(
-      //           nextElements.get(
-      //             selectedLinearElementId,
-      //           ) as NonDeleted<ExcalidrawLinearElement>,
-      //         )
-      //       : null;
-
-      //   const editingLinearElement =
-      //     editingLinearElementId && nextElements.has(editingLinearElementId)
-      //       ? new LinearElementEditor(
-      //           nextElements.get(
-      //             editingLinearElementId,
-      //           ) as NonDeleted<ExcalidrawLinearElement>,
-      //         )
-      //       : null;
-
-      const nextAppState = {
-        ...appState,
-        ...directlyApplicablePartial,
-        selectedElementIds: mergedSelectedElementIds,
-        selectedGroupIds: mergedSelectedGroupIds,
-        // selectedLinearElement:
-        //   typeof selectedLinearElementId !== "undefined"
-        //     ? selectedLinearElement // element was either inserted or deleted
-        //     : appState.selectedLinearElement, // otherwise assign what we had before
-        // editingLinearElement:
-        //   typeof editingLinearElementId !== "undefined"
-        //     ? editingLinearElement // element was either inserted or deleted
-        //     : appState.editingLinearElement, // otherwise assign what we had before
-      };
-
-      const constainsVisibleChanges = this.filterInvisibleChanges(
-        appState,
-        nextAppState,
-        nextElements,
-      );
-
-      return [nextAppState, constainsVisibleChanges];
-    } catch (e) {
-      // shouldn't really happen, but just in case
-      console.error(`Couldn't apply appstate delta`, e);
-
-      if (shouldThrow()) {
-        throw e;
-      }
-
-      return [appState, false];
-    }
-  }
-
-  public isEmpty(): boolean {
-    return Delta.isEmpty(this.delta);
-  }
-
-  /**
-   * It is necessary to post process the partials in case of reference values,
-   * for which we need to calculate the real diff between `deleted` and `inserted`.
-   */
-  private static postProcess<T extends ObservedAppState>(
-    deleted: Partial<T>,
-    inserted: Partial<T>,
-  ): [Partial<T>, Partial<T>] {
-    try {
-      Delta.diffObjects(
-        deleted,
-        inserted,
-        "selectedElementIds",
-        // ts language server has a bit trouble resolving this, so we are giving it a little push
-        (_) => true as ValueOf<T["selectedElementIds"]>,
-      );
-      Delta.diffObjects(
-        deleted,
-        inserted,
-        "selectedGroupIds",
-        (prevValue) => (prevValue ?? false) as ValueOf<T["selectedGroupIds"]>,
-      );
-    } catch (e) {
-      // if postprocessing fails it does not make sense to bubble up, but let's make sure we know about it
-      console.error(`Couldn't postprocess appstate change deltas.`);
-
-      if (isDevEnv() || isTestEnv()) {
-        throw e;
-      }
-    } finally {
-      return [deleted, inserted];
-    }
-  }
-
-  /**
-   * Mutates `nextAppState` be filtering out state related to deleted elements.
-   *
-   * @returns `true` if a visible change is found, `false` otherwise.
-   */
-  private filterInvisibleChanges(
-    prevAppState: AppState,
-    nextAppState: AppState,
-    nextElements: SceneElementsMap,
-  ): boolean {
-    // TODO: #7348 we could still get an empty undo/redo, as we assume that previous appstate does not contain references to deleted elements
-    // which is not always true - i.e. now we do cleanup appstate during history, but we do not do it during remote updates
-    const prevObservedAppState = getObservedAppState(prevAppState);
-    const nextObservedAppState = getObservedAppState(nextAppState);
-
-    const containsStandaloneDifference = Delta.isRightDifferent(
-      AppStateDelta.stripElementsProps(prevObservedAppState),
-      AppStateDelta.stripElementsProps(nextObservedAppState),
-    );
-
-    const containsElementsDifference = Delta.isRightDifferent(
-      AppStateDelta.stripStandaloneProps(prevObservedAppState),
-      AppStateDelta.stripStandaloneProps(nextObservedAppState),
-    );
-
-    if (!containsStandaloneDifference && !containsElementsDifference) {
-      // no change in appstate was detected
-      return false;
-    }
-
-    const visibleDifferenceFlag = {
-      value: containsStandaloneDifference,
-    };
-
-    if (containsElementsDifference) {
-      // filter invisible changes on each iteration
-      const changedElementsProps = Delta.getRightDifferences(
-        AppStateDelta.stripStandaloneProps(prevObservedAppState),
-        AppStateDelta.stripStandaloneProps(nextObservedAppState),
-      ) as Array<keyof ObservedElementsAppState>;
-
-      let nonDeletedGroupIds = new Set<string>();
-
-      if (
-        changedElementsProps.includes("editingGroupId") ||
-        changedElementsProps.includes("selectedGroupIds")
-      ) {
-        // this one iterates through all the non deleted elements, so make sure it's not done twice
-        nonDeletedGroupIds = getNonDeletedGroupIds(nextElements);
-      }
-
-      // check whether delta properties are related to the existing non-deleted elements
-      for (const key of changedElementsProps) {
-        switch (key) {
-          case "selectedElementIds":
-            nextAppState[key] = AppStateDelta.filterSelectedElements(
-              nextAppState[key],
-              nextElements,
-              visibleDifferenceFlag,
-            );
-
-            break;
-          case "selectedGroupIds":
-            nextAppState[key] = AppStateDelta.filterSelectedGroups(
-              nextAppState[key],
-              nonDeletedGroupIds,
-              visibleDifferenceFlag,
-            );
-
-            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];
-
-            if (!editingGroupId) {
-              // previously there was an editingGroup (assuming visible), now there is none
-              visibleDifferenceFlag.value = true;
-            } else if (nonDeletedGroupIds.has(editingGroupId)) {
-              // previously there wasn't an editingGroup, now there is one which is visible
-              visibleDifferenceFlag.value = true;
-            } else {
-              // there was assigned an editingGroup now, but it's related to deleted element
-              nextAppState[key] = null;
-            }
-
-            break;
-          case "selectedLinearElementId":
-          case "editingLinearElementId":
-            const appStateKey = AppStateDelta.convertToAppStateKey(key);
-            const linearElement = nextAppState[appStateKey];
-
-            if (!linearElement) {
-              // previously there was a linear element (assuming visible), now there is none
-              visibleDifferenceFlag.value = true;
-            } else {
-              const element = nextElements.get(linearElement.elementId);
-
-              if (element && !element.isDeleted) {
-                // previously there wasn't a linear element, now there is one which is visible
-                visibleDifferenceFlag.value = true;
-              } else {
-                // there was assigned a linear element now, but it's deleted
-                nextAppState[appStateKey] = null;
-              }
-            }
-
-            break;
-          default: {
-            assertNever(key, `Unknown ObservedElementsAppState's key "${key}"`);
-          }
-        }
-      }
-    }
-
-    return visibleDifferenceFlag.value;
-  }
-
-  private static convertToAppStateKey(
-    key: keyof Pick<
-      ObservedElementsAppState,
-      "selectedLinearElementId" | "editingLinearElementId"
-    >,
-  ): keyof Pick<AppState, "selectedLinearElement" | "editingLinearElement"> {
-    switch (key) {
-      case "selectedLinearElementId":
-        return "selectedLinearElement";
-      case "editingLinearElementId":
-        return "editingLinearElement";
-    }
-  }
-
-  private static filterSelectedElements(
-    selectedElementIds: AppState["selectedElementIds"],
-    elements: SceneElementsMap,
-    visibleDifferenceFlag: { value: boolean },
-  ) {
-    const ids = Object.keys(selectedElementIds);
-
-    if (!ids.length) {
-      // previously there were ids (assuming related to visible elements), now there are none
-      visibleDifferenceFlag.value = true;
-      return selectedElementIds;
-    }
-
-    const nextSelectedElementIds = { ...selectedElementIds };
-
-    for (const id of ids) {
-      const element = elements.get(id);
-
-      if (element && !element.isDeleted) {
-        // there is a selected element id related to a visible element
-        visibleDifferenceFlag.value = true;
-      } else {
-        delete nextSelectedElementIds[id];
-      }
-    }
-
-    return nextSelectedElementIds;
-  }
-
-  private static filterSelectedGroups(
-    selectedGroupIds: AppState["selectedGroupIds"],
-    nonDeletedGroupIds: Set<string>,
-    visibleDifferenceFlag: { value: boolean },
-  ) {
-    const ids = Object.keys(selectedGroupIds);
-
-    if (!ids.length) {
-      // previously there were ids (assuming related to visible groups), now there are none
-      visibleDifferenceFlag.value = true;
-      return selectedGroupIds;
-    }
-
-    const nextSelectedGroupIds = { ...selectedGroupIds };
-
-    for (const id of Object.keys(nextSelectedGroupIds)) {
-      if (nonDeletedGroupIds.has(id)) {
-        // there is a selected group id related to a visible group
-        visibleDifferenceFlag.value = true;
-      } else {
-        delete nextSelectedGroupIds[id];
-      }
-    }
-
-    return nextSelectedGroupIds;
-  }
-
-  private static stripElementsProps(
-    delta: Partial<ObservedAppState>,
-  ): Partial<ObservedStandaloneAppState> {
-    // WARN: Do not remove the type-casts as they here to ensure proper type checks
-    const {
-      editingGroupId,
-      selectedGroupIds,
-      selectedElementIds,
-      editingLinearElementId,
-      selectedLinearElementId,
-      croppingElementId,
-      ...standaloneProps
-    } = delta as ObservedAppState;
-
-    return standaloneProps as SubtypeOf<
-      typeof standaloneProps,
-      ObservedStandaloneAppState
-    >;
-  }
-
-  private static stripStandaloneProps(
-    delta: Partial<ObservedAppState>,
-  ): Partial<ObservedElementsAppState> {
-    // WARN: Do not remove the type-casts as they here to ensure proper type checks
-    const { name, viewBackgroundColor, ...elementsProps } =
-      delta as ObservedAppState;
-
-    return elementsProps as SubtypeOf<
-      typeof elementsProps,
-      ObservedElementsAppState
-    >;
-  }
-}

packages/deltas/src/containers/elements.ts

@@ -1,825 +0,0 @@
-import { Delta } from "../common/delta";
-import { newElementWith, shouldThrow } from "../common/utils";
-
-import type { DeltaContainer } from "../common/interfaces";
-import type {
-  ExcalidrawElement,
-  ElementUpdate,
-  Ordered,
-  SceneElementsMap,
-  DTO,
-  OrderedExcalidrawElement,
-  ExcalidrawImageElement,
-} from "../excalidraw-types";
-
-// CFDO: consider adding here (nonnullable) version & versionNonce & updated (so that we have correct versions when recunstructing from remote)
-type ElementPartial<T extends ExcalidrawElement = ExcalidrawElement> =
-  ElementUpdate<Ordered<T>>;
-
-/**
- * Elements delta is a low level primitive to encapsulate property changes between two sets of elements.
- * It does so by encapsulating forward and backward `Delta`s, allowing to time-travel in both directions.
- */
-export class ElementsDelta implements DeltaContainer<SceneElementsMap> {
-  private constructor(
-    public readonly added: Record<string, Delta<ElementPartial>>,
-    public readonly removed: Record<string, Delta<ElementPartial>>,
-    public readonly updated: Record<string, Delta<ElementPartial>>,
-  ) {}
-
-  public static create(
-    added: Record<string, Delta<ElementPartial>>,
-    removed: Record<string, Delta<ElementPartial>>,
-    updated: Record<string, Delta<ElementPartial>>,
-    options: {
-      shouldRedistribute: boolean;
-    } = {
-      shouldRedistribute: false,
-      // CFDO: don't forget to re-enable
-    },
-  ) {
-    const { shouldRedistribute } = options;
-    let delta: ElementsDelta;
-
-    if (shouldRedistribute) {
-      const nextAdded: Record<string, Delta<ElementPartial>> = {};
-      const nextRemoved: Record<string, Delta<ElementPartial>> = {};
-      const nextUpdated: Record<string, Delta<ElementPartial>> = {};
-
-      const deltas = [
-        ...Object.entries(added),
-        ...Object.entries(removed),
-        ...Object.entries(updated),
-      ];
-
-      for (const [id, delta] of deltas) {
-        if (this.satisfiesAddition(delta)) {
-          nextAdded[id] = delta;
-        } else if (this.satisfiesRemoval(delta)) {
-          nextRemoved[id] = delta;
-        } else {
-          nextUpdated[id] = delta;
-        }
-      }
-
-      delta = new ElementsDelta(nextAdded, nextRemoved, nextUpdated);
-    } else {
-      delta = new ElementsDelta(added, removed, updated);
-    }
-
-    if (shouldThrow()) {
-      ElementsDelta.validate(delta, "added", this.satisfiesAddition);
-      ElementsDelta.validate(delta, "removed", this.satisfiesRemoval);
-      ElementsDelta.validate(delta, "updated", this.satisfiesUpdate);
-    }
-
-    return delta;
-  }
-
-  public static restore(elementsDeltaDTO: DTO<ElementsDelta>): ElementsDelta {
-    const { added, removed, updated } = elementsDeltaDTO;
-    return ElementsDelta.create(added, removed, updated);
-  }
-
-  private static satisfiesAddition = ({
-    deleted,
-    inserted,
-  }: Delta<ElementPartial>) =>
-    // dissallowing added as "deleted", which could cause issues when resolving conflicts
-    deleted.isDeleted === true && !inserted.isDeleted;
-
-  private static satisfiesRemoval = ({
-    deleted,
-    inserted,
-  }: Delta<ElementPartial>) =>
-    !deleted.isDeleted && inserted.isDeleted === true;
-
-  private static satisfiesUpdate = ({
-    deleted,
-    inserted,
-  }: Delta<ElementPartial>) => !!deleted.isDeleted === !!inserted.isDeleted;
-
-  private static validate(
-    elementsDelta: ElementsDelta,
-    type: "added" | "removed" | "updated",
-    satifies: (delta: Delta<ElementPartial>) => boolean,
-  ) {
-    for (const [id, delta] of Object.entries(elementsDelta[type])) {
-      if (!satifies(delta)) {
-        console.error(
-          `Broken invariant for "${type}" delta, element "${id}", delta:`,
-          delta,
-        );
-        throw new Error(`ElementsDelta invariant broken for element "${id}".`);
-      }
-    }
-  }
-
-  /**
-   * Calculates the `Delta`s between the previous and next set of elements.
-   *
-   * @param prevElements - Map representing the previous state of elements.
-   * @param nextElements - Map representing the next state of elements.
-   *
-   * @returns `ElementsDelta` instance representing the `Delta` changes between the two sets of elements.
-   */
-  public static calculate<T extends OrderedExcalidrawElement>(
-    prevElements: Map<string, T>,
-    nextElements: Map<string, T>,
-  ): ElementsDelta {
-    if (prevElements === nextElements) {
-      return ElementsDelta.empty();
-    }
-
-    const added: Record<string, Delta<ElementPartial>> = {};
-    const removed: Record<string, Delta<ElementPartial>> = {};
-    const updated: Record<string, Delta<ElementPartial>> = {};
-
-    // this might be needed only in same edge cases, like during collab, when `isDeleted` elements get removed or when we (un)intentionally remove the elements
-    for (const prevElement of prevElements.values()) {
-      const nextElement = nextElements.get(prevElement.id);
-
-      if (!nextElement) {
-        const deleted = { ...prevElement, isDeleted: false } as ElementPartial;
-        const inserted = { isDeleted: true } as ElementPartial;
-
-        const delta = Delta.create(
-          deleted,
-          inserted,
-          ElementsDelta.stripIrrelevantProps,
-        );
-
-        removed[prevElement.id] = delta;
-      }
-    }
-
-    for (const nextElement of nextElements.values()) {
-      const prevElement = prevElements.get(nextElement.id);
-
-      if (!prevElement) {
-        const deleted = { isDeleted: true } as ElementPartial;
-        const inserted = {
-          ...nextElement,
-          isDeleted: false,
-        } as ElementPartial;
-
-        const delta = Delta.create(
-          deleted,
-          inserted,
-          ElementsDelta.stripIrrelevantProps,
-        );
-
-        added[nextElement.id] = delta;
-
-        continue;
-      }
-
-      if (prevElement.versionNonce !== nextElement.versionNonce) {
-        const delta = Delta.calculate<ElementPartial>(
-          prevElement,
-          nextElement,
-          ElementsDelta.stripIrrelevantProps,
-          ElementsDelta.postProcess,
-        );
-
-        if (
-          // making sure we don't get here some non-boolean values (i.e. undefined, null, etc.)
-          typeof prevElement.isDeleted === "boolean" &&
-          typeof nextElement.isDeleted === "boolean" &&
-          prevElement.isDeleted !== nextElement.isDeleted
-        ) {
-          // notice that other props could have been updated as well
-          if (prevElement.isDeleted && !nextElement.isDeleted) {
-            added[nextElement.id] = delta;
-          } else {
-            removed[nextElement.id] = delta;
-          }
-
-          continue;
-        }
-
-        // making sure there are at least some changes
-        if (!Delta.isEmpty(delta)) {
-          updated[nextElement.id] = delta;
-        }
-      }
-    }
-
-    return ElementsDelta.create(added, removed, updated);
-  }
-
-  public static empty() {
-    return ElementsDelta.create({}, {}, {});
-  }
-
-  public inverse(): ElementsDelta {
-    const inverseInternal = (deltas: Record<string, Delta<ElementPartial>>) => {
-      const inversedDeltas: Record<string, Delta<ElementPartial>> = {};
-
-      for (const [id, delta] of Object.entries(deltas)) {
-        inversedDeltas[id] = Delta.create(delta.inserted, delta.deleted);
-      }
-
-      return inversedDeltas;
-    };
-
-    const added = inverseInternal(this.added);
-    const removed = inverseInternal(this.removed);
-    const updated = inverseInternal(this.updated);
-
-    // notice we inverse removed with added not to break the invariants
-    // notice we force generate a new id
-    return ElementsDelta.create(removed, added, updated);
-  }
-
-  public isEmpty(): boolean {
-    return (
-      Object.keys(this.added).length === 0 &&
-      Object.keys(this.removed).length === 0 &&
-      Object.keys(this.updated).length === 0
-    );
-  }
-
-  /**
-   * Update delta/s based on the existing elements.
-   *
-   * @param elements current elements
-   * @param modifierOptions defines which of the delta (`deleted` or `inserted`) will be updated
-   * @returns new instance with modified delta/s
-   */
-  public applyLatestChanges(
-    elements: SceneElementsMap,
-    modifierOptions: "deleted" | "inserted",
-  ): ElementsDelta {
-    const modifier =
-      (element: OrderedExcalidrawElement) => (partial: ElementPartial) => {
-        const latestPartial: { [key: string]: unknown } = {};
-
-        for (const key of Object.keys(partial) as Array<keyof typeof partial>) {
-          // do not update following props:
-          // - `boundElements`, as it is a reference value which is postprocessed to contain only deleted/inserted keys
-          switch (key) {
-            case "boundElements":
-              latestPartial[key] = partial[key];
-              break;
-            default:
-              latestPartial[key] = element[key];
-          }
-        }
-
-        return latestPartial;
-      };
-
-    const applyLatestChangesInternal = (
-      deltas: Record<string, Delta<ElementPartial>>,
-    ) => {
-      const modifiedDeltas: Record<string, Delta<ElementPartial>> = {};
-
-      for (const [id, delta] of Object.entries(deltas)) {
-        const existingElement = elements.get(id);
-
-        if (existingElement) {
-          const modifiedDelta = Delta.create(
-            delta.deleted,
-            delta.inserted,
-            modifier(existingElement),
-            modifierOptions,
-          );
-
-          modifiedDeltas[id] = modifiedDelta;
-        } else {
-          modifiedDeltas[id] = delta;
-        }
-      }
-
-      return modifiedDeltas;
-    };
-
-    const added = applyLatestChangesInternal(this.added);
-    const removed = applyLatestChangesInternal(this.removed);
-    const updated = applyLatestChangesInternal(this.updated);
-
-    return ElementsDelta.create(added, removed, updated, {
-      shouldRedistribute: true, // redistribute the deltas as `isDeleted` could have been updated
-    });
-  }
-
-  // CFDO: does it make sense having a separate snapshot?
-  public applyTo(
-    elements: SceneElementsMap,
-    elementsSnapshot: Map<string, OrderedExcalidrawElement>,
-  ): [SceneElementsMap, boolean] {
-    const nextElements = new Map(elements) as SceneElementsMap;
-    let changedElements: Map<string, OrderedExcalidrawElement>;
-
-    const flags = {
-      containsVisibleDifference: false,
-      containsZindexDifference: false,
-    };
-
-    // mimic a transaction by applying deltas into `nextElements` (always new instance, no mutation)
-    try {
-      const applyDeltas = ElementsDelta.createApplier(
-        nextElements,
-        elementsSnapshot,
-        flags,
-      );
-
-      const addedElements = applyDeltas("added", this.added);
-      const removedElements = applyDeltas("removed", this.removed);
-      const updatedElements = applyDeltas("updated", this.updated);
-
-      // CFDO I: don't forget to fix this part
-      // const affectedElements = this.resolveConflicts(elements, nextElements);
-
-      // TODO: #7348 validate elements semantically and syntactically the changed elements, in case they would result data integrity issues
-      changedElements = new Map([
-        ...addedElements,
-        ...removedElements,
-        ...updatedElements,
-        // ...affectedElements,
-      ]);
-    } catch (e) {
-      console.error(`Couldn't apply elements delta`, e);
-
-      if (shouldThrow()) {
-        throw e;
-      }
-
-      // should not really happen, but just in case we cannot apply deltas, let's return the previous elements with visible change set to `true`
-      // even though there is obviously no visible change, returning `false` could be dangerous, as i.e.:
-      // in the worst case, it could lead into iterating through the whole stack with no possibility to redo
-      // instead, the worst case when returning `true` is an empty undo / redo
-      return [elements, true];
-    }
-
-    try {
-      // CFDO I: don't forget to fix this part
-      // // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state
-      // ElementsDelta.redrawTextBoundingBoxes(nextElements, changedElements);
-      // // the following reorder performs also mutations, but only on new instances of changed elements
-      // // (unless something goes really bad and it fallbacks to fixing all invalid indices)
-      // nextElements = ElementsDelta.reorderElements(
-      //   nextElements,
-      //   changedElements,
-      //   flags,
-      // );
-      // // Need ordered nextElements to avoid z-index binding issues
-      // ElementsDelta.redrawBoundArrows(nextElements, changedElements);
-    } catch (e) {
-      console.error(
-        `Couldn't mutate elements after applying elements change`,
-        e,
-      );
-
-      if (shouldThrow()) {
-        throw e;
-      }
-    } finally {
-      return [nextElements, flags.containsVisibleDifference];
-    }
-  }
-
-  private static createApplier =
-    (
-      nextElements: SceneElementsMap,
-      snapshot: Map<string, OrderedExcalidrawElement>,
-      flags: {
-        containsVisibleDifference: boolean;
-        containsZindexDifference: boolean;
-      },
-    ) =>
-    (
-      type: "added" | "removed" | "updated",
-      deltas: Record<string, Delta<ElementPartial>>,
-    ) => {
-      const getElement = ElementsDelta.createGetter(
-        type,
-        nextElements,
-        snapshot,
-        flags,
-      );
-
-      return Object.entries(deltas).reduce((acc, [id, delta]) => {
-        const element = getElement(id, delta.inserted);
-
-        if (element) {
-          const newElement = ElementsDelta.applyDelta(element, delta, flags);
-          nextElements.set(newElement.id, newElement);
-          acc.set(newElement.id, newElement);
-        }
-
-        return acc;
-      }, new Map<string, OrderedExcalidrawElement>());
-    };
-
-  private static createGetter =
-    (
-      type: "added" | "removed" | "updated",
-      elements: SceneElementsMap,
-      snapshot: Map<string, OrderedExcalidrawElement>,
-      flags: {
-        containsVisibleDifference: boolean;
-        containsZindexDifference: boolean;
-      },
-    ) =>
-    (id: string, partial: ElementPartial) => {
-      let element = elements.get(id);
-
-      if (!element) {
-        // always fallback to the local snapshot, in cases when we cannot find the element in the elements array
-        element = snapshot.get(id);
-
-        if (element) {
-          // as the element was brought from the snapshot, it automatically results in a possible zindex difference
-          flags.containsZindexDifference = true;
-
-          // as the element was force deleted, we need to check if adding it back results in a visible change
-          if (
-            partial.isDeleted === false ||
-            (partial.isDeleted !== true && element.isDeleted === false)
-          ) {
-            flags.containsVisibleDifference = true;
-          }
-        } else if (type === "added") {
-          // for additions the element does not have to exist (i.e. remote update)
-          // CFDO II: the version itself might be different!
-          element = newElementWith(
-            { id, version: 1 } as OrderedExcalidrawElement,
-            {
-              ...partial,
-            },
-          );
-        }
-      }
-
-      return element;
-    };
-
-  private static applyDelta(
-    element: OrderedExcalidrawElement,
-    delta: Delta<ElementPartial>,
-    flags: {
-      containsVisibleDifference: boolean;
-      containsZindexDifference: boolean;
-    } = {
-      // by default we don't care about about the flags
-      containsVisibleDifference: true,
-      containsZindexDifference: true,
-    },
-  ) {
-    const { boundElements, ...directlyApplicablePartial } = delta.inserted;
-
-    if (
-      delta.deleted.boundElements?.length ||
-      delta.inserted.boundElements?.length
-    ) {
-      const mergedBoundElements = Delta.mergeArrays(
-        element.boundElements,
-        delta.inserted.boundElements,
-        delta.deleted.boundElements,
-        (x) => x.id,
-      );
-
-      Object.assign(directlyApplicablePartial, {
-        boundElements: mergedBoundElements,
-      });
-    }
-
-    // CFDO: this looks wrong
-    if (element.type === "image") {
-      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 index, as even if it would be different, it doesn't have to result in visible change
-      const { index, ...rest } = directlyApplicablePartial;
-      const containsVisibleDifference = ElementsDelta.checkForVisibleDifference(
-        element,
-        rest,
-      );
-
-      flags.containsVisibleDifference = containsVisibleDifference;
-    }
-
-    if (!flags.containsZindexDifference) {
-      flags.containsZindexDifference =
-        delta.deleted.index !== delta.inserted.index;
-    }
-
-    return newElementWith(element, directlyApplicablePartial);
-  }
-
-  /**
-   * Check for visible changes regardless of whether they were removed, added or updated.
-   */
-  private static checkForVisibleDifference(
-    element: OrderedExcalidrawElement,
-    partial: ElementPartial,
-  ) {
-    if (element.isDeleted && partial.isDeleted !== false) {
-      // when it's deleted and partial is not false, it cannot end up with a visible change
-      return false;
-    }
-
-    if (element.isDeleted && partial.isDeleted === false) {
-      // when we add an element, it results in a visible change
-      return true;
-    }
-
-    if (element.isDeleted === false && partial.isDeleted) {
-      // when we remove an element, it results in a visible change
-      return true;
-    }
-
-    // check for any difference on a visible element
-    return Delta.isRightDifferent(element, partial);
-  }
-
-  // /**
-  //  * Resolves conflicts for all previously added, removed and updated elements.
-  //  * Updates the previous deltas with all the changes after conflict resolution.
-  //  *
-  //  * // CFDO: revisit since arrow seem often redrawn incorrectly
-  //  *
-  //  * @returns all elements affected by the conflict resolution
-  //  */
-  // private resolveConflicts(
-  //   prevElements: SceneElementsMap,
-  //   nextElements: SceneElementsMap,
-  // ) {
-  //   const nextAffectedElements = new Map<string, OrderedExcalidrawElement>();
-  //   const updater = (
-  //     element: ExcalidrawElement,
-  //     updates: ElementUpdate<ExcalidrawElement>,
-  //   ) => {
-  //     const nextElement = nextElements.get(element.id); // only ever modify next element!
-  //     if (!nextElement) {
-  //       return;
-  //     }
-
-  //     let affectedElement: OrderedExcalidrawElement;
-
-  //     if (prevElements.get(element.id) === nextElement) {
-  //       // create the new element instance in case we didn't modify the element yet
-  //       // so that we won't end up in an incosistent state in case we would fail in the middle of mutations
-  //       affectedElement = newElementWith(
-  //         nextElement,
-  //         updates as ElementUpdate<OrderedExcalidrawElement>,
-  //       );
-  //     } else {
-  //       affectedElement = mutateElement(
-  //         nextElement,
-  //         updates as ElementUpdate<OrderedExcalidrawElement>,
-  //       );
-  //     }
-
-  //     nextAffectedElements.set(affectedElement.id, affectedElement);
-  //     nextElements.set(affectedElement.id, affectedElement);
-  //   };
-
-  //   // removed delta is affecting the bindings always, as all the affected elements of the removed elements need to be unbound
-  //   for (const id of Object.keys(this.removed)) {
-  //     ElementsDelta.unbindAffected(prevElements, nextElements, id, updater);
-  //   }
-
-  //   // added delta is affecting the bindings always, all the affected elements of the added elements need to be rebound
-  //   for (const id of Object.keys(this.added)) {
-  //     ElementsDelta.rebindAffected(prevElements, nextElements, id, updater);
-  //   }
-
-  //   // updated delta is affecting the binding only in case it contains changed binding or bindable property
-  //   for (const [id] of Array.from(Object.entries(this.updated)).filter(
-  //     ([_, delta]) =>
-  //       Object.keys({ ...delta.deleted, ...delta.inserted }).find((prop) =>
-  //         bindingProperties.has(prop as BindingProp | BindableProp),
-  //       ),
-  //   )) {
-  //     const updatedElement = nextElements.get(id);
-  //     if (!updatedElement || updatedElement.isDeleted) {
-  //       // skip fixing bindings for updates on deleted elements
-  //       continue;
-  //     }
-
-  //     ElementsDelta.rebindAffected(prevElements, nextElements, id, updater);
-  //   }
-
-  //   // filter only previous elements, which were now affected
-  //   const prevAffectedElements = new Map(
-  //     Array.from(prevElements).filter(([id]) => nextAffectedElements.has(id)),
-  //   );
-
-  //   // calculate complete deltas for affected elements, and assign them back to all the deltas
-  //   // technically we could do better here if perf. would become an issue
-  //   const { added, removed, updated } = ElementsDelta.calculate(
-  //     prevAffectedElements,
-  //     nextAffectedElements,
-  //   );
-
-  //   for (const [id, delta] of Object.entries(added)) {
-  //     this.added[id] = delta;
-  //   }
-
-  //   for (const [id, delta] of Object.entries(removed)) {
-  //     this.removed[id] = delta;
-  //   }
-
-  //   for (const [id, delta] of Object.entries(updated)) {
-  //     this.updated[id] = delta;
-  //   }
-
-  //   return nextAffectedElements;
-  // }
-
-  // /**
-  //  * Non deleted affected elements of removed elements (before and after applying delta),
-  //  * should be unbound ~ bindings should not point from non deleted into the deleted element/s.
-  //  */
-  // private static unbindAffected(
-  //   prevElements: SceneElementsMap,
-  //   nextElements: SceneElementsMap,
-  //   id: string,
-  //   updater: (
-  //     element: ExcalidrawElement,
-  //     updates: ElementUpdate<ExcalidrawElement>,
-  //   ) => void,
-  // ) {
-  //   // the instance could have been updated, so make sure we are passing the latest element to each function below
-  //   const prevElement = () => prevElements.get(id); // element before removal
-  //   const nextElement = () => nextElements.get(id); // element after removal
-
-  //   BoundElement.unbindAffected(nextElements, prevElement(), updater);
-  //   BoundElement.unbindAffected(nextElements, nextElement(), updater);
-
-  //   BindableElement.unbindAffected(nextElements, prevElement(), updater);
-  //   BindableElement.unbindAffected(nextElements, nextElement(), updater);
-  // }
-
-  // /**
-  //  * Non deleted affected elements of added or updated element/s (before and after applying delta),
-  //  * should be rebound (if possible) with the current element ~ bindings should be bidirectional.
-  //  */
-  // private static rebindAffected(
-  //   prevElements: SceneElementsMap,
-  //   nextElements: SceneElementsMap,
-  //   id: string,
-  //   updater: (
-  //     element: ExcalidrawElement,
-  //     updates: ElementUpdate<ExcalidrawElement>,
-  //   ) => void,
-  // ) {
-  //   // the instance could have been updated, so make sure we are passing the latest element to each function below
-  //   const prevElement = () => prevElements.get(id); // element before addition / update
-  //   const nextElement = () => nextElements.get(id); // element after addition / update
-
-  //   BoundElement.unbindAffected(nextElements, prevElement(), updater);
-  //   BoundElement.rebindAffected(nextElements, nextElement(), updater);
-
-  //   BindableElement.unbindAffected(
-  //     nextElements,
-  //     prevElement(),
-  //     (element, updates) => {
-  //       // we cannot rebind arrows with bindable element so we don't unbind them at all during rebind (we still need to unbind them on removal)
-  //       // TODO: #7348 add startBinding / endBinding to the `BoundElement` context so that we could rebind arrows and remove this condition
-  //       if (isTextElement(element)) {
-  //         updater(element, updates);
-  //       }
-  //     },
-  //   );
-  //   BindableElement.rebindAffected(nextElements, nextElement(), updater);
-  // }
-
-  // private static redrawTextBoundingBoxes(
-  //   elements: SceneElementsMap,
-  //   changed: Map<string, OrderedExcalidrawElement>,
-  // ) {
-  //   const boxesToRedraw = new Map<
-  //     string,
-  //     { container: OrderedExcalidrawElement; boundText: ExcalidrawTextElement }
-  //   >();
-
-  //   for (const element of changed.values()) {
-  //     if (isBoundToContainer(element)) {
-  //       const { containerId } = element as ExcalidrawTextElement;
-  //       const container = containerId ? elements.get(containerId) : undefined;
-
-  //       if (container) {
-  //         boxesToRedraw.set(container.id, {
-  //           container,
-  //           boundText: element as ExcalidrawTextElement,
-  //         });
-  //       }
-  //     }
-
-  //     if (hasBoundTextElement(element)) {
-  //       const boundTextElementId = getBoundTextElementId(element);
-  //       const boundText = boundTextElementId
-  //         ? elements.get(boundTextElementId)
-  //         : undefined;
-
-  //       if (boundText) {
-  //         boxesToRedraw.set(element.id, {
-  //           container: element,
-  //           boundText: boundText as ExcalidrawTextElement,
-  //         });
-  //       }
-  //     }
-  //   }
-
-  //   for (const { container, boundText } of boxesToRedraw.values()) {
-  //     if (container.isDeleted || boundText.isDeleted) {
-  //       // skip redraw if one of them is deleted, as it would not result in a meaningful redraw
-  //       continue;
-  //     }
-
-  //     redrawTextBoundingBox(boundText, container, elements, false);
-  //   }
-  // }
-
-  // private static redrawBoundArrows(
-  //   elements: SceneElementsMap,
-  //   changed: Map<string, OrderedExcalidrawElement>,
-  // ) {
-  //   for (const element of changed.values()) {
-  //     if (!element.isDeleted && isBindableElement(element)) {
-  //       updateBoundElements(element, elements, {
-  //         changedElements: changed,
-  //       });
-  //     }
-  //   }
-  // }
-
-  // private static reorderElements(
-  //   elements: SceneElementsMap,
-  //   changed: Map<string, OrderedExcalidrawElement>,
-  //   flags: {
-  //     containsVisibleDifference: boolean;
-  //     containsZindexDifference: boolean;
-  //   },
-  // ) {
-  //   if (!flags.containsZindexDifference) {
-  //     return elements;
-  //   }
-
-  //   const unordered = Array.from(elements.values());
-  //   const ordered = orderByFractionalIndex([...unordered]);
-  //   const moved = Delta.getRightDifferences(unordered, ordered, true).reduce(
-  //     (acc, arrayIndex) => {
-  //       const candidate = unordered[Number(arrayIndex)];
-  //       if (candidate && changed.has(candidate.id)) {
-  //         acc.set(candidate.id, candidate);
-  //       }
-
-  //       return acc;
-  //     },
-  //     new Map(),
-  //   );
-
-  //   if (!flags.containsVisibleDifference && moved.size) {
-  //     // we found a difference in order!
-  //     flags.containsVisibleDifference = true;
-  //   }
-
-  //   // synchronize all elements that were actually moved
-  //   // could fallback to synchronizing all invalid indices
-  //   return elementsToMap(syncMovedIndices(ordered, moved)) as typeof elements;
-  // }
-
-  /**
-   * It is necessary to post process the partials in case of reference values,
-   * for which we need to calculate the real diff between `deleted` and `inserted`.
-   */
-  private static postProcess(
-    deleted: ElementPartial,
-    inserted: ElementPartial,
-  ): [ElementPartial, ElementPartial] {
-    try {
-      Delta.diffArrays(deleted, inserted, "boundElements", (x) => x.id);
-    } catch (e) {
-      // if postprocessing fails, it does not make sense to bubble up, but let's make sure we know about it
-      console.error(`Couldn't postprocess elements delta.`);
-
-      if (shouldThrow()) {
-        throw e;
-      }
-    } finally {
-      return [deleted, inserted];
-    }
-  }
-
-  private static stripIrrelevantProps(
-    partial: Partial<OrderedExcalidrawElement>,
-  ): ElementPartial {
-    const { id, updated, version, versionNonce, ...strippedPartial } = partial;
-
-    return strippedPartial;
-  }
-}

packages/deltas/src/excalidraw-types.d.ts

@@ -1,26 +0,0 @@
-export type {
-  AppState,
-  ObservedElementsAppState,
-  ObservedStandaloneAppState,
-  ObservedAppState,
-} from "@excalidraw/excalidraw/dist/excalidraw/types";
-export type {
-  DTO,
-  SubtypeOf,
-  ValueOf,
-} from "@excalidraw/excalidraw/dist/excalidraw/utility-types";
-
-export type {
-  ExcalidrawElement,
-  ExcalidrawImageElement,
-  ExcalidrawTextElement,
-  Ordered,
-  OrderedExcalidrawElement,
-  SceneElementsMap,
-  ElementsMap,
-} from "@excalidraw/excalidraw/dist/excalidraw/element/types";
-export type { ElementUpdate } from "@excalidraw/excalidraw/dist/excalidraw/element/mutateElement";
-export type {
-  BindableProp,
-  BindingProp,
-} from "@excalidraw/excalidraw/dist/excalidraw/element/binding";

packages/deltas/src/index.ts

@@ -1,5 +0,0 @@
-export type { DeltaContainer } from "./common/interfaces";
-
-export { Delta } from "./common/delta";
-export { ElementsDelta } from "./containers/elements";
-export { AppStateDelta } from "./containers/appstate";

packages/deltas/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "strict": true,
-    "outDir": "dist/types",
-    "skipLibCheck": true,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-  },
-  "exclude": [
-    "**/*.test.*",
-    "**/tests/*",
-    "types",
-    "dist",
-  ],
-}

packages/element/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["../eslintrc.base.json"]
-}

packages/element/README.md

@@ -1,19 +0,0 @@
-# @excalidraw/element
-
-## Install
-
-```bash
-npm install @excalidraw/element
-```
-
-If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
-
-```bash
-yarn add @excalidraw/element
-```
-
-With PNPM, similarly install the package with this command:
-
-```bash
-pnpm add @excalidraw/element
-```

packages/element/global.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="vite/client" />
-import "@excalidraw/excalidraw/global";
-import "@excalidraw/excalidraw/css";

packages/element/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "@excalidraw/element",
-  "version": "0.1.0",
-  "type": "module",
-  "types": "./dist/types/element/src/index.d.ts",
-  "main": "./dist/prod/index.js",
-  "module": "./dist/prod/index.js",
-  "exports": {
-    ".": {
-      "types": "./dist/types/element/src/index.d.ts",
-      "development": "./dist/dev/index.js",
-      "production": "./dist/prod/index.js",
-      "default": "./dist/prod/index.js"
-    },
-    "./*": {
-      "types": "./../element/dist/types/element/src/*.d.ts"
-    }
-  },
-  "files": [
-    "dist/*"
-  ],
-  "description": "Excalidraw elements-related logic",
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-utils"
-  ],
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not ie <= 11",
-      "not op_mini all",
-      "not safari < 12",
-      "not kaios <= 2.5",
-      "not edge < 79",
-      "not chrome < 70",
-      "not and_uc < 13",
-      "not samsung < 10"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
-  }
-}

packages/element/src/duplicate.ts

@@ -1,487 +0,0 @@
-import {
-  ORIG_ID,
-  randomId,
-  randomInteger,
-  arrayToMap,
-  castArray,
-  findLastIndex,
-  getUpdatedTimestamp,
-  isTestEnv,
-} from "@excalidraw/common";
-
-import type { Mutable } from "@excalidraw/common/utility-types";
-
-import type { AppState } from "@excalidraw/excalidraw/types";
-
-import {
-  getElementsInGroup,
-  getNewGroupIdsForDuplication,
-  getSelectedGroupForElement,
-} from "./groups";
-
-import {
-  bindElementsToFramesAfterDuplication,
-  getFrameChildren,
-} from "./frame";
-
-import { normalizeElementOrder } from "./sortElements";
-
-import { bumpVersion } from "./mutateElement";
-
-import {
-  hasBoundTextElement,
-  isBoundToContainer,
-  isFrameLikeElement,
-} from "./typeChecks";
-
-import { getBoundTextElement, getContainerElement } from "./textElement";
-
-import { fixDuplicatedBindingsAfterDuplication } from "./binding";
-
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  GroupId,
-  NonDeletedSceneElementsMap,
-} from "./types";
-
-/**
- * Duplicate an element, often used in the alt-drag operation.
- * Note that this method has gotten a bit complicated since the
- * introduction of gruoping/ungrouping elements.
- * @param editingGroupId The current group being edited. The new
- *                       element will inherit this group and its
- *                       parents.
- * @param groupIdMapForOperation A Map that maps old group IDs to
- *                               duplicated ones. If you are duplicating
- *                               multiple elements at once, share this map
- *                               amongst all of them
- * @param element Element to duplicate
- */
-export const duplicateElement = <TElement extends ExcalidrawElement>(
-  editingGroupId: AppState["editingGroupId"],
-  groupIdMapForOperation: Map<GroupId, GroupId>,
-  element: TElement,
-  randomizeSeed?: boolean,
-): Readonly<TElement> => {
-  const copy = deepCopyElement(element);
-
-  if (isTestEnv()) {
-    __test__defineOrigId(copy, element.id);
-  }
-
-  copy.id = randomId();
-  copy.updated = getUpdatedTimestamp();
-  if (randomizeSeed) {
-    copy.seed = randomInteger();
-    bumpVersion(copy);
-  }
-
-  copy.groupIds = getNewGroupIdsForDuplication(
-    copy.groupIds,
-    editingGroupId,
-    (groupId) => {
-      if (!groupIdMapForOperation.has(groupId)) {
-        groupIdMapForOperation.set(groupId, randomId());
-      }
-      return groupIdMapForOperation.get(groupId)!;
-    },
-  );
-  return copy;
-};
-
-export const duplicateElements = (
-  opts: {
-    elements: readonly ExcalidrawElement[];
-    randomizeSeed?: boolean;
-    overrides?: (data: {
-      duplicateElement: ExcalidrawElement;
-      origElement: ExcalidrawElement;
-      origIdToDuplicateId: Map<
-        ExcalidrawElement["id"],
-        ExcalidrawElement["id"]
-      >;
-    }) => Partial<ExcalidrawElement>;
-  } & (
-    | {
-        /**
-         * Duplicates all elements in array.
-         *
-         * Use this when programmaticaly duplicating elements, without direct
-         * user interaction.
-         */
-        type: "everything";
-      }
-    | {
-        /**
-         * Duplicates specified elements and inserts them back into the array
-         * in specified order.
-         *
-         * Use this when duplicating Scene elements, during user interaction
-         * such as alt-drag or on duplicate action.
-         */
-        type: "in-place";
-        idsOfElementsToDuplicate: Map<
-          ExcalidrawElement["id"],
-          ExcalidrawElement
-        >;
-        appState: {
-          editingGroupId: AppState["editingGroupId"];
-          selectedGroupIds: AppState["selectedGroupIds"];
-        };
-      }
-  ),
-) => {
-  let { elements } = opts;
-
-  const appState =
-    "appState" in opts
-      ? opts.appState
-      : ({
-          editingGroupId: null,
-          selectedGroupIds: {},
-        } as const);
-
-  // Ids of elements that have already been processed so we don't push them
-  // into the array twice if we end up backtracking when retrieving
-  // discontiguous group of elements (can happen due to a bug, or in edge
-  // cases such as a group containing deleted elements which were not selected).
-  //
-  // This is not enough to prevent duplicates, so we do a second loop afterwards
-  // to remove them.
-  //
-  // For convenience we mark even the newly created ones even though we don't
-  // loop over them.
-  const processedIds = new Map<ExcalidrawElement["id"], true>();
-  const groupIdMap = new Map();
-  const duplicatedElements: ExcalidrawElement[] = [];
-  const origElements: ExcalidrawElement[] = [];
-  const origIdToDuplicateId = new Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement["id"]
-  >();
-  const duplicateIdToOrigElement = new Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement
-  >();
-  const duplicateElementsMap = new Map<string, ExcalidrawElement>();
-  const elementsMap = arrayToMap(elements) as ElementsMap;
-  const _idsOfElementsToDuplicate =
-    opts.type === "in-place"
-      ? opts.idsOfElementsToDuplicate
-      : new Map(elements.map((el) => [el.id, el]));
-
-  // For sanity
-  if (opts.type === "in-place") {
-    for (const groupId of Object.keys(opts.appState.selectedGroupIds)) {
-      elements
-        .filter((el) => el.groupIds?.includes(groupId))
-        .forEach((el) => _idsOfElementsToDuplicate.set(el.id, el));
-    }
-  }
-
-  elements = normalizeElementOrder(elements);
-
-  const elementsWithDuplicates: ExcalidrawElement[] = elements.slice();
-
-  // helper functions
-  // -------------------------------------------------------------------------
-
-  // Used for the heavy lifing of copying a single element, a group of elements
-  // an element with bound text etc.
-  const copyElements = <T extends ExcalidrawElement | ExcalidrawElement[]>(
-    element: T,
-  ): T extends ExcalidrawElement[]
-    ? ExcalidrawElement[]
-    : ExcalidrawElement | null => {
-    const elements = castArray(element);
-
-    const _newElements = elements.reduce(
-      (acc: ExcalidrawElement[], element) => {
-        if (processedIds.has(element.id)) {
-          return acc;
-        }
-
-        processedIds.set(element.id, true);
-
-        const newElement = duplicateElement(
-          appState.editingGroupId,
-          groupIdMap,
-          element,
-          opts.randomizeSeed,
-        );
-
-        processedIds.set(newElement.id, true);
-
-        duplicateElementsMap.set(newElement.id, newElement);
-        origIdToDuplicateId.set(element.id, newElement.id);
-        duplicateIdToOrigElement.set(newElement.id, element);
-
-        origElements.push(element);
-        duplicatedElements.push(newElement);
-
-        acc.push(newElement);
-        return acc;
-      },
-      [],
-    );
-
-    return (
-      Array.isArray(element) ? _newElements : _newElements[0] || null
-    ) as T extends ExcalidrawElement[]
-      ? ExcalidrawElement[]
-      : ExcalidrawElement | null;
-  };
-
-  // Helper to position cloned elements in the Z-order the product needs it
-  const insertBeforeOrAfterIndex = (
-    index: number,
-    elements: ExcalidrawElement | null | ExcalidrawElement[],
-  ) => {
-    if (!elements) {
-      return;
-    }
-
-    if (index > elementsWithDuplicates.length - 1) {
-      elementsWithDuplicates.push(...castArray(elements));
-      return;
-    }
-
-    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
-  };
-
-  const frameIdsToDuplicate = new Set(
-    elements
-      .filter(
-        (el) => _idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
-      )
-      .map((el) => el.id),
-  );
-
-  for (const element of elements) {
-    if (processedIds.has(element.id)) {
-      continue;
-    }
-
-    if (!_idsOfElementsToDuplicate.has(element.id)) {
-      continue;
-    }
-
-    // groups
-    // -------------------------------------------------------------------------
-
-    const groupId = getSelectedGroupForElement(appState, element);
-    if (groupId) {
-      const groupElements = getElementsInGroup(elements, groupId).flatMap(
-        (element) =>
-          isFrameLikeElement(element)
-            ? [...getFrameChildren(elements, element.id), element]
-            : [element],
-      );
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return el.groupIds?.includes(groupId);
-      });
-
-      insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
-      continue;
-    }
-
-    // frame duplication
-    // -------------------------------------------------------------------------
-
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
-      continue;
-    }
-
-    if (isFrameLikeElement(element)) {
-      const frameId = element.id;
-
-      const frameChildren = getFrameChildren(elements, frameId);
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return el.frameId === frameId || el.id === frameId;
-      });
-
-      insertBeforeOrAfterIndex(
-        targetIndex,
-        copyElements([...frameChildren, element]),
-      );
-      continue;
-    }
-
-    // text container
-    // -------------------------------------------------------------------------
-
-    if (hasBoundTextElement(element)) {
-      const boundTextElement = getBoundTextElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return (
-          el.id === element.id ||
-          ("containerId" in el && el.containerId === element.id)
-        );
-      });
-
-      if (boundTextElement) {
-        insertBeforeOrAfterIndex(
-          targetIndex,
-          copyElements([element, boundTextElement]),
-        );
-      } else {
-        insertBeforeOrAfterIndex(targetIndex, copyElements(element));
-      }
-
-      continue;
-    }
-
-    if (isBoundToContainer(element)) {
-      const container = getContainerElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
-        return el.id === element.id || el.id === container?.id;
-      });
-
-      if (container) {
-        insertBeforeOrAfterIndex(
-          targetIndex,
-          copyElements([container, element]),
-        );
-      } else {
-        insertBeforeOrAfterIndex(targetIndex, copyElements(element));
-      }
-
-      continue;
-    }
-
-    // default duplication (regular elements)
-    // -------------------------------------------------------------------------
-
-    insertBeforeOrAfterIndex(
-      findLastIndex(elementsWithDuplicates, (el) => el.id === element.id),
-      copyElements(element),
-    );
-  }
-
-  // ---------------------------------------------------------------------------
-
-  fixDuplicatedBindingsAfterDuplication(
-    duplicatedElements,
-    origIdToDuplicateId,
-    duplicateElementsMap as NonDeletedSceneElementsMap,
-  );
-
-  bindElementsToFramesAfterDuplication(
-    elementsWithDuplicates,
-    origElements,
-    origIdToDuplicateId,
-  );
-
-  if (opts.overrides) {
-    for (const duplicateElement of duplicatedElements) {
-      const origElement = duplicateIdToOrigElement.get(duplicateElement.id);
-      if (origElement) {
-        Object.assign(
-          duplicateElement,
-          opts.overrides({
-            duplicateElement,
-            origElement,
-            origIdToDuplicateId,
-          }),
-        );
-      }
-    }
-  }
-
-  return {
-    duplicatedElements,
-    duplicateElementsMap,
-    elementsWithDuplicates,
-    origIdToDuplicateId,
-  };
-};
-
-// Simplified deep clone for the purpose of cloning ExcalidrawElement.
-//
-// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
-// Typed arrays and other non-null objects.
-//
-// Adapted from https://github.com/lukeed/klona
-//
-// The reason for `deepCopyElement()` wrapper is type safety (only allow
-// passing ExcalidrawElement as the top-level argument).
-const _deepCopyElement = (val: any, depth: number = 0) => {
-  // only clone non-primitives
-  if (val == null || typeof val !== "object") {
-    return val;
-  }
-
-  const objectType = Object.prototype.toString.call(val);
-
-  if (objectType === "[object Object]") {
-    const tmp =
-      typeof val.constructor === "function"
-        ? Object.create(Object.getPrototypeOf(val))
-        : {};
-    for (const key in val) {
-      if (val.hasOwnProperty(key)) {
-        // don't copy non-serializable objects like these caches. They'll be
-        // populated when the element is rendered.
-        if (depth === 0 && (key === "shape" || key === "canvas")) {
-          continue;
-        }
-        tmp[key] = _deepCopyElement(val[key], depth + 1);
-      }
-    }
-    return tmp;
-  }
-
-  if (Array.isArray(val)) {
-    let k = val.length;
-    const arr = new Array(k);
-    while (k--) {
-      arr[k] = _deepCopyElement(val[k], depth + 1);
-    }
-    return arr;
-  }
-
-  // we're not cloning non-array & non-plain-object objects because we
-  // don't support them on excalidraw elements yet. If we do, we need to make
-  // sure we start cloning them, so let's warn about it.
-  if (import.meta.env.DEV) {
-    if (
-      objectType !== "[object Object]" &&
-      objectType !== "[object Array]" &&
-      objectType.startsWith("[object ")
-    ) {
-      console.warn(
-        `_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`,
-      );
-    }
-  }
-
-  return val;
-};
-
-/**
- * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or
- * any value. The purpose is to to break object references for immutability
- * reasons, whenever we want to keep the original element, but ensure it's not
- * mutated.
- *
- * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
- * Typed arrays and other non-null objects.
- */
-export const deepCopyElement = <T extends ExcalidrawElement>(
-  val: T,
-): Mutable<T> => {
-  return _deepCopyElement(val);
-};
-
-const __test__defineOrigId = (clonedObj: object, origId: string) => {
-  Object.defineProperty(clonedObj, ORIG_ID, {
-    value: origId,
-    writable: false,
-    enumerable: false,
-  });
-};

packages/element/src/heading.ts

@@ -1,282 +0,0 @@
-import { invariant, isDevEnv, isTestEnv } from "@excalidraw/common";
-
-import {
-  pointFrom,
-  pointFromVector,
-  pointRotateRads,
-  pointScaleFromOrigin,
-  pointsEqual,
-  triangleIncludesPoint,
-  vectorCross,
-  vectorFromPoint,
-  vectorScale,
-} from "@excalidraw/math";
-
-import type {
-  LocalPoint,
-  GlobalPoint,
-  Triangle,
-  Vector,
-} from "@excalidraw/math";
-
-import { getCenterForBounds, type Bounds } from "./bounds";
-
-import type { ExcalidrawBindableElement } from "./types";
-
-export const HEADING_RIGHT = [1, 0] as Heading;
-export const HEADING_DOWN = [0, 1] as Heading;
-export const HEADING_LEFT = [-1, 0] as Heading;
-export const HEADING_UP = [0, -1] as Heading;
-export type Heading = [1, 0] | [0, 1] | [-1, 0] | [0, -1];
-
-export const vectorToHeading = (vec: Vector): Heading => {
-  const [x, y] = vec;
-  const absX = Math.abs(x);
-  const absY = Math.abs(y);
-  if (x > absY) {
-    return HEADING_RIGHT;
-  } else if (x <= -absY) {
-    return HEADING_LEFT;
-  } else if (y > absX) {
-    return HEADING_DOWN;
-  }
-  return HEADING_UP;
-};
-
-export const headingForPoint = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  o: P,
-) => vectorToHeading(vectorFromPoint<P>(p, o));
-
-export const headingForPointIsHorizontal = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  o: P,
-) => headingIsHorizontal(headingForPoint<P>(p, o));
-
-export const compareHeading = (a: Heading, b: Heading) =>
-  a[0] === b[0] && a[1] === b[1];
-
-export const headingIsHorizontal = (a: Heading) =>
-  compareHeading(a, HEADING_RIGHT) || compareHeading(a, HEADING_LEFT);
-
-export const headingIsVertical = (a: Heading) => !headingIsHorizontal(a);
-
-const headingForPointFromDiamondElement = (
-  element: Readonly<ExcalidrawBindableElement>,
-  aabb: Readonly<Bounds>,
-  point: Readonly<GlobalPoint>,
-): Heading => {
-  const midPoint = getCenterForBounds(aabb);
-
-  if (isDevEnv() || isTestEnv()) {
-    invariant(
-      element.width > 0 && element.height > 0,
-      "Diamond element has no width or height",
-    );
-    invariant(
-      !pointsEqual(midPoint, point),
-      "The point is too close to the element mid point to determine heading",
-    );
-  }
-
-  const SHRINK = 0.95; // Rounded elements tolerance
-  const top = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-  const right = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(
-            element.x + element.width,
-            element.y + element.height / 2,
-          ),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-  const bottom = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(
-            element.x + element.width / 2,
-            element.y + element.height,
-          ),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-  const left = pointFromVector(
-    vectorScale(
-      vectorFromPoint(
-        pointRotateRads(
-          pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
-          midPoint,
-          element.angle,
-        ),
-        midPoint,
-      ),
-      SHRINK,
-    ),
-    midPoint,
-  );
-
-  // Corners
-  if (
-    vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, right)) <=
-      0 &&
-    vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, left)) > 0
-  ) {
-    return headingForPoint(top, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, right),
-      vectorFromPoint(right, bottom),
-    ) <= 0 &&
-    vectorCross(vectorFromPoint(point, right), vectorFromPoint(right, top)) > 0
-  ) {
-    return headingForPoint(right, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, bottom),
-      vectorFromPoint(bottom, left),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, bottom),
-      vectorFromPoint(bottom, right),
-    ) > 0
-  ) {
-    return headingForPoint(bottom, midPoint);
-  } else if (
-    vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, top)) <=
-      0 &&
-    vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, bottom)) > 0
-  ) {
-    return headingForPoint(left, midPoint);
-  }
-
-  // Sides
-  if (
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(top, midPoint),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(right, midPoint),
-    ) > 0
-  ) {
-    const p = element.width > element.height ? top : right;
-    return headingForPoint(p, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(right, midPoint),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(bottom, midPoint),
-    ) > 0
-  ) {
-    const p = element.width > element.height ? bottom : right;
-    return headingForPoint(p, midPoint);
-  } else if (
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(bottom, midPoint),
-    ) <= 0 &&
-    vectorCross(
-      vectorFromPoint(point, midPoint),
-      vectorFromPoint(left, midPoint),
-    ) > 0
-  ) {
-    const p = element.width > element.height ? bottom : left;
-    return headingForPoint(p, midPoint);
-  }
-
-  const p = element.width > element.height ? top : left;
-  return headingForPoint(p, midPoint);
-};
-
-// Gets the heading for the point by creating a bounding box around the rotated
-// close fitting bounding box, then creating 4 search cones around the center of
-// the external bbox.
-export const headingForPointFromElement = <Point extends GlobalPoint>(
-  element: Readonly<ExcalidrawBindableElement>,
-  aabb: Readonly<Bounds>,
-  p: Readonly<Point>,
-): Heading => {
-  const SEARCH_CONE_MULTIPLIER = 2;
-
-  const midPoint = getCenterForBounds(aabb);
-
-  if (element.type === "diamond") {
-    return headingForPointFromDiamondElement(element, aabb, p);
-  }
-
-  const topLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[1]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-  const topRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[1]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-  const bottomLeft = pointScaleFromOrigin(
-    pointFrom(aabb[0], aabb[3]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-  const bottomRight = pointScaleFromOrigin(
-    pointFrom(aabb[2], aabb[3]),
-    midPoint,
-    SEARCH_CONE_MULTIPLIER,
-  ) as Point;
-
-  return triangleIncludesPoint<Point>(
-    [topLeft, topRight, midPoint] as Triangle<Point>,
-    p,
-  )
-    ? HEADING_UP
-    : triangleIncludesPoint<Point>(
-        [topRight, bottomRight, midPoint] as Triangle<Point>,
-        p,
-      )
-    ? HEADING_RIGHT
-    : triangleIncludesPoint<Point>(
-        [bottomRight, bottomLeft, midPoint] as Triangle<Point>,
-        p,
-      )
-    ? HEADING_DOWN
-    : HEADING_LEFT;
-};
-
-export const flipHeading = (h: Heading): Heading =>
-  [
-    h[0] === 0 ? 0 : h[0] > 0 ? -1 : 1,
-    h[1] === 0 ? 0 : h[1] > 0 ? -1 : 1,
-  ] as Heading;

packages/element/tests/duplicate.test.tsx

@@ -1,851 +0,0 @@
-import { pointFrom } from "@excalidraw/math";
-
-import {
-  FONT_FAMILY,
-  ORIG_ID,
-  ROUNDNESS,
-  isPrimitive,
-} from "@excalidraw/common";
-
-import { Excalidraw, mutateElement } from "@excalidraw/excalidraw";
-
-import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions";
-
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-
-import { UI, Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
-
-import {
-  act,
-  assertElements,
-  getCloneByOrigId,
-  render,
-} from "@excalidraw/excalidraw/tests/test-utils";
-
-import type { LocalPoint } from "@excalidraw/math";
-
-import { duplicateElement, duplicateElements } from "../src/duplicate";
-
-import type { ExcalidrawLinearElement } from "../src/types";
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-
-const assertCloneObjects = (source: any, clone: any) => {
-  for (const key in clone) {
-    if (clone.hasOwnProperty(key) && !isPrimitive(clone[key])) {
-      expect(clone[key]).not.toBe(source[key]);
-      if (source[key]) {
-        assertCloneObjects(source[key], clone[key]);
-      }
-    }
-  }
-};
-
-describe("duplicating single elements", () => {
-  it("clones arrow element", () => {
-    const element = API.createElement({
-      type: "arrow",
-      x: 0,
-      y: 0,
-      strokeColor: "#000000",
-      backgroundColor: "transparent",
-      fillStyle: "hachure",
-      strokeWidth: 1,
-      strokeStyle: "solid",
-      roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-      roughness: 1,
-      opacity: 100,
-    });
-
-    // @ts-ignore
-    element.__proto__ = { hello: "world" };
-
-    mutateElement(element, new Map(), {
-      points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
-    });
-
-    const copy = duplicateElement(null, new Map(), element, true);
-
-    assertCloneObjects(element, copy);
-
-    // assert we clone the object's prototype
-    // @ts-ignore
-    expect(copy.__proto__).toEqual({ hello: "world" });
-    expect(copy.hasOwnProperty("hello")).toBe(false);
-
-    expect(copy.points).not.toBe(element.points);
-    expect(copy).not.toHaveProperty("shape");
-    expect(copy.id).not.toBe(element.id);
-    expect(typeof copy.id).toBe("string");
-    expect(copy.seed).not.toBe(element.seed);
-    expect(typeof copy.seed).toBe("number");
-    expect(copy).toEqual({
-      ...element,
-      id: copy.id,
-      seed: copy.seed,
-      version: copy.version,
-      versionNonce: copy.versionNonce,
-    });
-  });
-
-  it("clones text element", () => {
-    const element = API.createElement({
-      type: "text",
-      x: 0,
-      y: 0,
-      strokeColor: "#000000",
-      backgroundColor: "transparent",
-      fillStyle: "hachure",
-      strokeWidth: 1,
-      strokeStyle: "solid",
-      roundness: null,
-      roughness: 1,
-      opacity: 100,
-      text: "hello",
-      fontSize: 20,
-      fontFamily: FONT_FAMILY.Virgil,
-      textAlign: "left",
-      verticalAlign: "top",
-    });
-
-    const copy = duplicateElement(null, new Map(), element);
-
-    assertCloneObjects(element, copy);
-
-    expect(copy).not.toHaveProperty("points");
-    expect(copy).not.toHaveProperty("shape");
-    expect(copy.id).not.toBe(element.id);
-    expect(typeof copy.id).toBe("string");
-    expect(typeof copy.seed).toBe("number");
-  });
-});
-
-describe("duplicating multiple elements", () => {
-  it("duplicateElements should clone bindings", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      id: "rectangle1",
-      boundElements: [
-        { id: "arrow1", type: "arrow" },
-        { id: "arrow2", type: "arrow" },
-        { id: "text1", type: "text" },
-      ],
-    });
-
-    const text1 = API.createElement({
-      type: "text",
-      id: "text1",
-      containerId: "rectangle1",
-    });
-
-    const arrow1 = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-      boundElements: [{ id: "text2", type: "text" }],
-    });
-
-    const text2 = API.createElement({
-      type: "text",
-      id: "text2",
-      containerId: "arrow2",
-    });
-
-    // -------------------------------------------------------------------------
-
-    const origElements = [rectangle1, text1, arrow1, arrow2, text2] as const;
-    const { duplicatedElements } = duplicateElements({
-      type: "everything",
-      elements: origElements,
-    });
-
-    // generic id in-equality checks
-    // --------------------------------------------------------------------------
-    expect(origElements.map((e) => e.type)).toEqual(
-      duplicatedElements.map((e) => e.type),
-    );
-    origElements.forEach((origElement, idx) => {
-      const clonedElement = duplicatedElements[idx];
-      expect(origElement).toEqual(
-        expect.objectContaining({
-          id: expect.not.stringMatching(clonedElement.id),
-          type: clonedElement.type,
-        }),
-      );
-      if ("containerId" in origElement) {
-        expect(origElement.containerId).not.toBe(
-          (clonedElement as any).containerId,
-        );
-      }
-      if ("endBinding" in origElement) {
-        if (origElement.endBinding) {
-          expect(origElement.endBinding.elementId).not.toBe(
-            (clonedElement as any).endBinding?.elementId,
-          );
-        } else {
-          expect((clonedElement as any).endBinding).toBeNull();
-        }
-      }
-      if ("startBinding" in origElement) {
-        if (origElement.startBinding) {
-          expect(origElement.startBinding.elementId).not.toBe(
-            (clonedElement as any).startBinding?.elementId,
-          );
-        } else {
-          expect((clonedElement as any).startBinding).toBeNull();
-        }
-      }
-    });
-    // --------------------------------------------------------------------------
-
-    const clonedArrows = duplicatedElements.filter(
-      (e) => e.type === "arrow",
-    ) as ExcalidrawLinearElement[];
-
-    const [clonedRectangle, clonedText1, , clonedArrow2, clonedArrowLabel] =
-      duplicatedElements as any as typeof origElements;
-
-    expect(clonedText1.containerId).toBe(clonedRectangle.id);
-    expect(
-      clonedRectangle.boundElements!.find((e) => e.id === clonedText1.id),
-    ).toEqual(
-      expect.objectContaining({
-        id: clonedText1.id,
-        type: clonedText1.type,
-      }),
-    );
-    expect(clonedRectangle.type).toBe("rectangle");
-
-    clonedArrows.forEach((arrow) => {
-      expect(
-        clonedRectangle.boundElements!.find((e) => e.id === arrow.id),
-      ).toEqual(
-        expect.objectContaining({
-          id: arrow.id,
-          type: arrow.type,
-        }),
-      );
-
-      if (arrow.endBinding) {
-        expect(arrow.endBinding.elementId).toBe(clonedRectangle.id);
-      }
-      if (arrow.startBinding) {
-        expect(arrow.startBinding.elementId).toBe(clonedRectangle.id);
-      }
-    });
-
-    expect(clonedArrow2.boundElements).toEqual([
-      { type: "text", id: clonedArrowLabel.id },
-    ]);
-    expect(clonedArrowLabel.containerId).toBe(clonedArrow2.id);
-  });
-
-  it("should remove id references of elements that aren't found", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      id: "rectangle1",
-      boundElements: [
-        // should keep
-        { id: "arrow1", type: "arrow" },
-        // should drop
-        { id: "arrow-not-exists", type: "arrow" },
-        // should drop
-        { id: "text-not-exists", type: "text" },
-      ],
-    });
-
-    const arrow1 = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    const text1 = API.createElement({
-      type: "text",
-      id: "text1",
-      containerId: "rectangle-not-exists",
-    });
-
-    const arrow2 = API.createElement({
-      type: "arrow",
-      id: "arrow2",
-      startBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-      endBinding: {
-        elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    const arrow3 = API.createElement({
-      type: "arrow",
-      id: "arrow3",
-      startBinding: {
-        elementId: "rectangle-not-exists",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-      endBinding: {
-        elementId: "rectangle1",
-        focus: 0.2,
-        gap: 7,
-        fixedPoint: [0.5, 1],
-      },
-    });
-
-    // -------------------------------------------------------------------------
-
-    const origElements = [rectangle1, text1, arrow1, arrow2, arrow3] as const;
-    const duplicatedElements = duplicateElements({
-      type: "everything",
-      elements: origElements,
-    }).duplicatedElements as any as typeof origElements;
-
-    const [
-      clonedRectangle,
-      clonedText1,
-      clonedArrow1,
-      clonedArrow2,
-      clonedArrow3,
-    ] = duplicatedElements;
-
-    expect(clonedRectangle.boundElements).toEqual([
-      { id: clonedArrow1.id, type: "arrow" },
-    ]);
-
-    expect(clonedText1.containerId).toBe(null);
-
-    expect(clonedArrow2.startBinding).toEqual({
-      ...arrow2.startBinding,
-      elementId: clonedRectangle.id,
-    });
-    expect(clonedArrow2.endBinding).toBe(null);
-    expect(clonedArrow3.startBinding).toBe(null);
-    expect(clonedArrow3.endBinding).toEqual({
-      ...arrow3.endBinding,
-      elementId: clonedRectangle.id,
-    });
-  });
-
-  describe("should duplicate all group ids", () => {
-    it("should regenerate all group ids and keep them consistent across elements", () => {
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g1"],
-      });
-      const rectangle2 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g2", "g1"],
-      });
-      const rectangle3 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g2", "g1"],
-      });
-
-      const origElements = [rectangle1, rectangle2, rectangle3] as const;
-      const { duplicatedElements } = duplicateElements({
-        type: "everything",
-        elements: origElements,
-      });
-      const [clonedRectangle1, clonedRectangle2, clonedRectangle3] =
-        duplicatedElements;
-
-      expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
-      expect(rectangle2.groupIds[0]).not.toBe(clonedRectangle2.groupIds[0]);
-      expect(rectangle2.groupIds[1]).not.toBe(clonedRectangle2.groupIds[1]);
-
-      expect(clonedRectangle1.groupIds[0]).toBe(clonedRectangle2.groupIds[1]);
-      expect(clonedRectangle2.groupIds[0]).toBe(clonedRectangle3.groupIds[0]);
-      expect(clonedRectangle2.groupIds[1]).toBe(clonedRectangle3.groupIds[1]);
-    });
-
-    it("should keep and regenerate ids of groups even if invalid", () => {
-      // lone element shouldn't be able to be grouped with itself,
-      // but hard to check against in a performant way so we ignore it
-      const rectangle1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["g1"],
-      });
-
-      const {
-        duplicatedElements: [clonedRectangle1],
-      } = duplicateElements({ type: "everything", elements: [rectangle1] });
-
-      expect(typeof clonedRectangle1.groupIds[0]).toBe("string");
-      expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
-    });
-  });
-});
-
-describe("group-related duplication", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("action-duplicating within group", async () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["group1"],
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      groupIds: ["group1"],
-    });
-
-    API.setElements([rectangle1, rectangle2]);
-    API.setSelectedElements([rectangle2], "group1");
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDuplicateSelection);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: ["group1"] },
-    ]);
-    expect(h.state.editingGroupId).toBe("group1");
-  });
-
-  it("alt-duplicating within group", async () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["group1"],
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      groupIds: ["group1"],
-    });
-
-    API.setElements([rectangle1, rectangle2]);
-    API.setSelectedElements([rectangle2], "group1");
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle2.x + 5, rectangle2.y + 5);
-      mouse.up(rectangle2.x + 50, rectangle2.y + 50);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: ["group1"] },
-    ]);
-    expect(h.state.editingGroupId).toBe("group1");
-  });
-
-  it("alt-duplicating within group away outside frame", () => {
-    const frame = API.createElement({
-      type: "frame",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 50,
-      height: 50,
-      groupIds: ["group1"],
-      frameId: frame.id,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 50,
-      height: 50,
-      groupIds: ["group1"],
-      frameId: frame.id,
-    });
-
-    API.setElements([frame, rectangle1, rectangle2]);
-    API.setSelectedElements([rectangle2], "group1");
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle2.x + 5, rectangle2.y + 5);
-      mouse.up(frame.x + frame.width + 50, frame.y + frame.height + 50);
-    });
-
-    // console.log(h.elements);
-
-    assertElements(h.elements, [
-      { id: frame.id },
-      { id: rectangle1.id, frameId: frame.id },
-      { id: rectangle2.id, frameId: frame.id },
-      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: [], frameId: null },
-    ]);
-    expect(h.state.editingGroupId).toBe(null);
-  });
-});
-
-describe("duplication z-order", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("duplication z order with Cmd+D for the lowest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-    API.setSelectedElements([rectangle1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDuplicateSelection);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-    ]);
-  });
-
-  it("duplication z order with Cmd+D  for the highest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-    API.setSelectedElements([rectangle3]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDuplicateSelection);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-      { [ORIG_ID]: rectangle3.id, selected: true },
-    ]);
-  });
-
-  it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle1);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
-      mouse.up(rectangle1.x + 5, rectangle1.y + 5);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-    ]);
-  });
-
-  it("duplication z order with alt+drag for the highest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle3);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle3.x + 5, rectangle3.y + 5);
-      mouse.up(rectangle3.x + 5, rectangle3.y + 5);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-      { [ORIG_ID]: rectangle3.id, selected: true },
-    ]);
-  });
-
-  it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle1);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
-      mouse.up(rectangle1.x + 5, rectangle1.y + 5);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-    ]);
-  });
-
-  it("duplication z order with alt+drag with grouped elements should consider the group together when determining z-index", () => {
-    const rectangle1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["group1"],
-    });
-    const rectangle2 = API.createElement({
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      groupIds: ["group1"],
-    });
-    const rectangle3 = API.createElement({
-      type: "rectangle",
-      x: 20,
-      y: 20,
-      groupIds: ["group1"],
-    });
-
-    API.setElements([rectangle1, rectangle2, rectangle3]);
-
-    mouse.select(rectangle1);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
-      mouse.up(rectangle1.x + 15, rectangle1.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle1.id },
-      { id: rectangle2.id },
-      { id: rectangle3.id },
-      { [ORIG_ID]: rectangle1.id, selected: true },
-      { [ORIG_ID]: rectangle2.id, selected: true },
-      { [ORIG_ID]: rectangle3.id, selected: true },
-    ]);
-  });
-
-  it("alt-duplicating text container (in-order)", async () => {
-    const [rectangle, text] = API.createTextContainer();
-    API.setElements([rectangle, text]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle.x + 5, rectangle.y + 5);
-      mouse.up(rectangle.x + 15, rectangle.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle.id },
-      { id: text.id, containerId: rectangle.id },
-      { [ORIG_ID]: rectangle.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(rectangle.id)?.id,
-      },
-    ]);
-  });
-
-  it("alt-duplicating text container (out-of-order)", async () => {
-    const [rectangle, text] = API.createTextContainer();
-    API.setElements([text, rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(rectangle.x + 5, rectangle.y + 5);
-      mouse.up(rectangle.x + 15, rectangle.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: rectangle.id },
-      { id: text.id, containerId: rectangle.id },
-      { [ORIG_ID]: rectangle.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(rectangle.id)?.id,
-      },
-    ]);
-  });
-
-  it("alt-duplicating labeled arrows (in-order)", async () => {
-    const [arrow, text] = API.createLabeledArrow();
-
-    API.setElements([arrow, text]);
-    API.setSelectedElements([arrow]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(arrow.x + 5, arrow.y + 5);
-      mouse.up(arrow.x + 15, arrow.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: arrow.id },
-      { id: text.id, containerId: arrow.id },
-      { [ORIG_ID]: arrow.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(arrow.id)?.id,
-      },
-    ]);
-    expect(h.state.selectedLinearElement).toEqual(
-      expect.objectContaining({ elementId: getCloneByOrigId(arrow.id)?.id }),
-    );
-  });
-
-  it("alt-duplicating labeled arrows (out-of-order)", async () => {
-    const [arrow, text] = API.createLabeledArrow();
-
-    API.setElements([text, arrow]);
-    API.setSelectedElements([arrow]);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(arrow.x + 5, arrow.y + 5);
-      mouse.up(arrow.x + 15, arrow.y + 15);
-    });
-
-    assertElements(h.elements, [
-      { id: arrow.id },
-      { id: text.id, containerId: arrow.id },
-      { [ORIG_ID]: arrow.id, selected: true },
-      {
-        [ORIG_ID]: text.id,
-        containerId: getCloneByOrigId(arrow.id)?.id,
-      },
-    ]);
-  });
-
-  it("alt-duplicating bindable element with bound arrow should keep the arrow on the duplicate", async () => {
-    const rect = UI.createElement("rectangle", {
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-
-    const arrow = UI.createElement("arrow", {
-      x: -100,
-      y: 50,
-      width: 95,
-      height: 0,
-    });
-
-    expect(arrow.endBinding?.elementId).toBe(rect.id);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      mouse.down(5, 5);
-      mouse.up(15, 15);
-    });
-
-    assertElements(h.elements, [
-      {
-        id: rect.id,
-        boundElements: expect.arrayContaining([
-          expect.objectContaining({ id: arrow.id }),
-        ]),
-      },
-      { [ORIG_ID]: rect.id, boundElements: [], selected: true },
-      {
-        id: arrow.id,
-        endBinding: expect.objectContaining({ elementId: rect.id }),
-      },
-    ]);
-  });
-});

packages/element/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist/types"
-  },
-  "include": ["src/**/*", "global.d.ts"],
-  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
-}

packages/eslintrc.base.json

@@ -1,21 +0,0 @@
-{
-  "overrides": [
-    {
-      "files": ["src/**/*.{ts,tsx}"],
-      "rules": {
-        "@typescript-eslint/no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": ["../../excalidraw", "../../../packages/excalidraw", "@excalidraw/excalidraw"],
-                "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
-                "allowTypeImports": true
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ]
-}

packages/excalidraw/.gitignore

@@ -1,3 +1,2 @@
 node_modules
 types
-.wrangler

packages/excalidraw/CHANGELOG.md

@@ -45,9 +45,9 @@ Please add the latest change on the top under the correct section.
 
 #### Deprecated UMD bundle in favor of ES modules [#7441](https://github.com/excalidraw/excalidraw/pull/7441), [#9127](https://github.com/excalidraw/excalidraw/pull/9127)
 
-We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` folder inside `@excalidraw/excalidraw` package now contains only bundled source files, making any dependencies tree-shakable. The package comes with the following structure:
+We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` bundles inside `@excalidraw/excalidraw` package now contain only bundled source files, making any dependencies tree-shakable. The npm package comes with the following structure:
 
-> **Note**: The structure is simplified for the sake of brevity, omitting lazy-loadable modules, including locales (previously treated as JSON assets) and source maps in the development bundle.
+> **Note**: The structure is simplified for the sake of brevity, omitting lazy-loadable modules, including locales (previously treated as json assets) and source maps in the development bundle.
 
 ```
 @excalidraw/excalidraw/
@@ -72,7 +72,7 @@ Since `"node"` and `"node10"` do not support `package.json` `"exports"` fields,
 
 ##### ESM strict resolution
 
-Due to ESM's strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to disable this feature explicitly.
+Due to ESM strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to explicitly disable this feature.
 
 For example in Webpack, you should set [`resolve.fullySpecified`](https://webpack.js.org/configuration/resolve/#resolvefullyspecified) to `false`.
 
@@ -80,7 +80,7 @@ For this reason, CRA will no longer work unless you eject or use a workaround su
 
 ##### New structure of the imports
 
-Depending on the environment, this is how imports should look like with the `ESM`:
+Dependening on the environment, this is how imports should look like with the `ESM`:
 
 **With bundler (Vite, Next.js, etc.)**
 
@@ -128,7 +128,7 @@ The `excalidraw-assets` and `excalidraw-assets-dev` folders, which contained loc
 
 ##### Locales
 
-Locales are no longer treated as static `.json` assets but are transpiled with `esbuild` directly to the `.js` as ES modules. Note that some build tools (i.e. Vite) may require setting `es2022` as a build target, in order to support "Arbitrary module namespace identifier names", e.g. `export { english as "en-us" } )`.
+Locales are no longer treated as static `.json` assets, but are transpiled with `esbuild` dirrectly to the `.js` as ES modules. Note that some build tools (i.e. Vite) may require setting `es2022` as a build target, in order to support "Arbitrary module namespace identifier names", e.g. `export { english as "en-us" } )`.
 
 ```js
 // vite.config.js
@@ -145,7 +145,7 @@ optimizeDeps: {
 
 ##### Fonts
 
-All fonts are automatically loaded from the [esm.run](https://esm.run/) CDN. For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
+New fonts, which we've added, are automatically loaded from the CDN. For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
 
 ```js
 <script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
@@ -159,7 +159,7 @@ or, if you serve your assets from the root of your CDN, you would do:
 </script>
 ```
 
-or, if you prefer the path to be dynamically set based on the `location.origin`, you could do the following:
+or, if you prefer the path to be dynamicly set based on the `location.origin`, you could do the following:
 
 ```jsx
 // Next.js
@@ -189,7 +189,7 @@ updateScene({
 }); // B
 ```
 
-The `updateScene` API has changed due to the added `Store` component, as part of the multiplayer undo / redo initiative. Specifically, optional `sceneData` parameter `commitToHistory: boolean` was replaced with optional `captureUpdate: CaptureUpdateActionType` parameter. Therefore, make sure to update all instances of `updateScene`, which use `commitToHistory` parameter according to the _before / after_ table below.
+The `updateScene` API has changed due to the added `Store` component, as part of multiplayer undo / redo initiative. Specifically, optional `sceneData` parameter `commitToHistory: boolean` was replaced with optional `captureUpdate: CaptureUpdateActionType` parameter. Therefore, make sure to update all instances of `updateScene`, which use `commitToHistory` parameter according to the _before / after_ table below.
 
 > **Note**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `captureUpdate` value.
 
@@ -203,7 +203,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - `ExcalidrawTextElement.baseline` was removed and replaced with a vertical offset computation based on font metrics, performed on each text element re-render. In case of custom font usage, extend the `FONT_METRICS` object with the related properties. [#7693](https://github.com/excalidraw/excalidraw/pull/7693)
 
-- `ExcalidrawEmbeddableElement.validated` was removed and moved to the private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
+- `ExcalidrawEmbeddableElement.validated` was removed and moved to private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
 
 - Stats container CSS has changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout. [#8361](https://github.com/excalidraw/excalidraw/pull/8361)
 
@@ -487,7 +487,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - Linear element complete button disabled [#8492](https://github.com/excalidraw/excalidraw/pull/8492)
 
-- Aspect ratios of distorted images are not preserved in SVG exports [#8061](https://github.com/excalidraw/excalidraw/pull/8061)
+- Aspect ratio of distorted images are not preserved in SVG exports [#8061](https://github.com/excalidraw/excalidraw/pull/8061)
 
 - WYSIWYG editor padding is not normalized with zoom.value [#8481](https://github.com/excalidraw/excalidraw/pull/8481)
 
@@ -517,7 +517,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - Round coordinates and sizes for rectangle intersection [#8366](https://github.com/excalidraw/excalidraw/pull/8366)
 
-- Text content with tab characters act differently in view/edit [#8336](https://github.com/excalidraw/excalidraw/pull/8336)
+- Text content with tab characters act different in view/edit [#8336](https://github.com/excalidraw/excalidraw/pull/8336)
 
 - Drawing from 0-dimension canvas [#8356](https://github.com/excalidraw/excalidraw/pull/8356)
 

packages/excalidraw/actions/actionAddToLibrary.ts

@@ -1,10 +1,9 @@
-import { LIBRARY_DISABLED_TYPES, randomId } from "@excalidraw/common";
-import { deepCopyElement } from "@excalidraw/element/duplicate";
-
-import { t } from "../i18n";
-import { CaptureUpdateAction } from "../store";
-
 import { register } from "./register";
+import { deepCopyElement } from "../element/newElement";
+import { randomId } from "../random";
+import { t } from "../i18n";
+import { LIBRARY_DISABLED_TYPES } from "../constants";
+import { CaptureUpdateAction } from "../store";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",

packages/excalidraw/actions/actionAlign.tsx

@@ -1,18 +1,5 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
-
-import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
-
-import { KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
-
-import { alignElements } from "@excalidraw/element/align";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import type { Alignment } from "@excalidraw/element/align";
-
-import { ToolButton } from "../components/ToolButton";
+import type { Alignment } from "../align";
+import { alignElements } from "../align";
 import {
   AlignBottomIcon,
   AlignLeftIcon,
@@ -21,15 +8,18 @@ import {
   CenterHorizontallyIcon,
   CenterVerticallyIcon,
 } from "../components/icons";
-
+import { ToolButton } from "../components/ToolButton";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import type { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
-
+import { KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
 import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
 
 export const alignActionsPredicate = (
   appState: UIAppState,
@@ -50,8 +40,14 @@ const alignSelectedElements = (
   alignment: Alignment,
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
+  const elementsMap = arrayToMap(elements);
 
-  const updatedElements = alignElements(selectedElements, alignment, app.scene);
+  const updatedElements = alignElements(
+    selectedElements,
+    elementsMap,
+    alignment,
+    app.scene,
+  );
 
   const updatedElementsMap = arrayToMap(updatedElements);
 

packages/excalidraw/actions/actionBoundText.tsx

@@ -3,52 +3,38 @@ import {
   ROUNDNESS,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
-  arrayToMap,
-  getFontString,
-} from "@excalidraw/common";
-import {
-  getOriginalContainerHeightFromCache,
-  resetOriginalContainerCache,
-  updateOriginalContainerCache,
-} from "@excalidraw/element/containerCache";
-
+} from "../constants";
+import { isTextElement, newElement } from "../element";
+import { mutateElement } from "../element/mutateElement";
 import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
   redrawTextBoundingBox,
-} from "@excalidraw/element/textElement";
-
+} from "../element/textElement";
+import {
+  getOriginalContainerHeightFromCache,
+  resetOriginalContainerCache,
+  updateOriginalContainerCache,
+} from "../element/containerCache";
 import {
   hasBoundTextElement,
-  isArrowElement,
   isTextBindableContainer,
-  isTextElement,
   isUsingAdaptiveRadius,
-} from "@excalidraw/element/typeChecks";
-
-import { measureText } from "@excalidraw/element/textMeasurements";
-
-import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
-
-import { newElement } from "@excalidraw/element/newElement";
-
+} from "../element/typeChecks";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
-} from "@excalidraw/element/types";
-
-import type { Mutable } from "@excalidraw/common/utility-types";
-
-import type { Radians } from "@excalidraw/math";
-
-import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
+} from "../element/types";
 import type { AppState } from "../types";
+import type { Mutable } from "../utility-types";
+import { arrayToMap, getFontString } from "../utils";
+import { register } from "./register";
+import { syncMovedIndices } from "../fractionalIndex";
+import { CaptureUpdateAction } from "../store";
+import { measureText } from "../element/textMeasurements";
 
 export const actionUnbindText = register({
   name: "unbindText",
@@ -79,7 +65,7 @@ export const actionUnbindText = register({
           boundTextElement,
           elementsMap,
         );
-        app.scene.mutateElement(boundTextElement as ExcalidrawTextElement, {
+        mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
           height,
@@ -87,7 +73,7 @@ export const actionUnbindText = register({
           x,
           y,
         });
-        app.scene.mutateElement(element, {
+        mutateElement(element, {
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id,
           ),
@@ -152,21 +138,24 @@ export const actionBindText = register({
       textElement = selectedElements[1] as ExcalidrawTextElement;
       container = selectedElements[0] as ExcalidrawTextContainer;
     }
-    app.scene.mutateElement(textElement, {
+    mutateElement(textElement, {
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
       autoResize: true,
-      angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians,
     });
-    app.scene.mutateElement(container, {
+    mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
         type: "text",
         id: textElement.id,
       }),
     });
     const originalContainerHeight = container.height;
-    redrawTextBoundingBox(textElement, container, app.scene);
+    redrawTextBoundingBox(
+      textElement,
+      container,
+      app.scene.getNonDeletedElementsMap(),
+    );
     // overwritting the cache with original container height so
     // it can be restored when unbind
     updateOriginalContainerCache(container.id, originalContainerHeight);
@@ -225,8 +214,8 @@ export const actionWrapTextInContainer = register({
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    const someTextElements = selectedElements.some((el) => isTextElement(el));
-    return selectedElements.length > 0 && someTextElements;
+    const areTextElements = selectedElements.every((el) => isTextElement(el));
+    return selectedElements.length > 0 && areTextElements;
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -296,23 +285,27 @@ export const actionWrapTextInContainer = register({
             }
 
             if (startBinding || endBinding) {
-              app.scene.mutateElement(ele, {
-                startBinding,
-                endBinding,
-              });
+              mutateElement(ele, { startBinding, endBinding }, false);
             }
           });
         }
 
-        app.scene.mutateElement(textElement, {
-          containerId: container.id,
-          verticalAlign: VERTICAL_ALIGN.MIDDLE,
-          boundElements: null,
-          textAlign: TEXT_ALIGN.CENTER,
-          autoResize: true,
-        });
-
-        redrawTextBoundingBox(textElement, container, app.scene);
+        mutateElement(
+          textElement,
+          {
+            containerId: container.id,
+            verticalAlign: VERTICAL_ALIGN.MIDDLE,
+            boundElements: null,
+            textAlign: TEXT_ALIGN.CENTER,
+            autoResize: true,
+          },
+          false,
+        );
+        redrawTextBoundingBox(
+          textElement,
+          container,
+          app.scene.getNonDeletedElementsMap(),
+        );
 
         updatedElements = pushContainerBelowText(
           [...updatedElements, container],

packages/excalidraw/actions/actionCanvas.tsx

@@ -1,35 +1,6 @@
-import { clamp, roundToStep } from "@excalidraw/math";
-
-import {
-  DEFAULT_CANVAS_BACKGROUND_PICKS,
-  CURSOR_TYPE,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  THEME,
-  ZOOM_STEP,
-  getShortcutKey,
-  updateActiveTool,
-  CODES,
-  KEYS,
-} from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import { getCommonBounds, type SceneBounds } from "@excalidraw/element/bounds";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import {
-  getDefaultAppState,
-  isEraserActive,
-  isHandToolActive,
-} from "../appState";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
-import { ToolButton } from "../components/ToolButton";
-import { Tooltip } from "../components/Tooltip";
 import {
   handIcon,
-  LassoIcon,
   MoonIcon,
   SunIcon,
   TrashIcon,
@@ -38,21 +9,41 @@ import {
   ZoomOutIcon,
   ZoomResetIcon,
 } from "../components/icons";
-import { setCursor } from "../cursor";
-
+import { ToolButton } from "../components/ToolButton";
+import {
+  CURSOR_TYPE,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  THEME,
+  ZOOM_STEP,
+} from "../constants";
+import { getCommonBounds, getNonDeletedElements } from "../element";
+import type { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
+import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
 import type { AppState, Offsets } from "../types";
+import { getShortcutKey, updateActiveTool } from "../utils";
+import { register } from "./register";
+import { Tooltip } from "../components/Tooltip";
+import { newElementWith } from "../element/mutateElement";
+import {
+  getDefaultAppState,
+  isEraserActive,
+  isHandToolActive,
+} from "../appState";
+import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
+import type { SceneBounds } from "../element/bounds";
+import { setCursor } from "../cursor";
+import { CaptureUpdateAction } from "../store";
+import { clamp, roundToStep } from "@excalidraw/math";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
+  paletteName: "Change canvas background color",
   trackEvent: false,
   predicate: (elements, appState, props, app) => {
     return (
@@ -90,6 +81,7 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   label: "labels.clearCanvas",
+  paletteName: "Clear canvas",
   icon: TrashIcon,
   trackEvent: { category: "canvas" },
   predicate: (elements, appState, props, app) => {
@@ -524,42 +516,10 @@ export const actionToggleEraserTool = register({
   keyTest: (event) => event.key === KEYS.E,
 });
 
-export const actionToggleLassoTool = register({
-  name: "toggleLassoTool",
-  label: "toolBar.lasso",
-  icon: LassoIcon,
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState, _, app) => {
-    let activeTool: AppState["activeTool"];
-
-    if (appState.activeTool.type !== "lasso") {
-      activeTool = updateActiveTool(appState, {
-        type: "lasso",
-        fromSelection: false,
-      });
-      setCursor(app.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "selection",
-      });
-    }
-
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        activeEmbeddable: null,
-        activeTool,
-      },
-      captureUpdate: CaptureUpdateAction.NEVER,
-    };
-  },
-});
-
 export const actionToggleHandTool = register({
   name: "toggleHandTool",
   label: "toolBar.hand",
+  paletteName: "Toggle hand tool",
   trackEvent: { category: "toolbar" },
   icon: handIcon,
   viewMode: false,

packages/excalidraw/actions/actionClipboard.tsx

@@ -1,8 +1,5 @@
-import { isTextElement } from "@excalidraw/element/typeChecks";
-import { getTextFromElements } from "@excalidraw/element/textElement";
-
-import { CODES, KEYS, isFirefox } from "@excalidraw/common";
-
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
@@ -11,14 +8,13 @@ import {
   probablySupportsClipboardWriteText,
   readSystemClipboard,
 } from "../clipboard";
-import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
-import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { t } from "../i18n";
-
-import { CaptureUpdateAction } from "../store";
-
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { register } from "./register";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
+import { getTextFromElements, isTextElement } from "../element";
+import { t } from "../i18n";
+import { isFirefox } from "../constants";
+import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
+import { CaptureUpdateAction } from "../store";
 
 export const actionCopy = register({
   name: "copy",

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,13 +1,10 @@
-import { isImageElement } from "@excalidraw/element/typeChecks";
-
-import type { ExcalidrawImageElement } from "@excalidraw/element/types";
-
-import { ToolButton } from "../components/ToolButton";
-import { cropIcon } from "../components/icons";
-import { t } from "../i18n";
-import { CaptureUpdateAction } from "../store";
-
 import { register } from "./register";
+import { cropIcon } from "../components/icons";
+import { CaptureUpdateAction } 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",

packages/excalidraw/actions/actionDeleteSelected.test.tsx

@@ -1,9 +1,7 @@
 import React from "react";
-
-import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
+import { Excalidraw, mutateElement } from "../index";
 import { act, assertElements, render } from "../tests/test-utils";
-
+import { API } from "../tests/helpers/api";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 
 const { h } = window;
@@ -56,7 +54,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: f1.id,
     });
 
-    h.app.scene.mutateElement(r1, {
+    mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -94,7 +92,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    h.app.scene.mutateElement(r1, {
+    mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -132,7 +130,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    h.app.scene.mutateElement(r1, {
+    mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -170,7 +168,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    h.app.scene.mutateElement(a1, {
+    mutateElement(a1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -1,33 +1,25 @@
-import { KEYS, updateActiveTool } from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-import { fixBindingsAfterDeletion } from "@excalidraw/element/binding";
-import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import { getContainerElement } from "@excalidraw/element/textElement";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { KEYS } from "../keys";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { register } from "./register";
+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 { LinearElementEditor } from "../element/linearElementEditor";
+import { fixBindingsAfterDeletion } from "../element/binding";
 import {
   isBoundToContainer,
   isElbowArrow,
   isFrameLikeElement,
-} from "@excalidraw/element/typeChecks";
-import { getFrameChildren } from "@excalidraw/element/frame";
-
-import {
-  getElementsInGroup,
-  selectGroupsForSelectedElements,
-} from "@excalidraw/element/groups";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import { t } from "../i18n";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { CaptureUpdateAction } from "../store";
+} from "../element/typeChecks";
+import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-
-import { register } from "./register";
-
-import type { AppClassProperties, AppState } from "../types";
+import { CaptureUpdateAction } from "../store";
+import { getContainerElement } from "../element/textElement";
+import { getFrameChildren } from "../frame";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -91,7 +83,7 @@ const deleteSelectedElements = (
         el.boundElements.forEach((candidate) => {
           const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
           if (bound && isElbowArrow(bound)) {
-            app.scene.mutateElement(bound, {
+            mutateElement(bound, {
               startBinding:
                 el.id === bound.startBinding?.elementId
                   ? null
@@ -99,6 +91,7 @@ const deleteSelectedElements = (
               endBinding:
                 el.id === bound.endBinding?.elementId ? null : bound.endBinding,
             });
+            mutateElement(bound, { points: bound.points });
           }
         });
       }
@@ -257,11 +250,7 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(
-        element,
-        app.scene,
-        selectedPointsIndices,
-      );
+      LinearElementEditor.deletePoints(element, selectedPointsIndices);
 
       return {
         elements,
@@ -297,7 +286,6 @@ export const actionDeleteSelected = register({
         activeTool: updateActiveTool(appState, { type: "selection" }),
         multiElement: null,
         activeEmbeddable: null,
-        selectedLinearElement: null,
       },
       captureUpdate: isSomeElementSelected(
         getNonDeletedElements(elements),

packages/excalidraw/actions/actionDistribute.tsx

@@ -1,31 +1,21 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
-
-import { CODES, KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
-
-import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
-
-import { distributeElements } from "@excalidraw/element/distribute";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import type { Distribution } from "@excalidraw/element/distribute";
-
-import { ToolButton } from "../components/ToolButton";
 import {
   DistributeHorizontallyIcon,
   DistributeVerticallyIcon,
 } from "../components/icons";
-
+import { ToolButton } from "../components/ToolButton";
+import type { Distribution } from "../distribute";
+import { distributeElements } from "../distribute";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import type { ExcalidrawElement } from "../element/types";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
-
+import { CODES, KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
 import type { AppClassProperties, AppState } from "../types";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
 
 const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);

packages/excalidraw/actions/actionDuplicateSelection.test.tsx

@@ -1,15 +1,14 @@
-import { ORIG_ID } from "@excalidraw/common";
-
 import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
 import {
   act,
   assertElements,
   getCloneByOrigId,
   render,
 } from "../tests/test-utils";
-
+import { API } from "../tests/helpers/api";
 import { actionDuplicateSelection } from "./actionDuplicateSelection";
+import React from "react";
+import { ORIG_ID } from "../constants";
 
 const { h } = window;
 
@@ -257,7 +256,7 @@ describe("actionDuplicateSelection", () => {
       assertElements(h.elements, [
         { id: frame.id },
         { id: text.id, frameId: frame.id },
-        { [ORIG_ID]: text.id, frameId: frame.id, selected: true },
+        { [ORIG_ID]: text.id, frameId: frame.id },
       ]);
     });
 

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -1,31 +1,48 @@
-import {
-  DEFAULT_GRID_SIZE,
-  KEYS,
-  arrayToMap,
-  getShortcutKey,
-} from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-
-import {
-  getSelectedElements,
-  getSelectionStateForElements,
-} from "@excalidraw/element/selection";
-
-import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
-
-import { duplicateElements } from "@excalidraw/element/duplicate";
-
-import { ToolButton } from "../components/ToolButton";
-import { DuplicateIcon } from "../components/icons";
-
-import { t } from "../i18n";
-import { isSomeElementSelected } from "../scene";
-import { CaptureUpdateAction } from "../store";
-
+import { KEYS } from "../keys";
 import { register } from "./register";
+import type { ExcalidrawElement } from "../element/types";
+import { duplicateElement, getNonDeletedElements } from "../element";
+import { isSomeElementSelected } from "../scene";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import {
+  arrayToMap,
+  castArray,
+  findLastIndex,
+  getShortcutKey,
+  invariant,
+} from "../utils";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import {
+  selectGroupsForSelectedElements,
+  getSelectedGroupForElement,
+  getElementsInGroup,
+} from "../groups";
+import type { AppState } from "../types";
+import { fixBindingsAfterDuplication } from "../element/binding";
+import type { ActionResult } from "./types";
+import { DEFAULT_GRID_SIZE } from "../constants";
+import {
+  bindTextToShapeAfterDuplication,
+  getBoundTextElement,
+  getContainerElement,
+} from "../element/textElement";
+import {
+  hasBoundTextElement,
+  isBoundToContainer,
+  isFrameLikeElement,
+} from "../element/typeChecks";
+import { normalizeElementOrder } from "../element/sortElements";
+import { DuplicateIcon } from "../components/icons";
+import {
+  bindElementsToFramesAfterDuplication,
+  getFrameChildren,
+} from "../frame";
+import {
+  excludeElementsInFramesFromSelection,
+  getSelectedElements,
+} from "../scene/selection";
+import { CaptureUpdateAction } from "../store";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -33,17 +50,13 @@ export const actionDuplicateSelection = register({
   icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
-    if (appState.selectedElementsAreBeingDragged) {
-      return false;
-    }
-
     // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {
       // TODO: Invariants should be checked here instead of duplicateSelectedPoints()
       try {
         const newAppState = LinearElementEditor.duplicateSelectedPoints(
           appState,
-          app.scene,
+          app.scene.getNonDeletedElementsMap(),
         );
 
         return {
@@ -56,51 +69,20 @@ export const actionDuplicateSelection = register({
       }
     }
 
-    let { duplicatedElements, elementsWithDuplicates } = duplicateElements({
-      type: "in-place",
-      elements,
-      idsOfElementsToDuplicate: arrayToMap(
-        getSelectedElements(elements, appState, {
-          includeBoundTextElement: true,
-          includeElementsInFrames: true,
-        }),
-      ),
-      appState,
-      randomizeSeed: true,
-      overrides: ({ origElement, origIdToDuplicateId }) => {
-        const duplicateFrameId =
-          origElement.frameId && origIdToDuplicateId.get(origElement.frameId);
-        return {
-          x: origElement.x + DEFAULT_GRID_SIZE / 2,
-          y: origElement.y + DEFAULT_GRID_SIZE / 2,
-          frameId: duplicateFrameId ?? origElement.frameId,
-        };
-      },
-    });
+    const nextState = duplicateElements(elements, appState);
 
-    if (app.props.onDuplicate && elementsWithDuplicates) {
+    if (app.props.onDuplicate && nextState.elements) {
       const mappedElements = app.props.onDuplicate(
-        elementsWithDuplicates,
+        nextState.elements,
         elements,
       );
       if (mappedElements) {
-        elementsWithDuplicates = mappedElements;
+        nextState.elements = mappedElements;
       }
     }
 
     return {
-      elements: syncMovedIndices(
-        elementsWithDuplicates,
-        arrayToMap(duplicatedElements),
-      ),
-      appState: {
-        ...appState,
-        ...getSelectionStateForElements(
-          duplicatedElements,
-          getNonDeletedElements(elementsWithDuplicates),
-          appState,
-        ),
-      },
+      ...nextState,
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
@@ -118,3 +100,260 @@ export const actionDuplicateSelection = register({
     />
   ),
 });
+
+const duplicateElements = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+): Partial<Exclude<ActionResult, false>> => {
+  // ---------------------------------------------------------------------------
+
+  const groupIdMap = new Map();
+  const newElements: ExcalidrawElement[] = [];
+  const oldElements: ExcalidrawElement[] = [];
+  const oldIdToDuplicatedId = new Map();
+  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
+
+  const elementsMap = arrayToMap(elements);
+
+  const duplicateAndOffsetElement = <
+    T extends ExcalidrawElement | ExcalidrawElement[],
+  >(
+    element: T,
+  ): T extends ExcalidrawElement[]
+    ? ExcalidrawElement[]
+    : ExcalidrawElement | null => {
+    const elements = castArray(element);
+
+    const _newElements = elements.reduce(
+      (acc: ExcalidrawElement[], element) => {
+        if (processedIds.has(element.id)) {
+          return acc;
+        }
+
+        processedIds.set(element.id, true);
+
+        const newElement = duplicateElement(
+          appState.editingGroupId,
+          groupIdMap,
+          element,
+          {
+            x: element.x + DEFAULT_GRID_SIZE / 2,
+            y: element.y + DEFAULT_GRID_SIZE / 2,
+          },
+        );
+
+        processedIds.set(newElement.id, true);
+
+        duplicatedElementsMap.set(newElement.id, newElement);
+        oldIdToDuplicatedId.set(element.id, newElement.id);
+
+        oldElements.push(element);
+        newElements.push(newElement);
+
+        acc.push(newElement);
+        return acc;
+      },
+      [],
+    );
+
+    return (
+      Array.isArray(element) ? _newElements : _newElements[0] || null
+    ) as T extends ExcalidrawElement[]
+      ? ExcalidrawElement[]
+      : ExcalidrawElement | null;
+  };
+
+  elements = normalizeElementOrder(elements);
+
+  const idsOfElementsToDuplicate = arrayToMap(
+    getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    }),
+  );
+
+  // Ids of elements that have already been processed so we don't push them
+  // into the array twice if we end up backtracking when retrieving
+  // discontiguous group of elements (can happen due to a bug, or in edge
+  // cases such as a group containing deleted elements which were not selected).
+  //
+  // This is not enough to prevent duplicates, so we do a second loop afterwards
+  // to remove them.
+  //
+  // For convenience we mark even the newly created ones even though we don't
+  // loop over them.
+  const processedIds = new Map<ExcalidrawElement["id"], true>();
+
+  const elementsWithClones: ExcalidrawElement[] = elements.slice();
+
+  const insertAfterIndex = (
+    index: number,
+    elements: ExcalidrawElement | null | ExcalidrawElement[],
+  ) => {
+    invariant(index !== -1, "targetIndex === -1 ");
+
+    if (!Array.isArray(elements) && !elements) {
+      return;
+    }
+
+    elementsWithClones.splice(index + 1, 0, ...castArray(elements));
+  };
+
+  const frameIdsToDuplicate = new Set(
+    elements
+      .filter(
+        (el) => idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
+      )
+      .map((el) => el.id),
+  );
+
+  for (const element of elements) {
+    if (processedIds.has(element.id)) {
+      continue;
+    }
+
+    if (!idsOfElementsToDuplicate.has(element.id)) {
+      continue;
+    }
+
+    // groups
+    // -------------------------------------------------------------------------
+
+    const groupId = getSelectedGroupForElement(appState, element);
+    if (groupId) {
+      const groupElements = getElementsInGroup(elements, groupId).flatMap(
+        (element) =>
+          isFrameLikeElement(element)
+            ? [...getFrameChildren(elements, element.id), element]
+            : [element],
+      );
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.groupIds?.includes(groupId);
+      });
+
+      insertAfterIndex(targetIndex, duplicateAndOffsetElement(groupElements));
+      continue;
+    }
+
+    // frame duplication
+    // -------------------------------------------------------------------------
+
+    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+      continue;
+    }
+
+    if (isFrameLikeElement(element)) {
+      const frameId = element.id;
+
+      const frameChildren = getFrameChildren(elements, frameId);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.frameId === frameId || el.id === frameId;
+      });
+
+      insertAfterIndex(
+        targetIndex,
+        duplicateAndOffsetElement([...frameChildren, element]),
+      );
+      continue;
+    }
+
+    // text container
+    // -------------------------------------------------------------------------
+
+    if (hasBoundTextElement(element)) {
+      const boundTextElement = getBoundTextElement(element, elementsMap);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return (
+          el.id === element.id ||
+          ("containerId" in el && el.containerId === element.id)
+        );
+      });
+
+      if (boundTextElement) {
+        insertAfterIndex(
+          targetIndex,
+          duplicateAndOffsetElement([element, boundTextElement]),
+        );
+      } else {
+        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
+      }
+
+      continue;
+    }
+
+    if (isBoundToContainer(element)) {
+      const container = getContainerElement(element, elementsMap);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.id === element.id || el.id === container?.id;
+      });
+
+      if (container) {
+        insertAfterIndex(
+          targetIndex,
+          duplicateAndOffsetElement([container, element]),
+        );
+      } else {
+        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
+      }
+
+      continue;
+    }
+
+    // default duplication (regular elements)
+    // -------------------------------------------------------------------------
+
+    insertAfterIndex(
+      findLastIndex(elementsWithClones, (el) => el.id === element.id),
+      duplicateAndOffsetElement(element),
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+
+  bindTextToShapeAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+  fixBindingsAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+  bindElementsToFramesAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+
+  const nextElementsToSelect =
+    excludeElementsInFramesFromSelection(newElements);
+
+  return {
+    elements: elementsWithClones,
+    appState: {
+      ...appState,
+      ...selectGroupsForSelectedElements(
+        {
+          editingGroupId: appState.editingGroupId,
+          selectedElementIds: nextElementsToSelect.reduce(
+            (acc: Record<ExcalidrawElement["id"], true>, element) => {
+              if (!isBoundToContainer(element)) {
+                acc[element.id] = true;
+              }
+              return acc;
+            },
+            {},
+          ),
+        },
+        getNonDeletedElements(elementsWithClones),
+        appState,
+        null,
+      ),
+    },
+  };
+};

packages/excalidraw/actions/actionElementLink.ts

@@ -1,15 +1,13 @@
+import { copyTextToSystemClipboard } from "../clipboard";
+import { copyIcon, elementLinkIcon } from "../components/icons";
 import {
   canCreateLinkFromElements,
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection,
-} from "@excalidraw/element/elementLink";
-
-import { copyTextToSystemClipboard } from "../clipboard";
-import { copyIcon, elementLinkIcon } from "../components/icons";
+} from "../element/elementLink";
 import { t } from "../i18n";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-
 import { register } from "./register";
 
 export const actionCopyElementLink = register({

packages/excalidraw/actions/actionElementLock.test.tsx

@@ -1,10 +1,9 @@
-import { queryByTestId, fireEvent } from "@testing-library/react";
 import React from "react";
-
 import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
-import { Pointer, UI } from "../tests/helpers/ui";
+import { queryByTestId, fireEvent } from "@testing-library/react";
 import { render } from "../tests/test-utils";
+import { Pointer, UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
 
 const { h } = window;
 const mouse = new Pointer("mouse");

packages/excalidraw/actions/actionElementLock.ts

@@ -1,16 +1,11 @@
-import { KEYS, arrayToMap } from "@excalidraw/common";
-
-import { newElementWith } from "@excalidraw/element/mutateElement";
-
-import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
 import { LockedIcon, UnlockedIcon } from "../components/icons";
-
+import { newElementWith } from "../element/mutateElement";
+import { isFrameLikeElement } from "../element/typeChecks";
+import type { ExcalidrawElement } from "../element/types";
+import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-
+import { arrayToMap } from "../utils";
 import { register } from "./register";
 
 const shouldLock = (elements: readonly ExcalidrawElement[]) =>
@@ -90,6 +85,7 @@ export const actionToggleElementLock = register({
 
 export const actionUnlockAllElements = register({
   name: "unlockAllElements",
+  paletteName: "Unlock all elements",
   trackEvent: { category: "canvas" },
   viewMode: false,
   icon: UnlockedIcon,

packages/excalidraw/actions/actionEmbeddable.ts

@@ -1,34 +0,0 @@
-import { updateActiveTool } from "@excalidraw/common";
-
-import { setCursorForShape } from "../cursor";
-import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
-export const actionSetEmbeddableAsActiveTool = register({
-  name: "setEmbeddableAsActiveTool",
-  trackEvent: { category: "toolbar" },
-  target: "Tool",
-  label: "toolBar.embeddable",
-  perform: (elements, appState, _, app) => {
-    const nextActiveTool = updateActiveTool(appState, {
-      type: "embeddable",
-    });
-
-    setCursorForShape(app.canvas, {
-      ...appState,
-      activeTool: nextActiveTool,
-    });
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        activeTool: updateActiveTool(appState, {
-          type: "embeddable",
-        }),
-      },
-      captureUpdate: CaptureUpdateAction.EVENTUALLY,
-    };
-  },
-});

packages/excalidraw/actions/actionExport.tsx

@@ -1,34 +1,25 @@
-import {
-  KEYS,
-  DEFAULT_EXPORT_PADDING,
-  EXPORT_SCALES,
-  THEME,
-} from "@excalidraw/common";
-
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import type { Theme } from "@excalidraw/element/types";
-
-import { useDevice } from "../components/App";
-import { CheckboxItem } from "../components/CheckboxItem";
-import { DarkModeToggle } from "../components/DarkModeToggle";
+import { ExportIcon, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
-import { ExportIcon, questionCircle, saveAs } from "../components/icons";
+import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
+import { resaveAsImageWithScene } from "../data/resave";
+import { t } from "../i18n";
+import { useDevice } from "../components/App";
+import { KEYS } from "../keys";
+import { register } from "./register";
+import { CheckboxItem } from "../components/CheckboxItem";
+import { getExportSize } from "../scene/export";
+import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { resaveAsImageWithScene } from "../data/resave";
-
-import { t } from "../i18n";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { getExportSize } from "../scene/export";
-import { CaptureUpdateAction } from "../store";
+import type { Theme } from "../element/types";
 
 import "../components/ToolIcon.scss";
-
-import { register } from "./register";
+import { CaptureUpdateAction } from "../store";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",

packages/excalidraw/actions/actionFinalize.tsx

@@ -1,30 +1,22 @@
-import { pointFrom } from "@excalidraw/math";
-
+import { KEYS } from "../keys";
+import { isInvisiblySmallElement } from "../element";
+import { arrayToMap, updateActiveTool } from "../utils";
+import { ToolButton } from "../components/ToolButton";
+import { done } from "../components/icons";
+import { t } from "../i18n";
+import { register } from "./register";
+import { mutateElement } from "../element/mutateElement";
+import { LinearElementEditor } from "../element/linearElementEditor";
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
-} from "@excalidraw/element/binding";
-import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-
-import {
-  isBindingElement,
-  isLinearElement,
-} from "@excalidraw/element/typeChecks";
-
-import { KEYS, arrayToMap, updateActiveTool } from "@excalidraw/common";
-import { isPathALoop } from "@excalidraw/element/shapes";
-
-import { isInvisiblySmallElement } from "@excalidraw/element/sizeHelpers";
-
-import { t } from "../i18n";
-import { resetCursor } from "../cursor";
-import { done } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
+} from "../element/binding";
+import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
+import { resetCursor } from "../cursor";
+import { CaptureUpdateAction } from "../store";
+import { pointFrom } from "@excalidraw/math";
+import { isPathALoop } from "../shapes";
 
 export const actionFinalize = register({
   name: "finalize",
@@ -46,6 +38,7 @@ export const actionFinalize = register({
             element,
             startBindingElement,
             endBindingElement,
+            elementsMap,
             scene,
           );
         }
@@ -71,11 +64,7 @@ export const actionFinalize = register({
       scene.getElement(appState.pendingImageElementId);
 
     if (pendingImageElement) {
-      scene.mutateElement(
-        pendingImageElement,
-        { isDeleted: true },
-        { informMutation: false, isDragging: false },
-      );
+      mutateElement(pendingImageElement, { isDeleted: true }, false);
     }
 
     if (window.document.activeElement instanceof HTMLElement) {
@@ -99,7 +88,7 @@ export const actionFinalize = register({
           !lastCommittedPoint ||
           points[points.length - 1] !== lastCommittedPoint
         ) {
-          scene.mutateElement(multiPointElement, {
+          mutateElement(multiPointElement, {
             points: multiPointElement.points.slice(0, -1),
           });
         }
@@ -123,7 +112,7 @@ export const actionFinalize = register({
         if (isLoop) {
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
-          scene.mutateElement(multiPointElement, {
+          mutateElement(multiPointElement, {
             points: linePoints.map((p, index) =>
               index === linePoints.length - 1
                 ? pointFrom(firstPoint[0], firstPoint[1])
@@ -143,7 +132,13 @@ export const actionFinalize = register({
           -1,
           arrayToMap(elements),
         );
-        maybeBindLinearElement(multiPointElement, appState, { x, y }, scene);
+        maybeBindLinearElement(
+          multiPointElement,
+          appState,
+          { x, y },
+          elementsMap,
+          elements,
+        );
       }
     }
 
@@ -199,10 +194,7 @@ export const actionFinalize = register({
         // To select the linear element when user has finished mutipoint editing
         selectedLinearElement:
           multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(
-                multiPointElement,
-                arrayToMap(newElements),
-              )
+            ? new LinearElementEditor(multiPointElement)
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },

packages/excalidraw/actions/actionFlip.test.tsx

@@ -1,9 +1,8 @@
-import { pointFrom } from "@excalidraw/math";
-
+import React from "react";
 import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
 import { render } from "../tests/test-utils";
-
+import { API } from "../tests/helpers/api";
+import { pointFrom } from "@excalidraw/math";
 import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
 
 const { h } = window;

packages/excalidraw/actions/actionFlip.ts

@@ -1,36 +1,32 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-import {
-  bindOrUnbindLinearElements,
-  isBindingEnabled,
-} from "@excalidraw/element/binding";
-import { getCommonBoundingBox } from "@excalidraw/element/bounds";
-import { newElementWith } from "@excalidraw/element/mutateElement";
-import { deepCopyElement } from "@excalidraw/element/duplicate";
-import { resizeMultipleElements } from "@excalidraw/element/resizeElements";
-import {
-  isArrowElement,
-  isElbowArrow,
-  isLinearElement,
-} from "@excalidraw/element/typeChecks";
-import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
-import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
-
+import { register } from "./register";
+import { getSelectedElements } from "../scene";
+import { getNonDeletedElements } from "../element";
 import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawElement,
   NonDeleted,
   NonDeletedSceneElementsMap,
-} from "@excalidraw/element/types";
-
-import { getSelectedElements } from "../scene";
-import { CaptureUpdateAction } from "../store";
-
-import { flipHorizontal, flipVertical } from "../components/icons";
-
-import { register } from "./register";
-
+} from "../element/types";
+import { resizeMultipleElements } from "../element/resizeElements";
 import type { AppClassProperties, AppState } from "../types";
+import { arrayToMap } from "../utils";
+import { CODES, KEYS } from "../keys";
+import {
+  bindOrUnbindLinearElements,
+  isBindingEnabled,
+} from "../element/binding";
+import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { flipHorizontal, flipVertical } from "../components/icons";
+import { CaptureUpdateAction } from "../store";
+import {
+  isArrowElement,
+  isElbowArrow,
+  isLinearElement,
+} from "../element/typeChecks";
+import { mutateElement, newElementWith } from "../element/mutateElement";
+import { deepCopyElement } from "../element/newElement";
+import { getCommonBoundingBox } from "../element/bounds";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
@@ -159,9 +155,11 @@ const flipElements = (
 
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
+    elementsMap,
+    app.scene.getNonDeletedElements(),
+    app.scene,
     isBindingEnabled(appState),
     [],
-    app.scene,
     appState.zoom,
   );
 
@@ -189,13 +187,13 @@ const flipElements = (
     getCommonBoundingBox(selectedElements);
   const [diffX, diffY] = [midX - newMidX, midY - newMidY];
   otherElements.forEach((element) =>
-    app.scene.mutateElement(element, {
+    mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY,
     }),
   );
   elbowArrows.forEach((element) =>
-    app.scene.mutateElement(element, {
+    mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY,
     }),

packages/excalidraw/actions/actionFrame.ts

@@ -1,29 +1,19 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-import { mutateElement } from "@excalidraw/element/mutateElement";
-import { newFrameElement } from "@excalidraw/element/newElement";
-import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
-import {
-  addElementsToFrame,
-  removeAllElementsFromFrame,
-} from "@excalidraw/element/frame";
-import { getFrameChildren } from "@excalidraw/element/frame";
-
-import { KEYS, updateActiveTool } from "@excalidraw/common";
-
-import { getElementsInGroup } from "@excalidraw/element/groups";
-
-import { getCommonBounds } from "@excalidraw/element/bounds";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import { setCursorForShape } from "../cursor";
-import { frameToolIcon } from "../components/icons";
-import { getSelectedElements } from "../scene";
-import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
+import { getCommonBounds, getNonDeletedElements } from "../element";
+import type { ExcalidrawElement } from "../element/types";
+import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
+import { getFrameChildren } from "../frame";
+import { KEYS } from "../keys";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { updateActiveTool } from "../utils";
+import { setCursorForShape } from "../cursor";
+import { register } from "./register";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { frameToolIcon } from "../components/icons";
+import { CaptureUpdateAction } from "../store";
+import { getSelectedElements } from "../scene";
+import { newFrameElement } from "../element/newElement";
+import { getElementsInGroup } from "../groups";
+import { mutateElement } from "../element/mutateElement";
 
 const isSingleFrameSelected = (
   appState: UIAppState,
@@ -173,9 +163,11 @@ export const actionWrapSelectionInFrame = register({
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(elements, appState);
-    const elementsMap = app.scene.getNonDeletedElementsMap();
 
-    const [x1, y1, x2, y2] = getCommonBounds(selectedElements, elementsMap);
+    const [x1, y1, x2, y2] = getCommonBounds(
+      selectedElements,
+      app.scene.getNonDeletedElementsMap(),
+    );
     const PADDING = 16;
     const frame = newFrameElement({
       x: x1 - PADDING,
@@ -194,9 +186,13 @@ export const actionWrapSelectionInFrame = register({
       for (const elementInGroup of elementsInGroup) {
         const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
 
-        mutateElement(elementInGroup, elementsMap, {
-          groupIds: elementInGroup.groupIds.slice(0, index),
-        });
+        mutateElement(
+          elementInGroup,
+          {
+            groupIds: elementInGroup.groupIds.slice(0, index),
+          },
+          false,
+        );
       }
     }
 

packages/excalidraw/actions/actionGroup.tsx

@@ -1,21 +1,10 @@
-import { getNonDeletedElements } from "@excalidraw/element";
-
-import { newElementWith } from "@excalidraw/element/mutateElement";
-
-import { isBoundToContainer } from "@excalidraw/element/typeChecks";
-
-import {
-  frameAndChildrenSelectedTogether,
-  getElementsInResizingFrame,
-  getFrameLikeElements,
-  getRootElements,
-  groupByFrameLikes,
-  removeElementsFromFrame,
-  replaceAllElementsInFrame,
-} from "@excalidraw/element/frame";
-
-import { KEYS, randomId, arrayToMap, getShortcutKey } from "@excalidraw/common";
-
+import { KEYS } from "../keys";
+import { t } from "../i18n";
+import { arrayToMap, getShortcutKey } from "../utils";
+import { register } from "./register";
+import { UngroupIcon, GroupIcon } from "../components/icons";
+import { newElementWith } from "../element/mutateElement";
+import { isSomeElementSelected } from "../scene";
 import {
   getSelectedGroupIds,
   selectGroup,
@@ -24,27 +13,28 @@ import {
   addToGroup,
   removeFromSelectedGroups,
   isElementInGroup,
-} from "@excalidraw/element/groups";
-
-import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
-
+} from "../groups";
+import { getNonDeletedElements } from "../element";
+import { randomId } from "../random";
+import { ToolButton } from "../components/ToolButton";
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
   OrderedExcalidrawElement,
-} from "@excalidraw/element/types";
-
-import { ToolButton } from "../components/ToolButton";
-import { UngroupIcon, GroupIcon } from "../components/icons";
-
-import { t } from "../i18n";
-
-import { isSomeElementSelected } from "../scene";
-import { CaptureUpdateAction } from "../store";
-
-import { register } from "./register";
-
+} from "../element/types";
 import type { AppClassProperties, AppState } from "../types";
+import { isBoundToContainer } from "../element/typeChecks";
+import {
+  frameAndChildrenSelectedTogether,
+  getElementsInResizingFrame,
+  getFrameLikeElements,
+  getRootElements,
+  groupByFrameLikes,
+  removeElementsFromFrame,
+  replaceAllElementsInFrame,
+} from "../frame";
+import { syncMovedIndices } from "../fractionalIndex";
+import { CaptureUpdateAction } from "../store";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {

packages/excalidraw/actions/actionHistory.tsx

@@ -1,17 +1,17 @@
-import { isWindows, KEYS, matchKey, arrayToMap } from "@excalidraw/common";
-
-import type { SceneElementsMap } from "@excalidraw/element/types";
-
-import { ToolButton } from "../components/ToolButton";
-import { UndoIcon, RedoIcon } from "../components/icons";
-import { HistoryChangedEvent } from "../history";
-import { useEmitter } from "../hooks/useEmitter";
-import { t } from "../i18n";
-import { CaptureUpdateAction } from "../store";
-
-import type { History } from "../history";
-import type { AppClassProperties, AppState } from "../types";
 import type { Action, ActionResult } from "./types";
+import { UndoIcon, RedoIcon } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+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 { arrayToMap } from "../utils";
+import { isWindows } from "../constants";
+import type { SceneElementsMap } from "../element/types";
+import type { Store } from "../store";
+import { CaptureUpdateAction } from "../store";
+import { useEmitter } from "../hooks/useEmitter";
 
 const executeHistoryAction = (
   app: AppClassProperties,
@@ -46,9 +46,9 @@ const executeHistoryAction = (
   return { captureUpdate: CaptureUpdateAction.EVENTUALLY };
 };
 
-type ActionCreator = (history: History) => Action;
+type ActionCreator = (history: History, store: Store) => Action;
 
-export const createUndoAction: ActionCreator = (history) => ({
+export const createUndoAction: ActionCreator = (history, store) => ({
   name: "undo",
   label: "buttons.undo",
   icon: UndoIcon,
@@ -56,7 +56,11 @@ export const createUndoAction: ActionCreator = (history) => ({
   viewMode: false,
   perform: (elements, appState, value, app) =>
     executeHistoryAction(app, appState, () =>
-      history.undo(arrayToMap(elements) as SceneElementsMap, appState),
+      history.undo(
+        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
+        appState,
+        store.snapshot,
+      ),
     ),
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
@@ -83,15 +87,19 @@ export const createUndoAction: ActionCreator = (history) => ({
   },
 });
 
-export const createRedoAction: ActionCreator = (history) => ({
+export const createRedoAction: ActionCreator = (history, store) => ({
   name: "redo",
   label: "buttons.redo",
   icon: RedoIcon,
   trackEvent: { category: "history" },
   viewMode: false,
-  perform: (elements, appState, __, app) =>
+  perform: (elements, appState, _, app) =>
     executeHistoryAction(app, appState, () =>
-      history.redo(arrayToMap(elements) as SceneElementsMap, appState),
+      history.redo(
+        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
+        appState,
+        store.snapshot,
+      ),
     ),
   keyTest: (event) =>
     (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||

packages/excalidraw/actions/actionLinearEditor.tsx

@@ -1,19 +1,12 @@
-import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-
-import { isElbowArrow, isLinearElement } from "@excalidraw/element/typeChecks";
-
-import { arrayToMap } from "@excalidraw/common";
-
-import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
-
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
-import { ToolButton } from "../components/ToolButton";
-import { lineEditorIcon } from "../components/icons";
-
-import { t } from "../i18n";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { isElbowArrow, isLinearElement } from "../element/typeChecks";
+import type { ExcalidrawLinearElement } from "../element/types";
 import { CaptureUpdateAction } from "../store";
-
 import { register } from "./register";
+import { ToolButton } from "../components/ToolButton";
+import { t } from "../i18n";
+import { lineEditorIcon } from "../components/icons";
 
 export const actionToggleLinearEditor = register({
   name: "toggleLinearEditor",
@@ -52,7 +45,7 @@ export const actionToggleLinearEditor = register({
     const editingLinearElement =
       appState.editingLinearElement?.elementId === selectedElement.id
         ? null
-        : new LinearElementEditor(selectedElement, arrayToMap(elements));
+        : new LinearElementEditor(selectedElement);
     return {
       appState: {
         ...appState,