convert customElementsConfig into an object

* fix: jumping of text when typing single line in bound text

* add comment

.env.development

@@ -4,9 +4,10 @@ REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
-REACT_APP_PORTAL_URL=http://localhost:3002
+# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
-# Fill to set socket server URL used for collaboration.
+REACT_APP_WS_SERVER_URL=http://localhost:3002
-# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
+
-REACT_APP_WS_SERVER_URL=
+# set this only if using the collaboration workflow we use on excalidraw.com
+REACT_APP_PORTAL_URL=
 
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'

README.md

@@ -128,14 +128,41 @@ For collaboration, you will need to set up [collab server](https://github.com/ex
 
 #### Commands
 
-| Command            | Description                       |
+##### Install the dependencies
-| ------------------ | --------------------------------- |
+
-| `yarn`             | Install the dependencies          |
+```
-| `yarn start`       | Run the project                   |
+yarn
-| `yarn fix`         | Reformat all files with Prettier  |
+```
-| `yarn test`        | Run tests                         |
+
-| `yarn test:update` | Update test snapshots             |
+##### Run the project
-| `yarn test:code`   | Test for formatting with Prettier |
+
+```
+yarn start
+```
+
+##### Reformat all files with Prettier
+
+```
+yarn fix
+```
+
+##### Run tests
+
+```
+yarn test
+```
+
+##### Update test snapshots
+
+```
+yarn test:update
+```
+
+##### Test for formatting with Prettier
+
+```
+yarn test:code
+```
 
 #### Docker Compose
 

firebase-project/storage.rules

@@ -1,12 +1,11 @@
 rules_version = '2';
 service firebase.storage {
   match /b/{bucket}/o {
-    match /{migrations} {
+    match /{files}/rooms/{room}/{file} {
-      match /{scenes}/{scene} {
+    	allow get, write: if true;
-      	allow get, write: if true;
+    }
-        // redundant, but let's be explicit'
+    match /{files}/shareLinks/{shareLink}/{file} {
-        allow list: if false;
+    	allow get, write: if true;
-      }
     }
   }
 }

package.json

@@ -29,15 +29,16 @@
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.24.1",
+    "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.2",
     "idb-keyval": "6.0.3",
     "image-blob-reduce": "3.0.1",
+    "jotai": "1.6.4",
     "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.32",
+    "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "1.0.11",
     "perfect-freehand": "1.0.16",
@@ -67,7 +68,7 @@
     "eslint-plugin-prettier": "3.3.1",
     "husky": "7.0.4",
     "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.3.3",
+    "lint-staged": "12.3.7",
     "pepjs": "0.5.3",
     "prettier": "2.5.1",
     "rewire": "5.0.0"

public/index.html

@@ -124,26 +124,6 @@
         user-select: none;
       }
 
-      .LoadingMessage {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 999;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-      }
-
-      .LoadingMessage span {
-        background-color: var(--button-gray-1);
-        border-radius: 5px;
-        padding: 0.8em 1.2em;
-        color: var(--popup-text-color);
-        font-size: 1.3em;
-      }
       #root {
         height: 100%;
         -webkit-touch-callout: none;
@@ -152,8 +132,10 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
+      }
 
-        @media screen and (min-width: 1200px) {
+      @media screen and (min-width: 1200px) {
+        #root {
           -webkit-touch-callout: default;
           -webkit-user-select: auto;
           -khtml-user-select: auto;
@@ -170,10 +152,6 @@
     <header>
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
-    <div id="root">
+    <div id="root"></div>
-      <div class="LoadingMessage">
-        <span>Loading scene...</span>
-      </div>
-    </div>
   </body>
 </html>

src/actions/actionAddToLibrary.ts

@@ -7,6 +7,7 @@ import { t } from "../i18n";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",
+  trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
@@ -24,9 +25,9 @@ export const actionAddToLibrary = register({
     }
 
     return app.library
-      .loadLibrary()
+      .getLatestLibrary()
       .then((items) => {
-        return app.library.saveLibrary([
+        return app.library.setLibrary([
           {
             id: randomId(),
             status: "unpublished",

src/actions/actionAlign.tsx

@@ -43,6 +43,7 @@ const alignSelectedElements = (
 
 export const actionAlignTop = register({
   name: "alignTop",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -72,6 +73,7 @@ export const actionAlignTop = register({
 
 export const actionAlignBottom = register({
   name: "alignBottom",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -101,6 +103,7 @@ export const actionAlignBottom = register({
 
 export const actionAlignLeft = register({
   name: "alignLeft",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -130,6 +133,8 @@ export const actionAlignLeft = register({
 
 export const actionAlignRight = register({
   name: "alignRight",
+  trackEvent: { category: "element" },
+
   perform: (elements, appState) => {
     return {
       appState,
@@ -159,6 +164,8 @@ export const actionAlignRight = register({
 
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
+  trackEvent: { category: "element" },
+
   perform: (elements, appState) => {
     return {
       appState,
@@ -184,6 +191,7 @@ export const actionAlignVerticallyCentered = register({
 
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,

src/actions/actionBoundText.tsx

@@ -0,0 +1,136 @@
+import { VERTICAL_ALIGN } from "../constants";
+import { getNonDeletedElements, isTextElement } from "../element";
+import { mutateElement } from "../element/mutateElement";
+import {
+  getBoundTextElement,
+  measureText,
+  redrawTextBoundingBox,
+} from "../element/textElement";
+import {
+  hasBoundTextElement,
+  isTextBindableContainer,
+} from "../element/typeChecks";
+import {
+  ExcalidrawTextContainer,
+  ExcalidrawTextElement,
+} from "../element/types";
+import { getSelectedElements } from "../scene";
+import { getFontString } from "../utils";
+import { register } from "./register";
+
+export const actionUnbindText = register({
+  name: "unbindText",
+  contextItemLabel: "labels.unbindText",
+  trackEvent: { category: "element" },
+  contextItemPredicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return selectedElements.some((element) => hasBoundTextElement(element));
+  },
+  perform: (elements, appState) => {
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+    selectedElements.forEach((element) => {
+      const boundTextElement = getBoundTextElement(element);
+      if (boundTextElement) {
+        const { width, height, baseline } = measureText(
+          boundTextElement.originalText,
+          getFontString(boundTextElement),
+        );
+        mutateElement(boundTextElement as ExcalidrawTextElement, {
+          containerId: null,
+          width,
+          height,
+          baseline,
+          text: boundTextElement.originalText,
+        });
+        mutateElement(element, {
+          boundElements: element.boundElements?.filter(
+            (ele) => ele.id !== boundTextElement.id,
+          ),
+        });
+      }
+    });
+    return {
+      elements,
+      appState,
+      commitToHistory: true,
+    };
+  },
+});
+
+export const actionBindText = register({
+  name: "bindText",
+  contextItemLabel: "labels.bindText",
+  trackEvent: { category: "element" },
+  contextItemPredicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+
+    if (selectedElements.length === 2) {
+      const textElement =
+        isTextElement(selectedElements[0]) ||
+        isTextElement(selectedElements[1]);
+
+      let bindingContainer;
+      if (isTextBindableContainer(selectedElements[0])) {
+        bindingContainer = selectedElements[0];
+      } else if (isTextBindableContainer(selectedElements[1])) {
+        bindingContainer = selectedElements[1];
+      }
+      if (
+        textElement &&
+        bindingContainer &&
+        getBoundTextElement(bindingContainer) === null
+      ) {
+        return true;
+      }
+    }
+    return false;
+  },
+  perform: (elements, appState) => {
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+
+    let textElement: ExcalidrawTextElement;
+    let container: ExcalidrawTextContainer;
+
+    if (
+      isTextElement(selectedElements[0]) &&
+      isTextBindableContainer(selectedElements[1])
+    ) {
+      textElement = selectedElements[0];
+      container = selectedElements[1];
+    } else {
+      textElement = selectedElements[1] as ExcalidrawTextElement;
+      container = selectedElements[0] as ExcalidrawTextContainer;
+    }
+    mutateElement(textElement, {
+      containerId: container.id,
+      verticalAlign: VERTICAL_ALIGN.MIDDLE,
+    });
+    mutateElement(container, {
+      boundElements: (container.boundElements || []).concat({
+        type: "text",
+        id: textElement.id,
+      }),
+    });
+    redrawTextBoundingBox(textElement, container);
+    const updatedElements = elements.slice();
+    const textElementIndex = updatedElements.findIndex(
+      (ele) => ele.id === textElement.id,
+    );
+    updatedElements.splice(textElementIndex, 1);
+    const containerIndex = updatedElements.findIndex(
+      (ele) => ele.id === container.id,
+    );
+    updatedElements.splice(containerIndex + 1, 0, textElement);
+    return {
+      elements: updatedElements,
+      appState: { ...appState, selectedElementIds: { [container.id]: true } },
+      commitToHistory: true,
+    };
+  },
+});

src/actions/actionCanvas.tsx

@@ -21,6 +21,7 @@ import clsx from "clsx";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
+  trackEvent: false,
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
@@ -50,6 +51,7 @@ export const actionChangeViewBackgroundColor = register({
 
 export const actionClearCanvas = register({
   name: "clearCanvas",
+  trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     app.imageCache.clear();
     return {
@@ -60,7 +62,6 @@ export const actionClearCanvas = register({
         ...getDefaultAppState(),
         files: {},
         theme: appState.theme,
-        elementLocked: appState.elementLocked,
         penMode: appState.penMode,
         penDetected: appState.penDetected,
         exportBackground: appState.exportBackground,
@@ -68,8 +69,10 @@ export const actionClearCanvas = register({
         gridSize: appState.gridSize,
         showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,
-        elementType:
+        activeTool:
-          appState.elementType === "image" ? "selection" : appState.elementType,
+          appState.activeTool.type === "image"
+            ? { ...appState.activeTool, type: "selection" }
+            : appState.activeTool,
       },
       commitToHistory: true,
     };
@@ -80,6 +83,7 @@ export const actionClearCanvas = register({
 
 export const actionZoomIn = register({
   name: "zoomIn",
+  trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
       appState: {
@@ -115,6 +119,7 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
+  trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
       appState: {
@@ -150,6 +155,7 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
+  trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
       appState: {
@@ -248,6 +254,7 @@ const zoomToFitElements = (
 
 export const actionZoomToSelected = register({
   name: "zoomToSelection",
+  trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, true),
   keyTest: (event) =>
     event.code === CODES.TWO &&
@@ -258,6 +265,7 @@ export const actionZoomToSelected = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
+  trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, false),
   keyTest: (event) =>
     event.code === CODES.ONE &&
@@ -268,6 +276,7 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
+  trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
     return {
       appState: {
@@ -293,23 +302,55 @@ export const actionToggleTheme = register({
 
 export const actionErase = register({
   name: "eraser",
+  trackEvent: { category: "toolbar" },
   perform: (elements, appState) => {
+    const activeTool: any = { ...appState.activeTool };
+
+    if (appState.activeTool.type !== "eraser") {
+      if (appState.activeTool.type === "custom") {
+        activeTool.lastActiveToolBeforeEraser = {
+          type: "custom",
+          customType: appState.activeTool.customType,
+        };
+      } else {
+        activeTool.lastActiveToolBeforeEraser = appState.activeTool.type;
+      }
+    }
+    if (isEraserActive(appState)) {
+      if (appState.activeTool.lastActiveToolBeforeEraser) {
+        if (
+          typeof appState.activeTool.lastActiveToolBeforeEraser === "object" &&
+          appState.activeTool.lastActiveToolBeforeEraser?.type === "custom"
+        ) {
+          activeTool.type = "custom";
+          activeTool.customType =
+            appState.activeTool.lastActiveToolBeforeEraser.customType;
+        } else {
+          activeTool.type = appState.activeTool.lastActiveToolBeforeEraser;
+        }
+      } else {
+        activeTool.type = "selection";
+      }
+    } else {
+      activeTool.type = "eraser";
+    }
     return {
       appState: {
         ...appState,
         selectedElementIds: {},
         selectedGroupIds: {},
-        elementType: isEraserActive(appState) ? "selection" : "eraser",
+        activeTool,
       },
       commitToHistory: true,
     };
   },
+  keyTest: (event) => event.key === KEYS.E,
   PanelComponent: ({ elements, appState, updateData, data }) => (
     <ToolButton
       type="button"
       icon={eraser}
       className={clsx("eraser", { active: isEraserActive(appState) })}
-      title={t("toolBar.eraser")}
+      title={`${t("toolBar.eraser")}-${getShortcutKey("E")}`}
       aria-label={t("toolBar.eraser")}
       onClick={() => {
         updateData(null);

src/actions/actionClipboard.tsx

@@ -1,16 +1,23 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import { copyToClipboard } from "../clipboard";
+import {
+  copyTextToSystemClipboard,
+  copyToClipboard,
+  probablySupportsClipboardWriteText,
+} from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
-import { getNonDeletedElements } from "../element";
+import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";
 
 export const actionCopy = register({
   name: "copy",
+  trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    copyToClipboard(getNonDeletedElements(elements), appState, app.files);
+    const selectedElements = getSelectedElements(elements, appState, true);
+
+    copyToClipboard(selectedElements, appState, app.files);
 
     return {
       commitToHistory: false,
@@ -23,6 +30,7 @@ export const actionCopy = register({
 
 export const actionCut = register({
   name: "cut",
+  trackEvent: { category: "element" },
   perform: (elements, appState, data, app) => {
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
@@ -33,6 +41,7 @@ export const actionCut = register({
 
 export const actionCopyAsSvg = register({
   name: "copyAsSvg",
+  trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
@@ -73,6 +82,7 @@ export const actionCopyAsSvg = register({
 
 export const actionCopyAsPng = register({
   name: "copyAsPng",
+  trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
@@ -122,3 +132,35 @@ export const actionCopyAsPng = register({
   contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
+
+export const copyText = register({
+  name: "copyText",
+  trackEvent: { category: "element" },
+  perform: (elements, appState) => {
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+      true,
+    );
+
+    const text = selectedElements
+      .reduce((acc: string[], element) => {
+        if (isTextElement(element)) {
+          acc.push(element.text);
+        }
+        return acc;
+      }, [])
+      .join("\n\n");
+    copyTextToSystemClipboard(text);
+    return {
+      commitToHistory: false,
+    };
+  },
+  contextItemPredicate: (elements, appState) => {
+    return (
+      probablySupportsClipboardWriteText &&
+      getSelectedElements(elements, appState, true).some(isTextElement)
+    );
+  },
+  contextItemLabel: "labels.copyText",
+});

src/actions/actionDeleteSelected.tsx

@@ -58,6 +58,7 @@ const handleGroupEditingState = (
 
 export const actionDeleteSelected = register({
   name: "deleteSelectedElements",
+  trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState) => {
     if (appState.editingLinearElement) {
       const {
@@ -133,7 +134,7 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        elementType: "selection",
+        activeTool: { ...appState.activeTool, type: "selection" },
         multiElement: null,
       },
       commitToHistory: isSomeElementSelected(

src/actions/actionDistribute.tsx

@@ -39,6 +39,7 @@ const distributeSelectedElements = (
 
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,
@@ -68,6 +69,7 @@ export const distributeHorizontally = register({
 
 export const distributeVertically = register({
   name: "distributeVertically",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       appState,

src/actions/actionDuplicateSelection.tsx

@@ -22,6 +22,7 @@ import { isBoundToContainer } from "../element/typeChecks";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {

src/actions/actionExport.tsx

@@ -1,4 +1,3 @@
-import { trackEvent } from "../analytics";
 import { load, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
@@ -8,7 +7,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@@ -23,8 +22,8 @@ import { Theme } from "../element/types";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
+  trackEvent: false,
   perform: (_elements, appState, value) => {
-    trackEvent("change", "title");
     return { appState: { ...appState, name: value }, commitToHistory: false };
   },
   PanelComponent: ({ appState, updateData, appProps }) => (
@@ -41,6 +40,7 @@ export const actionChangeProjectName = register({
 
 export const actionChangeExportScale = register({
   name: "changeExportScale",
+  trackEvent: { category: "export", action: "scale" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportScale: value },
@@ -89,6 +89,7 @@ export const actionChangeExportScale = register({
 
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
+  trackEvent: { category: "export", action: "toggleBackground" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportBackground: value },
@@ -107,6 +108,7 @@ export const actionChangeExportBackground = register({
 
 export const actionChangeExportEmbedScene = register({
   name: "changeExportEmbedScene",
+  trackEvent: { category: "export", action: "embedScene" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportEmbedScene: value },
@@ -128,6 +130,7 @@ export const actionChangeExportEmbedScene = register({
 
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
+  trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     const fileHandleExists = !!appState.fileHandle;
 
@@ -172,6 +175,7 @@ export const actionSaveToActiveFile = register({
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
+  trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     try {
       const { fileHandle } = await saveAsJSON(
@@ -200,7 +204,7 @@ export const actionSaveFileToDisk = register({
       icon={saveAs}
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
-      showAriaLabel={useIsMobile()}
+      showAriaLabel={useDeviceType().isMobile}
       hidden={!nativeFileSystemSupported}
       onClick={() => updateData(null)}
       data-testid="save-as-button"
@@ -210,6 +214,7 @@ export const actionSaveFileToDisk = register({
 
 export const actionLoadScene = register({
   name: "loadScene",
+  trackEvent: { category: "export" },
   perform: async (elements, appState, _, app) => {
     try {
       const {
@@ -243,7 +248,7 @@ export const actionLoadScene = register({
       icon={load}
       title={t("buttons.load")}
       aria-label={t("buttons.load")}
-      showAriaLabel={useIsMobile()}
+      showAriaLabel={useDeviceType().isMobile}
       onClick={updateData}
       data-testid="load-button"
     />
@@ -252,6 +257,7 @@ export const actionLoadScene = register({
 
 export const actionExportWithDarkMode = register({
   name: "exportWithDarkMode",
+  trackEvent: { category: "export", action: "toggleTheme" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportWithDarkMode: value },

src/actions/actionFinalize.tsx

@@ -17,6 +17,7 @@ import { isBindingElement } from "../element/typeChecks";
 
 export const actionFinalize = register({
   name: "finalize",
+  trackEvent: false,
   perform: (elements, appState, _, { canvas, focusContainer }) => {
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
@@ -38,6 +39,7 @@ export const actionFinalize = register({
               : undefined,
           appState: {
             ...appState,
+            cursorButton: "up",
             editingLinearElement: null,
           },
           commitToHistory: true,
@@ -119,27 +121,47 @@ export const actionFinalize = register({
         );
       }
 
-      if (!appState.elementLocked && appState.elementType !== "freedraw") {
+      if (
+        !appState.activeTool.locked &&
+        appState.activeTool.type !== "freedraw"
+      ) {
         appState.selectedElementIds[multiPointElement.id] = true;
       }
     }
 
     if (
-      (!appState.elementLocked && appState.elementType !== "freedraw") ||
+      (!appState.activeTool.locked &&
+        appState.activeTool.type !== "freedraw") ||
       !multiPointElement
     ) {
       resetCursor(canvas);
     }
-
+    const activeTool: any = { ...appState.activeTool };
+    if (appState.activeTool.lastActiveToolBeforeEraser) {
+      if (
+        typeof appState.activeTool.lastActiveToolBeforeEraser === "object" &&
+        appState.activeTool.lastActiveToolBeforeEraser.type === "custom"
+      ) {
+        activeTool.type = appState.activeTool.lastActiveToolBeforeEraser.type;
+        activeTool.customType =
+          appState.activeTool.lastActiveToolBeforeEraser.customType;
+      } else {
+        activeTool.type = appState.activeTool.lastActiveToolBeforeEraser;
+      }
+    } else {
+      activeTool.type = "selection";
+    }
     return {
       elements: newElements,
       appState: {
         ...appState,
-        elementType:
+        cursorButton: "up",
-          (appState.elementLocked || appState.elementType === "freedraw") &&
+        activeTool:
+          (appState.activeTool.locked ||
+            appState.activeTool.type === "freedraw") &&
           multiPointElement
-            ? appState.elementType
+            ? appState.activeTool
-            : "selection",
+            : activeTool,
         draggingElement: null,
         multiElement: null,
         editingElement: null,
@@ -147,8 +169,8 @@ export const actionFinalize = register({
         suggestedBindings: [],
         selectedElementIds:
           multiPointElement &&
-          !appState.elementLocked &&
+          !appState.activeTool.locked &&
-          appState.elementType !== "freedraw"
+          appState.activeTool.type !== "freedraw"
             ? {
                 ...appState.selectedElementIds,
                 [multiPointElement.id]: true,
@@ -156,7 +178,7 @@ export const actionFinalize = register({
             : appState.selectedElementIds,
         pendingImageElement: null,
       },
-      commitToHistory: appState.elementType === "freedraw",
+      commitToHistory: appState.activeTool.type === "freedraw",
     };
   },
   keyTest: (event, appState) =>
@@ -165,7 +187,7 @@ export const actionFinalize = register({
         (!appState.draggingElement && appState.multiElement === null))) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
-  PanelComponent: ({ appState, updateData }) => (
+  PanelComponent: ({ appState, updateData, data }) => (
     <ToolButton
       type="button"
       icon={done}
@@ -173,6 +195,7 @@ export const actionFinalize = register({
       aria-label={t("buttons.done")}
       onClick={updateData}
       visible={appState.multiElement != null}
+      size={data?.size || "medium"}
     />
   ),
 });

src/actions/actionFlip.ts

@@ -35,6 +35,7 @@ const enableActionFlipVertical = (
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: flipSelectedElements(elements, appState, "horizontal"),
@@ -50,6 +51,7 @@ export const actionFlipHorizontal = register({
 
 export const actionFlipVertical = register({
   name: "flipVertical",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: flipSelectedElements(elements, appState, "vertical"),

src/actions/actionGroup.tsx

@@ -54,6 +54,7 @@ const enableActionGroup = (
 
 export const actionGroup = register({
   name: "group",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
@@ -147,6 +148,7 @@ export const actionGroup = register({
 
 export const actionUngroup = register({
   name: "ungroup",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const groupIds = getSelectedGroupIds(appState);
     if (groupIds.length === 0) {

src/actions/actionHistory.tsx

@@ -62,6 +62,7 @@ type ActionCreator = (history: History) => Action;
 
 export const createUndoAction: ActionCreator = (history) => ({
   name: "undo",
+  trackEvent: { category: "history" },
   perform: (elements, appState) =>
     writeData(elements, appState, () => history.undoOnce()),
   keyTest: (event) =>
@@ -82,6 +83,7 @@ export const createUndoAction: ActionCreator = (history) => ({
 
 export const createRedoAction: ActionCreator = (history) => ({
   name: "redo",
+  trackEvent: { category: "history" },
   perform: (elements, appState) =>
     writeData(elements, appState, () => history.redoOnce()),
   keyTest: (event) =>

src/actions/actionMenu.tsx

@@ -9,6 +9,7 @@ import { HelpIcon } from "../components/HelpIcon";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
+  trackEvent: { category: "menu" },
   perform: (_, appState) => ({
     appState: {
       ...appState,
@@ -29,6 +30,7 @@ export const actionToggleCanvasMenu = register({
 
 export const actionToggleEditMenu = register({
   name: "toggleEditMenu",
+  trackEvent: { category: "menu" },
   perform: (_elements, appState) => ({
     appState: {
       ...appState,
@@ -53,6 +55,7 @@ export const actionToggleEditMenu = register({
 
 export const actionFullScreen = register({
   name: "toggleFullScreen",
+  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
   perform: () => {
     if (!isFullScreen()) {
       allowFullScreen();
@@ -69,6 +72,7 @@ export const actionFullScreen = register({
 
 export const actionShortcuts = register({
   name: "toggleShortcuts",
+  trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {
     if (appState.showHelpDialog) {
       focusContainer();

src/actions/actionNavigate.tsx

@@ -1,4 +1,4 @@
-import { getClientColors, getClientInitials } from "../clients";
+import { getClientColors } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@@ -6,6 +6,7 @@ import { register } from "./register";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
+  trackEvent: { category: "collab" },
   perform: (_elements, appState, value) => {
     const point = value as Collaborator["pointer"];
     if (!point) {
@@ -42,16 +43,15 @@ export const actionGoToCollaborator = register({
     }
 
     const { background, stroke } = getClientColors(clientId, appState);
-    const shortName = getClientInitials(collaborator.username);
 
     return (
       <Avatar
         color={background}
         border={stroke}
         onClick={() => updateData(collaborator.pointer)}
-      >
+        name={collaborator.username || ""}
-        {shortName}
+        src={collaborator.src}
-      </Avatar>
+      />
     );
   },
 });

src/actions/actionProperties.tsx

@@ -166,11 +166,7 @@ const changeFontSize = (
           let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
             fontSize: newFontSize,
           });
-          redrawTextBoundingBox(
+          redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            newElement,
-            getContainerElement(oldElement),
-            appState,
-          );
 
           newElement = offsetElementAfterFontResize(oldElement, newElement);
 
@@ -198,6 +194,7 @@ const changeFontSize = (
 
 export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       ...(value.currentItemStrokeColor && {
@@ -247,6 +244,7 @@ export const actionChangeStrokeColor = register({
 
 export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       ...(value.currentItemBackgroundColor && {
@@ -289,6 +287,7 @@ export const actionChangeBackgroundColor = register({
 
 export const actionChangeFillStyle = register({
   name: "changeFillStyle",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -338,6 +337,7 @@ export const actionChangeFillStyle = register({
 
 export const actionChangeStrokeWidth = register({
   name: "changeStrokeWidth",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -385,6 +385,7 @@ export const actionChangeStrokeWidth = register({
 
 export const actionChangeSloppiness = register({
   name: "changeSloppiness",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -433,6 +434,7 @@ export const actionChangeSloppiness = register({
 
 export const actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -480,6 +482,7 @@ export const actionChangeStrokeStyle = register({
 
 export const actionChangeOpacity = register({
   name: "changeOpacity",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -500,20 +503,6 @@ export const actionChangeOpacity = register({
         max="100"
         step="10"
         onChange={(event) => updateData(+event.target.value)}
-        onWheel={(event) => {
-          event.stopPropagation();
-          const target = event.target as HTMLInputElement;
-          const STEP = 10;
-          const MAX = 100;
-          const MIN = 0;
-          const value = +target.value;
-
-          if (event.deltaY < 0 && value < MAX) {
-            updateData(value + STEP);
-          } else if (event.deltaY > 0 && value > MIN) {
-            updateData(value - STEP);
-          }
-        }}
         value={
           getFormValue(
             elements,
@@ -529,6 +518,7 @@ export const actionChangeOpacity = register({
 
 export const actionChangeFontSize = register({
   name: "changeFontSize",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return changeFontSize(elements, appState, () => value, value);
   },
@@ -586,6 +576,7 @@ export const actionChangeFontSize = register({
 
 export const actionDecreaseFontSize = register({
   name: "decreaseFontSize",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return changeFontSize(elements, appState, (element) =>
       Math.round(
@@ -607,6 +598,7 @@ export const actionDecreaseFontSize = register({
 
 export const actionIncreaseFontSize = register({
   name: "increaseFontSize",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return changeFontSize(elements, appState, (element) =>
       Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
@@ -624,6 +616,7 @@ export const actionIncreaseFontSize = register({
 
 export const actionChangeFontFamily = register({
   name: "changeFontFamily",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(
@@ -637,11 +630,7 @@ export const actionChangeFontFamily = register({
                 fontFamily: value,
               },
             );
-            redrawTextBoundingBox(
+            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
             return newElement;
           }
 
@@ -709,6 +698,7 @@ export const actionChangeFontFamily = register({
 
 export const actionChangeTextAlign = register({
   name: "changeTextAlign",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(
@@ -720,11 +710,7 @@ export const actionChangeTextAlign = register({
               oldElement,
               { textAlign: value },
             );
-            redrawTextBoundingBox(
+            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
             return newElement;
           }
 
@@ -785,6 +771,7 @@ export const actionChangeTextAlign = register({
 });
 export const actionChangeVerticalAlign = register({
   name: "changeVerticalAlign",
+  trackEvent: { category: "element" },
   perform: (elements, appState, value) => {
     return {
       elements: changeProperty(
@@ -797,11 +784,7 @@ export const actionChangeVerticalAlign = register({
               { verticalAlign: value },
             );
 
-            redrawTextBoundingBox(
+            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
             return newElement;
           }
 
@@ -856,6 +839,7 @@ export const actionChangeVerticalAlign = register({
 
 export const actionChangeSharpness = register({
   name: "changeSharpness",
+  trackEvent: false,
   perform: (elements, appState, value) => {
     const targetElements = getTargetElements(
       getNonDeletedElements(elements),
@@ -863,10 +847,10 @@ export const actionChangeSharpness = register({
     );
     const shouldUpdateForNonLinearElements = targetElements.length
       ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.elementType);
+      : !isLinearElementType(appState.activeTool.type);
     const shouldUpdateForLinearElements = targetElements.length
       ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.elementType);
+      : isLinearElementType(appState.activeTool.type);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
@@ -906,8 +890,8 @@ export const actionChangeSharpness = register({
           elements,
           appState,
           (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.elementType) &&
+          (canChangeSharpness(appState.activeTool.type) &&
-            (isLinearElementType(appState.elementType)
+            (isLinearElementType(appState.activeTool.type)
               ? appState.currentItemLinearStrokeSharpness
               : appState.currentItemStrokeSharpness)) ||
             null,
@@ -920,6 +904,7 @@ export const actionChangeSharpness = register({
 
 export const actionChangeArrowhead = register({
   name: "changeArrowhead",
+  trackEvent: false,
   perform: (
     elements,
     appState,

src/actions/actionSelectAll.ts

@@ -5,6 +5,7 @@ import { getNonDeletedElements, isTextElement } from "../element";
 
 export const actionSelectAll = register({
   name: "selectAll",
+  trackEvent: { category: "canvas" },
   perform: (elements, appState) => {
     if (appState.editingLinearElement) {
       return false;
@@ -17,7 +18,8 @@ export const actionSelectAll = register({
           selectedElementIds: elements.reduce((map, element) => {
             if (
               !element.isDeleted &&
-              !(isTextElement(element) && element.containerId)
+              !(isTextElement(element) && element.containerId) &&
+              element.locked === false
             ) {
               map[element.id] = true;
             }

src/actions/actionStyles.ts

@@ -19,6 +19,7 @@ export let copiedStyles: string = "{}";
 
 export const actionCopyStyles = register({
   name: "copyStyles",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const element = elements.find((el) => appState.selectedElementIds[el.id]);
     if (element) {
@@ -39,6 +40,7 @@ export const actionCopyStyles = register({
 
 export const actionPasteStyles = register({
   name: "pasteStyles",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     const pastedElement = JSON.parse(copiedStyles);
     if (!isExcalidrawElement(pastedElement)) {
@@ -63,11 +65,7 @@ export const actionPasteStyles = register({
               textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
             });
 
-            redrawTextBoundingBox(
+            redrawTextBoundingBox(newElement, getContainerElement(newElement));
-              newElement,
-              getContainerElement(newElement),
-              appState,
-            );
           }
           return newElement;
         }

src/actions/actionToggleGridMode.tsx

@@ -2,12 +2,14 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
-import { trackEvent } from "../analytics";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
+  trackEvent: {
+    category: "canvas",
+    predicate: (appState) => !appState.gridSize,
+  },
   perform(elements, appState) {
-    trackEvent("view", "mode", "grid");
     return {
       appState: {
         ...appState,

src/actions/actionToggleLock.ts

@@ -0,0 +1,63 @@
+import { newElementWith } from "../element/mutateElement";
+import { ExcalidrawElement } from "../element/types";
+import { KEYS } from "../keys";
+import { getSelectedElements } from "../scene";
+import { arrayToMap } from "../utils";
+import { register } from "./register";
+
+export const actionToggleLock = register({
+  name: "toggleLock",
+  trackEvent: { category: "element" },
+  perform: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState, true);
+
+    if (!selectedElements.length) {
+      return false;
+    }
+
+    const operation = getOperation(selectedElements);
+    const selectedElementsMap = arrayToMap(selectedElements);
+
+    return {
+      elements: elements.map((element) => {
+        if (!selectedElementsMap.has(element.id)) {
+          return element;
+        }
+
+        return newElementWith(element, { locked: operation === "lock" });
+      }),
+      appState,
+      commitToHistory: true,
+    };
+  },
+  contextItemLabel: (elements, appState) => {
+    const selected = getSelectedElements(elements, appState, false);
+    if (selected.length === 1) {
+      return selected[0].locked
+        ? "labels.elementLock.unlock"
+        : "labels.elementLock.lock";
+    }
+
+    if (selected.length > 1) {
+      return getOperation(selected) === "lock"
+        ? "labels.elementLock.lockAll"
+        : "labels.elementLock.unlockAll";
+    }
+
+    throw new Error(
+      "Unexpected zero elements to lock/unlock. This should never happen.",
+    );
+  },
+  keyTest: (event, appState, elements) => {
+    return (
+      event.key.toLocaleLowerCase() === KEYS.L &&
+      event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      getSelectedElements(elements, appState, false).length > 0
+    );
+  },
+});
+
+const getOperation = (
+  elements: readonly ExcalidrawElement[],
+): "lock" | "unlock" => (elements.some((el) => !el.locked) ? "lock" : "unlock");

src/actions/actionToggleStats.tsx

@@ -3,6 +3,7 @@ import { CODES, KEYS } from "../keys";
 
 export const actionToggleStats = register({
   name: "stats",
+  trackEvent: { category: "menu" },
   perform(elements, appState) {
     return {
       appState: {

src/actions/actionToggleViewMode.tsx

@@ -1,11 +1,13 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import { trackEvent } from "../analytics";
 
 export const actionToggleViewMode = register({
   name: "viewMode",
+  trackEvent: {
+    category: "canvas",
+    predicate: (appState) => !appState.viewModeEnabled,
+  },
   perform(elements, appState) {
-    trackEvent("view", "mode", "view");
     return {
       appState: {
         ...appState,

src/actions/actionToggleZenMode.tsx

@@ -1,12 +1,13 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import { trackEvent } from "../analytics";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
+  trackEvent: {
+    category: "canvas",
+    predicate: (appState) => !appState.zenModeEnabled,
+  },
   perform(elements, appState) {
-    trackEvent("view", "mode", "zen");
-
     return {
       appState: {
         ...appState,

src/actions/actionUnbindText.tsx

@@ -1,44 +0,0 @@
-import { getNonDeletedElements } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import { getBoundTextElement, measureText } from "../element/textElement";
-import { ExcalidrawTextElement } from "../element/types";
-import { getSelectedElements } from "../scene";
-import { getFontString } from "../utils";
-import { register } from "./register";
-
-export const actionUnbindText = register({
-  name: "unbindText",
-  contextItemLabel: "labels.unbindText",
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    selectedElements.forEach((element) => {
-      const boundTextElement = getBoundTextElement(element);
-      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
-        );
-        mutateElement(boundTextElement as ExcalidrawTextElement, {
-          containerId: null,
-          width,
-          height,
-          baseline,
-          text: boundTextElement.originalText,
-        });
-        mutateElement(element, {
-          boundElements: element.boundElements?.filter(
-            (ele) => ele.id !== boundTextElement.id,
-          ),
-        });
-      }
-    });
-    return {
-      elements,
-      appState,
-      commitToHistory: true,
-    };
-  },
-});

src/actions/actionZindex.tsx

@@ -18,6 +18,7 @@ import {
 
 export const actionSendBackward = register({
   name: "sendBackward",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: moveOneLeft(elements, appState),
@@ -45,6 +46,7 @@ export const actionSendBackward = register({
 
 export const actionBringForward = register({
   name: "bringForward",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: moveOneRight(elements, appState),
@@ -72,6 +74,7 @@ export const actionBringForward = register({
 
 export const actionSendToBack = register({
   name: "sendToBack",
+  trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
       elements: moveAllLeft(elements, appState),
@@ -106,6 +109,8 @@ export const actionSendToBack = register({
 
 export const actionBringToFront = register({
   name: "bringToFront",
+  trackEvent: { category: "element" },
+
   perform: (elements, appState) => {
     return {
       elements: moveAllRight(elements, appState),

src/actions/index.ts

@@ -75,11 +75,13 @@ export {
   actionCut,
   actionCopyAsPng,
   actionCopyAsSvg,
+  copyText,
 } from "./actionClipboard";
 
 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";
 
 export { actionToggleStats } from "./actionToggleStats";
-export { actionUnbindText } from "./actionUnbindText";
+export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "../element/Hyperlink";
+export { actionToggleLock } from "./actionToggleLock";

src/actions/manager.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import {
   Action,
-  ActionsManagerInterface,
   UpdaterFn,
   ActionName,
   ActionResult,
   PanelComponentProps,
+  ActionSource,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
@@ -14,21 +14,25 @@ import { trackEvent } from "../analytics";
 
 const trackAction = (
   action: Action,
-  source: "ui" | "keyboard" | "api",
+  source: ActionSource,
+  appState: Readonly<AppState>,
+  elements: readonly ExcalidrawElement[],
+  app: AppClassProperties,
   value: any,
 ) => {
-  if (action.trackEvent !== false) {
+  if (action.trackEvent) {
     try {
-      if (action.trackEvent === true) {
+      if (typeof action.trackEvent === "object") {
-        trackEvent(
+        const shouldTrack = action.trackEvent.predicate
-          action.name,
+          ? action.trackEvent.predicate(appState, elements, value)
-          source,
+          : true;
-          typeof value === "number" || typeof value === "string"
+        if (shouldTrack) {
-            ? String(value)
+          trackEvent(
-            : undefined,
+            action.trackEvent.category,
-        );
+            action.trackEvent.action || action.name,
-      } else {
+            `${source} (${app.deviceType.isMobile ? "mobile" : "desktop"})`,
-        action.trackEvent?.(action, source, value);
+          );
+        }
       }
     } catch (error) {
       console.error("error while logging action:", error);
@@ -36,8 +40,8 @@ const trackAction = (
   }
 };
 
-export class ActionManager implements ActionsManagerInterface {
+export class ActionManager {
-  actions = {} as ActionsManagerInterface["actions"];
+  actions = {} as Record<ActionName, Action>;
 
   updater: (actionResult: ActionResult | Promise<ActionResult>) => void;
 
@@ -106,30 +110,26 @@ export class ActionManager implements ActionsManagerInterface {
       }
     }
 
-    trackAction(action, "keyboard", null);
+    const elements = this.getElementsIncludingDeleted();
+    const appState = this.getAppState();
+    const value = null;
+
+    trackAction(action, "keyboard", appState, elements, this.app, null);
 
     event.preventDefault();
-    this.updater(
+    event.stopPropagation();
-      data[0].perform(
+    this.updater(data[0].perform(elements, appState, value, this.app));
-        this.getElementsIncludingDeleted(),
-        this.getAppState(),
-        null,
-        this.app,
-      ),
-    );
     return true;
   }
 
-  executeAction(action: Action) {
+  executeAction(action: Action, source: ActionSource = "api") {
-    this.updater(
+    const elements = this.getElementsIncludingDeleted();
-      action.perform(
+    const appState = this.getAppState();
-        this.getElementsIncludingDeleted(),
+    const value = null;
-        this.getAppState(),
+
-        null,
+    trackAction(action, source, appState, elements, this.app, value);
-        this.app,
+
-      ),
+    this.updater(action.perform(elements, appState, value, this.app));
-    );
-    trackAction(action, "api", null);
   }
 
   /**
@@ -147,7 +147,11 @@ export class ActionManager implements ActionsManagerInterface {
     ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
+      const elements = this.getElementsIncludingDeleted();
+      const appState = this.getAppState();
       const updateData = (formState?: any) => {
+        trackAction(action, "ui", appState, elements, this.app, formState);
+
         this.updater(
           action.perform(
             this.getElementsIncludingDeleted(),
@@ -156,8 +160,6 @@ export class ActionManager implements ActionsManagerInterface {
             this.app,
           ),
         );
-
-        trackAction(action, "ui", formState);
       };
 
       return (

src/actions/shortcuts.ts

@@ -29,6 +29,7 @@ export type ShortcutName = SubtypeOf<
   | "flipHorizontal"
   | "flipVertical"
   | "hyperlink"
+  | "toggleLock"
 >;
 
 const shortcutMap: Record<ShortcutName, string[]> = {
@@ -67,6 +68,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   flipVertical: [getShortcutKey("Shift+V")],
   viewMode: [getShortcutKey("Alt+R")],
   hyperlink: [getShortcutKey("CtrlOrCmd+K")],
+  toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {

src/actions/types.ts

@@ -8,6 +8,8 @@ import {
 } from "../types";
 import { ToolButtonSize } from "../components/ToolButton";
 
+export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
+
 /** if false, the action should be prevented */
 export type ActionResult =
   | {
@@ -39,6 +41,7 @@ export type ActionName =
   | "paste"
   | "copyAsPng"
   | "copyAsSvg"
+  | "copyText"
   | "sendBackward"
   | "bringForward"
   | "sendToBack"
@@ -107,7 +110,9 @@ export type ActionName =
   | "decreaseFontSize"
   | "unbindText"
   | "hyperlink"
-  | "eraser";
+  | "eraser"
+  | "bindText"
+  | "toggleLock";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -138,15 +143,23 @@ export interface Action {
     appState: AppState,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
-  trackEvent?:
+  trackEvent:
-    | boolean
+    | false
-    | ((action: Action, type: "ui" | "keyboard" | "api", value: any) => void);
+    | {
-}
+        category:
-
+          | "toolbar"
-export interface ActionsManagerInterface {
+          | "element"
-  actions: Record<ActionName, Action>;
+          | "canvas"
-  registerAction: (action: Action) => void;
+          | "export"
-  handleKeyDown: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
+          | "history"
-  renderAction: (name: ActionName) => React.ReactElement | null;
+          | "menu"
-  executeAction: (action: Action) => void;
+          | "collab"
+          | "hyperlink";
+        action?: string;
+        predicate?: (
+          appState: Readonly<AppState>,
+          elements: readonly ExcalidrawElement[],
+          value: any,
+        ) => boolean;
+      };
 }

src/analytics.ts

@@ -4,15 +4,19 @@ export const trackEvent =
   typeof window !== "undefined" &&
   window.gtag
     ? (category: string, action: string, label?: string, value?: number) => {
-        window.gtag("event", action, {
+        try {
-          event_category: category,
+          window.gtag("event", action, {
-          event_label: label,
+            event_category: category,
-          value,
+            event_label: label,
-        });
+            value,
+          });
+        } catch (error) {
+          console.error("error logging to ga", error);
+        }
       }
     : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
     ? (category: string, action: string, label?: string, value?: number) => {}
     : (category: string, action: string, label?: string, value?: number) => {
         // Uncomment the next line to track locally
-        // console.info("Track Event", category, action, label, value);
+        // console.log("Track Event", { category, action, label, value });
       };

src/appState.ts

@@ -41,8 +41,11 @@ export const getDefaultAppState = (): Omit<
     editingElement: null,
     editingGroupId: null,
     editingLinearElement: null,
-    elementLocked: false,
+    activeTool: {
-    elementType: "selection",
+      type: "selection",
+      locked: false,
+      lastActiveToolBeforeEraser: null,
+    },
     penMode: false,
     penDetected: false,
     errorMessage: null,
@@ -130,10 +133,9 @@ const APP_STATE_STORAGE_CONF = (<
   editingElement: { browser: false, export: false, server: false },
   editingGroupId: { browser: true, export: false, server: false },
   editingLinearElement: { browser: false, export: false, server: false },
-  elementLocked: { browser: true, export: false, server: false },
+  activeTool: { browser: true, export: false, server: false },
-  elementType: { browser: true, export: false, server: false },
+  penMode: { browser: true, export: false, server: false },
-  penMode: { browser: false, export: false, server: false },
+  penDetected: { browser: true, export: false, server: false },
-  penDetected: { browser: false, export: false, server: false },
   errorMessage: { browser: false, export: false, server: false },
   exportBackground: { browser: true, export: false, server: false },
   exportEmbedScene: { browser: true, export: false, server: false },
@@ -215,7 +217,7 @@ export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
 };
 
 export const isEraserActive = ({
-  elementType,
+  activeTool,
 }: {
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"];
-}) => elementType === "eraser";
+}) => activeTool.type === "eraser";

src/charts.ts

@@ -167,6 +167,7 @@ const commonProps = {
   strokeStyle: "solid",
   strokeWidth: 1,
   verticalAlign: VERTICAL_ALIGN.MIDDLE,
+  locked: false,
 } as const;
 
 const getChartDimentions = (spreadsheet: Spreadsheet) => {

src/clipboard.ts

@@ -2,16 +2,16 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { getSelectedElements } from "./scene";
 import { AppState, BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
+import { isPromiseLike } from "./utils";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
-  elements: ExcalidrawElement[];
+  elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles | undefined;
 };
 
@@ -56,19 +56,20 @@ const clipboardContainsElements = (
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
-  files: BinaryFiles,
+  files: BinaryFiles | null,
 ) => {
   // select binded text elements when copying
-  const selectedElements = getSelectedElements(elements, appState, true);
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements: selectedElements,
+    elements,
-    files: selectedElements.reduce((acc, element) => {
+    files: files
-      if (isInitializedImageElement(element) && files[element.fileId]) {
+      ? elements.reduce((acc, element) => {
-        acc[element.fileId] = files[element.fileId];
+          if (isInitializedImageElement(element) && files[element.fileId]) {
-      }
+            acc[element.fileId] = files[element.fileId];
-      return acc;
+          }
-    }, {} as BinaryFiles),
+          return acc;
+        }, {} as BinaryFiles)
+      : undefined,
   };
   const json = JSON.stringify(contents);
   CLIPBOARD = json;
@@ -166,10 +167,35 @@ export const parseClipboard = async (
   }
 };
 
-export const copyBlobToClipboardAsPng = async (blob: Blob) => {
+export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
-  await navigator.clipboard.write([
+  let promise;
-    new window.ClipboardItem({ [MIME_TYPES.png]: blob }),
+  try {
-  ]);
+    // in Safari so far we need to construct the ClipboardItem synchronously
+    // (i.e. in the same tick) otherwise browser will complain for lack of
+    // user intent. Using a Promise ClipboardItem constructor solves this.
+    // https://bugs.webkit.org/show_bug.cgi?id=222262
+    //
+    // not await so that we can detect whether the thrown error likely relates
+    // to a lack of support for the Promise ClipboardItem constructor
+    promise = navigator.clipboard.write([
+      new window.ClipboardItem({
+        [MIME_TYPES.png]: blob,
+      }),
+    ]);
+  } catch (error: any) {
+    // if we're using a Promise ClipboardItem, let's try constructing
+    // with resolution value instead
+    if (isPromiseLike(blob)) {
+      await navigator.clipboard.write([
+        new window.ClipboardItem({
+          [MIME_TYPES.png]: await blob,
+        }),
+      ]);
+    } else {
+      throw error;
+    }
+  }
+  await promise;
 };
 
 export const copyTextToSystemClipboard = async (text: string | null) => {

src/components/Actions.tsx

@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import {
   canChangeSharpness,
   canHaveArrowheads,
@@ -19,18 +19,19 @@ import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
+import { trackEvent } from "../analytics";
 import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
 
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  elementType,
+  activeTool,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"]["type"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
@@ -46,19 +47,22 @@ export const SelectedShapeActions = ({
     isSingleElementBoundContainer = true;
   }
   const isEditing = Boolean(appState.editingElement);
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
     targetElements.some((element) => hasBackground(element.type));
 
+  const showLinkIcon =
+    targetElements.length === 1 || isSingleElementBoundContainer;
+
   let commonSelectedType: string | null = targetElements[0]?.type || null;
 
   for (const element of targetElements) {
@@ -70,23 +74,23 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(elementType) &&
+      {((hasStrokeColor(activeTool) &&
-        elementType !== "image" &&
+        activeTool !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(elementType) ||
+      {(hasStrokeWidth(activeTool) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(elementType === "freedraw" ||
+      {(activeTool === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(elementType) ||
+      {(hasStrokeStyle(activeTool) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
@@ -94,12 +98,12 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(elementType) ||
+      {(canChangeSharpness(activeTool) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(elementType) ||
+      {(hasText(activeTool) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -114,7 +118,7 @@ export const SelectedShapeActions = ({
         (element) =>
           hasBoundTextElement(element) || isBoundToContainer(element),
       ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(elementType) ||
+      {(canHaveArrowheads(activeTool) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}
@@ -168,11 +172,11 @@ export const SelectedShapeActions = ({
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
-            {!isMobile && renderAction("duplicateSelection")}
+            {!deviceType.isMobile && renderAction("duplicateSelection")}
-            {!isMobile && renderAction("deleteSelectedElements")}
+            {!deviceType.isMobile && renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
-            {targetElements.length === 1 && renderAction("hyperlink")}
+            {showLinkIcon && renderAction("hyperlink")}
           </div>
         </fieldset>
       )}
@@ -182,14 +186,16 @@ export const SelectedShapeActions = ({
 
 export const ShapesSwitcher = ({
   canvas,
-  elementType,
+  activeTool,
   setAppState,
   onImageAction,
+  appState,
 }: {
   canvas: HTMLCanvasElement | null;
-  elementType: AppState["elementType"];
+  activeTool: AppState["activeTool"];
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
+  appState: AppState;
 }) => (
   <>
     {SHAPES.map(({ value, icon, key }, index) => {
@@ -204,20 +210,35 @@ export const ShapesSwitcher = ({
           key={value}
           type="radio"
           icon={icon}
-          checked={elementType === value}
+          checked={activeTool.type === value}
           name="editor-current-shape"
           title={`${capitalizeString(label)} — ${shortcut}`}
           keyBindingLabel={`${index + 1}`}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
           data-testid={value}
+          onPointerDown={({ pointerType }) => {
+            if (!appState.penDetected && pointerType === "pen") {
+              setAppState({
+                penDetected: true,
+                penMode: true,
+              });
+            }
+          }}
           onChange={({ pointerType }) => {
+            if (appState.activeTool.type !== value) {
+              trackEvent("toolbar", value, "ui");
+            }
+            const nextActiveTool = { ...activeTool, type: value };
             setAppState({
-              elementType: value,
+              activeTool: nextActiveTool,
               multiElement: null,
               selectedElementIds: {},
             });
-            setCursorForShape(canvas, value);
+            setCursorForShape(canvas, {
+              ...appState,
+              activeTool: nextActiveTool,
+            });
             if (value === "image") {
               onImageAction({ pointerType });
             }

src/components/Avatar.scss

@@ -12,5 +12,11 @@
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 500;
+
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+    }
   }
 }

src/components/Avatar.tsx

@@ -1,20 +1,28 @@
 import "./Avatar.scss";
 
 import React from "react";
+import { getClientInitials } from "../clients";
 
 type AvatarProps = {
-  children: string;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
   border: string;
+  name: string;
+  src?: string;
 };
 
-export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
+export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
-  <div
+  const shortName = getClientInitials(name);
-    className="Avatar"
+  const style = src
-    style={{ background: color, border: `1px solid ${border}` }}
+    ? undefined
-    onClick={onClick}
+    : { background: color, border: `1px solid ${border}` };
-  >
+  return (
-    {children}
+    <div className="Avatar" style={style} onClick={onClick}>
-  </div>
+      {src ? (
-);
+        <img className="Avatar-img" src={src} alt={shortName} />
+      ) : (
+        shortName
+      )}
+    </div>
+  );
+};

src/components/ClearCanvas.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";
 
@@ -19,7 +19,7 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
         icon={trash}
         title={t("buttons.clearReset")}
         aria-label={t("buttons.clearReset")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
         onClick={toggleDialog}
         data-testid="clear-canvas-button"
       />

src/components/CollabButton.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { users } from "./icons";
 
 import "./CollabButton.scss";
@@ -26,7 +26,7 @@ const CollabButton = ({
         type="button"
         title={t("labels.liveCollaboration")}
         aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
       >
         {collaboratorCount > 0 && (
           <div className="CollabButton-collaborators">{collaboratorCount}</div>

src/components/ContextMenu.tsx

@@ -70,7 +70,9 @@ const ContextMenu = ({
                   dangerous: actionName === "deleteSelectedElements",
                   checkmark: option.checked?.(appState),
                 })}
-                onClick={() => actionManager.executeAction(option)}
+                onClick={() =>
+                  actionManager.executeAction(option, "contextMenu")
+                }
               >
                 <div className="context-menu-option__label">{label}</div>
                 <kbd className="context-menu-option__shortcut">

src/components/Dialog.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useIsMobile } from "../components/App";
+import { useExcalidrawContainer, useDeviceType } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
@@ -94,7 +94,7 @@ export const Dialog = (props: DialogProps) => {
             onClick={onClose}
             aria-label={t("buttons.close")}
           >
-            {useIsMobile() ? back : close}
+            {useDeviceType().isMobile ? back : close}
           </button>
         </h2>
         <div className="Dialog__content">{props.children}</div>

src/components/HelpDialog.tsx

@@ -139,7 +139,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
         <Section title={t("helpDialog.shortcuts")}>
           <Columns>
             <Column>
-              <ShortcutIsland caption={t("helpDialog.shapes")}>
+              <ShortcutIsland caption={t("helpDialog.tools")}>
                 <Shortcut
                   label={t("toolBar.selection")}
                   shortcuts={["V", "1"]}
@@ -149,7 +149,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   shortcuts={["R", "2"]}
                 />
                 <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
                 <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                 <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                 <Shortcut
@@ -159,6 +159,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                 <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
                 <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
                 <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
+                <Shortcut
+                  label={t("toolBar.eraser")}
+                  shortcuts={[getShortcutKey("E")]}
+                />
                 <Shortcut
                   label={t("helpDialog.editSelectedShape")}
                   shortcuts={[
@@ -359,6 +363,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                     getShortcutKey(`Alt+${t("helpDialog.drag")}`),
                   ]}
                 />
+                <Shortcut
+                  label={t("helpDialog.toggleElementLock")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+L")]}
+                />
                 <Shortcut
                   label={t("buttons.undo")}
                   shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}

src/components/HintViewer.tsx

@@ -20,28 +20,32 @@ interface HintViewerProps {
 }
 
 const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
-  const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
+  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
+  if (appState.isLibraryOpen) {
+    return null;
+  }
+
   if (isEraserActive(appState)) {
     return t("hints.eraserRevert");
   }
-  if (elementType === "arrow" || elementType === "line") {
+  if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (!multiMode) {
       return t("hints.linearElement");
     }
     return t("hints.linearElementMulti");
   }
 
-  if (elementType === "freedraw") {
+  if (activeTool.type === "freedraw") {
     return t("hints.freeDraw");
   }
 
-  if (elementType === "text") {
+  if (activeTool.type === "text") {
     return t("hints.text");
   }
 
-  if (appState.elementType === "image" && appState.pendingImageElement) {
+  if (appState.activeTool.type === "image" && appState.pendingImageElement) {
     return t("hints.placeImage");
   }
 
@@ -73,7 +77,7 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.text_editing");
   }
 
-  if (elementType === "selection") {
+  if (activeTool.type === "selection") {
     if (
       appState.draggingElement?.type === "selection" &&
       !appState.editingElement &&

src/components/ImageExportDialog.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
-import { ActionsManagerInterface } from "../actions/types";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@@ -19,6 +18,7 @@ import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING } from "../constants";
 import { nativeFileSystemSupported } from "../data/filesystem";
+import { ActionManager } from "../actions/manager";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -90,7 +90,7 @@ const ImageExportModal = ({
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
@@ -229,7 +229,7 @@ export const ImageExportDialog = ({
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   exportPadding?: number;
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
@@ -250,7 +250,7 @@ export const ImageExportDialog = ({
         icon={exportImage}
         type="button"
         aria-label={t("buttons.exportImage")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
         title={t("buttons.exportImage")}
       />
       {modalIsShown && (

src/components/JSONExportDialog.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
@@ -12,6 +11,9 @@ import { Card } from "./Card";
 
 import "./ExportDialog.scss";
 import { nativeFileSystemSupported } from "../data/filesystem";
+import { trackEvent } from "../analytics";
+import { ActionManager } from "../actions/manager";
+import { getFrame } from "../utils";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -29,7 +31,7 @@ const JSONExportModal = ({
   appState: AppState;
   files: BinaryFiles;
   elements: readonly NonDeletedExcalidrawElement[];
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
   onCloseRequest: () => void;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
@@ -54,7 +56,7 @@ const JSONExportModal = ({
               aria-label={t("exportDialog.disk_button")}
               showAriaLabel={true}
               onClick={() => {
-                actionManager.executeAction(actionSaveFileToDisk);
+                actionManager.executeAction(actionSaveFileToDisk, "ui");
               }}
             />
           </Card>
@@ -70,9 +72,10 @@ const JSONExportModal = ({
               title={t("exportDialog.link_button")}
               aria-label={t("exportDialog.link_button")}
               showAriaLabel={true}
-              onClick={() =>
+              onClick={() => {
-                onExportToBackend(elements, appState, files, canvas)
+                onExportToBackend(elements, appState, files, canvas);
-              }
+                trackEvent("export", "link", `ui (${getFrame()})`);
+              }}
             />
           </Card>
         )}
@@ -94,7 +97,7 @@ export const JSONExportDialog = ({
   elements: readonly NonDeletedExcalidrawElement[];
   appState: AppState;
   files: BinaryFiles;
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
 }) => {
@@ -114,7 +117,7 @@ export const JSONExportDialog = ({
         icon={exportFile}
         type="button"
         aria-label={t("buttons.export")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDeviceType().isMobile}
         title={t("buttons.export")}
       />
       {modalIsShown && (

src/components/LayerUI.tsx

@@ -6,7 +6,6 @@ import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import { useIsMobile } from "../components/App";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
@@ -37,6 +36,8 @@ import { LibraryMenu } from "./LibraryMenu";
 import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
+import { trackEvent } from "../analytics";
+import { useDeviceType } from "../components/App";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -67,6 +68,7 @@ interface LayerUIProps {
   library: Library;
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
+  renderCustomElementWidget?: (appState: AppState) => void;
 }
 
 const LayerUI = ({
@@ -94,8 +96,9 @@ const LayerUI = ({
   library,
   id,
   onImageAction,
+  renderCustomElementWidget,
 }: LayerUIProps) => {
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -122,6 +125,7 @@ const LayerUI = ({
     const createExporter =
       (type: ExportType): ExportCB =>
       async (exportedElements) => {
+        trackEvent("export", type, "ui");
         const fileHandle = await exportCanvas(
           type,
           exportedElements,
@@ -248,7 +252,7 @@ const LayerUI = ({
           appState={appState}
           elements={elements}
           renderAction={actionManager.renderAction}
-          elementType={appState.elementType}
+          activeTool={appState.activeTool.type}
         />
       </Island>
     </Section>
@@ -325,8 +329,8 @@ const LayerUI = ({
                     />
                     <LockButton
                       zenModeEnabled={zenModeEnabled}
-                      checked={appState.elementLocked}
+                      checked={appState.activeTool.locked}
-                      onChange={onLockToggle}
+                      onChange={() => onLockToggle()}
                       title={t("toolBar.lock")}
                     />
                     <Island
@@ -338,13 +342,14 @@ const LayerUI = ({
                       <HintViewer
                         appState={appState}
                         elements={elements}
-                        isMobile={isMobile}
+                        isMobile={deviceType.isMobile}
                       />
                       {heading}
                       <Stack.Row gap={1}>
                         <ShapesSwitcher
+                          appState={appState}
                           canvas={canvas}
-                          elementType={appState.elementType}
+                          activeTool={appState.activeTool}
                           setAppState={setAppState}
                           onImageAction={({ pointerType }) => {
                             onImageAction({
@@ -388,7 +393,7 @@ const LayerUI = ({
                     </Tooltip>
                   ))}
             </UserList>
-            {renderTopRightUI?.(isMobile, appState)}
+            {renderTopRightUI?.(deviceType.isMobile, appState)}
           </div>
         </div>
       </FixedSideContainer>
@@ -418,24 +423,41 @@ const LayerUI = ({
                 />
               </Island>
               {!viewModeEnabled && (
-                <div
+                <>
-                  className={clsx("undo-redo-buttons zen-mode-transition", {
+                  <div
-                    "layer-ui__wrapper__footer-left--transition-bottom":
+                    className={clsx("undo-redo-buttons zen-mode-transition", {
-                      zenModeEnabled,
+                      "layer-ui__wrapper__footer-left--transition-bottom":
-                  })}
+                        zenModeEnabled,
-                >
+                    })}
-                  {actionManager.renderAction("undo", { size: "small" })}
+                  >
-                  {actionManager.renderAction("redo", { size: "small" })}
+                    {actionManager.renderAction("undo", { size: "small" })}
-                </div>
+                    {actionManager.renderAction("redo", { size: "small" })}
+                  </div>
+
+                  <div
+                    className={clsx("eraser-buttons zen-mode-transition", {
+                      "layer-ui__wrapper__footer-left--transition-left":
+                        zenModeEnabled,
+                    })}
+                  >
+                    {actionManager.renderAction("eraser", { size: "small" })}
+                    {renderCustomElementWidget &&
+                      renderCustomElementWidget(appState)}
+                  </div>
+                </>
               )}
-              <div
+              {!viewModeEnabled &&
-                className={clsx("eraser-buttons zen-mode-transition", {
+                appState.multiElement &&
-                  "layer-ui__wrapper__footer-left--transition-left":
+                deviceType.isTouchScreen && (
-                    zenModeEnabled,
+                  <div
-                })}
+                    className={clsx("finalize-button zen-mode-transition", {
-              >
+                      "layer-ui__wrapper__footer-left--transition-left":
-                {actionManager.renderAction("eraser", { size: "small" })}
+                        zenModeEnabled,
-              </div>
+                    })}
+                  >
+                    {actionManager.renderAction("finalize", { size: "small" })}
+                  </div>
+                )}
             </Section>
           </Stack.Col>
         </div>
@@ -474,7 +496,7 @@ const LayerUI = ({
 
   const dialogs = (
     <>
-      {appState.isLoading && <LoadingMessage />}
+      {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
           message={appState.errorMessage}
@@ -503,7 +525,7 @@ const LayerUI = ({
     </>
   );
 
-  return isMobile ? (
+  return deviceType.isMobile ? (
     <>
       {dialogs}
       <MobileMenu
@@ -515,7 +537,7 @@ const LayerUI = ({
         renderImageExportDialog={renderImageExportDialog}
         setAppState={setAppState}
         onCollabButtonClick={onCollabButtonClick}
-        onLockToggle={onLockToggle}
+        onLockToggle={() => onLockToggle()}
         onPenModeToggle={onPenModeToggle}
         canvas={canvas}
         isCollaborating={isCollaborating}

src/components/LibraryMenu.scss

@@ -13,6 +13,10 @@
       width: 100%;
       margin: 2px 0;
 
+      .Spinner {
+        margin-right: 1rem;
+      }
+
       button {
         // 2px from the left to account for focus border of left-most button
         margin: 0 2px;
@@ -28,8 +32,17 @@
   }
 
   .layer-ui__library-message {
-    padding: 10px 20px;
+    padding: 2em 4em;
-    max-width: 200px;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .Spinner {
+      margin-bottom: 1em;
+    }
+    span {
+      font-size: 0.8em;
+    }
   }
 
   .publish-library-success {

src/components/LibraryMenu.tsx

@@ -1,5 +1,12 @@
-import { useRef, useState, useEffect, useCallback, RefObject } from "react";
+import {
-import Library from "../data/library";
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  RefObject,
+  forwardRef,
+} from "react";
+import Library, { libraryItemsAtom } from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
 import {
@@ -19,6 +26,10 @@ import LibraryMenuItems from "./LibraryMenuItems";
 import { EVENT } from "../constants";
 import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
+import { trackEvent } from "../analytics";
+import { useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
+import Spinner from "./Spinner";
 
 const useOnClickOutside = (
   ref: RefObject<HTMLElement>,
@@ -53,6 +64,17 @@ const getSelectedItems = (
   selectedItems: LibraryItem["id"][],
 ) => libraryItems.filter((item) => selectedItems.includes(item.id));
 
+const LibraryMenuWrapper = forwardRef<
+  HTMLDivElement,
+  { children: React.ReactNode }
+>(({ children }, ref) => {
+  return (
+    <Island padding={1} ref={ref} className="layer-ui__library">
+      {children}
+    </Island>
+  );
+});
+
 export const LibraryMenu = ({
   onClose,
   onInsertShape,
@@ -102,11 +124,6 @@ export const LibraryMenu = ({
     };
   }, [onClose]);
 
-  const [libraryItems, setLibraryItems] = useState<LibraryItems>([]);
-
-  const [loadingState, setIsLoading] = useState<
-    "preloading" | "loading" | "ready"
-  >("preloading");
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
   const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
     useState(false);
@@ -114,55 +131,35 @@ export const LibraryMenu = ({
     url: string;
     authorName: string;
   }>(null);
-  const loadingTimerRef = useRef<number | null>(null);
 
-  useEffect(() => {
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-    Promise.race([
-      new Promise((resolve) => {
-        loadingTimerRef.current = window.setTimeout(() => {
-          resolve("loading");
-        }, 100);
-      }),
-      library.loadLibrary().then((items) => {
-        setLibraryItems(items);
-        setIsLoading("ready");
-      }),
-    ]).then((data) => {
-      if (data === "loading") {
-        setIsLoading("loading");
-      }
-    });
-    return () => {
-      clearTimeout(loadingTimerRef.current!);
-    };
-  }, [library]);
 
-  const removeFromLibrary = useCallback(async () => {
+  const removeFromLibrary = useCallback(
-    const items = await library.loadLibrary();
+    async (libraryItems: LibraryItems) => {
-
+      const nextItems = libraryItems.filter(
-    const nextItems = items.filter((item) => !selectedItems.includes(item.id));
+        (item) => !selectedItems.includes(item.id),
-    library.saveLibrary(nextItems).catch((error) => {
+      );
-      setLibraryItems(items);
+      library.setLibrary(nextItems).catch(() => {
-      setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-    });
+      });
-    setSelectedItems([]);
+      setSelectedItems([]);
-    setLibraryItems(nextItems);
+    },
-  }, [library, setAppState, selectedItems, setSelectedItems]);
+    [library, setAppState, selectedItems, setSelectedItems],
+  );
 
   const resetLibrary = useCallback(() => {
     library.resetLibrary();
-    setLibraryItems([]);
     focusContainer();
   }, [library, focusContainer]);
 
   const addToLibrary = useCallback(
-    async (elements: LibraryItem["elements"]) => {
+    async (elements: LibraryItem["elements"], libraryItems: LibraryItems) => {
+      trackEvent("element", "addToLibrary", "ui");
       if (elements.some((element) => element.type === "image")) {
         return setAppState({
           errorMessage: "Support for adding images to the library coming soon!",
         });
       }
-      const items = await library.loadLibrary();
       const nextItems: LibraryItems = [
         {
           status: "unpublished",
@@ -170,14 +167,12 @@ export const LibraryMenu = ({
           id: randomId(),
           created: Date.now(),
         },
-        ...items,
+        ...libraryItems,
       ];
       onAddToLibrary();
-      library.saveLibrary(nextItems).catch((error) => {
+      library.setLibrary(nextItems).catch(() => {
-        setLibraryItems(items);
         setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
       });
-      setLibraryItems(nextItems);
     },
     [onAddToLibrary, library, setAppState],
   );
@@ -216,7 +211,7 @@ export const LibraryMenu = ({
   }, [setPublishLibSuccess, publishLibSuccess]);
 
   const onPublishLibSuccess = useCallback(
-    (data) => {
+    (data, libraryItems: LibraryItems) => {
       setShowPublishLibraryDialog(false);
       setPublishLibSuccess({ url: data.url, authorName: data.authorName });
       const nextLibItems = libraryItems.slice();
@@ -225,102 +220,114 @@ export const LibraryMenu = ({
           libItem.status = "published";
         }
       });
-      library.saveLibrary(nextLibItems);
+      library.setLibrary(nextLibItems);
-      setLibraryItems(nextLibItems);
     },
-    [
+    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
-      setShowPublishLibraryDialog,
-      setPublishLibSuccess,
-      libraryItems,
-      selectedItems,
-      library,
-    ],
   );
 
   const [lastSelectedItem, setLastSelectedItem] = useState<
     LibraryItem["id"] | null
   >(null);
 
-  return loadingState === "preloading" ? null : (
+  if (
-    <Island padding={1} ref={ref} className="layer-ui__library">
+    libraryItemsData.status === "loading" &&
+    !libraryItemsData.isInitialized
+  ) {
+    return (
+      <LibraryMenuWrapper ref={ref}>
+        <div className="layer-ui__library-message">
+          <Spinner size="2em" />
+          <span>{t("labels.libraryLoadingMessage")}</span>
+        </div>
+      </LibraryMenuWrapper>
+    );
+  }
+
+  return (
+    <LibraryMenuWrapper ref={ref}>
       {showPublishLibraryDialog && (
         <PublishLibrary
           onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(libraryItems, selectedItems)}
+          libraryItems={getSelectedItems(
+            libraryItemsData.libraryItems,
+            selectedItems,
+          )}
           appState={appState}
-          onSuccess={onPublishLibSuccess}
+          onSuccess={(data) =>
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
           onError={(error) => window.alert(error)}
-          updateItemsInStorage={() => library.saveLibrary(libraryItems)}
+          updateItemsInStorage={() =>
+            library.setLibrary(libraryItemsData.libraryItems)
+          }
           onRemove={(id: string) =>
             setSelectedItems(selectedItems.filter((_id) => _id !== id))
           }
         />
       )}
       {publishLibSuccess && renderPublishSuccess()}
+      <LibraryMenuItems
+        isLoading={libraryItemsData.status === "loading"}
+        libraryItems={libraryItemsData.libraryItems}
+        onRemoveFromLibrary={() =>
+          removeFromLibrary(libraryItemsData.libraryItems)
+        }
+        onAddToLibrary={(elements) =>
+          addToLibrary(elements, libraryItemsData.libraryItems)
+        }
+        onInsertShape={onInsertShape}
+        pendingElements={pendingElements}
+        setAppState={setAppState}
+        libraryReturnUrl={libraryReturnUrl}
+        library={library}
+        theme={theme}
+        files={files}
+        id={id}
+        selectedItems={selectedItems}
+        onToggle={(id, event) => {
+          const shouldSelect = !selectedItems.includes(id);
 
-      {loadingState === "loading" ? (
+          if (shouldSelect) {
-        <div className="layer-ui__library-message">
+            if (event.shiftKey && lastSelectedItem) {
-          {t("labels.libraryLoadingMessage")}
+              const rangeStart = libraryItemsData.libraryItems.findIndex(
-        </div>
+                (item) => item.id === lastSelectedItem,
-      ) : (
+              );
-        <LibraryMenuItems
+              const rangeEnd = libraryItemsData.libraryItems.findIndex(
-          libraryItems={libraryItems}
+                (item) => item.id === id,
-          onRemoveFromLibrary={removeFromLibrary}
+              );
-          onAddToLibrary={addToLibrary}
-          onInsertShape={onInsertShape}
-          pendingElements={pendingElements}
-          setAppState={setAppState}
-          libraryReturnUrl={libraryReturnUrl}
-          library={library}
-          theme={theme}
-          files={files}
-          id={id}
-          selectedItems={selectedItems}
-          onToggle={(id, event) => {
-            const shouldSelect = !selectedItems.includes(id);
 
-            if (shouldSelect) {
+              if (rangeStart === -1 || rangeEnd === -1) {
-              if (event.shiftKey && lastSelectedItem) {
-                const rangeStart = libraryItems.findIndex(
-                  (item) => item.id === lastSelectedItem,
-                );
-                const rangeEnd = libraryItems.findIndex(
-                  (item) => item.id === id,
-                );
-
-                if (rangeStart === -1 || rangeEnd === -1) {
-                  setSelectedItems([...selectedItems, id]);
-                  return;
-                }
-
-                const selectedItemsMap = arrayToMap(selectedItems);
-                const nextSelectedIds = libraryItems.reduce(
-                  (acc: LibraryItem["id"][], item, idx) => {
-                    if (
-                      (idx >= rangeStart && idx <= rangeEnd) ||
-                      selectedItemsMap.has(item.id)
-                    ) {
-                      acc.push(item.id);
-                    }
-                    return acc;
-                  },
-                  [],
-                );
-
-                setSelectedItems(nextSelectedIds);
-              } else {
                 setSelectedItems([...selectedItems, id]);
+                return;
               }
-              setLastSelectedItem(id);
+
+              const selectedItemsMap = arrayToMap(selectedItems);
+              const nextSelectedIds = libraryItemsData.libraryItems.reduce(
+                (acc: LibraryItem["id"][], item, idx) => {
+                  if (
+                    (idx >= rangeStart && idx <= rangeEnd) ||
+                    selectedItemsMap.has(item.id)
+                  ) {
+                    acc.push(item.id);
+                  }
+                  return acc;
+                },
+                [],
+              );
+
+              setSelectedItems(nextSelectedIds);
             } else {
-              setLastSelectedItem(null);
+              setSelectedItems([...selectedItems, id]);
-              setSelectedItems(selectedItems.filter((_id) => _id !== id));
             }
-          }}
+            setLastSelectedItem(id);
-          onPublish={() => setShowPublishLibraryDialog(true)}
+          } else {
-          resetLibrary={resetLibrary}
+            setLastSelectedItem(null);
-        />
+            setSelectedItems(selectedItems.filter((_id) => _id !== id));
-      )}
+          }
-    </Island>
+        }}
+        onPublish={() => setShowPublishLibraryDialog(true)}
+        resetLibrary={resetLibrary}
+      />
+    </LibraryMenuWrapper>
   );
 };

src/components/LibraryMenuItems.tsx

@@ -12,7 +12,7 @@ import {
   LibraryItems,
 } from "../types";
 import { muteFSAbortError } from "../utils";
-import { useIsMobile } from "./App";
+import { useDeviceType } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 import { exportToFileIcon, load, publishIcon, trash } from "./icons";
 import { LibraryUnit } from "./LibraryUnit";
@@ -22,8 +22,10 @@ import { Tooltip } from "./Tooltip";
 
 import "./LibraryMenuItems.scss";
 import { VERSIONS } from "../constants";
+import Spinner from "./Spinner";
 
 const LibraryMenuItems = ({
+  isLoading,
   libraryItems,
   onRemoveFromLibrary,
   onAddToLibrary,
@@ -40,6 +42,7 @@ const LibraryMenuItems = ({
   onPublish,
   resetLibrary,
 }: {
+  isLoading: boolean;
   libraryItems: LibraryItems;
   pendingElements: LibraryItem["elements"];
   onRemoveFromLibrary: () => void;
@@ -85,7 +88,7 @@ const LibraryMenuItems = ({
 
   const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
 
-  const isMobile = useIsMobile();
+  const isMobile = useDeviceType().isMobile;
 
   const renderLibraryActions = () => {
     const itemsSelected = !!selectedItems.length;
@@ -106,14 +109,10 @@ const LibraryMenuItems = ({
             icon={load}
             onClick={() => {
               importLibraryFromJSON(library)
-                .then(() => {
-                  // Close and then open to get the libraries updated
-                  setAppState({ isLibraryOpen: false });
-                  setAppState({ isLibraryOpen: true });
-                })
                 .catch(muteFSAbortError)
                 .catch((error) => {
-                  setAppState({ errorMessage: error.message });
+                  console.error(error);
+                  setAppState({ errorMessage: t("errors.importLibraryError") });
                 });
             }}
             className="library-actions--load"
@@ -130,7 +129,7 @@ const LibraryMenuItems = ({
               onClick={async () => {
                 const libraryItems = itemsSelected
                   ? items
-                  : await library.loadLibrary();
+                  : await library.getLatestLibrary();
                 saveLibraryAsJSON(libraryItems)
                   .catch(muteFSAbortError)
                   .catch((error) => {
@@ -289,16 +288,20 @@ const LibraryMenuItems = ({
       {showRemoveLibAlert && renderRemoveLibAlert()}
       <div className="layer-ui__library-header" key="library-header">
         {renderLibraryActions()}
-        <a
+        {isLoading ? (
-          href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+          <Spinner />
-            window.name || "_blank"
+        ) : (
-          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
+          <a
-            VERSIONS.excalidrawLibrary
+            href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
-          }`}
+              window.name || "_blank"
-          target="_excalidraw_libraries"
+            }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
-        >
+              VERSIONS.excalidrawLibrary
-          {t("labels.libraries")}
+            }`}
-        </a>
+            target="_excalidraw_libraries"
+          >
+            {t("labels.libraries")}
+          </a>
+        )}
       </div>
       <Stack.Col
         className="library-menu-items-container__items"

src/components/LibraryUnit.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
 import { MIME_TYPES } from "../constants";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { exportToSvg } from "../scene/export";
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
@@ -66,7 +66,7 @@ export const LibraryUnit = ({
   }, [elements, files]);
 
   const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useIsMobile();
+  const isMobile = useDeviceType().isMobile;
   const adder = isPending && (
     <div className="library-unit__adder">{PLUS_ICON}</div>
   );

src/components/LoadingMessage.tsx

@@ -1,10 +1,30 @@
 import { t } from "../i18n";
+import { useState, useEffect } from "react";
+import Spinner from "./Spinner";
+
+export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
+  const [isWaiting, setIsWaiting] = useState(!!delay);
+
+  useEffect(() => {
+    if (!delay) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      setIsWaiting(false);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  if (isWaiting) {
+    return null;
+  }
 
-export const LoadingMessage = () => {
-  // !! KEEP THIS IN SYNC WITH index.html !!
   return (
     <div className="LoadingMessage">
-      <span>{t("labels.loadingScene")}</span>
+      <div>
+        <Spinner />
+      </div>
+      <div className="LoadingMessage-text">{t("labels.loadingScene")}</div>
     </div>
   );
 };

src/components/MobileMenu.tsx

@@ -72,8 +72,9 @@ export const MobileMenu = ({
                   {heading}
                   <Stack.Row gap={1}>
                     <ShapesSwitcher
+                      appState={appState}
                       canvas={canvas}
-                      elementType={appState.elementType}
+                      activeTool={appState.activeTool}
                       setAppState={setAppState}
                       onImageAction={({ pointerType }) => {
                         onImageAction({
@@ -85,7 +86,7 @@ export const MobileMenu = ({
                 </Island>
                 {renderTopRightUI && renderTopRightUI(true, appState)}
                 <LockButton
-                  checked={appState.elementLocked}
+                  checked={appState.activeTool.locked}
                   onChange={onLockToggle}
                   title={t("toolBar.lock")}
                   isMobile
@@ -225,7 +226,7 @@ export const MobileMenu = ({
                 appState={appState}
                 elements={elements}
                 renderAction={actionManager.renderAction}
-                elementType={appState.elementType}
+                activeTool={appState.activeTool.type}
               />
             </Section>
           ) : null}

src/components/Modal.tsx

@@ -4,7 +4,7 @@ import React, { useState, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import { useExcalidrawContainer, useIsMobile } from "./App";
+import { useExcalidrawContainer, useDeviceType } from "./App";
 import { AppState } from "../types";
 import { THEME } from "../constants";
 
@@ -59,17 +59,17 @@ export const Modal = (props: {
 const useBodyRoot = (theme: AppState["theme"]) => {
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
 
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();
-  const isMobileRef = useRef(isMobile);
+  const isMobileRef = useRef(deviceType.isMobile);
-  isMobileRef.current = isMobile;
+  isMobileRef.current = deviceType.isMobile;
 
   const { container: excalidrawContainer } = useExcalidrawContainer();
 
   useLayoutEffect(() => {
     if (div) {
-      div.classList.toggle("excalidraw--mobile", isMobile);
+      div.classList.toggle("excalidraw--mobile", deviceType.isMobile);
     }
-  }, [div, isMobile]);
+  }, [div, deviceType.isMobile]);
 
   useLayoutEffect(() => {
     const isDarkTheme =

src/components/Stats.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDeviceType } from "../components/App";
 import { getTargetElements } from "../scene";
 import { AppState, ExcalidrawProps } from "../types";
 import { close } from "./icons";
@@ -16,13 +16,13 @@ export const Stats = (props: {
   onClose: () => void;
   renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }) => {
-  const isMobile = useIsMobile();
+  const deviceType = useDeviceType();
 
   const boundingBox = getCommonBounds(props.elements);
   const selectedElements = getTargetElements(props.elements, props.appState);
   const selectedBoundingBox = getCommonBounds(selectedElements);
 
-  if (isMobile && props.appState.openMenu) {
+  if (deviceType.isMobile && props.appState.openMenu) {
     return null;
   }
 

src/components/ToolButton.tsx

@@ -48,6 +48,7 @@ type ToolButtonProps =
       type: "radio";
       checked: boolean;
       onChange?(data: { pointerType: PointerType | null }): void;
+      onPointerDown?(data: { pointerType: PointerType }): void;
     });
 
 export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
@@ -149,6 +150,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
       title={props.title}
       onPointerDown={(event) => {
         lastPointerTypeRef.current = event.pointerType || null;
+        props.onPointerDown?.({ pointerType: event.pointerType || null });
       }}
       onPointerUp={() => {
         requestAnimationFrame(() => {

src/components/ToolIcon.scss

@@ -155,7 +155,7 @@
       }
 
       width: 2rem;
-      height: 2em;
+      height: 2rem;
     }
   }
 

src/components/Tooltip.scss

@@ -2,7 +2,7 @@
 
 // container in body where the actual tooltip is appended to
 .excalidraw-tooltip {
-  position: absolute;
+  position: fixed;
   z-index: 1000;
 
   padding: 8px;

src/constants.ts

@@ -1,5 +1,5 @@
 import cssVariables from "./css/variables.module.scss";
-import { AppProps } from "./types";
+import { AppProps, CustomElementConfig } from "./types";
 import { FontFamilyValues } from "./element/types";
 
 export const APP_NAME = "Excalidraw";
@@ -94,7 +94,9 @@ export const MIME_TYPES = {
   excalidrawlib: "application/vnd.excalidrawlib+json",
   json: "application/json",
   svg: "image/svg+xml",
+  "excalidraw.svg": "image/svg+xml",
   png: "image/png",
+  "excalidraw.png": "image/png",
   jpg: "image/jpeg",
   gif: "image/gif",
   binary: "application/octet-stream",
@@ -106,7 +108,8 @@ export const EXPORT_DATA_TYPES = {
   excalidrawLibrary: "excalidrawlib",
 } as const;
 
-export const EXPORT_SOURCE = window.location.origin;
+export const EXPORT_SOURCE =
+  window.EXCALIDRAW_EXPORT_SOURCE || window.location.origin;
 
 // time in milliseconds
 export const IMAGE_RENDER_TIMEOUT = 500;
@@ -152,6 +155,17 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
   },
 };
 
+export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
+  type: "custom",
+  customType: "custom",
+  transformHandles: true,
+  displayData: { content: "", type: "svg" },
+  width: 40,
+  height: 40,
+  stackedOnTop: false,
+  onCreate: () => {},
+  disableContextMenu: false,
+};
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
 export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
@@ -188,3 +202,5 @@ export const VERTICAL_ALIGN = {
   MIDDLE: "middle",
   BOTTOM: "bottom",
 };
+
+export const ELEMENT_READY_TO_ERASE_OPACITY = 20;

src/css/app.scss

@@ -16,15 +16,17 @@
   left: 0;
   z-index: 999;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   pointer-events: none;
-}
 
-.LoadingMessage span {
+  .Spinner {
-  background-color: var(--button-gray-1);
+    font-size: 2.8em;
-  border-radius: 5px;
+  }
-  padding: 0.8em 1.2em;
+
-  color: var(--popup-text-color);
+  .LoadingMessage-text {
-  font-size: 1.3em;
+    margin-top: 1em;
+    font-size: 0.8em;
+  }
 }

src/css/styles.scss

@@ -477,6 +477,15 @@
     font-family: var(--ui-font);
   }
 
+  .finalize-button {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 0.4em;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-inline-start: 0.6em;
+  }
+
   .undo-redo-buttons,
   .eraser-buttons {
     display: grid;

src/data/blob.ts

@@ -1,20 +1,16 @@
 import { nanoid } from "nanoid";
 import { cleanAppStateForExport } from "../appState";
-import {
+import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
-  ALLOWED_IMAGE_MIME_TYPES,
-  EXPORT_DATA_TYPES,
-  MIME_TYPES,
-} from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
-import { AppState, DataURL } from "../types";
+import { AppState, DataURL, LibraryItem } from "../types";
 import { bytesToHexString } from "../utils";
 import { FileSystemHandle } from "./filesystem";
-import { isValidExcalidrawData } from "./json";
+import { isValidExcalidrawData, isValidLibrary } from "./json";
-import { restore } from "./restore";
+import { restore, restoreLibraryItems } from "./restore";
 import { ImportedLibraryData } from "./types";
 
 const parseFileContents = async (blob: Blob | File) => {
@@ -163,13 +159,17 @@ export const loadFromBlob = async (
   }
 };
 
-export const loadLibraryFromBlob = async (blob: Blob) => {
+export const loadLibraryFromBlob = async (
+  blob: Blob,
+  defaultStatus: LibraryItem["status"] = "unpublished",
+) => {
   const contents = await parseFileContents(blob);
-  const data: ImportedLibraryData = JSON.parse(contents);
+  const data: ImportedLibraryData | undefined = JSON.parse(contents);
-  if (data.type !== EXPORT_DATA_TYPES.excalidrawLibrary) {
+  if (!isValidLibrary(data)) {
-    throw new Error(t("alerts.couldNotLoadInvalidFile"));
+    throw new Error("Invalid library");
   }
-  return data;
+  const libraryItems = data.libraryItems || data.library;
+  return restoreLibraryItems(libraryItems, defaultStatus);
 };
 
 export const canvasToBlob = async (

src/data/filesystem.ts

@@ -13,7 +13,9 @@ type FILE_EXTENSION =
   | "gif"
   | "jpg"
   | "png"
+  | "excalidraw.png"
   | "svg"
+  | "excalidraw.svg"
   | "json"
   | "excalidraw"
   | "excalidrawlib";

src/data/image.ts

@@ -105,7 +105,9 @@ export const encodeSvgMetadata = async ({ text }: { text: string }) => {
 
 export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
   if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
-    const match = svg.match(/<!-- payload-start -->(.+?)<!-- payload-end -->/);
+    const match = svg.match(
+      /<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/,
+    );
     if (!match) {
       throw new Error("INVALID");
     }

src/data/index.ts

@@ -16,7 +16,7 @@ export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 
 export const exportCanvas = async (
-  type: ExportType,
+  type: Omit<ExportType, "backend">,
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
   files: BinaryFiles,
@@ -56,7 +56,7 @@ export const exportCanvas = async (
         {
           description: "Export to SVG",
           name,
-          extension: "svg",
+          extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
           fileHandle,
         },
       );
@@ -73,10 +73,10 @@ export const exportCanvas = async (
   });
   tempCanvas.style.display = "none";
   document.body.appendChild(tempCanvas);
-  let blob = await canvasToBlob(tempCanvas);
-  tempCanvas.remove();
 
   if (type === "png") {
+    let blob = await canvasToBlob(tempCanvas);
+    tempCanvas.remove();
     if (appState.exportEmbedScene) {
       blob = await (
         await import(/* webpackChunkName: "image" */ "./image")
@@ -89,17 +89,24 @@ export const exportCanvas = async (
     return await fileSave(blob, {
       description: "Export to PNG",
       name,
-      extension: "png",
+      extension: appState.exportEmbedScene ? "excalidraw.png" : "png",
       fileHandle,
     });
   } else if (type === "clipboard") {
     try {
+      const blob = canvasToBlob(tempCanvas);
       await copyBlobToClipboardAsPng(blob);
     } catch (error: any) {
       if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
         throw error;
       }
       throw new Error(t("alerts.couldNotCopyToClipboard"));
+    } finally {
+      tempCanvas.remove();
     }
+  } else {
+    tempCanvas.remove();
+    // shouldn't happen
+    throw new Error("Unsupported export type");
   }
 };

src/data/json.ts

@@ -15,6 +15,7 @@ import {
   ExportedDataState,
   ImportedDataState,
   ExportedLibraryData,
+  ImportedLibraryData,
 } from "./types";
 import Library from "./library";
 
@@ -114,7 +115,7 @@ export const isValidExcalidrawData = (data?: {
   );
 };
 
-export const isValidLibrary = (json: any) => {
+export const isValidLibrary = (json: any): json is ImportedLibraryData => {
   return (
     typeof json === "object" &&
     json &&
@@ -123,14 +124,18 @@ export const isValidLibrary = (json: any) => {
   );
 };
 
-export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
+export const serializeLibraryAsJSON = (libraryItems: LibraryItems) => {
   const data: ExportedLibraryData = {
     type: EXPORT_DATA_TYPES.excalidrawLibrary,
     version: VERSIONS.excalidrawLibrary,
     source: EXPORT_SOURCE,
     libraryItems,
   };
-  const serialized = JSON.stringify(data, null, 2);
+  return JSON.stringify(data, null, 2);
+};
+
+export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
+  const serialized = serializeLibraryAsJSON(libraryItems);
   await fileSave(
     new Blob([serialized], {
       type: MIME_TYPES.excalidrawlib,

src/data/library.ts

@@ -1,121 +1,205 @@
 import { loadLibraryFromBlob } from "./blob";
 import { LibraryItems, LibraryItem } from "../types";
-import { restoreElements, restoreLibraryItems } from "./restore";
+import { restoreLibraryItems } from "./restore";
-import { getNonDeletedElements } from "../element";
 import type App from "../components/App";
+import { ImportedDataState } from "./types";
+import { atom } from "jotai";
+import { jotaiStore } from "../jotai";
+
+export const libraryItemsAtom = atom<{
+  status: "loading" | "loaded";
+  isInitialized: boolean;
+  libraryItems: LibraryItems;
+}>({ status: "loaded", isInitialized: true, libraryItems: [] });
+
+const cloneLibraryItems = (libraryItems: LibraryItems): LibraryItems =>
+  JSON.parse(JSON.stringify(libraryItems));
+
+/**
+ * checks if library item does not exist already in current library
+ */
+const isUniqueItem = (
+  existingLibraryItems: LibraryItems,
+  targetLibraryItem: LibraryItem,
+) => {
+  return !existingLibraryItems.find((libraryItem) => {
+    if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
+      return false;
+    }
+
+    // detect z-index difference by checking the excalidraw elements
+    // are in order
+    return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
+      return (
+        libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id &&
+        libItemExcalidrawItem.versionNonce ===
+          targetLibraryItem.elements[idx].versionNonce
+      );
+    });
+  });
+};
+
+/** Merges otherItems into localItems. Unique items in otherItems array are
+    sorted first. */
+export const mergeLibraryItems = (
+  localItems: LibraryItems,
+  otherItems: LibraryItems,
+): LibraryItems => {
+  const newItems = [];
+  for (const item of otherItems) {
+    if (isUniqueItem(localItems, item)) {
+      newItems.push(item);
+    }
+  }
+
+  return [...newItems, ...localItems];
+};
 
 class Library {
-  private libraryCache: LibraryItems | null = null;
+  /** latest libraryItems */
+  private lastLibraryItems: LibraryItems = [];
+  /** indicates whether library is initialized with library items (has gone
+   * though at least one update) */
+  private isInitialized = false;
+
   private app: App;
 
   constructor(app: App) {
     this.app = app;
   }
 
-  resetLibrary = async () => {
+  private updateQueue: Promise<LibraryItems>[] = [];
-    await this.app.props.onLibraryChange?.([]);
+
-    this.libraryCache = [];
+  private getLastUpdateTask = (): Promise<LibraryItems> | undefined => {
+    return this.updateQueue[this.updateQueue.length - 1];
   };
 
-  restoreLibraryItem = (libraryItem: LibraryItem): LibraryItem | null => {
+  private notifyListeners = () => {
-    const elements = getNonDeletedElements(
+    if (this.updateQueue.length > 0) {
-      restoreElements(libraryItem.elements, null),
+      jotaiStore.set(libraryItemsAtom, {
-    );
+        status: "loading",
-    return elements.length ? { ...libraryItem, elements } : null;
+        libraryItems: this.lastLibraryItems,
-  };
+        isInitialized: this.isInitialized,
-
-  /** imports library (currently merges, removing duplicates) */
-  async importLibrary(blob: Blob, defaultStatus = "unpublished") {
-    const libraryFile = await loadLibraryFromBlob(blob);
-    if (!libraryFile || !(libraryFile.libraryItems || libraryFile.library)) {
-      return;
-    }
-
-    /**
-     * checks if library item does not exist already in current library
-     */
-    const isUniqueitem = (
-      existingLibraryItems: LibraryItems,
-      targetLibraryItem: LibraryItem,
-    ) => {
-      return !existingLibraryItems.find((libraryItem) => {
-        if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
-          return false;
-        }
-
-        // detect z-index difference by checking the excalidraw elements
-        // are in order
-        return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
-          return (
-            libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id &&
-            libItemExcalidrawItem.versionNonce ===
-              targetLibraryItem.elements[idx].versionNonce
-          );
-        });
       });
-    };
+    } else {
-
+      this.isInitialized = true;
-    const existingLibraryItems = await this.loadLibrary();
+      jotaiStore.set(libraryItemsAtom, {
-
+        status: "loaded",
-    const library = libraryFile.libraryItems || libraryFile.library || [];
+        libraryItems: this.lastLibraryItems,
-    const restoredLibItems = restoreLibraryItems(
+        isInitialized: this.isInitialized,
-      library,
+      });
-      defaultStatus as "published" | "unpublished",
+      try {
-    );
+        this.app.props.onLibraryChange?.(
-    const filteredItems = [];
+          cloneLibraryItems(this.lastLibraryItems),
-    for (const item of restoredLibItems) {
+        );
-      const restoredItem = this.restoreLibraryItem(item as LibraryItem);
+      } catch (error) {
-      if (restoredItem && isUniqueitem(existingLibraryItems, restoredItem)) {
+        console.error(error);
-        filteredItems.push(restoredItem);
       }
     }
+  };
 
-    await this.saveLibrary([...filteredItems, ...existingLibraryItems]);
+  resetLibrary = () => {
+    return this.setLibrary([]);
+  };
+
+  /**
+   * imports library (from blob or libraryItems), merging with current library
+   * (attempting to remove duplicates)
+   */
+  importLibrary(
+    library:
+      | Blob
+      | Required<ImportedDataState>["libraryItems"]
+      | Promise<Required<ImportedDataState>["libraryItems"]>,
+    defaultStatus: LibraryItem["status"] = "unpublished",
+  ): Promise<LibraryItems> {
+    return this.setLibrary(
+      () =>
+        new Promise<LibraryItems>(async (resolve, reject) => {
+          try {
+            let libraryItems: LibraryItems;
+            if (library instanceof Blob) {
+              libraryItems = await loadLibraryFromBlob(library, defaultStatus);
+            } else {
+              libraryItems = restoreLibraryItems(await library, defaultStatus);
+            }
+
+            resolve(mergeLibraryItems(this.lastLibraryItems, libraryItems));
+          } catch (error) {
+            reject(error);
+          }
+        }),
+    );
   }
 
-  loadLibrary = (): Promise<LibraryItems> => {
+  /**
+   * @returns latest cloned libraryItems. Awaits all in-progress updates first.
+   */
+  getLatestLibrary = (): Promise<LibraryItems> => {
     return new Promise(async (resolve) => {
-      if (this.libraryCache) {
-        return resolve(JSON.parse(JSON.stringify(this.libraryCache)));
-      }
-
       try {
-        const libraryItems = this.app.libraryItemsFromStorage;
+        const libraryItems = await (this.getLastUpdateTask() ||
-        if (!libraryItems) {
+          this.lastLibraryItems);
-          return resolve([]);
+        if (this.updateQueue.length > 0) {
+          resolve(this.getLatestLibrary());
+        } else {
+          resolve(cloneLibraryItems(libraryItems));
         }
-
+      } catch (error) {
-        const items = libraryItems.reduce((acc, item) => {
+        return resolve(this.lastLibraryItems);
-          const restoredItem = this.restoreLibraryItem(item);
-          if (restoredItem) {
-            acc.push(item);
-          }
-          return acc;
-        }, [] as Mutable<LibraryItems>);
-
-        // clone to ensure we don't mutate the cached library elements in the app
-        this.libraryCache = JSON.parse(JSON.stringify(items));
-
-        resolve(items);
-      } catch (error: any) {
-        console.error(error);
-        resolve([]);
       }
     });
   };
 
-  saveLibrary = async (items: LibraryItems) => {
+  setLibrary = (
-    const prevLibraryItems = this.libraryCache;
+    /**
-    try {
+     * LibraryItems that will replace current items. Can be a function which
-      const serializedItems = JSON.stringify(items);
+     * will be invoked after all previous tasks are resolved
-      // cache optimistically so that the app has access to the latest
+     * (this is the prefered way to update the library to avoid race conditions,
-      // immediately
+     * but you'll want to manually merge the library items in the callback
-      this.libraryCache = JSON.parse(serializedItems);
+     *  - which is what we're doing in Library.importLibrary()).
-      await this.app.props.onLibraryChange?.(items);
+     *
-    } catch (error: any) {
+     * If supplied promise is rejected with AbortError, we swallow it and
-      this.libraryCache = prevLibraryItems;
+     * do not update the library.
-      throw error;
+     */
-    }
+    libraryItems:
+      | LibraryItems
+      | Promise<LibraryItems>
+      | ((
+          latestLibraryItems: LibraryItems,
+        ) => LibraryItems | Promise<LibraryItems>),
+  ): Promise<LibraryItems> => {
+    const task = new Promise<LibraryItems>(async (resolve, reject) => {
+      try {
+        await this.getLastUpdateTask();
+
+        if (typeof libraryItems === "function") {
+          libraryItems = libraryItems(this.lastLibraryItems);
+        }
+
+        this.lastLibraryItems = cloneLibraryItems(await libraryItems);
+
+        resolve(this.lastLibraryItems);
+      } catch (error: any) {
+        reject(error);
+      }
+    })
+      .catch((error) => {
+        if (error.name === "AbortError") {
+          console.warn("Library update aborted by user");
+          return this.lastLibraryItems;
+        }
+        throw error;
+      })
+      .finally(() => {
+        this.updateQueue = this.updateQueue.filter((_task) => _task !== task);
+        this.notifyListeners();
+      });
+
+    this.updateQueue.push(task);
+    this.notifyListeners();
+
+    return task;
   };
 }
 

src/data/restore.ts

@@ -10,7 +10,11 @@ import {
   NormalizedZoomValue,
 } from "../types";
 import { ImportedDataState } from "./types";
-import { getNormalizedDimensions, isInvisiblySmallElement } from "../element";
+import {
+  getNonDeletedElements,
+  getNormalizedDimensions,
+  isInvisiblySmallElement,
+} from "../element";
 import { isLinearElementType } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
@@ -30,8 +34,8 @@ type RestoredAppState = Omit<
   "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
-export const AllowedExcalidrawElementTypes: Record<
+export const AllowedExcalidrawActiveTools: Record<
-  AppState["elementType"],
+  AppState["activeTool"]["type"],
   boolean
 > = {
   selection: true,
@@ -44,6 +48,7 @@ export const AllowedExcalidrawElementTypes: Record<
   arrow: true,
   freedraw: true,
   eraser: false,
+  custom: true,
 };
 
 export type RestoredDataState = {
@@ -107,6 +112,7 @@ const restoreElementWithProperties = <
       : element.boundElements ?? [],
     updated: element.updated ?? getUpdatedTimestamp(),
     link: element.link ?? null,
+    locked: element.locked ?? false,
   };
 
   return {
@@ -193,6 +199,10 @@ const restoreElement = (
         y,
       });
     }
+    case "custom":
+      return restoreElementWithProperties(element, {
+        customType: element.customType || "custom",
+      });
     // generic elements
     case "ellipse":
       return restoreElementWithProperties(element, {});
@@ -235,10 +245,8 @@ export const restoreAppState = (
   localAppState: Partial<AppState> | null | undefined,
 ): RestoredAppState => {
   appState = appState || {};
-
   const defaultAppState = getDefaultAppState();
   const nextAppState = {} as typeof defaultAppState;
-
   for (const [key, defaultValue] of Object.entries(defaultAppState) as [
     keyof typeof defaultAppState,
     any,
@@ -252,12 +260,27 @@ export const restoreAppState = (
         ? localValue
         : defaultValue;
   }
-
+  const activeTool: any = {
+    lastActiveToolBeforeEraser: null,
+    locked: nextAppState.activeTool.locked ?? false,
+    type: "selection",
+  };
+  if (AllowedExcalidrawActiveTools[nextAppState.activeTool.type]) {
+    if (nextAppState.activeTool.type === "custom") {
+      activeTool.type = "custom";
+      activeTool.customType = nextAppState.activeTool.customType ?? "custom";
+    } else {
+      activeTool.type = nextAppState.activeTool.type;
+    }
+  }
   return {
     ...nextAppState,
-    elementType: AllowedExcalidrawElementTypes[nextAppState.elementType]
+    cursorButton: localAppState?.cursorButton || "up",
-      ? nextAppState.elementType
+    // reset on fresh restore so as to hide the UI button if penMode not active
-      : "selection",
+    penDetected:
+      localAppState?.penDetected ??
+      (appState.penMode ? appState.penDetected ?? false : false),
+    activeTool,
     // Migrates from previous version where appState.zoom was a number
     zoom:
       typeof appState.zoom === "number"
@@ -269,7 +292,7 @@ export const restoreAppState = (
 };
 
 export const restore = (
-  data: ImportedDataState | null,
+  data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null,
   /**
    * Local AppState (`this.state` or initial state from localStorage) so that we
    * don't overwrite local state with default values (when values not
@@ -286,28 +309,45 @@ export const restore = (
   };
 };
 
+const restoreLibraryItem = (libraryItem: LibraryItem) => {
+  const elements = restoreElements(
+    getNonDeletedElements(libraryItem.elements),
+    null,
+  );
+  return elements.length ? { ...libraryItem, elements } : null;
+};
+
 export const restoreLibraryItems = (
-  libraryItems: NonOptional<ImportedDataState["libraryItems"]>,
+  libraryItems: ImportedDataState["libraryItems"] = [],
   defaultStatus: LibraryItem["status"],
 ) => {
   const restoredItems: LibraryItem[] = [];
   for (const item of libraryItems) {
     // migrate older libraries
     if (Array.isArray(item)) {
-      restoredItems.push({
+      const restoredItem = restoreLibraryItem({
         status: defaultStatus,
         elements: item,
         id: randomId(),
         created: Date.now(),
       });
+      if (restoredItem) {
+        restoredItems.push(restoredItem);
+      }
     } else {
-      const _item = item as MarkOptional<LibraryItem, "id" | "status">;
+      const _item = item as MarkOptional<
-      restoredItems.push({
+        LibraryItem,
+        "id" | "status" | "created"
+      >;
+      const restoredItem = restoreLibraryItem({
         ..._item,
         id: _item.id || randomId(),
         status: _item.status || defaultStatus,
         created: _item.created || Date.now(),
       });
+      if (restoredItem) {
+        restoredItems.push(restoredItem);
+      }
     }
   }
   return restoredItems;

src/element/Hyperlink.tsx

@@ -262,9 +262,7 @@ export const actionLink = register({
       commitToHistory: true,
     };
   },
-  trackEvent: (action, source) => {
+  trackEvent: { category: "hyperlink", action: "click" },
-    trackEvent("hyperlink", "edit", source);
-  },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
   contextItemLabel: (elements, appState) =>
     getContextMenuLabel(elements, appState),
@@ -337,6 +335,9 @@ export const isPointHittingLinkIcon = (
   [x, y]: Point,
   isMobile: boolean,
 ) => {
+  if (!element.link || appState.selectedElementIds[element.id]) {
+    return false;
+  }
   const threshold = 4 / appState.zoom.value;
   if (
     !isMobile &&

src/element/binding.ts

@@ -255,7 +255,8 @@ export const getHoveredElementForBinding = (
   const hoveredElement = getElementAtPosition(
     scene.getElements(),
     (element) =>
-      isBindableElement(element) && bindingBorderTest(element, pointerCoords),
+      isBindableElement(element, false) &&
+      bindingBorderTest(element, pointerCoords),
   );
   return hoveredElement as NonDeleted<ExcalidrawBindableElement> | null;
 };
@@ -456,13 +457,13 @@ export const getEligibleElementsForBinding = (
 ): SuggestedBinding[] => {
   const includedElementIds = new Set(elements.map(({ id }) => id));
   return elements.flatMap((element) =>
-    isBindingElement(element)
+    isBindingElement(element, false)
       ? (getElligibleElementsForBindingElement(
           element as NonDeleted<ExcalidrawLinearElement>,
         ).filter(
           (element) => !includedElementIds.has(element.id),
         ) as SuggestedBinding[])
-      : isBindableElement(element)
+      : isBindableElement(element, false)
       ? getElligibleElementsForBindableElementAndWhere(element).filter(
           (binding) => !includedElementIds.has(binding[0].id),
         )
@@ -508,7 +509,7 @@ const getElligibleElementsForBindableElementAndWhere = (
   return Scene.getScene(bindableElement)!
     .getElements()
     .map((element) => {
-      if (!isBindingElement(element)) {
+      if (!isBindingElement(element, false)) {
         return null;
       }
       const canBindStart = isLinearElementEligibleForNewBindingByBindable(
@@ -659,28 +660,47 @@ export const fixBindingsAfterDeletion = (
   const deletedElementIds = new Set(
     deletedElements.map((element) => element.id),
   );
-  // Non deleted and need an update
+  // non-deleted which bindings need to be updated
-  const boundElementIds: Set<ExcalidrawElement["id"]> = new Set();
+  const affectedElements: Set<ExcalidrawElement["id"]> = new Set();
   deletedElements.forEach((deletedElement) => {
     if (isBindableElement(deletedElement)) {
       deletedElement.boundElements?.forEach((element) => {
         if (!deletedElementIds.has(element.id)) {
-          boundElementIds.add(element.id);
+          affectedElements.add(element.id);
         }
       });
+    } else if (isBindingElement(deletedElement)) {
+      if (deletedElement.startBinding) {
+        affectedElements.add(deletedElement.startBinding.elementId);
+      }
+      if (deletedElement.endBinding) {
+        affectedElements.add(deletedElement.endBinding.elementId);
+      }
     }
   });
-  (
+  sceneElements
-    sceneElements.filter(({ id }) =>
+    .filter(({ id }) => affectedElements.has(id))
-      boundElementIds.has(id),
+    .forEach((element) => {
-    ) as ExcalidrawLinearElement[]
+      if (isBindableElement(element)) {
-  ).forEach((element: ExcalidrawLinearElement) => {
+        mutateElement(element, {
-    const { startBinding, endBinding } = element;
+          boundElements: newBoundElementsAfterDeletion(
-    mutateElement(element, {
+            element.boundElements,
-      startBinding: newBindingAfterDeletion(startBinding, deletedElementIds),
+            deletedElementIds,
-      endBinding: newBindingAfterDeletion(endBinding, deletedElementIds),
+          ),
+        });
+      } else if (isBindingElement(element)) {
+        mutateElement(element, {
+          startBinding: newBindingAfterDeletion(
+            element.startBinding,
+            deletedElementIds,
+          ),
+          endBinding: newBindingAfterDeletion(
+            element.endBinding,
+            deletedElementIds,
+          ),
+        });
+      }
     });
-  });
 };
 
 const newBindingAfterDeletion = (
@@ -692,3 +712,13 @@ const newBindingAfterDeletion = (
   }
   return binding;
 };
+
+const newBoundElementsAfterDeletion = (
+  boundElements: ExcalidrawElement["boundElements"],
+  deletedElementIds: Set<ExcalidrawElement["id"]>,
+) => {
+  if (!boundElements) {
+    return null;
+  }
+  return boundElements.filter((ele) => !deletedElementIds.has(ele.id));
+};

src/element/collision.ts

@@ -25,6 +25,7 @@ import {
   ExcalidrawFreeDrawElement,
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  ExcalidrawCustomElement,
 } from "./types";
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@@ -32,13 +33,20 @@ import { Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
-import { hasBoundTextElement, isImageElement } from "./typeChecks";
+import {
+  hasBoundTextElement,
+  isCustomElement,
+  isImageElement,
+} from "./typeChecks";
 import { isTextElement } from ".";
 import { isTransparent } from "../utils";
 
 const isElementDraggableFromInside = (
   element: NonDeletedExcalidrawElement,
 ): boolean => {
+  if (isCustomElement(element)) {
+    return true;
+  }
   if (element.type === "arrow") {
     return false;
   }
@@ -166,6 +174,7 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
     case "text":
     case "diamond":
     case "ellipse":
+    case "custom":
       const distance = distanceToBindableElement(args.element, args.point);
       return args.check(distance, args.threshold);
     case "freedraw": {
@@ -199,6 +208,7 @@ export const distanceToBindableElement = (
     case "rectangle":
     case "image":
     case "text":
+    case "custom":
       return distanceToRectangle(element, point);
     case "diamond":
       return distanceToDiamond(element, point);
@@ -228,7 +238,8 @@ const distanceToRectangle = (
     | ExcalidrawRectangleElement
     | ExcalidrawTextElement
     | ExcalidrawFreeDrawElement
-    | ExcalidrawImageElement,
+    | ExcalidrawImageElement
+    | ExcalidrawCustomElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@@ -504,6 +515,7 @@ export const determineFocusDistance = (
     case "rectangle":
     case "image":
     case "text":
+    case "custom":
       return c / (hwidth * (nabs + q * mabs));
     case "diamond":
       return mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
@@ -536,6 +548,7 @@ export const determineFocusPoint = (
     case "image":
     case "text":
     case "diamond":
+    case "custom":
       point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
       break;
     case "ellipse":
@@ -586,6 +599,7 @@ const getSortedElementLineIntersections = (
     case "image":
     case "text":
     case "diamond":
+    case "custom":
       const corners = getCorners(element);
       intersections = corners
         .flatMap((point, i) => {
@@ -619,7 +633,8 @@ const getCorners = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement,
+    | ExcalidrawTextElement
+    | ExcalidrawCustomElement,
   scale: number = 1,
 ): GA.Point[] => {
   const hx = (scale * element.width) / 2;
@@ -628,6 +643,7 @@ const getCorners = (
     case "rectangle":
     case "image":
     case "text":
+    case "custom":
       return [
         GA.point(hx, hy),
         GA.point(hx, -hy),
@@ -770,7 +786,8 @@ export const findFocusPointForRectangulars = (
     | ExcalidrawRectangleElement
     | ExcalidrawImageElement
     | ExcalidrawDiamondElement
-    | ExcalidrawTextElement,
+    | ExcalidrawTextElement
+    | ExcalidrawCustomElement,
   // Between -1 and 1 for how far away should the focus point be relative
   // to the size of the element. Sign determines orientation.
   relativeDistance: number,

src/element/dragElements.ts

@@ -92,7 +92,7 @@ export const getDragOffsetXY = (
 
 export const dragNewElement = (
   draggingElement: NonDeletedExcalidrawElement,
-  elementType: AppState["elementType"],
+  elementType: AppState["activeTool"]["type"],
   originX: number,
   originY: number,
   x: number,

src/element/image.ts

@@ -106,6 +106,20 @@ export const normalizeSVG = async (SVGString: string) => {
       svg.setAttribute("xmlns", SVG_NS);
     }
 
+    if (!svg.hasAttribute("width") || !svg.hasAttribute("height")) {
+      const viewBox = svg.getAttribute("viewBox");
+      let width = svg.getAttribute("width") || "50";
+      let height = svg.getAttribute("height") || "50";
+      if (viewBox) {
+        const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
+        if (match) {
+          [, width, height] = match;
+        }
+      }
+      svg.setAttribute("width", width);
+      svg.setAttribute("height", height);
+    }
+
     return svg.outerHTML;
   }
 };

src/element/linearElementEditor.ts

@@ -205,7 +205,7 @@ export class LinearElementEditor {
       );
 
       // suggest bindings for first and last point if selected
-      if (isBindingElement(element)) {
+      if (isBindingElement(element, false)) {
         const coords: { x: number; y: number }[] = [];
 
         const firstSelectedIndex = selectedPointsIndices[0];

src/element/newElement.test.ts

@@ -2,11 +2,7 @@ import { duplicateElement } from "./newElement";
 import { mutateElement } from "./mutateElement";
 import { API } from "../tests/helpers/api";
 import { FONT_FAMILY } from "../constants";
-
+import { isPrimitive } from "../utils";
-const isPrimitive = (val: any) => {
-  const type = typeof val;
-  return val == null || (type !== "object" && type !== "function");
-};
 
 const assertCloneObjects = (source: any, clone: any) => {
   for (const key in clone) {

src/element/newElement.ts

@@ -12,6 +12,7 @@ import {
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
   ExcalidrawRectangleElement,
+  ExcalidrawCustomElement,
 } from "../element/types";
 import { getFontString, getUpdatedTimestamp, isTestEnv } from "../utils";
 import { randomInteger, randomId } from "../random";
@@ -56,6 +57,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     strokeSharpness,
     boundElements = null,
     link = null,
+    locked,
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
@@ -83,6 +85,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     boundElements,
     updated: getUpdatedTimestamp(),
     link,
+    locked,
   };
   return element;
 };
@@ -318,6 +321,17 @@ export const newImageElement = (
   };
 };
 
+export const newCustomElement = (
+  customType: string,
+  opts: {
+    type: ExcalidrawCustomElement["type"];
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawCustomElement> => {
+  return {
+    ..._newElementBase<ExcalidrawCustomElement>("custom", opts),
+    customType,
+  };
+};
 // Simplified deep clone for the purpose of cloning ExcalidrawElement only
 // (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)
 //

src/element/resizeElements.ts

@@ -12,6 +12,7 @@ import {
   ExcalidrawTextElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
+  ExcalidrawElement,
 } from "./types";
 import {
   getElementAbsoluteCoords,
@@ -186,7 +187,7 @@ const validateTwoPointElementNormalized = (
 };
 
 const getPerfectElementSizeWithRotation = (
-  elementType: string,
+  elementType: ExcalidrawElement["type"],
   width: number,
   height: number,
   angle: number,

src/element/showSelectedShapeActions.ts

@@ -10,6 +10,6 @@ export const showSelectedShapeActions = (
     !appState.viewModeEnabled &&
       (appState.editingElement ||
         getSelectedElements(elements, appState).length ||
-        (appState.elementType !== "selection" &&
+        (appState.activeTool.type !== "selection" &&
-          appState.elementType !== "eraser")),
+          appState.activeTool.type !== "eraser")),
   );

src/element/sizeHelpers.ts

@@ -2,6 +2,7 @@ import { ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
+import { AppState } from "../types";
 
 export const isInvisiblySmallElement = (
   element: ExcalidrawElement,
@@ -16,7 +17,7 @@ export const isInvisiblySmallElement = (
  * Makes a perfect shape or diagonal/horizontal/vertical line
  */
 export const getPerfectElementSize = (
-  elementType: string,
+  elementType: AppState["activeTool"]["type"],
   width: number,
   height: number,
 ): { width: number; height: number } => {

src/element/textElement.ts

@@ -10,13 +10,11 @@ import { mutateElement } from "./mutateElement";
 import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
-import { AppState } from "../types";
 import { isTextElement } from ".";
 
 export const redrawTextBoundingBox = (
   element: ExcalidrawTextElement,
   container: ExcalidrawElement | null,
-  appState: AppState,
 ) => {
   const maxWidth = container
     ? container.width - BOUND_TEXT_PADDING * 2
@@ -35,12 +33,12 @@ export const redrawTextBoundingBox = (
     getFontString(element),
     maxWidth,
   );
-
   let coordY = element.y;
+  let coordX = element.x;
   // Resize container and vertically center align the text
   if (container) {
     let nextHeight = container.height;
-
+    coordX = container.x + BOUND_TEXT_PADDING;
     if (element.verticalAlign === VERTICAL_ALIGN.TOP) {
       coordY = container.y + BOUND_TEXT_PADDING;
     } else if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
@@ -55,12 +53,12 @@ export const redrawTextBoundingBox = (
     }
     mutateElement(container, { height: nextHeight });
   }
-
   mutateElement(element, {
     width: metrics.width,
     height: metrics.height,
     baseline: metrics.baseline,
     y: coordY,
+    x: coordX,
     text,
   });
 };

src/element/textWysiwyg.test.tsx

@@ -544,6 +544,29 @@ describe("textWysiwyg", () => {
       expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null);
     });
 
+    it("should'nt bind text to container when not double clicked on center", async () => {
+      expect(h.elements.length).toBe(1);
+      expect(h.elements[0].id).toBe(rectangle.id);
+
+      // clicking somewhere on top left
+      mouse.doubleClickAt(rectangle.x + 20, rectangle.y + 20);
+      expect(h.elements.length).toBe(2);
+
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(null);
+      mouse.down();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(rectangle.boundElements).toBe(null);
+    });
+
     it("should update font family correctly on undo/redo by selecting bounded text when font family was updated", async () => {
       expect(h.elements.length).toBe(1);
 
@@ -704,7 +727,7 @@ describe("textWysiwyg", () => {
       expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
     });
 
-    it("should unbind bound text when unbind action from context menu is triggred", async () => {
+    it("should unbind bound text when unbind action from context menu is triggered", async () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);
 
@@ -745,5 +768,47 @@ describe("textWysiwyg", () => {
         null,
       );
     });
+    it("shouldn't bind to container if container has bound text", async () => {
+      expect(h.elements.length).toBe(1);
+
+      Keyboard.withModifierKeys({}, () => {
+        Keyboard.keyPress(KEYS.ENTER);
+      });
+
+      expect(h.elements.length).toBe(2);
+
+      // Bind first text
+      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.containerId).toBe(rectangle.id);
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+
+      // Attempt to bind another text
+      UI.clickTool("text");
+      mouse.clickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+      mouse.down();
+      expect(h.elements.length).toBe(3);
+      text = h.elements[2] as ExcalidrawTextElementWithContainer;
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Whats up?" } });
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: h.elements[1].id, type: "text" },
+      ]);
+      expect(text.containerId).toBe(null);
+    });
   });
 });

src/element/textWysiwyg.tsx

@@ -102,9 +102,11 @@ export const textWysiwyg = ({
 
   const updateWysiwygStyle = () => {
     const appState = app.state;
-    const updatedElement = Scene.getScene(element)?.getElement(
+    const updatedElement =
-      id,
+      Scene.getScene(element)?.getElement<ExcalidrawTextElement>(id);
-    ) as ExcalidrawTextElement;
+    if (!updatedElement) {
+      return;
+    }
     const { textAlign, verticalAlign } = updatedElement;
 
     const approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
@@ -281,7 +283,14 @@ export const textWysiwyg = ({
       // using scrollHeight here since we need to calculate
       // number of lines so cannot use editable.style.height
       // as that gets updated below
-      const lines = editable.scrollHeight / getApproxLineHeight(font);
+      // Rounding here so that the lines calculated is more accurate in all browsers.
+      // The scrollHeight and approxLineHeight differs in diff browsers
+      // eg it gives 1.05 in firefox for handewritten small font due to which
+      // height gets updated as lines > 1 and leads to jumping text for first line in bound container
+      // hence rounding here to avoid that
+      const lines = Math.round(
+        editable.scrollHeight / getApproxLineHeight(font),
+      );
       // auto increase height only when lines  > 1 so its
       // measured correctly and vertically aligns for
       // first line as well as setting height to "auto"
@@ -296,7 +305,6 @@ export const textWysiwyg = ({
             font,
             container!.width,
           ).split("\n").length;
-
           // This is browser behaviour when setting height to "auto"
           // It sets the height needed for 2 lines even if actual
           // line count is 1 as mentioned above as well
@@ -314,8 +322,6 @@ export const textWysiwyg = ({
   }
 
   editable.onkeydown = (event) => {
-    event.stopPropagation();
-
     if (!event.shiftKey && actionZoomIn.keyTest(event)) {
       event.preventDefault();
       app.actionManager.executeAction(actionZoomIn);

src/element/transformHandles.ts

@@ -222,6 +222,13 @@ export const getTransformHandles = (
   zoom: Zoom,
   pointerType: PointerType = "mouse",
 ): TransformHandles => {
+  // so that when locked element is selected (especially when you toggle lock
+  // via keyboard) the locked element is visually distinct, indicating
+  // you can't move/resize
+  if (element.locked) {
+    return {};
+  }
+
   let omitSides: { [T in TransformHandleType]?: boolean } = {};
   if (
     element.type === "arrow" ||

src/element/typeChecks.ts

@@ -10,6 +10,7 @@ import {
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
   ExcalidrawTextContainer,
+  ExcalidrawCustomElement,
 } from "./types";
 
 export const isGenericElement = (
@@ -61,7 +62,7 @@ export const isLinearElement = (
 };
 
 export const isLinearElementType = (
-  elementType: AppState["elementType"],
+  elementType: AppState["activeTool"]["type"],
 ): boolean => {
   return (
     elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
@@ -70,21 +71,28 @@ export const isLinearElementType = (
 
 export const isBindingElement = (
   element?: ExcalidrawElement | null,
+  includeLocked = true,
 ): element is ExcalidrawLinearElement => {
-  return element != null && isBindingElementType(element.type);
+  return (
+    element != null &&
+    (!element.locked || includeLocked === true) &&
+    isBindingElementType(element.type)
+  );
 };
 
 export const isBindingElementType = (
-  elementType: AppState["elementType"],
+  elementType: AppState["activeTool"]["type"],
 ): boolean => {
   return elementType === "arrow";
 };
 
 export const isBindableElement = (
   element: ExcalidrawElement | null,
+  includeLocked = true,
 ): element is ExcalidrawBindableElement => {
   return (
     element != null &&
+    (!element.locked || includeLocked === true) &&
     (element.type === "rectangle" ||
       element.type === "diamond" ||
       element.type === "ellipse" ||
@@ -95,9 +103,11 @@ export const isBindableElement = (
 
 export const isTextBindableContainer = (
   element: ExcalidrawElement | null,
+  includeLocked = true,
 ): element is ExcalidrawTextContainer => {
   return (
     element != null &&
+    (!element.locked || includeLocked === true) &&
     (element.type === "rectangle" ||
       element.type === "diamond" ||
       element.type === "ellipse" ||
@@ -133,3 +143,7 @@ export const isBoundToContainer = (
     element !== null && isTextElement(element) && element.containerId !== null
   );
 };
+
+export const isCustomElement = (
+  element: ExcalidrawElement,
+): element is ExcalidrawCustomElement => element && element.type === "custom";

src/element/types.ts

@@ -55,6 +55,7 @@ type _ExcalidrawElementBase = Readonly<{
   /** epoch (ms) timestamp of last element update */
   updated: number;
   link: string | null;
+  locked: boolean;
 }>;
 
 export type ExcalidrawSelectionElement = _ExcalidrawElementBase & {
@@ -83,6 +84,9 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase &
     scale: [number, number];
   }>;
 
+export type ExcalidrawCustomElement = _ExcalidrawElementBase &
+  Readonly<{ type: "custom"; customType: string }>;
+
 export type InitializedExcalidrawImageElement = MarkNonNullable<
   ExcalidrawImageElement,
   "fileId"
@@ -107,7 +111,8 @@ export type ExcalidrawElement =
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
   | ExcalidrawFreeDrawElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawCustomElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: boolean;
@@ -133,7 +138,8 @@ export type ExcalidrawBindableElement =
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
   | ExcalidrawTextElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawCustomElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement

src/excalidraw-app/app_constants.ts

@@ -11,12 +11,12 @@ export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)
 export const FILE_CACHE_MAX_AGE_SEC = 31536000;
 
-export const BROADCAST = {
+export const WS_EVENTS = {
   SERVER_VOLATILE: "server-volatile-broadcast",
   SERVER: "server-broadcast",
 };
 
-export enum SCENE {
+export enum WS_SCENE_EVENT_TYPES {
   INIT = "SCENE_INIT",
   UPDATE = "SCENE_UPDATE",
 }

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -11,6 +11,7 @@ import {
 import { getSceneVersion } from "../../packages/excalidraw/index";
 import { Collaborator, Gesture } from "../../types";
 import {
+  getFrame,
   preventUnload,
   resolvablePromise,
   withBatchedUpdates,
@@ -21,7 +22,7 @@ import {
   FIREBASE_STORAGE_PREFIXES,
   INITIAL_SCENE_UPDATE_TIMEOUT,
   LOAD_IMAGES_TIMEOUT,
-  SCENE,
+  WS_SCENE_EVENT_TYPES,
   STORAGE_KEYS,
   SYNC_FULL_SCENE_INTERVAL_MS,
 } from "../app_constants";
@@ -67,6 +68,7 @@ import {
 } from "./reconciliation";
 import { decryptData } from "../../data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
+import { LocalData } from "../data/LocalData";
 
 interface CollabState {
   modalIsShown: boolean;
@@ -86,7 +88,7 @@ export interface CollabAPI {
   onPointerUpdate: CollabInstance["onPointerUpdate"];
   initializeSocketClient: CollabInstance["initializeSocketClient"];
   onCollabButtonClick: CollabInstance["onCollabButtonClick"];
-  broadcastElements: CollabInstance["broadcastElements"];
+  syncElements: CollabInstance["syncElements"];
   fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
   setUsername: (username: string) => void;
 }
@@ -108,10 +110,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   portal: Portal;
   fileManager: FileManager;
   excalidrawAPI: Props["excalidrawAPI"];
-  isCollaborating: boolean = false;
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
 
+  // marked as private to ensure we don't change it outside this class
+  private _isCollaborating: boolean = false;
   private socketInitializationTimer?: number;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
   private collaborators = new Map<string, Collaborator>();
@@ -192,6 +195,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     }
   }
 
+  isCollaborating = () => this._isCollaborating;
+
   private onUnload = () => {
     this.destroySocketClient({ isUnload: true });
   };
@@ -202,7 +207,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     );
 
     if (
-      this.isCollaborating &&
+      this._isCollaborating &&
       (this.fileManager.shouldPreventUnload(syncableElements) ||
         !isSavedToFirebase(this.portal, syncableElements))
     ) {
@@ -227,27 +232,40 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   });
 
   saveCollabRoomToFirebase = async (
-    syncableElements: readonly ExcalidrawElement[] = this.getSyncableElements(
+    syncableElements: readonly ExcalidrawElement[],
-      this.excalidrawAPI.getSceneElementsIncludingDeleted(),
-    ),
   ) => {
     try {
-      await saveToFirebase(this.portal, syncableElements);
+      const savedData = await saveToFirebase(
+        this.portal,
+        syncableElements,
+        this.excalidrawAPI.getAppState(),
+      );
+
+      if (this.isCollaborating() && savedData && savedData.reconciledElements) {
+        this.handleRemoteSceneUpdate(
+          this.reconcileElements(savedData.reconciledElements),
+        );
+      }
     } catch (error: any) {
       console.error(error);
     }
   };
 
   openPortal = async () => {
-    trackEvent("share", "room creation");
+    trackEvent("share", "room creation", `ui (${getFrame()})`);
     return this.initializeSocketClient(null);
   };
 
   closePortal = () => {
     this.queueBroadcastAllElements.cancel();
+    this.queueSaveToFirebase.cancel();
     this.loadImageFiles.cancel();
 
-    this.saveCollabRoomToFirebase();
+    this.saveCollabRoomToFirebase(
+      this.getSyncableElements(
+        this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+      ),
+    );
     if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
       // hack to ensure that we prefer we disregard any new browser state
       // that could have been saved in other tabs while we were collaborating
@@ -284,7 +302,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       this.setState({
         activeRoomLink: "",
       });
-      this.isCollaborating = false;
+      this._isCollaborating = false;
+      LocalData.resumeSave("collaboration");
     }
     this.lastBroadcastedOrReceivedSceneVersion = -1;
     this.portal.close();
@@ -352,7 +371,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
     const scenePromise = resolvablePromise<ImportedDataState | null>();
 
-    this.isCollaborating = true;
+    this._isCollaborating = true;
+    LocalData.pauseSave("collaboration");
 
     const { default: socketIOClient } = await import(
       /* webpackChunkName: "socketIoClient" */ "socket.io-client"
@@ -393,10 +413,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         commitToHistory: true,
       });
 
-      this.broadcastElements(elements);
+      this.saveCollabRoomToFirebase(this.getSyncableElements(elements));
-
-      const syncableElements = this.getSyncableElements(elements);
-      this.saveCollabRoomToFirebase(syncableElements);
     }
 
     // fallback in case you're not alone in the room but still don't receive
@@ -426,7 +443,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         switch (decryptedData.type) {
           case "INVALID_RESPONSE":
             return;
-          case SCENE.INIT: {
+          case WS_SCENE_EVENT_TYPES.INIT: {
             if (!this.portal.socketInitialized) {
               this.initializeRoom({ fetchScene: false });
               const remoteElements = decryptedData.payload.elements;
@@ -442,7 +459,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             }
             break;
           }
-          case SCENE.UPDATE:
+          case WS_SCENE_EVENT_TYPES.UPDATE:
             this.handleRemoteSceneUpdate(
               this.reconcileElements(decryptedData.payload.elements),
             );
@@ -704,15 +721,20 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       getSceneVersion(elements) >
       this.getLastBroadcastedOrReceivedSceneVersion()
     ) {
-      this.portal.broadcastScene(SCENE.UPDATE, elements, false);
+      this.portal.broadcastScene(WS_SCENE_EVENT_TYPES.UPDATE, elements, false);
       this.lastBroadcastedOrReceivedSceneVersion = getSceneVersion(elements);
       this.queueBroadcastAllElements();
     }
   };
 
+  syncElements = (elements: readonly ExcalidrawElement[]) => {
+    this.broadcastElements(elements);
+    this.queueSaveToFirebase();
+  };
+
   queueBroadcastAllElements = throttle(() => {
     this.portal.broadcastScene(
-      SCENE.UPDATE,
+      WS_SCENE_EVENT_TYPES.UPDATE,
       this.excalidrawAPI.getSceneElementsIncludingDeleted(),
       true,
     );
@@ -724,6 +746,16 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.setLastBroadcastedOrReceivedSceneVersion(newVersion);
   }, SYNC_FULL_SCENE_INTERVAL_MS);
 
+  queueSaveToFirebase = throttle(() => {
+    if (this.portal.socketInitialized) {
+      this.saveCollabRoomToFirebase(
+        this.getSyncableElements(
+          this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+        ),
+      );
+    }
+  }, SYNC_FULL_SCENE_INTERVAL_MS);
+
   handleClose = () => {
     this.setState({ modalIsShown: false });
   };
@@ -759,12 +791,12 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       this.contextValue = {} as CollabAPI;
     }
 
-    this.contextValue.isCollaborating = () => this.isCollaborating;
+    this.contextValue.isCollaborating = this.isCollaborating;
     this.contextValue.username = this.state.username;
     this.contextValue.onPointerUpdate = this.onPointerUpdate;
     this.contextValue.initializeSocketClient = this.initializeSocketClient;
     this.contextValue.onCollabButtonClick = this.onCollabButtonClick;
-    this.contextValue.broadcastElements = this.broadcastElements;
+    this.contextValue.syncElements = this.syncElements;
     this.contextValue.fetchImageFilesFromFirebase =
       this.fetchImageFilesFromFirebase;
     this.contextValue.setUsername = this.setUsername;

src/excalidraw-app/collab/Portal.tsx

@@ -3,7 +3,11 @@ import { SocketUpdateData, SocketUpdateDataSource } from "../data";
 import CollabWrapper from "./CollabWrapper";
 
 import { ExcalidrawElement } from "../../element/types";
-import { BROADCAST, FILE_UPLOAD_TIMEOUT, SCENE } from "../app_constants";
+import {
+  WS_EVENTS,
+  FILE_UPLOAD_TIMEOUT,
+  WS_SCENE_EVENT_TYPES,
+} from "../app_constants";
 import { UserIdleState } from "../../types";
 import { trackEvent } from "../../analytics";
 import { throttle } from "lodash";
@@ -37,7 +41,7 @@ class Portal {
     });
     this.socket.on("new-user", async (_socketId: string) => {
       this.broadcastScene(
-        SCENE.INIT,
+        WS_SCENE_EVENT_TYPES.INIT,
         this.collab.getSceneElementsIncludingDeleted(),
         /* syncAll */ true,
       );
@@ -81,7 +85,7 @@ class Portal {
       const { encryptedBuffer, iv } = await encryptData(this.roomKey!, encoded);
 
       this.socket?.emit(
-        volatile ? BROADCAST.SERVER_VOLATILE : BROADCAST.SERVER,
+        volatile ? WS_EVENTS.SERVER_VOLATILE : WS_EVENTS.SERVER,
         this.roomId,
         encryptedBuffer,
         iv,
@@ -121,11 +125,11 @@ class Portal {
   }, FILE_UPLOAD_TIMEOUT);
 
   broadcastScene = async (
-    sceneType: SCENE.INIT | SCENE.UPDATE,
+    updateType: WS_SCENE_EVENT_TYPES.INIT | WS_SCENE_EVENT_TYPES.UPDATE,
     allElements: readonly ExcalidrawElement[],
     syncAll: boolean,
   ) => {
-    if (sceneType === SCENE.INIT && !syncAll) {
+    if (updateType === WS_SCENE_EVENT_TYPES.INIT && !syncAll) {
       throw new Error("syncAll must be true when sending SCENE.INIT");
     }
 
@@ -152,8 +156,8 @@ class Portal {
       [] as BroadcastedExcalidrawElement[],
     );
 
-    const data: SocketUpdateDataSource[typeof sceneType] = {
+    const data: SocketUpdateDataSource[typeof updateType] = {
-      type: sceneType,
+      type: updateType,
       payload: {
         elements: syncableElements,
       },
@@ -166,20 +170,9 @@ class Portal {
       );
     }
 
-    const broadcastPromise = this._broadcastSocketData(
-      data as SocketUpdateData,
-    );
-
     this.queueFileUpload();
 
-    if (syncAll && this.collab.isCollaborating) {
+    await this._broadcastSocketData(data as SocketUpdateData);
-      await Promise.all([
-        broadcastPromise,
-        this.collab.saveCollabRoomToFirebase(syncableElements),
-      ]);
-    } else {
-      await broadcastPromise;
-    }
   };
 
   broadcastIdleChange = (userState: UserIdleState) => {

src/excalidraw-app/collab/reconciliation.ts

@@ -78,8 +78,14 @@ export const reconcileElements = (
       continue;
     }
 
+    // Mark duplicate for removal as it'll be replaced with the remote element
     if (local) {
-      // mark for removal since it'll be replaced with the remote element
+      // Unless the ramote and local elements are the same element in which case
+      // we need to keep it as we'd otherwise discard it from the resulting
+      // array.
+      if (local[0] === remoteElement) {
+        continue;
+      }
       duplicates.set(local[0], true);
     }
 

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -13,6 +13,8 @@ import { isInitializedImageElement } from "../../element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
 import { encodeFilesForUpload } from "../data/FileManager";
 import { MIME_TYPES } from "../../constants";
+import { trackEvent } from "../../analytics";
+import { getFrame } from "../../utils";
 
 const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -92,6 +94,7 @@ export const ExportToExcalidrawPlus: React.FC<{
         showAriaLabel={true}
         onClick={async () => {
           try {
+            trackEvent("export", "eplus", `ui (${getFrame()})`);
             await exportToExcalidrawPlus(elements, appState, files);
           } catch (error: any) {
             console.error(error);

src/excalidraw-app/data/LocalData.ts

@@ -0,0 +1,154 @@
+/**
+ * This file deals with saving data state (appState, elements, images, ...)
+ * locally to the browser.
+ *
+ * Notes:
+ *
+ * - DataState refers to full state of the app: appState, elements, images,
+ *   though some state is saved separately (collab username, library) for one
+ *   reason or another. We also save different data to different sotrage
+ *   (localStorage, indexedDB).
+ */
+
+import { createStore, keys, del, getMany, set } from "idb-keyval";
+import { clearAppStateForLocalStorage } from "../../appState";
+import { clearElementsForLocalStorage } from "../../element";
+import { ExcalidrawElement, FileId } from "../../element/types";
+import { AppState, BinaryFileData, BinaryFiles } from "../../types";
+import { debounce } from "../../utils";
+import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
+import { FileManager } from "./FileManager";
+import { Locker } from "./Locker";
+import { updateBrowserStateVersion } from "./tabSync";
+
+const filesStore = createStore("files-db", "files-store");
+
+class LocalFileManager extends FileManager {
+  clearObsoleteFiles = async (opts: { currentFileIds: FileId[] }) => {
+    const allIds = await keys(filesStore);
+    for (const id of allIds) {
+      if (!opts.currentFileIds.includes(id as FileId)) {
+        del(id, filesStore);
+      }
+    }
+  };
+}
+
+const saveDataStateToLocalStorage = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) => {
+  try {
+    localStorage.setItem(
+      STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
+      JSON.stringify(clearElementsForLocalStorage(elements)),
+    );
+    localStorage.setItem(
+      STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
+      JSON.stringify(clearAppStateForLocalStorage(appState)),
+    );
+    updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
+  } catch (error: any) {
+    // Unable to access window.localStorage
+    console.error(error);
+  }
+};
+
+type SavingLockTypes = "collaboration";
+
+export class LocalData {
+  private static _save = debounce(
+    async (
+      elements: readonly ExcalidrawElement[],
+      appState: AppState,
+      files: BinaryFiles,
+      onFilesSaved: () => void,
+    ) => {
+      saveDataStateToLocalStorage(elements, appState);
+
+      await this.fileStorage.saveFiles({
+        elements,
+        files,
+      });
+      onFilesSaved();
+    },
+    SAVE_TO_LOCAL_STORAGE_TIMEOUT,
+  );
+
+  /** Saves DataState, including files. Bails if saving is paused */
+  static save = (
+    elements: readonly ExcalidrawElement[],
+    appState: AppState,
+    files: BinaryFiles,
+    onFilesSaved: () => void,
+  ) => {
+    // we need to make the `isSavePaused` check synchronously (undebounced)
+    if (!this.isSavePaused()) {
+      this._save(elements, appState, files, onFilesSaved);
+    }
+  };
+
+  static flushSave = () => {
+    this._save.flush();
+  };
+
+  private static locker = new Locker<SavingLockTypes>();
+
+  static pauseSave = (lockType: SavingLockTypes) => {
+    this.locker.lock(lockType);
+  };
+
+  static resumeSave = (lockType: SavingLockTypes) => {
+    this.locker.unlock(lockType);
+  };
+
+  static isSavePaused = () => {
+    return document.hidden || this.locker.isLocked();
+  };
+
+  // ---------------------------------------------------------------------------
+
+  static fileStorage = new LocalFileManager({
+    getFiles(ids) {
+      return getMany(ids, filesStore).then(
+        (filesData: (BinaryFileData | undefined)[]) => {
+          const loadedFiles: BinaryFileData[] = [];
+          const erroredFiles = new Map<FileId, true>();
+          filesData.forEach((data, index) => {
+            const id = ids[index];
+            if (data) {
+              loadedFiles.push(data);
+            } else {
+              erroredFiles.set(id, true);
+            }
+          });
+
+          return { loadedFiles, erroredFiles };
+        },
+      );
+    },
+    async saveFiles({ addedFiles }) {
+      const savedFiles = new Map<FileId, true>();
+      const erroredFiles = new Map<FileId, true>();
+
+      // before we use `storage` event synchronization, let's update the flag
+      // optimistically. Hopefully nothing fails, and an IDB read executed
+      // before an IDB write finishes will read the latest value.
+      updateBrowserStateVersion(STORAGE_KEYS.VERSION_FILES);
+
+      await Promise.all(
+        [...addedFiles].map(async ([id, fileData]) => {
+          try {
+            await set(id, fileData, filesStore);
+            savedFiles.set(id, true);
+          } catch (error: any) {
+            console.error(error);
+            erroredFiles.set(id, true);
+          }
+        }),
+      );
+
+      return { savedFiles, erroredFiles };
+    },
+  });
+}

src/excalidraw-app/data/Locker.ts

@@ -0,0 +1,18 @@
+export class Locker<T extends string> {
+  private locks = new Map<T, true>();
+
+  lock = (lockType: T) => {
+    this.locks.set(lockType, true);
+  };
+
+  /** @returns whether no locks remaining */
+  unlock = (lockType: T) => {
+    this.locks.delete(lockType);
+    return !this.isLocked();
+  };
+
+  /** @returns whether some (or specific) locks are present */
+  isLocked(lockType?: T) {
+    return lockType ? this.locks.has(lockType) : !!this.locks.size;
+  }
+}

src/excalidraw-app/data/firebase.ts

@@ -2,11 +2,17 @@ import { ExcalidrawElement, FileId } from "../../element/types";
 import { getSceneVersion } from "../../element";
 import Portal from "../collab/Portal";
 import { restoreElements } from "../../data/restore";
-import { BinaryFileData, BinaryFileMetadata, DataURL } from "../../types";
+import {
+  AppState,
+  BinaryFileData,
+  BinaryFileMetadata,
+  DataURL,
+} from "../../types";
 import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
 import { decompressData } from "../../data/encode";
 import { encryptData, decryptData } from "../../data/encryption";
 import { MIME_TYPES } from "../../constants";
+import { reconcileElements } from "../collab/reconciliation";
 
 // private
 // -----------------------------------------------------------------------------
@@ -108,11 +114,13 @@ const encryptElements = async (
 };
 
 const decryptElements = async (
-  key: string,
+  data: FirebaseStoredScene,
-  iv: Uint8Array,
+  roomKey: string,
-  ciphertext: ArrayBuffer | Uint8Array,
 ): Promise<readonly ExcalidrawElement[]> => {
-  const decrypted = await decryptData(iv, ciphertext, key);
+  const ciphertext = data.ciphertext.toUint8Array();
+  const iv = data.iv.toUint8Array();
+
+  const decrypted = await decryptData(iv, ciphertext, roomKey);
   const decodedData = new TextDecoder("utf-8").decode(
     new Uint8Array(decrypted),
   );
@@ -171,57 +179,86 @@ export const saveFilesToFirebase = async ({
   return { savedFiles, erroredFiles };
 };
 
-export const saveToFirebase = async (
+const createFirebaseSceneDocument = async (
-  portal: Portal,
+  firebase: ResolutionType<typeof loadFirestore>,
   elements: readonly ExcalidrawElement[],
+  roomKey: string,
 ) => {
-  const { roomId, roomKey, socket } = portal;
-  if (
-    // if no room exists, consider the room saved because there's nothing we can
-    // do at this point
-    !roomId ||
-    !roomKey ||
-    !socket ||
-    isSavedToFirebase(portal, elements)
-  ) {
-    return true;
-  }
-
-  const firebase = await loadFirestore();
   const sceneVersion = getSceneVersion(elements);
   const { ciphertext, iv } = await encryptElements(roomKey, elements);
-
+  return {
-  const nextDocData = {
     sceneVersion,
     ciphertext: firebase.firestore.Blob.fromUint8Array(
       new Uint8Array(ciphertext),
     ),
     iv: firebase.firestore.Blob.fromUint8Array(iv),
   } as FirebaseStoredScene;
+};
 
-  const db = firebase.firestore();
+export const saveToFirebase = async (
-  const docRef = db.collection("scenes").doc(roomId);
+  portal: Portal,
-  const didUpdate = await db.runTransaction(async (transaction) => {
+  elements: readonly ExcalidrawElement[],
-    const doc = await transaction.get(docRef);
+  appState: AppState,
-    if (!doc.exists) {
+) => {
-      transaction.set(docRef, nextDocData);
+  const { roomId, roomKey, socket } = portal;
-      return true;
+  if (
-    }
+    // bail if no room exists as there's nothing we can do at this point
-
+    !roomId ||
-    const prevDocData = doc.data() as FirebaseStoredScene;
+    !roomKey ||
-    if (prevDocData.sceneVersion >= nextDocData.sceneVersion) {
+    !socket ||
-      return false;
+    isSavedToFirebase(portal, elements)
-    }
+  ) {
-
+    return false;
-    transaction.update(docRef, nextDocData);
-    return true;
-  });
-
-  if (didUpdate) {
-    firebaseSceneVersionCache.set(socket, sceneVersion);
   }
 
-  return didUpdate;
+  const firebase = await loadFirestore();
+  const firestore = firebase.firestore();
+
+  const docRef = firestore.collection("scenes").doc(roomId);
+
+  const savedData = await firestore.runTransaction(async (transaction) => {
+    const snapshot = await transaction.get(docRef);
+
+    if (!snapshot.exists) {
+      const sceneDocument = await createFirebaseSceneDocument(
+        firebase,
+        elements,
+        roomKey,
+      );
+
+      transaction.set(docRef, sceneDocument);
+
+      return {
+        sceneVersion: sceneDocument.sceneVersion,
+        reconciledElements: null,
+      };
+    }
+
+    const prevDocData = snapshot.data() as FirebaseStoredScene;
+    const prevElements = await decryptElements(prevDocData, roomKey);
+
+    const reconciledElements = reconcileElements(
+      elements,
+      prevElements,
+      appState,
+    );
+
+    const sceneDocument = await createFirebaseSceneDocument(
+      firebase,
+      reconciledElements,
+      roomKey,
+    );
+
+    transaction.update(docRef, sceneDocument);
+    return {
+      reconciledElements,
+      sceneVersion: sceneDocument.sceneVersion,
+    };
+  });
+
+  firebaseSceneVersionCache.set(socket, savedData.sceneVersion);
+
+  return savedData;
 };
 
 export const loadFromFirebase = async (
@@ -238,10 +275,7 @@ export const loadFromFirebase = async (
     return null;
   }
   const storedScene = doc.data() as FirebaseStoredScene;
-  const ciphertext = storedScene.ciphertext.toUint8Array();
+  const elements = await decryptElements(storedScene, roomKey);
-  const iv = storedScene.iv.toUint8Array();
-
-  const elements = await decryptElements(roomKey, iv, ciphertext);
 
   if (socket) {
     firebaseSceneVersionCache.set(socket, getSceneVersion(elements));

src/excalidraw-app/data/localStorage.ts

@@ -5,8 +5,8 @@ import {
   getDefaultAppState,
 } from "../../appState";
 import { clearElementsForLocalStorage } from "../../element";
-import { updateBrowserStateVersion } from "./tabSync";
 import { STORAGE_KEYS } from "../app_constants";
+import { ImportedDataState } from "../../data/types";
 
 export const saveUsernameToLocalStorage = (username: string) => {
   try {
@@ -34,26 +34,6 @@ export const importUsernameFromLocalStorage = (): string | null => {
   return null;
 };
 
-export const saveToLocalStorage = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-) => {
-  try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-      JSON.stringify(clearElementsForLocalStorage(elements)),
-    );
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-      JSON.stringify(clearAppStateForLocalStorage(appState)),
-    );
-    updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
-  } catch (error: any) {
-    // Unable to access window.localStorage
-    console.error(error);
-  }
-};
-
 export const importFromLocalStorage = () => {
   let savedElements = null;
   let savedState = null;
@@ -123,14 +103,13 @@ export const getTotalStorageSize = () => {
 
 export const getLibraryItemsFromStorage = () => {
   try {
-    const libraryItems =
+    const libraryItems: ImportedDataState["libraryItems"] = JSON.parse(
-      JSON.parse(
+      localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY) as string,
-        localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY) as string,
+    );
-      ) || [];
 
-    return libraryItems;
+    return libraryItems || [];
-  } catch (e) {
+  } catch (error) {
-    console.error(e);
+    console.error(error);
     return [];
   }
 };

src/excalidraw-app/index.scss

@@ -26,3 +26,9 @@
     }
   }
 }
+.excalidraw-app.is-collaborating {
+  [data-testid="clear-canvas-button"] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}

src/excalidraw-app/index.tsx

@@ -12,7 +12,6 @@ import {
   VERSION_TIMEOUT,
 } from "../constants";
 import { loadFromBlob } from "../data/blob";
-import { ImportedDataState } from "../data/types";
 import {
   ExcalidrawElement,
   FileId,
@@ -20,7 +19,8 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { Language, t } from "../i18n";
-import Excalidraw, {
+import {
+  Excalidraw,
   defaultLang,
   languages,
 } from "../packages/excalidraw/index";
@@ -28,12 +28,13 @@ import {
   AppState,
   LibraryItems,
   ExcalidrawImperativeAPI,
-  BinaryFileData,
   BinaryFiles,
+  ExcalidrawInitialDataState,
 } from "../types";
 import {
   debounce,
   getVersion,
+  getFrame,
   isTestEnv,
   preventUnload,
   ResolvablePromise,
@@ -41,7 +42,6 @@ import {
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
-  SAVE_TO_LOCAL_STORAGE_TIMEOUT,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
@@ -56,7 +56,6 @@ import {
   getLibraryItemsFromStorage,
   importFromLocalStorage,
   importUsernameFromLocalStorage,
-  saveToLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restoreAppState, RestoredDataState } from "../data/restore";
@@ -66,72 +65,13 @@ import { shield } from "../components/icons";
 import "./index.scss";
 import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus";
 
-import { getMany, set, del, keys, createStore } from "idb-keyval";
+import { updateStaleImageStatuses } from "./data/FileManager";
-import { FileManager, updateStaleImageStatuses } from "./data/FileManager";
 import { newElementWith } from "../element/mutateElement";
 import { isInitializedImageElement } from "../element/typeChecks";
 import { loadFilesFromFirebase } from "./data/firebase";
-import {
+import { LocalData } from "./data/LocalData";
-  isBrowserStorageStateNewer,
+import { isBrowserStorageStateNewer } from "./data/tabSync";
-  updateBrowserStateVersion,
+import clsx from "clsx";
-} from "./data/tabSync";
-
-const filesStore = createStore("files-db", "files-store");
-
-const clearObsoleteFilesFromIndexedDB = async (opts: {
-  currentFileIds: FileId[];
-}) => {
-  const allIds = await keys(filesStore);
-  for (const id of allIds) {
-    if (!opts.currentFileIds.includes(id as FileId)) {
-      del(id, filesStore);
-    }
-  }
-};
-
-const localFileStorage = new FileManager({
-  getFiles(ids) {
-    return getMany(ids, filesStore).then(
-      (filesData: (BinaryFileData | undefined)[]) => {
-        const loadedFiles: BinaryFileData[] = [];
-        const erroredFiles = new Map<FileId, true>();
-        filesData.forEach((data, index) => {
-          const id = ids[index];
-          if (data) {
-            loadedFiles.push(data);
-          } else {
-            erroredFiles.set(id, true);
-          }
-        });
-
-        return { loadedFiles, erroredFiles };
-      },
-    );
-  },
-  async saveFiles({ addedFiles }) {
-    const savedFiles = new Map<FileId, true>();
-    const erroredFiles = new Map<FileId, true>();
-
-    // before we use `storage` event synchronization, let's update the flag
-    // optimistically. Hopefully nothing fails, and an IDB read executed
-    // before an IDB write finishes will read the latest value.
-    updateBrowserStateVersion(STORAGE_KEYS.VERSION_FILES);
-
-    await Promise.all(
-      [...addedFiles].map(async ([id, fileData]) => {
-        try {
-          await set(id, fileData, filesStore);
-          savedFiles.set(id, true);
-        } catch (error: any) {
-          console.error(error);
-          erroredFiles.set(id, true);
-        }
-      }),
-    );
-
-    return { savedFiles, erroredFiles };
-  },
-});
 
 const languageDetector = new LanguageDetector();
 languageDetector.init({
@@ -142,32 +82,10 @@ languageDetector.init({
   checkWhitelist: false,
 });
 
-const saveDebounced = debounce(
-  async (
-    elements: readonly ExcalidrawElement[],
-    appState: AppState,
-    files: BinaryFiles,
-    onFilesSaved: () => void,
-  ) => {
-    saveToLocalStorage(elements, appState);
-
-    await localFileStorage.saveFiles({
-      elements,
-      files,
-    });
-    onFilesSaved();
-  },
-  SAVE_TO_LOCAL_STORAGE_TIMEOUT,
-);
-
-const onBlur = () => {
-  saveDebounced.flush();
-};
-
 const initializeScene = async (opts: {
   collabAPI: CollabAPI;
 }): Promise<
-  { scene: ImportedDataState | null } & (
+  { scene: ExcalidrawInitialDataState | null } & (
     | { isExternalScene: true; id: string; key: string }
     | { isExternalScene: false; id?: null; key?: null }
   )
@@ -294,14 +212,15 @@ const ExcalidrawWrapper = () => {
   // ---------------------------------------------------------------------------
 
   const initialStatePromiseRef = useRef<{
-    promise: ResolvablePromise<ImportedDataState | null>;
+    promise: ResolvablePromise<ExcalidrawInitialDataState | null>;
   }>({ promise: null! });
   if (!initialStatePromiseRef.current.promise) {
     initialStatePromiseRef.current.promise =
-      resolvablePromise<ImportedDataState | null>();
+      resolvablePromise<ExcalidrawInitialDataState | null>();
   }
 
   useEffect(() => {
+    trackEvent("load", "frame", getFrame());
     // Delayed so that the app has a time to load the latest SW
     setTimeout(() => {
       trackEvent("load", "version", getVersion());
@@ -364,7 +283,7 @@ const ExcalidrawWrapper = () => {
           });
         } else if (isInitialLoad) {
           if (fileIds.length) {
-            localFileStorage
+            LocalData.fileStorage
               .getFiles(fileIds)
               .then(({ loadedFiles, erroredFiles }) => {
                 if (loadedFiles.length) {
@@ -379,7 +298,7 @@ const ExcalidrawWrapper = () => {
           }
           // on fresh load, clear unused files from IDB (from previous
           // session)
-          clearObsoleteFilesFromIndexedDB({ currentFileIds: fileIds });
+          LocalData.fileStorage.clearObsoleteFiles({ currentFileIds: fileIds });
         }
       }
 
@@ -456,7 +375,7 @@ const ExcalidrawWrapper = () => {
               return acc;
             }, [] as FileId[]) || [];
           if (fileIds.length) {
-            localFileStorage
+            LocalData.fileStorage
               .getFiles(fileIds)
               .then(({ loadedFiles, erroredFiles }) => {
                 if (loadedFiles.length) {
@@ -473,28 +392,50 @@ const ExcalidrawWrapper = () => {
       }
     }, SYNC_BROWSER_TABS_TIMEOUT);
 
+    const onUnload = () => {
+      LocalData.flushSave();
+    };
+
+    const visibilityChange = (event: FocusEvent | Event) => {
+      if (event.type === EVENT.BLUR || document.hidden) {
+        LocalData.flushSave();
+      }
+      if (
+        event.type === EVENT.VISIBILITY_CHANGE ||
+        event.type === EVENT.FOCUS
+      ) {
+        syncData();
+      }
+    };
+
     window.addEventListener(EVENT.HASHCHANGE, onHashChange, false);
-    window.addEventListener(EVENT.UNLOAD, onBlur, false);
+    window.addEventListener(EVENT.UNLOAD, onUnload, false);
-    window.addEventListener(EVENT.BLUR, onBlur, false);
+    window.addEventListener(EVENT.BLUR, visibilityChange, false);
-    document.addEventListener(EVENT.VISIBILITY_CHANGE, syncData, false);
+    document.addEventListener(EVENT.VISIBILITY_CHANGE, visibilityChange, false);
-    window.addEventListener(EVENT.FOCUS, syncData, false);
+    window.addEventListener(EVENT.FOCUS, visibilityChange, false);
     return () => {
       window.removeEventListener(EVENT.HASHCHANGE, onHashChange, false);
-      window.removeEventListener(EVENT.UNLOAD, onBlur, false);
+      window.removeEventListener(EVENT.UNLOAD, onUnload, false);
-      window.removeEventListener(EVENT.BLUR, onBlur, false);
+      window.removeEventListener(EVENT.BLUR, visibilityChange, false);
-      window.removeEventListener(EVENT.FOCUS, syncData, false);
+      window.removeEventListener(EVENT.FOCUS, visibilityChange, false);
-      document.removeEventListener(EVENT.VISIBILITY_CHANGE, syncData, false);
+      document.removeEventListener(
+        EVENT.VISIBILITY_CHANGE,
+        visibilityChange,
+        false,
+      );
       clearTimeout(titleTimeout);
     };
   }, [collabAPI, excalidrawAPI]);
 
   useEffect(() => {
     const unloadHandler = (event: BeforeUnloadEvent) => {
-      saveDebounced.flush();
+      LocalData.flushSave();
 
       if (
         excalidrawAPI &&
-        localFileStorage.shouldPreventUnload(excalidrawAPI.getSceneElements())
+        LocalData.fileStorage.shouldPreventUnload(
+          excalidrawAPI.getSceneElements(),
+        )
       ) {
         preventUnload(event);
       }
@@ -515,9 +456,13 @@ const ExcalidrawWrapper = () => {
     files: BinaryFiles,
   ) => {
     if (collabAPI?.isCollaborating()) {
-      collabAPI.broadcastElements(elements);
+      collabAPI.syncElements(elements);
-    } else {
+    }
-      saveDebounced(elements, appState, files, () => {
+
+    // this check is redundant, but since this is a hot path, it's best
+    // not to evaludate the nested expression every time
+    if (!LocalData.isSavePaused()) {
+      LocalData.save(elements, appState, files, () => {
         if (excalidrawAPI) {
           let didChange = false;
 
@@ -525,7 +470,9 @@ const ExcalidrawWrapper = () => {
           const elements = excalidrawAPI
             .getSceneElementsIncludingDeleted()
             .map((element) => {
-              if (localFileStorage.shouldUpdateImageElementStatus(element)) {
+              if (
+                LocalData.fileStorage.shouldUpdateImageElementStatus(element)
+              ) {
                 didChange = true;
                 const newEl = newElementWith(element, { status: "saved" });
                 if (pendingImageElement === element) {
@@ -685,11 +632,16 @@ const ExcalidrawWrapper = () => {
   };
 
   const onRoomClose = useCallback(() => {
-    localFileStorage.reset();
+    LocalData.fileStorage.reset();
   }, []);
 
   return (
-    <>
+    <div
+      style={{ height: "100%" }}
+      className={clsx("excalidraw-app", {
+        "is-collaborating": collabAPI?.isCollaborating(),
+      })}
+    >
       <Excalidraw
         ref={excalidrawRefCallback}
         onChange={onChange}
@@ -741,7 +693,7 @@ const ExcalidrawWrapper = () => {
           onClose={() => setErrorMessage("")}
         />
       )}
-    </>
+    </div>
   );
 };