remove debug

Co-authored-by: dwelle <luzar.david@gmail.com>

.env

@@ -1,5 +1,8 @@
-REACT_APP_BACKEND_V1_GET_URL=https://json.excalidraw.com/api/v1/
+REACT_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
-REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
-REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+
-REACT_APP_SOCKET_SERVER_URL=https://portal.excalidraw.com
+REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
-REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
+REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
+
+REACT_APP_SOCKET_SERVER_URL=http://localhost:3000
+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"}'

.env.production

@@ -1 +1,11 @@
+REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json.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_SOCKET_SERVER_URL=https://oss-collab-us1.excalidraw.com
+REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
+
+# production-only vars
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13

.eslintignore

@@ -5,3 +5,4 @@ package-lock.json
 firebase/
 dist/
 public/workbox
+src/packages/excalidraw/types

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["@excalidraw/eslint-config", "react-app"],
   "rules": {
-    "import/no-anonymous-default-export": "off"
+    "import/no-anonymous-default-export": "off",
+    "no-restricted-globals": "off"
   }
 }

.github/dependabot.yml

@@ -10,6 +10,7 @@ updates:
       - lipis
     assignees:
       - lipis
+    open-pull-requests-limit: 20
 
   - package-ecosystem: npm
     directory: /src/packages/excalidraw/
@@ -21,6 +22,7 @@ updates:
       - ad1992
     assignees:
       - ad1992
+    open-pull-requests-limit: 20
 
   - package-ecosystem: npm
     directory: /src/packages/utils/
@@ -32,3 +34,4 @@ updates:
       - ad1992
     assignees:
       - ad1992
+    open-pull-requests-limit: 20

.github/workflows/publish-docker.yml

@@ -11,7 +11,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: docker/build-push-action@v1
+      - uses: docker/build-push-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged

package.json

@@ -19,25 +19,28 @@
     ]
   },
   "dependencies": {
-    "@dwelle/browser-fs-access": "0.21.1",
-    "@excalidraw/random-username": "1.0.0",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.11.10",
+    "@testing-library/jest-dom": "5.15.0",
-    "@testing-library/react": "11.2.6",
+    "@testing-library/react": "12.1.2",
-    "@tldraw/vec": "0.0.106",
+    "@tldraw/vec": "0.1.3",
-    "@types/jest": "26.0.22",
+    "@types/jest": "27.0.2",
-    "@types/react": "17.0.3",
+    "@types/pica": "5.1.3",
-    "@types/react-dom": "17.0.3",
+    "@types/react": "17.0.34",
+    "@types/react-dom": "17.0.11",
     "@types/socket.io-client": "1.4.36",
+    "browser-fs-access": "0.21.1",
     "clsx": "1.1.1",
+    "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.0",
+    "i18next-browser-languagedetector": "6.1.2",
+    "idb-keyval": "6.0.3",
+    "image-blob-reduce": "3.0.1",
     "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.22",
+    "nanoid": "3.1.30",
-    "open-color": "1.8.0",
+    "open-color": "1.9.1",
     "pako": "1.0.11",
-    "perfect-freehand": "1.0.15",
+    "perfect-freehand": "1.0.16",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",
@@ -46,39 +49,39 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-scripts": "4.0.3",
-    "roughjs": "4.4.1",
+    "roughjs": "4.5.0",
-    "sass": "1.32.10",
+    "sass": "1.43.4",
     "socket.io-client": "2.3.1",
-    "typescript": "4.2.4"
+    "typescript": "4.5.2"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.0",
     "@excalidraw/prettier-config": "1.0.2",
+    "@types/chai": "4.2.22",
     "@types/lodash.throttle": "4.1.6",
-    "@types/pako": "1.0.1",
+    "@types/pako": "1.0.2",
-    "@types/resize-observer-browser": "0.1.5",
+    "@types/resize-observer-browser": "0.1.6",
+    "chai": "4.3.4",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.9.0",
+    "firebase-tools": "9.22.0",
-    "husky": "4.3.8",
+    "husky": "7.0.4",
     "jest-canvas-mock": "2.3.1",
-    "lint-staged": "10.5.4",
+    "lint-staged": "12.0.1",
     "pepjs": "0.5.3",
-    "prettier": "2.2.1",
+    "prettier": "2.4.1",
     "rewire": "5.0.0"
   },
+  "resolutions": {
+    "@typescript-eslint/typescript-estree": "5.3.0"
+  },
   "engines": {
     "node": ">=14.0.0"
   },
   "homepage": ".",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "jest": {
     "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|@dwelle/browser-fs-access)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
     ],
     "resetMocks": false
   },
@@ -97,6 +100,7 @@
     "fix": "yarn fix:other && yarn fix:code",
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "prepare": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",

public/index.html

@@ -13,18 +13,6 @@
 
     <meta name="theme-color" content="#000" />
 
-    <!-- Declarative Link Capturing (https://web.dev/declarative-link-capturing/) -->
-    <meta
-      http-equiv="origin-trial"
-      content="Ak3VyzTheARtX2CnxBZ3ZKxImB0mNyvDakmMxeAChgxrWFMZ3IGN64VP+uj36VxM5OegsbLmrP258b1xvqp7+Q8AAABbeyJvcmlnaW4iOiJodHRwczovL2V4Y2FsaWRyYXcuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJBcHBMaW5rQ2FwdHVyaW5nIiwiZXhwaXJ5IjoxNjM0MDgzMTk5fQ=="
-    />
-
-    <!-- File Handling (https://web.dev/file-handling/) -->
-    <meta
-      http-equiv="origin-trial"
-      content="AkMQsAnFmKfRfPKQHNCv2WmZREqgwkqhyt2M7aOwQiCStB+hPYnGnv+mNbkPDAsGXrwsj/waFi76wPzTDUaEeQ0AAABUeyJvcmlnaW4iOiJodHRwczovL2V4Y2FsaWRyYXcuY29tOjQ0MyIsImZlYXR1cmUiOiJGaWxlSGFuZGxpbmciLCJleHBpcnkiOjE2MzQwODMxOTl9"
-    />
-
     <!-- General tags -->
     <meta
       name="description"

public/manifest.json

@@ -26,7 +26,6 @@
       }
     }
   ],
-  "capture_links": "new-client",
   "share_target": {
     "action": "/web-share-target",
     "method": "POST",

scripts/autorelease.js

@@ -15,8 +15,8 @@ const publish = () => {
     execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
     execSync(`yarn run build:umd`, { cwd: excalidrawDir });
     execSync(`yarn --cwd ${excalidrawDir} publish`);
-  } catch (e) {
+  } catch (error) {
-    console.error(e);
+    console.error(error);
   }
 };
 
@@ -31,9 +31,11 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
   const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;
 
   const excalidrawPackageFiles = changedFiles.filter((file) => {
-    return file.indexOf("src") >= 0 && !filesToIgnoreRegex.test(file);
+    return (
+      (file.indexOf("src") >= 0 || file.indexOf("package.json")) >= 0 &&
+      !filesToIgnoreRegex.test(file)
+    );
   });
-
   if (!excalidrawPackageFiles.length) {
     process.exit(0);
   }
@@ -46,6 +48,5 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
   // update readme
   const data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
   fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
-
   publish();
 });

scripts/build-locales-coverage.js

@@ -1,11 +1,16 @@
 const { readdirSync, writeFileSync } = require("fs");
 const files = readdirSync(`${__dirname}/../src/locales`);
 
-const flatten = (object) =>
+const flatten = (object = {}, result = {}, extraKey = "") => {
-  Object.keys(object).reduce(
+  for (const key in object) {
-    (initial, current) => ({ ...initial, ...object[current] }),
+    if (typeof object[key] !== "object") {
-    {},
+      result[extraKey + key] = object[key];
-  );
+    } else {
+      flatten(object[key], result, `${extraKey}${key}.`);
+    }
+  }
+  return result;
+};
 
 const locales = files.filter(
   (file) => file !== "README.md" && file !== "percentages.json",
@@ -19,10 +24,8 @@ for (let index = 0; index < locales.length; index++) {
 
   const allKeys = Object.keys(data);
   const translatedKeys = allKeys.filter((item) => data[item] !== "");
-
+  const percentage = Math.floor((100 * translatedKeys.length) / allKeys.length);
-  const percentage = (100 * translatedKeys.length) / allKeys.length;
+  percentages[currentLocale.replace(".json", "")] = percentage;
-
-  percentages[currentLocale.replace(".json", "")] = parseInt(percentage);
 }
 
 writeFileSync(

scripts/locales-coverage-description.js

@@ -5,7 +5,9 @@ const THRESSHOLD = 85;
 const crowdinMap = {
   "ar-SA": "en-ar",
   "bg-BG": "en-bg",
+  "bn-BD": "en-bn",
   "ca-ES": "en-ca",
+  "da-DK": "en-da",
   "de-DE": "en-de",
   "el-GR": "en-el",
   "es-ES": "en-es",
@@ -31,11 +33,14 @@ const crowdinMap = {
   "pt-PT": "en-pt",
   "ro-RO": "en-ro",
   "ru-RU": "en-ru",
+  "si-LK": "en-silk",
   "sk-SK": "en-sk",
   "sv-SE": "en-sv",
+  "ta-IN": "en-ta",
   "tr-TR": "en-tr",
   "uk-UA": "en-uk",
   "zh-CN": "en-zhcn",
+  "zh-HK": "en-zhhk",
   "zh-TW": "en-zhtw",
   "lv-LV": "en-lv",
   "cs-CZ": "en-cs",
@@ -45,7 +50,10 @@ const crowdinMap = {
 const flags = {
   "ar-SA": "🇸🇦",
   "bg-BG": "🇧🇬",
+  "bn-BD": "🇧🇩",
   "ca-ES": "🏳",
+  "cs-CZ": "🇨🇿",
+  "da-DK": "🇩🇰",
   "de-DE": "🇩🇪",
   "el-GR": "🇬🇷",
   "es-ES": "🇪🇸",
@@ -59,7 +67,9 @@ const flags = {
   "it-IT": "🇮🇹",
   "ja-JP": "🇯🇵",
   "kab-KAB": "🏳",
+  "kk-KZ": "🇰🇿",
   "ko-KR": "🇰🇷",
+  "lv-LV": "🇱🇻",
   "my-MM": "🇲🇲",
   "nb-NO": "🇳🇴",
   "nl-NL": "🇳🇱",
@@ -71,21 +81,24 @@ const flags = {
   "pt-PT": "🇵🇹",
   "ro-RO": "🇷🇴",
   "ru-RU": "🇷🇺",
+  "si-LK": "🇱🇰",
   "sk-SK": "🇸🇰",
   "sv-SE": "🇸🇪",
+  "ta-IN": "🇮🇳",
   "tr-TR": "🇹🇷",
   "uk-UA": "🇺🇦",
   "zh-CN": "🇨🇳",
+  "zh-HK": "🇭🇰",
   "zh-TW": "🇹🇼",
-  "lv-LV": "🇱🇻",
-  "cs-CZ": "🇨🇿",
-  "kk-KZ": "🇰🇿",
 };
 
 const languages = {
   "ar-SA": "العربية",
   "bg-BG": "Български",
+  "bn-BD": "Bengali",
   "ca-ES": "Català",
+  "cs-CZ": "Česky",
+  "da-DK": "Dansk",
   "de-DE": "Deutsch",
   "el-GR": "Ελληνικά",
   "es-ES": "Español",
@@ -99,7 +112,9 @@ const languages = {
   "it-IT": "Italiano",
   "ja-JP": "日本語",
   "kab-KAB": "Taqbaylit",
+  "kk-KZ": "Қазақ тілі",
   "ko-KR": "한국어",
+  "lv-LV": "Latviešu",
   "my-MM": "Burmese",
   "nb-NO": "Norsk bokmål",
   "nl-NL": "Nederlands",
@@ -111,15 +126,15 @@ const languages = {
   "pt-PT": "Português",
   "ro-RO": "Română",
   "ru-RU": "Русский",
+  "si-LK": "සිංහල",
   "sk-SK": "Slovenčina",
   "sv-SE": "Svenska",
+  "ta-IN": "Tamil",
   "tr-TR": "Türkçe",
   "uk-UA": "Українська",
   "zh-CN": "简体中文",
+  "zh-HK": "繁體中文 (香港)",
   "zh-TW": "繁體中文",
-  "lv-LV": "Latviešu",
-  "cs-CZ": "Česky",
-  "kk-KZ": "Қазақ тілі",
 };
 
 const percentages = fs.readFileSync(

scripts/release.js

@@ -25,8 +25,8 @@ const release = async (nextVersion) => {
     );
     /* eslint-disable no-console */
     console.log("Done!");
-  } catch (e) {
+  } catch (error) {
-    console.error(e);
+    console.error(error);
     process.exit(1);
   }
 };

scripts/updateChangelog.js

@@ -28,8 +28,8 @@ const getCommitHashForLastVersion = async () => {
       `git log --format=format:"%H" --grep=${commitMessage}`,
     );
     return stdout;
-  } catch (e) {
+  } catch (error) {
-    console.error(e);
+    console.error(error);
   }
 };
 

src/actions/actionAddToLibrary.ts

@@ -2,22 +2,56 @@ import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { deepCopyElement } from "../element/newElement";
+import { randomId } from "../random";
+import { t } from "../i18n";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",
   perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(
+    if (elements.some((element) => element.type === "image")) {
-      getNonDeletedElements(elements),
+      return {
-      appState,
+        commitToHistory: false,
-    );
+        appState: {
+          ...appState,
+          errorMessage: "Support for adding images to the library coming soon!",
+        },
+      };
+    }
 
-    app.library.loadLibrary().then((items) => {
+    return app.library
-      app.library.saveLibrary([
+      .loadLibrary()
-        ...items,
+      .then((items) => {
-        selectedElements.map(deepCopyElement),
+        return app.library.saveLibrary([
-      ]);
+          {
-    });
+            id: randomId(),
-    return false;
+            status: "unpublished",
+            elements: getSelectedElements(
+              getNonDeletedElements(elements),
+              appState,
+            ).map(deepCopyElement),
+            created: Date.now(),
+          },
+          ...items,
+        ]);
+      })
+      .then(() => {
+        return {
+          commitToHistory: false,
+          appState: {
+            ...appState,
+            toastMessage: t("toast.addedToLibrary"),
+          },
+        };
+      })
+      .catch((error) => {
+        return {
+          commitToHistory: false,
+          appState: {
+            ...appState,
+            errorMessage: error.message,
+          },
+        };
+      });
   },
   contextItemLabel: "labels.addToLibrary",
 });

src/actions/actionCanvas.tsx

@@ -1,14 +1,11 @@
-import { getDefaultAppState } from "../appState";
 import { ColorPicker } from "../components/ColorPicker";
-import { trash, zoomIn, zoomOut } from "../components/icons";
+import { zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
-import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
@@ -17,6 +14,9 @@ import { AppState, NormalizedZoomValue } from "../types";
 import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
+import { newElementWith } from "../element/mutateElement";
+import { getDefaultAppState } from "../appState";
+import ClearCanvas from "../components/ClearCanvas";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -47,13 +47,15 @@ export const actionChangeViewBackgroundColor = register({
 
 export const actionClearCanvas = register({
   name: "clearCanvas",
-  perform: (elements, appState: AppState) => {
+  perform: (elements, appState, _, app) => {
+    app.imageCache.clear();
     return {
       elements: elements.map((element) =>
         newElementWith(element, { isDeleted: true }),
       ),
       appState: {
         ...getDefaultAppState(),
+        files: {},
         theme: appState.theme,
         elementLocked: appState.elementLocked,
         exportBackground: appState.exportBackground,
@@ -65,21 +67,8 @@ export const actionClearCanvas = register({
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ updateData }) => (
+
-    <ToolButton
+  PanelComponent: ({ updateData }) => <ClearCanvas onConfirm={updateData} />,
-      type="button"
-      icon={trash}
-      title={t("buttons.clearReset")}
-      aria-label={t("buttons.clearReset")}
-      showAriaLabel={useIsMobile()}
-      onClick={() => {
-        if (window.confirm(t("alerts.clearReset"))) {
-          updateData(null);
-        }
-      }}
-      data-testid="clear-canvas-button"
-    />
-  ),
 });
 
 export const actionZoomIn = register({

src/actions/actionClipboard.tsx

@@ -9,8 +9,8 @@ import { t } from "../i18n";
 
 export const actionCopy = register({
   name: "copy",
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
-    copyToClipboard(getNonDeletedElements(elements), appState);
+    copyToClipboard(getNonDeletedElements(elements), appState, app.files);
 
     return {
       commitToHistory: false,
@@ -50,12 +50,13 @@ export const actionCopyAsSvg = register({
           ? selectedElements
           : getNonDeletedElements(elements),
         appState,
+        app.files,
         appState,
       );
       return {
         commitToHistory: false,
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       return {
         appState: {
@@ -88,6 +89,7 @@ export const actionCopyAsPng = register({
           ? selectedElements
           : getNonDeletedElements(elements),
         appState,
+        app.files,
         appState,
       );
       return {
@@ -104,7 +106,7 @@ export const actionCopyAsPng = register({
         },
         commitToHistory: false,
       };
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       return {
         appState: {

src/actions/actionDeleteSelected.tsx

@@ -110,10 +110,8 @@ export const actionDeleteSelected = register({
       };
     }
 
-    let {
+    let { elements: nextElements, appState: nextAppState } =
-      elements: nextElements,
+      deleteSelectedElements(elements, appState);
-      appState: nextAppState,
-    } = deleteSelectedElements(elements, appState);
     fixBindingsAfterDeletion(
       nextElements,
       elements.filter(({ id }) => appState.selectedElementIds[id]),

src/actions/actionExport.tsx

@@ -128,13 +128,13 @@ export const actionChangeExportEmbedScene = register({
 
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
-  perform: async (elements, appState, value) => {
+  perform: async (elements, appState, value, app) => {
     const fileHandleExists = !!appState.fileHandle;
 
     try {
       const { fileHandle } = isImageFileHandle(appState.fileHandle)
-        ? await resaveAsImageWithScene(elements, appState)
+        ? await resaveAsImageWithScene(elements, appState, app.files)
-        : await saveAsJSON(elements, appState);
+        : await saveAsJSON(elements, appState, app.files);
 
       return {
         commitToHistory: false,
@@ -151,9 +151,11 @@ export const actionSaveToActiveFile = register({
             : null,
         },
       };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name !== "AbortError") {
         console.error(error);
+      } else {
+        console.warn(error);
       }
       return { commitToHistory: false };
     }
@@ -170,16 +172,22 @@ export const actionSaveToActiveFile = register({
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
-  perform: async (elements, appState, value) => {
+  perform: async (elements, appState, value, app) => {
     try {
-      const { fileHandle } = await saveAsJSON(elements, {
+      const { fileHandle } = await saveAsJSON(
-        ...appState,
+        elements,
-        fileHandle: null,
+        {
-      });
+          ...appState,
+          fileHandle: null,
+        },
+        app.files,
+      );
       return { commitToHistory: false, appState: { ...appState, fileHandle } };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name !== "AbortError") {
         console.error(error);
+      } else {
+        console.warn(error);
       }
       return { commitToHistory: false };
     }
@@ -202,24 +210,28 @@ export const actionSaveFileToDisk = register({
 
 export const actionLoadScene = register({
   name: "loadScene",
-  perform: async (elements, appState) => {
+  perform: async (elements, appState, _, app) => {
     try {
       const {
         elements: loadedElements,
         appState: loadedAppState,
+        files,
       } = await loadFromJSON(appState, elements);
       return {
         elements: loadedElements,
         appState: loadedAppState,
+        files,
         commitToHistory: true,
       };
-    } catch (error) {
+    } catch (error: any) {
       if (error?.name === "AbortError") {
+        console.warn(error);
         return false;
       }
       return {
         elements,
         appState: { ...appState, errorMessage: error.message },
+        files: app.files,
         commitToHistory: false,
       };
     }

src/actions/actionFinalize.tsx

@@ -19,11 +19,8 @@ export const actionFinalize = register({
   name: "finalize",
   perform: (elements, appState, _, { canvas, focusContainer }) => {
     if (appState.editingLinearElement) {
-      const {
+      const { elementId, startBindingElement, endBindingElement } =
-        elementId,
+        appState.editingLinearElement;
-        startBindingElement,
-        endBindingElement,
-      } = appState.editingLinearElement;
       const element = LinearElementEditor.getElement(elementId);
 
       if (element) {
@@ -49,6 +46,11 @@ export const actionFinalize = register({
     }
 
     let newElements = elements;
+
+    if (appState.pendingImageElement) {
+      mutateElement(appState.pendingImageElement, { isDeleted: true }, false);
+    }
+
     if (window.document.activeElement instanceof HTMLElement) {
       focusContainer();
     }
@@ -152,6 +154,7 @@ export const actionFinalize = register({
                 [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
+        pendingImageElement: null,
       },
       commitToHistory: appState.elementType === "freedraw",
     };

src/actions/actionFlip.ts

@@ -93,13 +93,13 @@ const flipElements = (
   appState: AppState,
   flipDirection: "horizontal" | "vertical",
 ): ExcalidrawElement[] => {
-  for (let i = 0; i < elements.length; i++) {
+  elements.forEach((element) => {
-    flipElement(elements[i], appState);
+    flipElement(element, appState);
     // If vertical flip, rotate an extra 180
     if (flipDirection === "vertical") {
-      rotateElement(elements[i], Math.PI);
+      rotateElement(element, Math.PI);
     }
-  }
+  });
   return elements;
 };
 

src/actions/actionGroup.tsx

@@ -99,9 +99,8 @@ export const actionGroup = register({
     // to the z order of the highest element in the layer stack
     const elementsInGroup = getElementsInGroup(updatedElements, newGroupId);
     const lastElementInGroup = elementsInGroup[elementsInGroup.length - 1];
-    const lastGroupElementIndex = updatedElements.lastIndexOf(
+    const lastGroupElementIndex =
-      lastElementInGroup,
+      updatedElements.lastIndexOf(lastElementInGroup);
-    );
     const elementsAfterGroup = updatedElements.slice(lastGroupElementIndex + 1);
     const elementsBeforeGroup = updatedElements
       .slice(0, lastGroupElementIndex)

src/actions/actionProperties.tsx

@@ -6,6 +6,7 @@ import {
   ArrowheadArrowIcon,
   ArrowheadBarIcon,
   ArrowheadDotIcon,
+  ArrowheadTriangleIcon,
   ArrowheadNoneIcon,
   EdgeRoundIcon,
   EdgeSharpIcon,
@@ -59,6 +60,7 @@ import {
   getTargetElements,
   isSomeElementSelected,
 } from "../scene";
+import { hasStrokeColor } from "../scene/comparisons";
 import { register } from "./register";
 
 const changeProperty = (
@@ -103,11 +105,13 @@ export const actionChangeStrokeColor = register({
   perform: (elements, appState, value) => {
     return {
       ...(value.currentItemStrokeColor && {
-        elements: changeProperty(elements, appState, (el) =>
+        elements: changeProperty(elements, appState, (el) => {
-          newElementWith(el, {
+          return hasStrokeColor(el.type)
-            strokeColor: value.currentItemStrokeColor,
+            ? newElementWith(el, {
-          }),
+                strokeColor: value.currentItemStrokeColor,
-        ),
+              })
+            : el;
+        }),
       }),
       appState: {
         ...appState,
@@ -735,6 +739,14 @@ export const actionChangeArrowhead = register({
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
                 keyBinding: "r",
               },
+              {
+                value: "triangle",
+                text: t("labels.arrowhead_triangle"),
+                icon: (
+                  <ArrowheadTriangleIcon theme={appState.theme} flip={!isRTL} />
+                ),
+                keyBinding: "t",
+              },
             ]}
             value={getFormValue<Arrowhead | null>(
               elements,
@@ -777,6 +789,14 @@ export const actionChangeArrowhead = register({
                 keyBinding: "r",
                 icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
               },
+              {
+                value: "triangle",
+                text: t("labels.arrowhead_triangle"),
+                icon: (
+                  <ArrowheadTriangleIcon theme={appState.theme} flip={isRTL} />
+                ),
+                keyBinding: "t",
+              },
             ]}
             value={getFormValue<Arrowhead | null>(
               elements,

src/actions/manager.tsx

@@ -8,18 +8,8 @@ import {
   PanelComponentProps,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppProps, AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 import { MODES } from "../constants";
-import Library from "../data/library";
-
-// This is the <App> component, but for now we don't care about anything but its
-// `canvas` state.
-type App = {
-  canvas: HTMLCanvasElement | null;
-  focusContainer: () => void;
-  props: AppProps;
-  library: Library;
-};
 
 export class ActionManager implements ActionsManagerInterface {
   actions = {} as ActionsManagerInterface["actions"];
@@ -28,13 +18,13 @@ export class ActionManager implements ActionsManagerInterface {
 
   getAppState: () => Readonly<AppState>;
   getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
-  app: App;
+  app: AppClassProperties;
 
   constructor(
     updater: UpdaterFn,
     getAppState: () => AppState,
     getElementsIncludingDeleted: () => readonly ExcalidrawElement[],
-    app: App,
+    app: AppClassProperties,
   ) {
     this.updater = (actionResult) => {
       if (actionResult && "then" in actionResult) {

src/actions/types.ts

@@ -1,7 +1,11 @@
 import React from "react";
 import { ExcalidrawElement } from "../element/types";
-import { AppState, ExcalidrawProps } from "../types";
+import {
-import Library from "../data/library";
+  AppClassProperties,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+} from "../types";
 import { ToolButtonSize } from "../components/ToolButton";
 
 /** if false, the action should be prevented */
@@ -12,22 +16,18 @@ export type ActionResult =
         AppState,
         "offsetTop" | "offsetLeft" | "width" | "height"
       > | null;
+      files?: BinaryFiles | null;
       commitToHistory: boolean;
       syncHistory?: boolean;
+      replaceFiles?: boolean;
     }
   | false;
 
-type AppAPI = {
-  canvas: HTMLCanvasElement | null;
-  focusContainer(): void;
-  library: Library;
-};
-
 type ActionFn = (
   elements: readonly ExcalidrawElement[],
   appState: Readonly<AppState>,
   formData: any,
-  app: AppAPI,
+  app: AppClassProperties,
 ) => ActionResult | Promise<ActionResult>;
 
 export type UpdaterFn = (res: ActionResult) => void;

src/align.ts

@@ -1,13 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { getCommonBounds } from "./element";
+import { Box, getCommonBoundingBox } from "./element/bounds";
-
-interface Box {
-  minX: number;
-  minY: number;
-  maxX: number;
-  maxY: number;
-}
 
 export interface Alignment {
   position: "start" | "center" | "end";
@@ -88,8 +81,3 @@ const calculateTranslation = (
       (groupBoundingBox[min] + groupBoundingBox[max]) / 2,
   };
 };
-
-const getCommonBoundingBox = (elements: ExcalidrawElement[]): Box => {
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  return { minX, minY, maxX, maxY };
-};

src/appState.ts

@@ -79,6 +79,7 @@ export const getDefaultAppState = (): Omit<
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
+    pendingImageElement: null,
   };
 };
 
@@ -92,78 +93,86 @@ const APP_STATE_STORAGE_CONF = (<
     browser: boolean;
     /** whether to keep when exporting to file/database */
     export: boolean;
+    /** server (shareLink/collab/...) */
+    server: boolean;
   },
-  T extends Record<keyof AppState, Values>
+  T extends Record<keyof AppState, Values>,
->(
+>(config: { [K in keyof T]: K extends keyof AppState ? T[K] : never }) =>
-  config: { [K in keyof T]: K extends keyof AppState ? T[K] : never },
+  config)({
-) => config)({
+  theme: { browser: true, export: false, server: false },
-  theme: { browser: true, export: false },
+  collaborators: { browser: false, export: false, server: false },
-  collaborators: { browser: false, export: false },
+  currentChartType: { browser: true, export: false, server: false },
-  currentChartType: { browser: true, export: false },
+  currentItemBackgroundColor: { browser: true, export: false, server: false },
-  currentItemBackgroundColor: { browser: true, export: false },
+  currentItemEndArrowhead: { browser: true, export: false, server: false },
-  currentItemEndArrowhead: { browser: true, export: false },
+  currentItemFillStyle: { browser: true, export: false, server: false },
-  currentItemFillStyle: { browser: true, export: false },
+  currentItemFontFamily: { browser: true, export: false, server: false },
-  currentItemFontFamily: { browser: true, export: false },
+  currentItemFontSize: { browser: true, export: false, server: false },
-  currentItemFontSize: { browser: true, export: false },
+  currentItemLinearStrokeSharpness: {
-  currentItemLinearStrokeSharpness: { browser: true, export: false },
+    browser: true,
-  currentItemOpacity: { browser: true, export: false },
+    export: false,
-  currentItemRoughness: { browser: true, export: false },
+    server: false,
-  currentItemStartArrowhead: { browser: true, export: false },
+  },
-  currentItemStrokeColor: { browser: true, export: false },
+  currentItemOpacity: { browser: true, export: false, server: false },
-  currentItemStrokeSharpness: { browser: true, export: false },
+  currentItemRoughness: { browser: true, export: false, server: false },
-  currentItemStrokeStyle: { browser: true, export: false },
+  currentItemStartArrowhead: { browser: true, export: false, server: false },
-  currentItemStrokeWidth: { browser: true, export: false },
+  currentItemStrokeColor: { browser: true, export: false, server: false },
-  currentItemTextAlign: { browser: true, export: false },
+  currentItemStrokeSharpness: { browser: true, export: false, server: false },
-  cursorButton: { browser: true, export: false },
+  currentItemStrokeStyle: { browser: true, export: false, server: false },
-  draggingElement: { browser: false, export: false },
+  currentItemStrokeWidth: { browser: true, export: false, server: false },
-  editingElement: { browser: false, export: false },
+  currentItemTextAlign: { browser: true, export: false, server: false },
-  editingGroupId: { browser: true, export: false },
+  cursorButton: { browser: true, export: false, server: false },
-  editingLinearElement: { browser: false, export: false },
+  draggingElement: { browser: false, export: false, server: false },
-  elementLocked: { browser: true, export: false },
+  editingElement: { browser: false, export: false, server: false },
-  elementType: { browser: true, export: false },
+  editingGroupId: { browser: true, export: false, server: false },
-  errorMessage: { browser: false, export: false },
+  editingLinearElement: { browser: false, export: false, server: false },
-  exportBackground: { browser: true, export: false },
+  elementLocked: { browser: true, export: false, server: false },
-  exportEmbedScene: { browser: true, export: false },
+  elementType: { browser: true, export: false, server: false },
-  exportScale: { browser: true, export: false },
+  errorMessage: { browser: false, export: false, server: false },
-  exportWithDarkMode: { browser: true, export: false },
+  exportBackground: { browser: true, export: false, server: false },
-  fileHandle: { browser: false, export: false },
+  exportEmbedScene: { browser: true, export: false, server: false },
-  gridSize: { browser: true, export: true },
+  exportScale: { browser: true, export: false, server: false },
-  height: { browser: false, export: false },
+  exportWithDarkMode: { browser: true, export: false, server: false },
-  isBindingEnabled: { browser: false, export: false },
+  fileHandle: { browser: false, export: false, server: false },
-  isLibraryOpen: { browser: false, export: false },
+  gridSize: { browser: true, export: true, server: true },
-  isLoading: { browser: false, export: false },
+  height: { browser: false, export: false, server: false },
-  isResizing: { browser: false, export: false },
+  isBindingEnabled: { browser: false, export: false, server: false },
-  isRotating: { browser: false, export: false },
+  isLibraryOpen: { browser: false, export: false, server: false },
-  lastPointerDownWith: { browser: true, export: false },
+  isLoading: { browser: false, export: false, server: false },
-  multiElement: { browser: false, export: false },
+  isResizing: { browser: false, export: false, server: false },
-  name: { browser: true, export: false },
+  isRotating: { browser: false, export: false, server: false },
-  offsetLeft: { browser: false, export: false },
+  lastPointerDownWith: { browser: true, export: false, server: false },
-  offsetTop: { browser: false, export: false },
+  multiElement: { browser: false, export: false, server: false },
-  openMenu: { browser: true, export: false },
+  name: { browser: true, export: false, server: false },
-  openPopup: { browser: false, export: false },
+  offsetLeft: { browser: false, export: false, server: false },
-  pasteDialog: { browser: false, export: false },
+  offsetTop: { browser: false, export: false, server: false },
-  previousSelectedElementIds: { browser: true, export: false },
+  openMenu: { browser: true, export: false, server: false },
-  resizingElement: { browser: false, export: false },
+  openPopup: { browser: false, export: false, server: false },
-  scrolledOutside: { browser: true, export: false },
+  pasteDialog: { browser: false, export: false, server: false },
-  scrollX: { browser: true, export: false },
+  previousSelectedElementIds: { browser: true, export: false, server: false },
-  scrollY: { browser: true, export: false },
+  resizingElement: { browser: false, export: false, server: false },
-  selectedElementIds: { browser: true, export: false },
+  scrolledOutside: { browser: true, export: false, server: false },
-  selectedGroupIds: { browser: true, export: false },
+  scrollX: { browser: true, export: false, server: false },
-  selectionElement: { browser: false, export: false },
+  scrollY: { browser: true, export: false, server: false },
-  shouldCacheIgnoreZoom: { browser: true, export: false },
+  selectedElementIds: { browser: true, export: false, server: false },
-  showHelpDialog: { browser: false, export: false },
+  selectedGroupIds: { browser: true, export: false, server: false },
-  showStats: { browser: true, export: false },
+  selectionElement: { browser: false, export: false, server: false },
-  startBoundElement: { browser: false, export: false },
+  shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
-  suggestedBindings: { browser: false, export: false },
+  showHelpDialog: { browser: false, export: false, server: false },
-  toastMessage: { browser: false, export: false },
+  showStats: { browser: true, export: false, server: false },
-  viewBackgroundColor: { browser: true, export: true },
+  startBoundElement: { browser: false, export: false, server: false },
-  width: { browser: false, export: false },
+  suggestedBindings: { browser: false, export: false, server: false },
-  zenModeEnabled: { browser: true, export: false },
+  toastMessage: { browser: false, export: false, server: false },
-  zoom: { browser: true, export: false },
+  viewBackgroundColor: { browser: true, export: true, server: true },
-  viewModeEnabled: { browser: false, export: false },
+  width: { browser: false, export: false, server: false },
+  zenModeEnabled: { browser: true, export: false, server: false },
+  zoom: { browser: true, export: false, server: false },
+  viewModeEnabled: { browser: false, export: false, server: false },
+  pendingImageElement: { browser: false, export: false, server: false },
 });
 
-const _clearAppStateForStorage = <ExportType extends "export" | "browser">(
+const _clearAppStateForStorage = <
+  ExportType extends "export" | "browser" | "server",
+>(
   appState: Partial<AppState>,
   exportType: ExportType,
 ) => {
@@ -176,8 +185,10 @@ const _clearAppStateForStorage = <ExportType extends "export" | "browser">(
   for (const key of Object.keys(appState) as (keyof typeof appState)[]) {
     const propConfig = APP_STATE_STORAGE_CONF[key];
     if (propConfig?.[exportType]) {
-      // @ts-ignore see https://github.com/microsoft/TypeScript/issues/31445
+      const nextValue = appState[key];
-      stateForExport[key] = appState[key];
+
+      // https://github.com/microsoft/TypeScript/issues/31445
+      (stateForExport as any)[key] = nextValue;
     }
   }
   return stateForExport;
@@ -190,3 +201,7 @@ export const clearAppStateForLocalStorage = (appState: Partial<AppState>) => {
 export const cleanAppStateForExport = (appState: Partial<AppState>) => {
   return _clearAppStateForStorage(appState, "export");
 };
+
+export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
+  return _clearAppStateForStorage(appState, "server");
+};

src/clipboard.ts

@@ -3,19 +3,22 @@ import {
   NonDeletedExcalidrawElement,
 } from "./element/types";
 import { getSelectedElements } from "./scene";
-import { AppState } from "./types";
+import { AppState, BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
-import { EXPORT_DATA_TYPES } from "./constants";
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
+import { isInitializedImageElement } from "./element/typeChecks";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
   elements: ExcalidrawElement[];
+  files: BinaryFiles | undefined;
 };
 
 export interface ClipboardData {
   spreadsheet?: Spreadsheet;
   elements?: readonly ExcalidrawElement[];
+  files?: BinaryFiles;
   text?: string;
   errorMessage?: string;
 }
@@ -37,7 +40,7 @@ export const probablySupportsClipboardBlob =
 
 const clipboardContainsElements = (
   contents: any,
-): contents is { elements: ExcalidrawElement[] } => {
+): contents is { elements: ExcalidrawElement[]; files?: BinaryFiles } => {
   if (
     [
       EXPORT_DATA_TYPES.excalidraw,
@@ -53,17 +56,25 @@ const clipboardContainsElements = (
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
+  files: BinaryFiles,
 ) => {
+  const selectedElements = getSelectedElements(elements, appState);
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements: getSelectedElements(elements, appState),
+    elements: selectedElements,
+    files: selectedElements.reduce((acc, element) => {
+      if (isInitializedImageElement(element) && files[element.fileId]) {
+        acc[element.fileId] = files[element.fileId];
+      }
+      return acc;
+    }, {} as BinaryFiles),
   };
   const json = JSON.stringify(contents);
   CLIPBOARD = json;
   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);
-  } catch (error) {
+  } catch (error: any) {
     PREFER_APP_CLIPBOARD = true;
     console.error(error);
   }
@@ -76,7 +87,7 @@ const getAppClipboard = (): Partial<ElementsClipboard> => {
 
   try {
     return JSON.parse(CLIPBOARD);
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
     return {};
   }
@@ -138,7 +149,10 @@ export const parseClipboard = async (
   try {
     const systemClipboardData = JSON.parse(systemClipboard);
     if (clipboardContainsElements(systemClipboardData)) {
-      return { elements: systemClipboardData.elements };
+      return {
+        elements: systemClipboardData.elements,
+        files: systemClipboardData.files,
+      };
     }
     return appClipboardData;
   } catch {
@@ -153,7 +167,7 @@ export const parseClipboard = async (
 
 export const copyBlobToClipboardAsPng = async (blob: Blob) => {
   await navigator.clipboard.write([
-    new window.ClipboardItem({ "image/png": blob }),
+    new window.ClipboardItem({ [MIME_TYPES.png]: blob }),
   ]);
 };
 
@@ -165,7 +179,7 @@ export const copyTextToSystemClipboard = async (text: string | null) => {
       // not focused
       await navigator.clipboard.writeText(text || "");
       copied = true;
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   }
@@ -205,7 +219,7 @@ const copyTextViaExecCommand = (text: string) => {
     textarea.setSelectionRange(0, textarea.value.length);
 
     success = document.execCommand("copy");
-  } catch (error) {
+  } catch (error: any) {
     console.error(error);
   }
 

src/components/Actions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
 import { useIsMobile } from "../components/App";
 import {
@@ -18,6 +18,7 @@ import { AppState, Zoom } from "../types";
 import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
+import { hasStrokeColor } from "../scene/comparisons";
 
 export const SelectedShapeActions = ({
   appState,
@@ -48,9 +49,22 @@ export const SelectedShapeActions = ({
     hasBackground(elementType) ||
     targetElements.some((element) => hasBackground(element.type));
 
+  let commonSelectedType: string | null = targetElements[0]?.type || null;
+
+  for (const element of targetElements) {
+    if (element.type !== commonSelectedType) {
+      commonSelectedType = null;
+      break;
+    }
+  }
+
   return (
     <div className="panelColumn">
-      {renderAction("changeStrokeColor")}
+      {((hasStrokeColor(elementType) &&
+        elementType !== "image" &&
+        commonSelectedType !== "image") ||
+        targetElements.some((element) => hasStrokeColor(element.type))) &&
+        renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
@@ -155,18 +169,20 @@ export const ShapesSwitcher = ({
   canvas,
   elementType,
   setAppState,
+  onImageAction,
 }: {
   canvas: HTMLCanvasElement | null;
   elementType: ExcalidrawElement["type"];
   setAppState: React.Component<any, AppState>["setState"];
+  onImageAction: (data: { pointerType: PointerType | null }) => void;
 }) => (
   <>
     {SHAPES.map(({ value, icon, key }, index) => {
       const label = t(`toolBar.${value}`);
-      const letter = typeof key === "string" ? key : key[0];
+      const letter = key && (typeof key === "string" ? key : key[0]);
-      const shortcut = `${capitalizeString(letter)} ${t("helpDialog.or")} ${
+      const shortcut = letter
-        index + 1
+        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${index + 1}`
-      }`;
+        : `${index + 1}`;
       return (
         <ToolButton
           className="Shape"
@@ -180,14 +196,16 @@ export const ShapesSwitcher = ({
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
           data-testid={value}
-          onChange={() => {
+          onChange={({ pointerType }) => {
             setAppState({
               elementType: value,
               multiElement: null,
               selectedElementIds: {},
             });
             setCursorForShape(canvas, value);
-            setAppState({});
+            if (value === "image") {
+              onImageAction({ pointerType });
+            }
           }}
         />
       );

src/components/Card.scss

@@ -48,6 +48,10 @@
       .ToolIcon__label {
         color: $oc-white;
       }
+
+      .Spinner {
+        --spinner-color: #fff;
+      }
     }
   }
 }

src/components/CheckboxItem.tsx

@@ -7,15 +7,18 @@ import "./CheckboxItem.scss";
 export const CheckboxItem: React.FC<{
   checked: boolean;
   onChange: (checked: boolean) => void;
-}> = ({ children, checked, onChange }) => {
+  className?: string;
+}> = ({ children, checked, onChange, className }) => {
   return (
     <div
-      className={clsx("Checkbox", { "is-checked": checked })}
+      className={clsx("Checkbox", className, { "is-checked": checked })}
       onClick={(event) => {
         onChange(!checked);
-        ((event.currentTarget as HTMLDivElement).querySelector(
+        (
-          ".Checkbox-box",
+          (event.currentTarget as HTMLDivElement).querySelector(
-        ) as HTMLButtonElement).focus();
+            ".Checkbox-box",
+          ) as HTMLButtonElement
+        ).focus();
       }}
     >
       <button className="Checkbox-box" role="checkbox" aria-checked={checked}>

src/components/ClearCanvas.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { t } from "../i18n";
+import { useIsMobile } from "./App";
+import { trash } from "./icons";
+import { ToolButton } from "./ToolButton";
+
+import ConfirmDialog from "./ConfirmDialog";
+
+const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
+  const [showDialog, setShowDialog] = useState(false);
+  const toggleDialog = () => {
+    setShowDialog(!showDialog);
+  };
+
+  return (
+    <>
+      <ToolButton
+        type="button"
+        icon={trash}
+        title={t("buttons.clearReset")}
+        aria-label={t("buttons.clearReset")}
+        showAriaLabel={useIsMobile()}
+        onClick={toggleDialog}
+        data-testid="clear-canvas-button"
+      />
+
+      {showDialog && (
+        <ConfirmDialog
+          onConfirm={() => {
+            onConfirm();
+            toggleDialog();
+          }}
+          onCancel={toggleDialog}
+          title={t("clearCanvasDialog.title")}
+        >
+          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
+        </ConfirmDialog>
+      )}
+    </>
+  );
+};
+
+export default ClearCanvas;

src/components/ConfirmDialog.scss

@@ -0,0 +1,37 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .confirm-dialog {
+    &-buttons {
+      display: flex;
+      padding: 0.2rem 0;
+      justify-content: flex-end;
+    }
+    .ToolIcon__icon {
+      min-width: 2.5rem;
+      width: auto;
+      font-size: 1rem;
+    }
+
+    .ToolIcon_type_button {
+      margin-left: 0.8rem;
+      padding: 0 0.5rem;
+    }
+
+    &__content {
+      font-size: 1rem;
+    }
+
+    &--confirm.ToolIcon_type_button {
+      background-color: $oc-red-6;
+
+      &:hover {
+        background-color: $oc-red-8;
+      }
+
+      .ToolIcon__icon {
+        color: $oc-white;
+      }
+    }
+  }
+}

src/components/ConfirmDialog.tsx

@@ -0,0 +1,52 @@
+import { t } from "../i18n";
+import { Dialog, DialogProps } from "./Dialog";
+import { ToolButton } from "./ToolButton";
+
+import "./ConfirmDialog.scss";
+
+interface Props extends Omit<DialogProps, "onCloseRequest"> {
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+const ConfirmDialog = (props: Props) => {
+  const {
+    onConfirm,
+    onCancel,
+    children,
+    confirmText = t("buttons.confirm"),
+    cancelText = t("buttons.cancel"),
+    className = "",
+    ...rest
+  } = props;
+  return (
+    <Dialog
+      onCloseRequest={onCancel}
+      small={true}
+      {...rest}
+      className={`confirm-dialog ${className}`}
+    >
+      {children}
+      <div className="confirm-dialog-buttons">
+        <ToolButton
+          type="button"
+          title={cancelText}
+          aria-label={cancelText}
+          label={cancelText}
+          onClick={onCancel}
+          className="confirm-dialog--cancel"
+        />
+        <ToolButton
+          type="button"
+          title={confirmText}
+          aria-label={confirmText}
+          label={confirmText}
+          onClick={onConfirm}
+          className="confirm-dialog--confirm"
+        />
+      </div>
+    </Dialog>
+  );
+};
+export default ConfirmDialog;

src/components/Dialog.tsx

@@ -10,7 +10,7 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
 
-export const Dialog = (props: {
+export interface DialogProps {
   children: React.ReactNode;
   className?: string;
   small?: boolean;
@@ -18,7 +18,10 @@ export const Dialog = (props: {
   title: React.ReactNode;
   autofocus?: boolean;
   theme?: AppState["theme"];
-}) => {
+  closeOnClickOutside?: boolean;
+}
+
+export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   const [lastActiveElement] = useState(document.activeElement);
   const { id } = useExcalidrawContainer();
@@ -81,6 +84,7 @@ export const Dialog = (props: {
       maxWidth={props.small ? 550 : 800}
       onCloseRequest={onClose}
       theme={props.theme}
+      closeOnClickOutside={props.closeOnClickOutside}
     >
       <Island ref={setIslandNode}>
         <h2 id={`${id}-dialog-title`} className="Dialog__title">

src/components/HelpDialog.tsx

@@ -157,6 +157,8 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   shortcuts={["Shift+P", "7"]}
                 />
                 <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("helpDialog.editSelectedShape")}
                   shortcuts={[

src/components/HintViewer.tsx

@@ -4,17 +4,23 @@ import { getSelectedElements } from "../scene";
 
 import "./HintViewer.scss";
 import { AppState } from "../types";
-import { isLinearElement, isTextElement } from "../element/typeChecks";
+import {
+  isImageElement,
+  isLinearElement,
+  isTextElement,
+} from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
 
-interface Hint {
+interface HintViewerProps {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
+  isMobile: boolean;
 }
 
-const getHints = ({ appState, elements }: Hint) => {
+const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
   const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
+
   if (elementType === "arrow" || elementType === "line") {
     if (!multiMode) {
       return t("hints.linearElement");
@@ -30,7 +36,12 @@ const getHints = ({ appState, elements }: Hint) => {
     return t("hints.text");
   }
 
+  if (appState.elementType === "image" && appState.pendingImageElement) {
+    return t("hints.placeImage");
+  }
+
   const selectedElements = getSelectedElements(elements, appState);
+
   if (
     isResizing &&
     lastPointerDownWith === "mouse" &&
@@ -40,7 +51,9 @@ const getHints = ({ appState, elements }: Hint) => {
     if (isLinearElement(targetElement) && targetElement.points.length === 2) {
       return t("hints.lockAngle");
     }
-    return t("hints.resize");
+    return isImageElement(targetElement)
+      ? t("hints.resizeImage")
+      : t("hints.resize");
   }
 
   if (isRotating && lastPointerDownWith === "mouse") {
@@ -64,13 +77,22 @@ const getHints = ({ appState, elements }: Hint) => {
     return t("hints.text_editing");
   }
 
+  if (elementType === "selection" && !selectedElements.length && !isMobile) {
+    return t("hints.canvasPanning");
+  }
+
   return null;
 };
 
-export const HintViewer = ({ appState, elements }: Hint) => {
+export const HintViewer = ({
+  appState,
+  elements,
+  isMobile,
+}: HintViewerProps) => {
   let hint = getHints({
     appState,
     elements,
+    isMobile,
   });
   if (!hint) {
     return null;

src/components/IconPicker.scss

@@ -90,7 +90,7 @@
   .picker-content {
     padding: 0.5rem;
     display: grid;
-    grid-auto-flow: column;
+    grid-template-columns: repeat(3, auto);
     grid-gap: 0.5rem;
     border-radius: 4px;
     :root[dir="rtl"] & {

src/components/ImageExportDialog.tsx

@@ -9,7 +9,7 @@ import { t } from "../i18n";
 import { useIsMobile } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
-import { AppState } from "../types";
+import { AppState, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { clipboard, exportImage } from "./icons";
 import Stack from "./Stack";
@@ -79,6 +79,7 @@ const ExportButton: React.FC<{
 const ImageExportModal = ({
   elements,
   appState,
+  files,
   exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
@@ -87,6 +88,7 @@ const ImageExportModal = ({
 }: {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
+  files: BinaryFiles;
   exportPadding?: number;
   actionManager: ActionsManagerInterface;
   onExportToPng: ExportCB;
@@ -112,29 +114,25 @@ const ImageExportModal = ({
     if (!previewNode) {
       return;
     }
-    try {
+    exportToCanvas(exportedElements, appState, files, {
-      const canvas = exportToCanvas(exportedElements, appState, {
+      exportBackground,
-        exportBackground,
+      viewBackgroundColor,
-        viewBackgroundColor,
+      exportPadding,
-        exportPadding,
+    })
-      });
+      .then((canvas) => {
-
+        // if converting to blob fails, there's some problem that will
-      // if converting to blob fails, there's some problem that will
+        // likely prevent preview and export (e.g. canvas too big)
-      // likely prevent preview and export (e.g. canvas too big)
+        return canvasToBlob(canvas).then(() => {
-      canvasToBlob(canvas)
-        .then(() => {
           renderPreview(canvas, previewNode);
-        })
-        .catch((error) => {
-          console.error(error);
-          renderPreview(new CanvasError(), previewNode);
         });
-    } catch (error) {
+      })
-      console.error(error);
+      .catch((error) => {
-      renderPreview(new CanvasError(), previewNode);
+        console.error(error);
-    }
+        renderPreview(new CanvasError(), previewNode);
+      });
   }, [
     appState,
+    files,
     exportedElements,
     exportBackground,
     exportPadding,
@@ -220,6 +218,7 @@ const ImageExportModal = ({
 export const ImageExportDialog = ({
   elements,
   appState,
+  files,
   exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
@@ -228,6 +227,7 @@ export const ImageExportDialog = ({
 }: {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
+  files: BinaryFiles;
   exportPadding?: number;
   actionManager: ActionsManagerInterface;
   onExportToPng: ExportCB;
@@ -258,6 +258,7 @@ export const ImageExportDialog = ({
           <ImageExportModal
             elements={elements}
             appState={appState}
+            files={files}
             exportPadding={exportPadding}
             actionManager={actionManager}
             onExportToPng={onExportToPng}

src/components/JSONExportDialog.tsx

@@ -3,7 +3,7 @@ import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { useIsMobile } from "./App";
-import { AppState, ExportOpts } from "../types";
+import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
 import { ToolButton } from "./ToolButton";
@@ -21,11 +21,13 @@ export type ExportCB = (
 const JSONExportModal = ({
   elements,
   appState,
+  files,
   actionManager,
   exportOpts,
   canvas,
 }: {
   appState: AppState;
+  files: BinaryFiles;
   elements: readonly NonDeletedExcalidrawElement[];
   actionManager: ActionsManagerInterface;
   onCloseRequest: () => void;
@@ -68,12 +70,14 @@ const JSONExportModal = ({
               title={t("exportDialog.link_button")}
               aria-label={t("exportDialog.link_button")}
               showAriaLabel={true}
-              onClick={() => onExportToBackend(elements, appState, canvas)}
+              onClick={() =>
+                onExportToBackend(elements, appState, files, canvas)
+              }
             />
           </Card>
         )}
         {exportOpts.renderCustomUI &&
-          exportOpts.renderCustomUI(elements, appState, canvas)}
+          exportOpts.renderCustomUI(elements, appState, files, canvas)}
       </div>
     </div>
   );
@@ -82,12 +86,14 @@ const JSONExportModal = ({
 export const JSONExportDialog = ({
   elements,
   appState,
+  files,
   actionManager,
   exportOpts,
   canvas,
 }: {
-  appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
+  appState: AppState;
+  files: BinaryFiles;
   actionManager: ActionsManagerInterface;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
@@ -116,6 +122,7 @@ export const JSONExportDialog = ({
           <JSONExportModal
             elements={elements}
             appState={appState}
+            files={files}
             actionManager={actionManager}
             onCloseRequest={handleClose}
             exportOpts={exportOpts}

src/components/LayerUI.scss

@@ -1,42 +1,6 @@
 @import "open-color/open-color";
 
 .excalidraw {
-  .layer-ui__library {
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .layer-ui__library-header {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      margin: 2px 0;
-
-      button {
-        // 2px from the left to account for focus border of left-most button
-        margin: 0 2px;
-      }
-
-      a {
-        margin-inline-start: auto;
-        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
-        padding-inline-end: 18px;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .layer-ui__library-message {
-    padding: 10px 20px;
-    max-width: 200px;
-  }
-
-  .layer-ui__library-items {
-    max-height: 50vh;
-    overflow: auto;
-  }
-
   .layer-ui__wrapper {
     z-index: var(--zIndex-layerUI);
 

src/components/LayerUI.tsx

@@ -1,28 +1,15 @@
 import clsx from "clsx";
-import React, {
+import React, { useCallback } from "react";
-  RefObject,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import { ActionManager } from "../actions/manager";
 import { CLASSES } from "../constants";
 import { exportCanvas } from "../data";
-import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
 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 {
+import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-  AppProps,
-  AppState,
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-} from "../types";
 import { muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
@@ -31,10 +18,8 @@ import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
-import { exportFile, load, trash } from "./icons";
 import { Island } from "./Island";
 import "./LayerUI.scss";
-import { LibraryUnit } from "./LibraryUnit";
 import { LoadingMessage } from "./LoadingMessage";
 import { LockButton } from "./LockButton";
 import { MobileMenu } from "./MobileMenu";
@@ -42,17 +27,18 @@ import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
-import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
 import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
+import { LibraryMenu } from "./LibraryMenu";
 
 interface LayerUIProps {
   actionManager: ActionManager;
   appState: AppState;
+  files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
@@ -65,7 +51,10 @@ interface LayerUIProps {
   toggleZenMode: () => void;
   langCode: Language["code"];
   isCollaborating: boolean;
-  renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderTopRightUI?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -73,295 +62,13 @@ interface LayerUIProps {
   focusContainer: () => void;
   library: Library;
   id: string;
+  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
 }
 
-const useOnClickOutside = (
-  ref: RefObject<HTMLElement>,
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
-
-      if (
-        event.target instanceof Element &&
-        (ref.current.contains(event.target) ||
-          !document.body.contains(event.target))
-      ) {
-        return;
-      }
-
-      cb(event);
-    };
-    document.addEventListener("pointerdown", listener, false);
-
-    return () => {
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [ref, cb]);
-};
-
-const LibraryMenuItems = ({
-  libraryItems,
-  onRemoveFromLibrary,
-  onAddToLibrary,
-  onInsertShape,
-  pendingElements,
-  theme,
-  setAppState,
-  setLibraryItems,
-  libraryReturnUrl,
-  focusContainer,
-  library,
-  id,
-}: {
-  libraryItems: LibraryItems;
-  pendingElements: LibraryItem;
-  onRemoveFromLibrary: (index: number) => void;
-  onInsertShape: (elements: LibraryItem) => void;
-  onAddToLibrary: (elements: LibraryItem) => void;
-  theme: AppState["theme"];
-  setAppState: React.Component<any, AppState>["setState"];
-  setLibraryItems: (library: LibraryItems) => void;
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  focusContainer: () => void;
-  library: Library;
-  id: string;
-}) => {
-  const isMobile = useIsMobile();
-  const numCells = libraryItems.length + (pendingElements.length > 0 ? 1 : 0);
-  const CELLS_PER_ROW = isMobile ? 4 : 6;
-  const numRows = Math.max(1, Math.ceil(numCells / CELLS_PER_ROW));
-  const rows = [];
-  let addedPendingElements = false;
-
-  const referrer =
-    libraryReturnUrl || window.location.origin + window.location.pathname;
-
-  rows.push(
-    <div className="layer-ui__library-header" key="library-header">
-      <ToolButton
-        key="import"
-        type="button"
-        title={t("buttons.load")}
-        aria-label={t("buttons.load")}
-        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 });
-            });
-        }}
-      />
-      {!!libraryItems.length && (
-        <>
-          <ToolButton
-            key="export"
-            type="button"
-            title={t("buttons.export")}
-            aria-label={t("buttons.export")}
-            icon={exportFile}
-            onClick={() => {
-              saveLibraryAsJSON(library)
-                .catch(muteFSAbortError)
-                .catch((error) => {
-                  setAppState({ errorMessage: error.message });
-                });
-            }}
-          />
-          <ToolButton
-            key="reset"
-            type="button"
-            title={t("buttons.resetLibrary")}
-            aria-label={t("buttons.resetLibrary")}
-            icon={trash}
-            onClick={() => {
-              if (window.confirm(t("alerts.resetLibrary"))) {
-                library.resetLibrary();
-                setLibraryItems([]);
-                focusContainer();
-              }
-            }}
-          />
-        </>
-      )}
-      <a
-        href={`https://libraries.excalidraw.com?target=${
-          window.name || "_blank"
-        }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}`}
-        target="_excalidraw_libraries"
-      >
-        {t("labels.libraries")}
-      </a>
-    </div>,
-  );
-
-  for (let row = 0; row < numRows; row++) {
-    const y = CELLS_PER_ROW * row;
-    const children = [];
-    for (let x = 0; x < CELLS_PER_ROW; x++) {
-      const shouldAddPendingElements: boolean =
-        pendingElements.length > 0 &&
-        !addedPendingElements &&
-        y + x >= libraryItems.length;
-      addedPendingElements = addedPendingElements || shouldAddPendingElements;
-
-      children.push(
-        <Stack.Col key={x}>
-          <LibraryUnit
-            elements={libraryItems[y + x]}
-            pendingElements={
-              shouldAddPendingElements ? pendingElements : undefined
-            }
-            onRemoveFromLibrary={onRemoveFromLibrary.bind(null, y + x)}
-            onClick={
-              shouldAddPendingElements
-                ? onAddToLibrary.bind(null, pendingElements)
-                : onInsertShape.bind(null, libraryItems[y + x])
-            }
-          />
-        </Stack.Col>,
-      );
-    }
-    rows.push(
-      <Stack.Row align="center" gap={1} key={row}>
-        {children}
-      </Stack.Row>,
-    );
-  }
-
-  return (
-    <Stack.Col align="start" gap={1} className="layer-ui__library-items">
-      {rows}
-    </Stack.Col>
-  );
-};
-
-const LibraryMenu = ({
-  onClickOutside,
-  onInsertShape,
-  pendingElements,
-  onAddToLibrary,
-  theme,
-  setAppState,
-  libraryReturnUrl,
-  focusContainer,
-  library,
-  id,
-}: {
-  pendingElements: LibraryItem;
-  onClickOutside: (event: MouseEvent) => void;
-  onInsertShape: (elements: LibraryItem) => void;
-  onAddToLibrary: () => void;
-  theme: AppState["theme"];
-  setAppState: React.Component<any, AppState>["setState"];
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  focusContainer: () => void;
-  library: Library;
-  id: string;
-}) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  useOnClickOutside(ref, (event) => {
-    // If click on the library icon, do nothing.
-    if ((event.target as Element).closest(".ToolIcon_type_button__library")) {
-      return;
-    }
-    onClickOutside(event);
-  });
-
-  const [libraryItems, setLibraryItems] = useState<LibraryItems>([]);
-
-  const [loadingState, setIsLoading] = useState<
-    "preloading" | "loading" | "ready"
-  >("preloading");
-
-  const loadingTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    Promise.race([
-      new Promise((resolve) => {
-        loadingTimerRef.current = 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 (indexToRemove) => {
-      const items = await library.loadLibrary();
-      const nextItems = items.filter((_, index) => index !== indexToRemove);
-      library.saveLibrary(nextItems).catch((error) => {
-        setLibraryItems(items);
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      setLibraryItems(nextItems);
-    },
-    [library, setAppState],
-  );
-
-  const addToLibrary = useCallback(
-    async (elements: LibraryItem) => {
-      const items = await library.loadLibrary();
-      const nextItems = [...items, elements];
-      onAddToLibrary();
-      library.saveLibrary(nextItems).catch((error) => {
-        setLibraryItems(items);
-        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
-      });
-      setLibraryItems(nextItems);
-    },
-    [onAddToLibrary, library, setAppState],
-  );
-
-  return loadingState === "preloading" ? null : (
-    <Island padding={1} ref={ref} className="layer-ui__library">
-      {loadingState === "loading" ? (
-        <div className="layer-ui__library-message">
-          {t("labels.libraryLoadingMessage")}
-        </div>
-      ) : (
-        <LibraryMenuItems
-          libraryItems={libraryItems}
-          onRemoveFromLibrary={removeFromLibrary}
-          onAddToLibrary={addToLibrary}
-          onInsertShape={onInsertShape}
-          pendingElements={pendingElements}
-          setAppState={setAppState}
-          setLibraryItems={setLibraryItems}
-          libraryReturnUrl={libraryReturnUrl}
-          focusContainer={focusContainer}
-          library={library}
-          theme={theme}
-          id={id}
-        />
-      )}
-    </Island>
-  );
-};
-
 const LayerUI = ({
   actionManager,
   appState,
+  files,
   setAppState,
   canvas,
   elements,
@@ -381,6 +88,7 @@ const LayerUI = ({
   focusContainer,
   library,
   id,
+  onImageAction,
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
@@ -393,6 +101,7 @@ const LayerUI = ({
       <JSONExportDialog
         elements={elements}
         appState={appState}
+        files={files}
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
@@ -405,33 +114,40 @@ const LayerUI = ({
       return null;
     }
 
-    const createExporter = (type: ExportType): ExportCB => async (
+    const createExporter =
-      exportedElements,
+      (type: ExportType): ExportCB =>
-    ) => {
+      async (exportedElements) => {
-      const fileHandle = await exportCanvas(type, exportedElements, appState, {
+        const fileHandle = await exportCanvas(
-        exportBackground: appState.exportBackground,
+          type,
-        name: appState.name,
+          exportedElements,
-        viewBackgroundColor: appState.viewBackgroundColor,
+          appState,
-      })
+          files,
-        .catch(muteFSAbortError)
+          {
-        .catch((error) => {
+            exportBackground: appState.exportBackground,
-          console.error(error);
+            name: appState.name,
-          setAppState({ errorMessage: error.message });
+            viewBackgroundColor: appState.viewBackgroundColor,
-        });
+          },
+        )
+          .catch(muteFSAbortError)
+          .catch((error) => {
+            console.error(error);
+            setAppState({ errorMessage: error.message });
+          });
 
-      if (
+        if (
-        appState.exportEmbedScene &&
+          appState.exportEmbedScene &&
-        fileHandle &&
+          fileHandle &&
-        isImageFileHandle(fileHandle)
+          isImageFileHandle(fileHandle)
-      ) {
+        ) {
-        setAppState({ fileHandle });
+          setAppState({ fileHandle });
-      }
+        }
-    };
+      };
 
     return (
       <ImageExportDialog
         elements={elements}
         appState={appState}
+        files={files}
         actionManager={actionManager}
         onExportToPng={createExporter("png")}
         onExportToSvg={createExporter("svg")}
@@ -465,6 +181,7 @@ const LayerUI = ({
       </Section>
     );
   };
+
   const renderCanvasActions = () => (
     <Section
       heading="canvasActions"
@@ -532,12 +249,15 @@ const LayerUI = ({
     </Section>
   );
 
-  const closeLibrary = useCallback(
+  const closeLibrary = useCallback(() => {
-    (event) => {
+    const isDialogOpen = !!document.querySelector(".Dialog");
-      setAppState({ isLibraryOpen: false });
+
-    },
+    // Prevent closing if any dialog is open
-    [setAppState],
+    if (isDialogOpen) {
-  );
+      return;
+    }
+    setAppState({ isLibraryOpen: false });
+  }, [setAppState]);
 
   const deselectItems = useCallback(() => {
     setAppState({
@@ -549,7 +269,7 @@ const LayerUI = ({
   const libraryMenu = appState.isLibraryOpen ? (
     <LibraryMenu
       pendingElements={getSelectedElements(elements, appState)}
-      onClickOutside={closeLibrary}
+      onClose={closeLibrary}
       onInsertShape={onInsertElements}
       onAddToLibrary={deselectItems}
       setAppState={setAppState}
@@ -557,7 +277,9 @@ const LayerUI = ({
       focusContainer={focusContainer}
       library={library}
       theme={appState.theme}
+      files={files}
       id={id}
+      appState={appState}
     />
   ) : null;
 
@@ -594,13 +316,22 @@ const LayerUI = ({
                       padding={1}
                       className={clsx({ "zen-mode": zenModeEnabled })}
                     >
-                      <HintViewer appState={appState} elements={elements} />
+                      <HintViewer
+                        appState={appState}
+                        elements={elements}
+                        isMobile={isMobile}
+                      />
                       {heading}
                       <Stack.Row gap={1}>
                         <ShapesSwitcher
                           canvas={canvas}
                           elementType={appState.elementType}
                           setAppState={setAppState}
+                          onImageAction={({ pointerType }) => {
+                            onImageAction({
+                              insertOnCanvasDirectly: pointerType !== "mouse",
+                            });
+                          }}
                         />
                       </Stack.Row>
                     </Island>
@@ -670,7 +401,8 @@ const LayerUI = ({
               {!viewModeEnabled && (
                 <div
                   className={clsx("undo-redo-buttons zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
+                    "layer-ui__wrapper__footer-left--transition-bottom":
+                      zenModeEnabled,
                   })}
                 >
                   {actionManager.renderAction("undo", { size: "small" })}
@@ -684,7 +416,8 @@ const LayerUI = ({
           className={clsx(
             "layer-ui__wrapper__footer-center zen-mode-transition",
             {
-              "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
+              "layer-ui__wrapper__footer-left--transition-bottom":
+                zenModeEnabled,
             },
           )}
         >
@@ -761,6 +494,8 @@ const LayerUI = ({
         renderCustomFooter={renderCustomFooter}
         viewModeEnabled={viewModeEnabled}
         showThemeBtn={showThemeBtn}
+        onImageAction={onImageAction}
+        renderTopRightUI={renderTopRightUI}
       />
     </>
   ) : (
@@ -808,6 +543,7 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
     prev.renderCustomFooter === next.renderCustomFooter &&
     prev.langCode === next.langCode &&
     prev.elements === next.elements &&
+    prev.files === next.files &&
     keys.every((key) => prevAppState[key] === nextAppState[key])
   );
 };

src/components/LibraryButton.tsx

@@ -26,7 +26,7 @@ export const LibraryButton: React.FC<{
           "zen-mode-visibility--hidden": appState.zenModeEnabled,
         },
       )}
-      title={`${capitalizeString(t("toolBar.library"))} — 9`}
+      title={`${capitalizeString(t("toolBar.library"))} — 0`}
       style={{ marginInlineStart: "var(--space-factor)" }}
     >
       <input
@@ -38,7 +38,7 @@ export const LibraryButton: React.FC<{
         }}
         checked={appState.isLibraryOpen}
         aria-label={capitalizeString(t("toolBar.library"))}
-        aria-keyshortcuts="9"
+        aria-keyshortcuts="0"
       />
       <div className="ToolIcon__icon">{LIBRARY_ICON}</div>
     </label>

src/components/LibraryMenu.scss

@@ -0,0 +1,55 @@
+@import "open-color/open-color";
+
+.excalidraw {
+  .layer-ui__library {
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .layer-ui__library-header {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin: 2px 0;
+
+      button {
+        // 2px from the left to account for focus border of left-most button
+        margin: 0 2px;
+      }
+
+      a {
+        margin-inline-start: auto;
+        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
+        padding-inline-end: 18px;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .layer-ui__library-message {
+    padding: 10px 20px;
+    max-width: 200px;
+  }
+
+  .publish-library-success {
+    .Dialog__content {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-close.ToolIcon_type_button {
+      background-color: $oc-blue-6;
+      align-self: flex-end;
+      &:hover {
+        background-color: $oc-blue-8;
+      }
+      .ToolIcon__icon {
+        width: auto;
+        font-size: 1rem;
+        color: $oc-white;
+        padding: 0 0.5rem;
+      }
+    }
+  }
+}

src/components/LibraryMenu.tsx

@@ -0,0 +1,287 @@
+import { useRef, useState, useEffect, useCallback, RefObject } from "react";
+import Library from "../data/library";
+import { t } from "../i18n";
+import { randomId } from "../random";
+import {
+  LibraryItems,
+  LibraryItem,
+  AppState,
+  BinaryFiles,
+  ExcalidrawProps,
+} from "../types";
+import { Dialog } from "./Dialog";
+import { Island } from "./Island";
+import PublishLibrary from "./PublishLibrary";
+import { ToolButton } from "./ToolButton";
+
+import "./LibraryMenu.scss";
+import LibraryMenuItems from "./LibraryMenuItems";
+import { EVENT } from "../constants";
+import { KEYS } from "../keys";
+
+const useOnClickOutside = (
+  ref: RefObject<HTMLElement>,
+  cb: (event: MouseEvent) => void,
+) => {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      if (!ref.current) {
+        return;
+      }
+
+      if (
+        event.target instanceof Element &&
+        (ref.current.contains(event.target) ||
+          !document.body.contains(event.target))
+      ) {
+        return;
+      }
+
+      cb(event);
+    };
+    document.addEventListener("pointerdown", listener, false);
+
+    return () => {
+      document.removeEventListener("pointerdown", listener);
+    };
+  }, [ref, cb]);
+};
+
+const getSelectedItems = (
+  libraryItems: LibraryItems,
+  selectedItems: LibraryItem["id"][],
+) => libraryItems.filter((item) => selectedItems.includes(item.id));
+
+export const LibraryMenu = ({
+  onClose,
+  onInsertShape,
+  pendingElements,
+  onAddToLibrary,
+  theme,
+  setAppState,
+  files,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+  appState,
+}: {
+  pendingElements: LibraryItem["elements"];
+  onClose: () => void;
+  onInsertShape: (elements: LibraryItem["elements"]) => void;
+  onAddToLibrary: () => void;
+  theme: AppState["theme"];
+  files: BinaryFiles;
+  setAppState: React.Component<any, AppState>["setState"];
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  focusContainer: () => void;
+  library: Library;
+  id: string;
+  appState: AppState;
+}) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useOnClickOutside(ref, (event) => {
+    // If click on the library icon, do nothing.
+    if ((event.target as Element).closest(".ToolIcon__library")) {
+      return;
+    }
+    onClose();
+  });
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === KEYS.ESCAPE) {
+        onClose();
+      }
+    };
+    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+    return () => {
+      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+    };
+  }, [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);
+  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
+    url: string;
+    authorName: string;
+  }>(null);
+  const loadingTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    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 items = await library.loadLibrary();
+
+    const nextItems = items.filter((item) => !selectedItems.includes(item.id));
+    library.saveLibrary(nextItems).catch((error) => {
+      setLibraryItems(items);
+      setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+    });
+    setSelectedItems([]);
+    setLibraryItems(nextItems);
+  }, [library, setAppState, selectedItems, setSelectedItems]);
+
+  const resetLibrary = useCallback(() => {
+    library.resetLibrary();
+    setLibraryItems([]);
+    focusContainer();
+  }, [library, focusContainer]);
+
+  const addToLibrary = useCallback(
+    async (elements: LibraryItem["elements"]) => {
+      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",
+          elements,
+          id: randomId(),
+          created: Date.now(),
+        },
+        ...items,
+      ];
+      onAddToLibrary();
+      library.saveLibrary(nextItems).catch((error) => {
+        setLibraryItems(items);
+        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
+      });
+      setLibraryItems(nextItems);
+    },
+    [onAddToLibrary, library, setAppState],
+  );
+
+  const renderPublishSuccess = useCallback(() => {
+    return (
+      <Dialog
+        onCloseRequest={() => setPublishLibSuccess(null)}
+        title={t("publishSuccessDialog.title")}
+        className="publish-library-success"
+        small={true}
+      >
+        <p>
+          {t("publishSuccessDialog.content", {
+            authorName: publishLibSuccess!.authorName,
+          })}{" "}
+          <a
+            href={publishLibSuccess?.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("publishSuccessDialog.link")}
+          </a>
+        </p>
+        <ToolButton
+          type="button"
+          title={t("buttons.close")}
+          aria-label={t("buttons.close")}
+          label={t("buttons.close")}
+          onClick={() => setPublishLibSuccess(null)}
+          data-testid="publish-library-success-close"
+          className="publish-library-success-close"
+        />
+      </Dialog>
+    );
+  }, [setPublishLibSuccess, publishLibSuccess]);
+
+  const onPublishLibSuccess = useCallback(
+    (data) => {
+      setShowPublishLibraryDialog(false);
+      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
+      const nextLibItems = libraryItems.slice();
+      nextLibItems.forEach((libItem) => {
+        if (selectedItems.includes(libItem.id)) {
+          libItem.status = "published";
+        }
+      });
+      library.saveLibrary(nextLibItems);
+      setLibraryItems(nextLibItems);
+    },
+    [
+      setShowPublishLibraryDialog,
+      setPublishLibSuccess,
+      libraryItems,
+      selectedItems,
+      library,
+    ],
+  );
+
+  return loadingState === "preloading" ? null : (
+    <Island padding={1} ref={ref} className="layer-ui__library">
+      {showPublishLibraryDialog && (
+        <PublishLibrary
+          onClose={() => setShowPublishLibraryDialog(false)}
+          libraryItems={getSelectedItems(libraryItems, selectedItems)}
+          appState={appState}
+          onSuccess={onPublishLibSuccess}
+          onError={(error) => window.alert(error)}
+          updateItemsInStorage={() => library.saveLibrary(libraryItems)}
+          onRemove={(id: string) =>
+            setSelectedItems(selectedItems.filter((_id) => _id !== id))
+          }
+        />
+      )}
+      {publishLibSuccess && renderPublishSuccess()}
+
+      {loadingState === "loading" ? (
+        <div className="layer-ui__library-message">
+          {t("labels.libraryLoadingMessage")}
+        </div>
+      ) : (
+        <LibraryMenuItems
+          libraryItems={libraryItems}
+          onRemoveFromLibrary={removeFromLibrary}
+          onAddToLibrary={addToLibrary}
+          onInsertShape={onInsertShape}
+          pendingElements={pendingElements}
+          setAppState={setAppState}
+          libraryReturnUrl={libraryReturnUrl}
+          library={library}
+          theme={theme}
+          files={files}
+          id={id}
+          selectedItems={selectedItems}
+          onToggle={(id) => {
+            if (!selectedItems.includes(id)) {
+              setSelectedItems([...selectedItems, id]);
+            } else {
+              setSelectedItems(selectedItems.filter((_id) => _id !== id));
+            }
+          }}
+          onPublish={() => setShowPublishLibraryDialog(true)}
+          resetLibrary={resetLibrary}
+        />
+      )}
+    </Island>
+  );
+};

src/components/LibraryMenuItems.scss

@@ -0,0 +1,102 @@
+@import "open-color/open-color";
+
+.excalidraw {
+  .library-menu-items-container {
+    .library-actions {
+      display: flex;
+
+      button .library-actions-counter {
+        position: absolute;
+        right: 2px;
+        bottom: 2px;
+        border-radius: 50%;
+        width: 1em;
+        height: 1em;
+        padding: 1px;
+        font-size: 0.7rem;
+        background: #fff;
+      }
+
+      &--remove {
+        background-color: $oc-red-7;
+        &:hover {
+          background-color: $oc-red-8;
+        }
+        &:active {
+          background-color: $oc-red-9;
+        }
+        svg {
+          color: $oc-white;
+        }
+        .library-actions-counter {
+          color: $oc-red-7;
+        }
+      }
+
+      &--export {
+        background-color: $oc-lime-5;
+
+        &:hover {
+          background-color: $oc-lime-7;
+        }
+
+        &:active {
+          background-color: $oc-lime-8;
+        }
+        svg {
+          color: $oc-white;
+        }
+        .library-actions-counter {
+          color: $oc-lime-5;
+        }
+      }
+
+      &--publish {
+        background-color: $oc-cyan-6;
+        &:hover {
+          background-color: $oc-cyan-7;
+        }
+        &:active {
+          background-color: $oc-cyan-9;
+        }
+        svg {
+          color: $oc-white;
+        }
+        label {
+          margin-left: -0.2em;
+          margin-right: 1.1em;
+          color: $oc-white;
+          font-size: 0.86em;
+        }
+        .library-actions-counter {
+          color: $oc-cyan-6;
+        }
+      }
+
+      &--load {
+        background-color: $oc-blue-6;
+        &:hover {
+          background-color: $oc-blue-7;
+        }
+        &:active {
+          background-color: $oc-blue-9;
+        }
+        svg {
+          color: $oc-white;
+        }
+      }
+    }
+    &__items {
+      max-height: 50vh;
+      overflow: auto;
+      margin-top: 0.5rem;
+    }
+
+    .separator {
+      font-weight: 500;
+      font-size: 0.9rem;
+      margin: 0.6em 0.2em;
+      color: var(--text-primary-color);
+    }
+  }
+}

src/components/LibraryMenuItems.tsx

@@ -0,0 +1,322 @@
+import { chunk } from "lodash";
+import { useCallback, useState } from "react";
+import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
+import Library from "../data/library";
+import { ExcalidrawElement, NonDeleted } from "../element/types";
+import { t } from "../i18n";
+import {
+  AppState,
+  BinaryFiles,
+  ExcalidrawProps,
+  LibraryItem,
+  LibraryItems,
+} from "../types";
+import { muteFSAbortError } from "../utils";
+import { useIsMobile } from "./App";
+import ConfirmDialog from "./ConfirmDialog";
+import { exportToFileIcon, load, publishIcon, trash } from "./icons";
+import { LibraryUnit } from "./LibraryUnit";
+import Stack from "./Stack";
+import { ToolButton } from "./ToolButton";
+import { Tooltip } from "./Tooltip";
+
+import "./LibraryMenuItems.scss";
+
+const LibraryMenuItems = ({
+  libraryItems,
+  onRemoveFromLibrary,
+  onAddToLibrary,
+  onInsertShape,
+  pendingElements,
+  theme,
+  setAppState,
+  libraryReturnUrl,
+  library,
+  files,
+  id,
+  selectedItems,
+  onToggle,
+  onPublish,
+  resetLibrary,
+}: {
+  libraryItems: LibraryItems;
+  pendingElements: LibraryItem["elements"];
+  onRemoveFromLibrary: () => void;
+  onInsertShape: (elements: LibraryItem["elements"]) => void;
+  onAddToLibrary: (elements: LibraryItem["elements"]) => void;
+  theme: AppState["theme"];
+  files: BinaryFiles;
+  setAppState: React.Component<any, AppState>["setState"];
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  library: Library;
+  id: string;
+  selectedItems: LibraryItem["id"][];
+  onToggle: (id: LibraryItem["id"]) => void;
+  onPublish: () => void;
+  resetLibrary: () => void;
+}) => {
+  const renderRemoveLibAlert = useCallback(() => {
+    const content = selectedItems.length
+      ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
+      : t("alerts.resetLibrary");
+    const title = selectedItems.length
+      ? t("confirmDialog.removeItemsFromLib")
+      : t("confirmDialog.resetLibrary");
+    return (
+      <ConfirmDialog
+        onConfirm={() => {
+          if (selectedItems.length) {
+            onRemoveFromLibrary();
+          } else {
+            resetLibrary();
+          }
+          setShowRemoveLibAlert(false);
+        }}
+        onCancel={() => {
+          setShowRemoveLibAlert(false);
+        }}
+        title={title}
+      >
+        <p>{content}</p>
+      </ConfirmDialog>
+    );
+  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
+
+  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
+
+  const isMobile = useIsMobile();
+
+  const renderLibraryActions = () => {
+    const itemsSelected = !!selectedItems.length;
+    const items = itemsSelected
+      ? libraryItems.filter((item) => selectedItems.includes(item.id))
+      : libraryItems;
+    const resetLabel = itemsSelected
+      ? t("buttons.remove")
+      : t("buttons.resetLibrary");
+    return (
+      <div className="library-actions">
+        {(!itemsSelected || !isMobile) && (
+          <ToolButton
+            key="import"
+            type="button"
+            title={t("buttons.load")}
+            aria-label={t("buttons.load")}
+            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 });
+                });
+            }}
+            className="library-actions--load"
+          />
+        )}
+        {!!items.length && (
+          <>
+            <ToolButton
+              key="export"
+              type="button"
+              title={t("buttons.export")}
+              aria-label={t("buttons.export")}
+              icon={exportToFileIcon}
+              onClick={async () => {
+                const libraryItems = itemsSelected
+                  ? items
+                  : await library.loadLibrary();
+                saveLibraryAsJSON(libraryItems)
+                  .catch(muteFSAbortError)
+                  .catch((error) => {
+                    setAppState({ errorMessage: error.message });
+                  });
+              }}
+              className="library-actions--export"
+            >
+              {selectedItems.length > 0 && (
+                <span className="library-actions-counter">
+                  {selectedItems.length}
+                </span>
+              )}
+            </ToolButton>
+            <ToolButton
+              key="reset"
+              type="button"
+              title={resetLabel}
+              aria-label={resetLabel}
+              icon={trash}
+              onClick={() => setShowRemoveLibAlert(true)}
+              className="library-actions--remove"
+            >
+              {selectedItems.length > 0 && (
+                <span className="library-actions-counter">
+                  {selectedItems.length}
+                </span>
+              )}
+            </ToolButton>
+          </>
+        )}
+        {itemsSelected && !isPublished && (
+          <Tooltip label={t("hints.publishLibrary")}>
+            <ToolButton
+              type="button"
+              aria-label={t("buttons.publishLibrary")}
+              label={t("buttons.publishLibrary")}
+              icon={publishIcon}
+              className="library-actions--publish"
+              onClick={onPublish}
+            >
+              {!isMobile && <label>{t("buttons.publishLibrary")}</label>}
+              {selectedItems.length > 0 && (
+                <span className="library-actions-counter">
+                  {selectedItems.length}
+                </span>
+              )}
+            </ToolButton>
+          </Tooltip>
+        )}
+      </div>
+    );
+  };
+
+  const CELLS_PER_ROW = isMobile ? 4 : 6;
+
+  const referrer =
+    libraryReturnUrl || window.location.origin + window.location.pathname;
+  const isPublished = selectedItems.some(
+    (id) => libraryItems.find((item) => item.id === id)?.status === "published",
+  );
+
+  const createLibraryItemCompo = (params: {
+    item:
+      | LibraryItem
+      | /* pending library item */ {
+          id: null;
+          elements: readonly NonDeleted<ExcalidrawElement>[];
+        }
+      | null;
+    onClick?: () => void;
+    key: string;
+  }) => {
+    return (
+      <Stack.Col key={params.key}>
+        <LibraryUnit
+          elements={params.item?.elements}
+          files={files}
+          isPending={!params.item?.id && !!params.item?.elements}
+          onClick={params.onClick || (() => {})}
+          id={params.item?.id || null}
+          selected={!!params.item?.id && selectedItems.includes(params.item.id)}
+          onToggle={() => {
+            if (params.item?.id) {
+              onToggle(params.item.id);
+            }
+          }}
+        />
+      </Stack.Col>
+    );
+  };
+
+  const renderLibrarySection = (
+    items: (
+      | LibraryItem
+      | /* pending library item */ {
+          id: null;
+          elements: readonly NonDeleted<ExcalidrawElement>[];
+        }
+    )[],
+  ) => {
+    const _items = items.map((item) => {
+      if (item.id) {
+        return createLibraryItemCompo({
+          item,
+          onClick: () => onInsertShape(item.elements),
+          key: item.id,
+        });
+      }
+      return createLibraryItemCompo({
+        key: "__pending__item__",
+        item,
+        onClick: () => onAddToLibrary(pendingElements),
+      });
+    });
+
+    // ensure we render all empty cells if no items are present
+    let rows = chunk(_items, CELLS_PER_ROW);
+    if (!rows.length) {
+      rows = [[]];
+    }
+
+    return rows.map((rowItems, index, rows) => {
+      if (index === rows.length - 1) {
+        // pad row with empty cells
+        rowItems = rowItems.concat(
+          new Array(CELLS_PER_ROW - rowItems.length)
+            .fill(null)
+            .map((_, index) => {
+              return createLibraryItemCompo({
+                key: `empty_${index}`,
+                item: null,
+              });
+            }),
+        );
+      }
+      return (
+        <Stack.Row align="center" gap={1} key={index}>
+          {rowItems}
+        </Stack.Row>
+      );
+    });
+  };
+
+  const publishedItems = libraryItems.filter(
+    (item) => item.status === "published",
+  );
+  const unpublishedItems = [
+    // append pending library item
+    ...(pendingElements.length
+      ? [{ id: null, elements: pendingElements }]
+      : []),
+    ...libraryItems.filter((item) => item.status !== "published"),
+  ];
+
+  return (
+    <div className="library-menu-items-container">
+      {showRemoveLibAlert && renderRemoveLibAlert()}
+      <div className="layer-ui__library-header" key="library-header">
+        {renderLibraryActions()}
+        <a
+          href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+            window.name || "_blank"
+          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}`}
+          target="_excalidraw_libraries"
+        >
+          {t("labels.libraries")}
+        </a>
+      </div>
+      <Stack.Col
+        className="library-menu-items-container__items"
+        align="start"
+        gap={1}
+      >
+        <>
+          <div className="separator">{t("labels.personalLib")}</div>
+          {renderLibrarySection(unpublishedItems)}
+        </>
+
+        <>
+          <div className="separator">{t("labels.excalidrawLib")} </div>
+
+          {renderLibrarySection(publishedItems)}
+        </>
+      </Stack.Col>
+    </div>
+  );
+};
+
+export default LibraryMenuItems;

src/components/LibraryUnit.scss

@@ -1,3 +1,5 @@
+@import "../css/variables.module";
+
 .excalidraw {
   .library-unit {
     align-items: center;
@@ -7,6 +9,20 @@
     position: relative;
     width: 63px;
     height: 63px; // match width
+
+    &--hover {
+      box-shadow: inset 0px 0px 0px 2px $oc-blue-5;
+      border-color: $oc-blue-5;
+    }
+
+    &--selected {
+      box-shadow: inset 0px 0px 0px 2px $oc-blue-8;
+      border-color: $oc-blue-8;
+    }
+  }
+
+  &.theme--dark .library-unit {
+    border-color: rgb(48, 48, 48);
   }
 
   .library-unit__dragger {
@@ -22,9 +38,9 @@
     max-width: 100%;
   }
 
-  .library-unit__removeFromLibrary,
+  .library-unit__checkbox-container,
-  .library-unit__removeFromLibrary:hover,
+  .library-unit__checkbox-container:hover,
-  .library-unit__removeFromLibrary:active {
+  .library-unit__checkbox-container:active {
     align-items: center;
     background: none;
     border: none;
@@ -32,10 +48,35 @@
     display: flex;
     justify-content: center;
     margin: 0;
-    padding: 0;
+    padding: 0.5rem;
     position: absolute;
-    right: 5px;
+    left: 2rem;
-    top: 5px;
+    bottom: 2rem;
+    cursor: pointer;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  .library-unit__checkbox {
+    position: absolute;
+    left: 2.3rem;
+    bottom: 2.3rem;
+
+    .Checkbox-box {
+      width: 13px;
+      height: 13px;
+      border-radius: 2px;
+      margin: 0.5em 0.5em 0.2em 0.2em;
+      background-color: $oc-blue-1;
+    }
+
+    &.Checkbox:hover {
+      .Checkbox-box {
+        background-color: $oc-blue-2;
+      }
+    }
   }
 
   .library-unit__removeFromLibrary > svg {
@@ -43,29 +84,32 @@
     width: 16px;
   }
 
-  .library-unit__pulse {
+  .library-unit__adder {
     transform: scale(1);
-    animation: library-unit__pulse-animation 1s ease-in infinite;
+    animation: library-unit__adder-animation 1s ease-in infinite;
   }
 
   .library-unit__adder {
     position: absolute;
-    left: 50%;
+    left: 40%;
-    top: 50%;
+    top: 40%;
-    width: 20px;
+    width: 2rem;
-    height: 20px;
+    height: 2rem;
     margin-left: -10px;
     margin-top: -10px;
     pointer-events: none;
   }
+  .library-unit--hover .library-unit__adder {
+    color: $oc-blue-7;
+  }
 
   .library-unit__active {
     cursor: pointer;
   }
 
-  @keyframes library-unit__pulse-animation {
+  @keyframes library-unit__adder-animation {
     0% {
-      transform: scale(0.95);
+      transform: scale(0.85);
     }
 
     50% {
@@ -73,7 +117,7 @@
     }
 
     100% {
-      transform: scale(0.95);
+      transform: scale(0.85);
     }
   }
 }

src/components/LibraryUnit.tsx

@@ -1,13 +1,12 @@
 import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
-import { close } from "../components/icons";
 import { MIME_TYPES } from "../constants";
-import { t } from "../i18n";
 import { useIsMobile } from "../components/App";
 import { exportToSvg } from "../scene/export";
-import { LibraryItem } from "../types";
+import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
+import { CheckboxItem } from "./CheckboxItem";
 
 // fa-plus
 const PLUS_ICON = (
@@ -20,68 +19,72 @@ const PLUS_ICON = (
 );
 
 export const LibraryUnit = ({
+  id,
   elements,
-  pendingElements,
+  files,
-  onRemoveFromLibrary,
+  isPending,
   onClick,
+  selected,
+  onToggle,
 }: {
-  elements?: LibraryItem;
+  id: LibraryItem["id"] | /** for pending item */ null;
-  pendingElements?: LibraryItem;
+  elements?: LibraryItem["elements"];
-  onRemoveFromLibrary: () => void;
+  files: BinaryFiles;
+  isPending?: boolean;
   onClick: () => void;
+  selected: boolean;
+  onToggle: (id: string) => void;
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
-    const elementsToRender = elements || pendingElements;
+    const node = ref.current;
-    if (!elementsToRender) {
+    if (!node) {
       return;
     }
-    let svg: SVGSVGElement;
-    const current = ref.current!;
 
     (async () => {
-      svg = await exportToSvg(elementsToRender, {
+      if (!elements) {
-        exportBackground: false,
+        return;
-        viewBackgroundColor: oc.white,
-      });
-      for (const child of ref.current!.children) {
-        if (child.tagName !== "svg") {
-          continue;
-        }
-        current!.removeChild(child);
       }
-      current!.appendChild(svg);
+      const svg = await exportToSvg(
+        elements,
+        {
+          exportBackground: false,
+          viewBackgroundColor: oc.white,
+        },
+        files,
+      );
+      node.innerHTML = svg.outerHTML;
     })();
 
     return () => {
-      if (svg) {
+      node.innerHTML = "";
-        current.removeChild(svg);
-      }
     };
-  }, [elements, pendingElements]);
+  }, [elements, files]);
 
   const [isHovered, setIsHovered] = useState(false);
   const isMobile = useIsMobile();
-
+  const adder = isPending && (
-  const adder = (isHovered || isMobile) && pendingElements && (
     <div className="library-unit__adder">{PLUS_ICON}</div>
   );
 
   return (
     <div
       className={clsx("library-unit", {
-        "library-unit__active": elements || pendingElements,
+        "library-unit__active": elements,
+        "library-unit--hover": elements && isHovered,
+        "library-unit--selected": selected,
       })}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
         className={clsx("library-unit__dragger", {
-          "library-unit__pulse": !!pendingElements,
+          "library-unit__pulse": !!isPending,
         })}
         ref={ref}
         draggable={!!elements}
-        onClick={!!elements || !!pendingElements ? onClick : undefined}
+        onClick={!!elements || !!isPending ? onClick : undefined}
         onDragStart={(event) => {
           setIsHovered(false);
           event.dataTransfer.setData(
@@ -91,14 +94,12 @@ export const LibraryUnit = ({
         }}
       />
       {adder}
-      {elements && (isHovered || isMobile) && (
+      {id && elements && (isHovered || isMobile || selected) && (
-        <button
+        <CheckboxItem
-          className="library-unit__removeFromLibrary"
+          checked={selected}
-          aria-label={t("labels.removeFromLibrary")}
+          onChange={() => onToggle(id)}
-          onClick={onRemoveFromLibrary}
+          className="library-unit__checkbox"
-        >
+        />
-          {close}
-        </button>
       )}
     </div>
   );

src/components/MobileMenu.tsx

@@ -33,6 +33,11 @@ type MobileMenuProps = {
   renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
   viewModeEnabled: boolean;
   showThemeBtn: boolean;
+  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
+  renderTopRightUI?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
 };
 
 export const MobileMenu = ({
@@ -50,6 +55,8 @@ export const MobileMenu = ({
   renderCustomFooter,
   viewModeEnabled,
   showThemeBtn,
+  onImageAction,
+  renderTopRightUI,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -65,9 +72,15 @@ export const MobileMenu = ({
                       canvas={canvas}
                       elementType={appState.elementType}
                       setAppState={setAppState}
+                      onImageAction={({ pointerType }) => {
+                        onImageAction({
+                          insertOnCanvasDirectly: pointerType !== "mouse",
+                        });
+                      }}
                     />
                   </Stack.Row>
                 </Island>
+                {renderTopRightUI && renderTopRightUI(true, appState)}
                 <LockButton
                   checked={appState.elementLocked}
                   onChange={onLockToggle}
@@ -79,7 +92,7 @@ export const MobileMenu = ({
             </Stack.Col>
           )}
         </Section>
-        <HintViewer appState={appState} elements={elements} />
+        <HintViewer appState={appState} elements={elements} isMobile={true} />
       </FixedSideContainer>
     );
   };

src/components/Modal.tsx

@@ -15,8 +15,9 @@ export const Modal = (props: {
   onCloseRequest(): void;
   labelledBy: string;
   theme?: AppState["theme"];
+  closeOnClickOutside?: boolean;
 }) => {
-  const { theme = THEME.LIGHT } = props;
+  const { theme = THEME.LIGHT, closeOnClickOutside = true } = props;
   const modalRoot = useBodyRoot(theme);
 
   if (!modalRoot) {
@@ -39,7 +40,10 @@ export const Modal = (props: {
       onKeyDown={handleKeydown}
       aria-labelledby={props.labelledBy}
     >
-      <div className="Modal__background" onClick={props.onCloseRequest}></div>
+      <div
+        className="Modal__background"
+        onClick={closeOnClickOutside ? props.onCloseRequest : undefined}
+      ></div>
       <div
         className="Modal__content"
         style={{ "--max-width": `${props.maxWidth}px` }}

src/components/PasteChartDialog.tsx

@@ -38,10 +38,14 @@ const ChartPreviewBtn = (props: {
     const previewNode = previewRef.current!;
 
     (async () => {
-      svg = await exportToSvg(elements, {
+      svg = await exportToSvg(
-        exportBackground: false,
+        elements,
-        viewBackgroundColor: oc.white,
+        {
-      });
+          exportBackground: false,
+          viewBackgroundColor: oc.white,
+        },
+        null, // files
+      );
 
       previewNode.appendChild(svg);
 
@@ -78,7 +82,7 @@ export const PasteChartDialog = ({
   appState: AppState;
   onClose: () => void;
   setAppState: React.Component<any, AppState>["setState"];
-  onInsertChart: (elements: LibraryItem) => void;
+  onInsertChart: (elements: LibraryItem["elements"]) => void;
 }) => {
   const handleClose = React.useCallback(() => {
     if (onClose) {

src/components/ProjectName.tsx

@@ -42,6 +42,7 @@ export const ProjectName = (props: Props) => {
       </label>
       {props.isNameEditable ? (
         <input
+          type="text"
           className="TextInput"
           onBlur={handleBlur}
           onKeyDown={handleKeyDown}

src/components/PublishLibrary.scss

@@ -0,0 +1,92 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .publish-library {
+    &__fields {
+      display: flex;
+      flex-direction: column;
+
+      label {
+        padding: 1em;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        span {
+          font-weight: 500;
+          font-size: 1rem;
+          color: $oc-gray-6;
+        }
+        input,
+        textarea {
+          width: 70%;
+          padding: 0.6em;
+          font-family: var(--ui-font);
+        }
+
+        .required {
+          color: $oc-red-8;
+          margin: 0.2rem;
+        }
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      padding: 0.2rem 0;
+      justify-content: flex-end;
+
+      .ToolIcon__icon {
+        min-width: 2.5rem;
+        width: auto;
+        font-size: 1rem;
+      }
+
+      .ToolIcon_type_button {
+        margin-left: 1rem;
+        padding: 0 0.5rem;
+      }
+
+      &--confirm.ToolIcon_type_button {
+        background-color: $oc-blue-6;
+
+        &:hover {
+          background-color: $oc-blue-8;
+        }
+      }
+
+      &--cancel.ToolIcon_type_button {
+        background-color: $oc-gray-5;
+        &:hover {
+          background-color: $oc-gray-6;
+        }
+      }
+
+      .ToolIcon__icon {
+        color: $oc-white;
+        .Spinner {
+          --spinner-color: #fff;
+          svg {
+            padding: 0.5rem;
+          }
+        }
+      }
+    }
+
+    .selected-library-items {
+      display: flex;
+      padding: 0 0.8rem;
+      flex-wrap: wrap;
+
+      .single-library-item-wrapper {
+        width: 9rem;
+      }
+    }
+
+    &-note {
+      padding: 1em;
+      font-style: italic;
+      font-size: 14px;
+      display: block;
+    }
+  }
+}

src/components/PublishLibrary.tsx

@@ -0,0 +1,429 @@
+import { ReactNode, useCallback, useEffect, useState } from "react";
+import oc from "open-color";
+
+import { Dialog } from "./Dialog";
+import { t } from "../i18n";
+
+import { ToolButton } from "./ToolButton";
+
+import { AppState, LibraryItems, LibraryItem } from "../types";
+import { exportToBlob } from "../packages/utils";
+import { EXPORT_DATA_TYPES, EXPORT_SOURCE } from "../constants";
+import { ExportedLibraryData } from "../data/types";
+
+import "./PublishLibrary.scss";
+import { ExcalidrawElement } from "../element/types";
+import { newElement } from "../element";
+import { mutateElement } from "../element/mutateElement";
+import { getCommonBoundingBox } from "../element/bounds";
+import SingleLibraryItem from "./SingleLibraryItem";
+
+interface PublishLibraryDataParams {
+  authorName: string;
+  githubHandle: string;
+  name: string;
+  description: string;
+  twitterHandle: string;
+  website: string;
+}
+
+const LOCAL_STORAGE_KEY_PUBLISH_LIBRARY = "publish-library-data";
+
+const savePublishLibDataToStorage = (data: PublishLibraryDataParams) => {
+  try {
+    localStorage.setItem(
+      LOCAL_STORAGE_KEY_PUBLISH_LIBRARY,
+      JSON.stringify(data),
+    );
+  } catch (error: any) {
+    // Unable to access window.localStorage
+    console.error(error);
+  }
+};
+
+const importPublishLibDataFromStorage = () => {
+  try {
+    const data = localStorage.getItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
+    if (data) {
+      return JSON.parse(data);
+    }
+  } catch (error: any) {
+    // Unable to access localStorage
+    console.error(error);
+  }
+
+  return null;
+};
+
+const PublishLibrary = ({
+  onClose,
+  libraryItems,
+  appState,
+  onSuccess,
+  onError,
+  updateItemsInStorage,
+  onRemove,
+}: {
+  onClose: () => void;
+  libraryItems: LibraryItems;
+  appState: AppState;
+  onSuccess: (data: {
+    url: string;
+    authorName: string;
+    items: LibraryItems;
+  }) => void;
+
+  onError: (error: Error) => void;
+  updateItemsInStorage: (items: LibraryItems) => void;
+  onRemove: (id: string) => void;
+}) => {
+  const [libraryData, setLibraryData] = useState<PublishLibraryDataParams>({
+    authorName: "",
+    githubHandle: "",
+    name: "",
+    description: "",
+    twitterHandle: "",
+    website: "",
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const data = importPublishLibDataFromStorage();
+    if (data) {
+      setLibraryData(data);
+    }
+  }, []);
+
+  const [clonedLibItems, setClonedLibItems] = useState<LibraryItems>(
+    libraryItems.slice(),
+  );
+
+  useEffect(() => {
+    setClonedLibItems(libraryItems.slice());
+  }, [libraryItems]);
+
+  const onInputChange = (event: any) => {
+    setLibraryData({
+      ...libraryData,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    const erroredLibItems: LibraryItem[] = [];
+    let isError = false;
+    clonedLibItems.forEach((libItem) => {
+      let error = "";
+      if (!libItem.name) {
+        error = t("publishDialog.errors.required");
+        isError = true;
+      }
+      erroredLibItems.push({ ...libItem, error });
+    });
+
+    if (isError) {
+      setClonedLibItems(erroredLibItems);
+      setIsSubmitting(false);
+      return;
+    }
+    const elements: ExcalidrawElement[] = [];
+    const prevBoundingBox = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+    clonedLibItems.forEach((libItem) => {
+      const boundingBox = getCommonBoundingBox(libItem.elements);
+      const width = boundingBox.maxX - boundingBox.minX + 30;
+      const height = boundingBox.maxY - boundingBox.minY + 30;
+      const offset = {
+        x: prevBoundingBox.maxX - boundingBox.minX,
+        y: prevBoundingBox.maxY - boundingBox.minY,
+      };
+
+      const itemsWithUpdatedCoords = libItem.elements.map((element) => {
+        element = mutateElement(element, {
+          x: element.x + offset.x + 15,
+          y: element.y + offset.y + 15,
+        });
+        return element;
+      });
+      const items = [
+        ...itemsWithUpdatedCoords,
+        newElement({
+          type: "rectangle",
+          width,
+          height,
+          x: prevBoundingBox.maxX,
+          y: prevBoundingBox.maxY,
+          strokeColor: "#ced4da",
+          backgroundColor: "transparent",
+          strokeStyle: "solid",
+          opacity: 100,
+          roughness: 0,
+          strokeSharpness: "sharp",
+          fillStyle: "solid",
+          strokeWidth: 1,
+        }),
+      ];
+      elements.push(...items);
+      prevBoundingBox.maxX = prevBoundingBox.maxX + width + 30;
+    });
+    const png = await exportToBlob({
+      elements,
+      mimeType: "image/png",
+      appState: {
+        ...appState,
+        viewBackgroundColor: oc.white,
+        exportBackground: true,
+      },
+      files: null,
+    });
+
+    const libContent: ExportedLibraryData = {
+      type: EXPORT_DATA_TYPES.excalidrawLibrary,
+      version: 2,
+      source: EXPORT_SOURCE,
+      libraryItems: clonedLibItems,
+    };
+    const content = JSON.stringify(libContent, null, 2);
+    const lib = new Blob([content], { type: "application/json" });
+
+    const formData = new FormData();
+    formData.append("excalidrawLib", lib);
+    formData.append("excalidrawPng", png!);
+    formData.append("title", libraryData.name);
+    formData.append("authorName", libraryData.authorName);
+    formData.append("githubHandle", libraryData.githubHandle);
+    formData.append("name", libraryData.name);
+    formData.append("description", libraryData.description);
+    formData.append("twitterHandle", libraryData.twitterHandle);
+    formData.append("website", libraryData.website);
+
+    fetch(`${process.env.REACT_APP_LIBRARY_BACKEND}/submit`, {
+      method: "post",
+      body: formData,
+    })
+      .then(
+        (response) => {
+          if (response.ok) {
+            return response.json().then(({ url }) => {
+              // flush data from local storage
+              localStorage.removeItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
+              onSuccess({
+                url,
+                authorName: libraryData.authorName,
+                items: clonedLibItems,
+              });
+            });
+          }
+          return response
+            .json()
+            .catch(() => {
+              throw new Error(response.statusText || "something went wrong");
+            })
+            .then((error) => {
+              throw new Error(
+                error.message || response.statusText || "something went wrong",
+              );
+            });
+        },
+        (err) => {
+          console.error(err);
+          onError(err);
+          setIsSubmitting(false);
+        },
+      )
+      .catch((err) => {
+        console.error(err);
+        onError(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  const renderLibraryItems = () => {
+    const items: ReactNode[] = [];
+    clonedLibItems.forEach((libItem, index) => {
+      items.push(
+        <div className="single-library-item-wrapper" key={index}>
+          <SingleLibraryItem
+            libItem={libItem}
+            appState={appState}
+            index={index}
+            onChange={(val, index) => {
+              const items = clonedLibItems.slice();
+              items[index].name = val;
+              setClonedLibItems(items);
+            }}
+            onRemove={onRemove}
+          />
+        </div>,
+      );
+    });
+    return <div className="selected-library-items">{items}</div>;
+  };
+
+  const onDialogClose = useCallback(() => {
+    updateItemsInStorage(clonedLibItems);
+    savePublishLibDataToStorage(libraryData);
+    onClose();
+  }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);
+
+  const shouldRenderForm = !!libraryItems.length;
+  return (
+    <Dialog
+      onCloseRequest={onDialogClose}
+      title={t("publishDialog.title")}
+      className="publish-library"
+    >
+      {shouldRenderForm ? (
+        <form onSubmit={onSubmit}>
+          <div className="publish-library-note">
+            {t("publishDialog.noteDescription.pre")}
+            <a
+              href="https://libraries.excalidraw.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t("publishDialog.noteDescription.link")}
+            </a>{" "}
+            {t("publishDialog.noteDescription.post")}
+          </div>
+          <span className="publish-library-note">
+            {t("publishDialog.noteGuidelines.pre")}
+            <a
+              href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {t("publishDialog.noteGuidelines.link")}
+            </a>
+            {t("publishDialog.noteGuidelines.post")}
+          </span>
+
+          <div className="publish-library-note">
+            {t("publishDialog.noteItems")}
+          </div>
+          {renderLibraryItems()}
+          <div className="publish-library__fields">
+            <label>
+              <div>
+                <span>{t("publishDialog.libraryName")}</span>
+                <span aria-hidden="true" className="required">
+                  *
+                </span>
+              </div>
+              <input
+                type="text"
+                name="name"
+                required
+                value={libraryData.name}
+                onChange={onInputChange}
+                placeholder={t("publishDialog.placeholder.libraryName")}
+              />
+            </label>
+            <label style={{ alignItems: "flex-start" }}>
+              <div>
+                <span>{t("publishDialog.libraryDesc")}</span>
+                <span aria-hidden="true" className="required">
+                  *
+                </span>
+              </div>
+              <textarea
+                name="description"
+                rows={4}
+                required
+                value={libraryData.description}
+                onChange={onInputChange}
+                placeholder={t("publishDialog.placeholder.libraryDesc")}
+              />
+            </label>
+            <label>
+              <div>
+                <span>{t("publishDialog.authorName")}</span>
+                <span aria-hidden="true" className="required">
+                  *
+                </span>
+              </div>
+              <input
+                type="text"
+                name="authorName"
+                required
+                value={libraryData.authorName}
+                onChange={onInputChange}
+                placeholder={t("publishDialog.placeholder.authorName")}
+              />
+            </label>
+            <label>
+              <span>{t("publishDialog.githubUsername")}</span>
+              <input
+                type="text"
+                name="githubHandle"
+                value={libraryData.githubHandle}
+                onChange={onInputChange}
+                placeholder={t("publishDialog.placeholder.githubHandle")}
+              />
+            </label>
+            <label>
+              <span>{t("publishDialog.twitterUsername")}</span>
+              <input
+                type="text"
+                name="twitterHandle"
+                value={libraryData.twitterHandle}
+                onChange={onInputChange}
+                placeholder={t("publishDialog.placeholder.twitterHandle")}
+              />
+            </label>
+            <label>
+              <span>{t("publishDialog.website")}</span>
+              <input
+                type="text"
+                name="website"
+                pattern="https?://.+"
+                title={t("publishDialog.errors.website")}
+                value={libraryData.website}
+                onChange={onInputChange}
+                placeholder={t("publishDialog.placeholder.website")}
+              />
+            </label>
+            <span className="publish-library-note">
+              {t("publishDialog.noteLicense.pre")}
+              <a
+                href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t("publishDialog.noteLicense.link")}
+              </a>
+              {t("publishDialog.noteLicense.post")}
+            </span>
+          </div>
+          <div className="publish-library__buttons">
+            <ToolButton
+              type="button"
+              title={t("buttons.cancel")}
+              aria-label={t("buttons.cancel")}
+              label={t("buttons.cancel")}
+              onClick={onDialogClose}
+              data-testid="cancel-clear-canvas-button"
+              className="publish-library__buttons--cancel"
+            />
+            <ToolButton
+              type="submit"
+              title={t("buttons.submit")}
+              aria-label={t("buttons.submit")}
+              label={t("buttons.submit")}
+              className="publish-library__buttons--confirm"
+              isLoading={isSubmitting}
+            />
+          </div>
+        </form>
+      ) : (
+        <p style={{ padding: "1em", textAlign: "center", fontWeight: 500 }}>
+          {t("publishDialog.atleastOneLibItem")}
+        </p>
+      )}
+    </Dialog>
+  );
+};
+
+export default PublishLibrary;

src/components/SingleLibraryItem.scss

@@ -0,0 +1,66 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .single-library-item {
+    position: relative;
+    &__svg {
+      width: 7.5rem;
+      height: 7.5rem;
+      border: 1px solid var(--button-gray-2);
+      margin: 0.3rem;
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .ToolIcon__icon {
+      background-color: $oc-white;
+      width: auto;
+      height: auto;
+      margin: 0 0.5rem;
+    }
+    .ToolIcon,
+    .ToolIcon_type_button:hover {
+      background-color: white;
+    }
+    .required,
+    .error {
+      color: $oc-red-8;
+      font-weight: bold;
+      font-size: 1rem;
+      margin: 0.2rem;
+    }
+    .error {
+      font-weight: 500;
+      margin: 0;
+      padding: 0.3em 0;
+    }
+
+    &--remove {
+      position: absolute;
+      top: 0.2rem;
+      right: 1.3rem;
+
+      .ToolIcon__icon {
+        margin: 0;
+      }
+      .ToolIcon__icon {
+        background-color: $oc-red-6;
+        &:hover {
+          background-color: $oc-red-7;
+        }
+        &:active {
+          background-color: $oc-red-8;
+        }
+      }
+      svg {
+        color: $oc-white;
+        padding: 0.26rem;
+        border-radius: 0.3em;
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}

src/components/SingleLibraryItem.tsx

@@ -0,0 +1,99 @@
+import oc from "open-color";
+import { useEffect, useRef } from "react";
+import { t } from "../i18n";
+import { exportToSvg } from "../packages/utils";
+import { AppState, LibraryItem } from "../types";
+import { close } from "./icons";
+
+import "./SingleLibraryItem.scss";
+import { ToolButton } from "./ToolButton";
+
+const SingleLibraryItem = ({
+  libItem,
+  appState,
+  index,
+  onChange,
+  onRemove,
+}: {
+  libItem: LibraryItem;
+  appState: AppState;
+  index: number;
+  onChange: (val: string, index: number) => void;
+  onRemove: (id: string) => void;
+}) => {
+  const svgRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    const node = svgRef.current;
+    if (!node) {
+      return;
+    }
+    (async () => {
+      const svg = await exportToSvg({
+        elements: libItem.elements,
+        appState: {
+          ...appState,
+          viewBackgroundColor: oc.white,
+          exportBackground: true,
+        },
+        files: null,
+      });
+      node.innerHTML = svg.outerHTML;
+    })();
+  }, [libItem.elements, appState]);
+
+  return (
+    <div className="single-library-item">
+      <div ref={svgRef} className="single-library-item__svg" />
+      <ToolButton
+        aria-label={t("buttons.remove")}
+        type="button"
+        icon={close}
+        className="single-library-item--remove"
+        onClick={onRemove.bind(null, libItem.id)}
+        title={t("buttons.remove")}
+      />
+      <div
+        style={{
+          display: "flex",
+          margin: "0.8rem 0.3rem",
+          width: "100%",
+          fontSize: "14px",
+          fontWeight: 500,
+          flexDirection: "column",
+        }}
+      >
+        <label
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: "column",
+          }}
+        >
+          <div style={{ padding: "0.5em 0" }}>
+            <span style={{ fontWeight: 500, color: oc.gray[6] }}>
+              {t("publishDialog.itemName")}
+            </span>
+            <span aria-hidden="true" className="required">
+              *
+            </span>
+          </div>
+          <input
+            type="text"
+            ref={inputRef}
+            style={{ width: "80%", padding: "0.2rem" }}
+            defaultValue={libItem.name}
+            placeholder="Item name"
+            onChange={(event) => {
+              onChange(event.target.value, index);
+            }}
+          />
+        </label>
+        <span className="error">{libItem.error}</span>
+      </div>
+    </div>
+  );
+};
+
+export default SingleLibraryItem;

src/components/Spinner.scss

@@ -0,0 +1,48 @@
+@import "open-color/open-color.scss";
+
+$duration: 1.6s;
+
+.excalidraw {
+  .Spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    --spinner-color: var(--icon-fill-color);
+
+    svg {
+      animation: rotate $duration linear infinite;
+      transform-origin: center center;
+    }
+
+    circle {
+      stroke: var(--spinner-color);
+      animation: dash $duration linear 0s infinite;
+      stroke-linecap: round;
+    }
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 300;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 150, 300;
+      stroke-dashoffset: -200;
+    }
+    100% {
+      stroke-dasharray: 1, 300;
+      stroke-dashoffset: -280;
+    }
+  }
+}

src/components/Spinner.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import "./Spinner.scss";
+
+const Spinner = ({
+  size = "1em",
+  circleWidth = 8,
+}: {
+  size?: string | number;
+  circleWidth?: number;
+}) => {
+  return (
+    <div className="Spinner">
+      <svg viewBox="0 0 100 100" style={{ width: size, height: size }}>
+        <circle
+          cx="50"
+          cy="50"
+          r={50 - circleWidth / 2}
+          strokeWidth={circleWidth}
+          fill="none"
+          strokeMiterlimit="10"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default Spinner;

src/components/TextInput.scss

@@ -2,24 +2,6 @@
 
 .excalidraw {
   .TextInput {
-    color: var(--text-primary-color);
     display: inline-block;
-    border: 1.5px solid var(--button-gray-1);
-    line-height: 1;
-    padding: 0.75rem;
-    white-space: nowrap;
-    border-radius: var(--space-factor);
-    background-color: var(--input-bg-color);
-
-    &:not(:focus) {
-      &:hover {
-        background-color: var(--input-hover-bg-color);
-      }
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--focus-highlight-color);
-    }
   }
 }

src/components/ToolButton.tsx

@@ -1,8 +1,11 @@
 import "./ToolIcon.scss";
 
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import clsx from "clsx";
 import { useExcalidrawContainer } from "./App";
+import { AbortError } from "../errors";
+import Spinner from "./Spinner";
+import { PointerType } from "../element/types";
 
 export type ToolButtonSize = "small" | "medium";
 
@@ -22,13 +25,19 @@ type ToolButtonBaseProps = {
   visible?: boolean;
   selected?: boolean;
   className?: string;
+  isLoading?: boolean;
 };
 
 type ToolButtonProps =
   | (ToolButtonBaseProps & {
       type: "button";
       children?: React.ReactNode;
-      onClick?(): void;
+      onClick?(event: React.MouseEvent): void;
+    })
+  | (ToolButtonBaseProps & {
+      type: "submit";
+      children?: React.ReactNode;
+      onClick?(event: React.MouseEvent): void;
     })
   | (ToolButtonBaseProps & {
       type: "icon";
@@ -38,7 +47,7 @@ type ToolButtonProps =
   | (ToolButtonBaseProps & {
       type: "radio";
       checked: boolean;
-      onChange?(): void;
+      onChange?(data: { pointerType: PointerType | null }): void;
     });
 
 export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
@@ -47,7 +56,48 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
   React.useImperativeHandle(ref, () => innerRef.current);
   const sizeCn = `ToolIcon_size_${props.size}`;
 
-  if (props.type === "button" || props.type === "icon") {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const isMountedRef = useRef(true);
+
+  const onClick = async (event: React.MouseEvent) => {
+    const ret = "onClick" in props && props.onClick?.(event);
+
+    if (ret && "then" in ret) {
+      try {
+        setIsLoading(true);
+        await ret;
+      } catch (error: any) {
+        if (!(error instanceof AbortError)) {
+          throw error;
+        } else {
+          console.warn(error);
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    }
+  };
+
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    [],
+  );
+
+  const lastPointerTypeRef = useRef<PointerType | null>(null);
+
+  if (
+    props.type === "button" ||
+    props.type === "icon" ||
+    props.type === "submit"
+  ) {
+    const type = (props.type === "icon" ? "button" : props.type) as
+      | "button"
+      | "submit";
     return (
       <button
         className={clsx(
@@ -67,9 +117,10 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
         hidden={props.hidden}
         title={props.title}
         aria-label={props["aria-label"]}
-        type="button"
+        type={type}
-        onClick={props.onClick}
+        onClick={onClick}
         ref={innerRef}
+        disabled={isLoading || props.isLoading}
       >
         {(props.icon || props.label) && (
           <div className="ToolIcon__icon" aria-hidden="true">
@@ -79,10 +130,13 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
                 {props.keyBindingLabel}
               </span>
             )}
+            {props.isLoading && <Spinner />}
           </div>
         )}
         {props.showAriaLabel && (
-          <div className="ToolIcon__label">{props["aria-label"]}</div>
+          <div className="ToolIcon__label">
+            {props["aria-label"]} {isLoading && <Spinner />}
+          </div>
         )}
         {props.children}
       </button>
@@ -90,7 +144,18 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
   }
 
   return (
-    <label className={clsx("ToolIcon", props.className)} title={props.title}>
+    <label
+      className={clsx("ToolIcon", props.className)}
+      title={props.title}
+      onPointerDown={(event) => {
+        lastPointerTypeRef.current = event.pointerType || null;
+      }}
+      onPointerUp={() => {
+        requestAnimationFrame(() => {
+          lastPointerTypeRef.current = null;
+        });
+      }}
+    >
       <input
         className={`ToolIcon_type_radio ${sizeCn}`}
         type="radio"
@@ -99,7 +164,9 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
         aria-keyshortcuts={props["aria-keyshortcuts"]}
         data-testid={props["data-testid"]}
         id={`${excalId}-${props.id}`}
-        onChange={props.onChange}
+        onChange={() => {
+          props.onChange?.({ pointerType: lastPointerTypeRef.current });
+        }}
         checked={props.checked}
         ref={innerRef}
       />

src/components/ToolIcon.scss

@@ -6,7 +6,6 @@
     display: inline-flex;
     align-items: center;
     position: relative;
-    font-family: Cascadia;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     border-radius: var(--space-factor);
@@ -54,10 +53,16 @@
   }
 
   .ToolIcon__label {
+    display: flex;
+    align-items: center;
     color: var(--icon-fill-color);
     font-family: var(--ui-font);
     margin: 0 0.8em;
     text-overflow: ellipsis;
+
+    .Spinner {
+      margin-left: 0.6em;
+    }
   }
 
   .ToolIcon_size_small .ToolIcon__icon {

src/components/Tooltip.tsx

@@ -34,10 +34,8 @@ const updateTooltip = (
     width: itemWidth,
   } = item.getBoundingClientRect();
 
-  const {
+  const { width: labelWidth, height: labelHeight } =
-    width: labelWidth,
+    tooltip.getBoundingClientRect();
-    height: labelHeight,
-  } = tooltip.getBoundingClientRect();
 
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;

src/components/TopErrorBoundary.tsx

@@ -27,7 +27,7 @@ export class TopErrorBoundary extends React.Component<
     for (const [key, value] of Object.entries({ ...localStorage })) {
       try {
         _localStorage[key] = JSON.parse(value);
-      } catch (error) {
+      } catch (error: any) {
         _localStorage[key] = value;
       }
     }
@@ -60,7 +60,7 @@ export class TopErrorBoundary extends React.Component<
         )
       ).default;
       body = encodeURIComponent(templateStrFn(this.state.sentryEventId));
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
 
@@ -86,7 +86,7 @@ export class TopErrorBoundary extends React.Component<
                 try {
                   localStorage.clear();
                   window.location.reload();
-                } catch (error) {
+                } catch (error: any) {
                   console.error(error);
                 }
               }}

src/components/icons.tsx

@@ -30,8 +30,12 @@ export const createIcon = (
   d: string | React.ReactNode,
   opts: number | Opts = 512,
 ) => {
-  const { width = 512, height = width, mirror, style } =
+  const {
-    typeof opts === "number" ? ({ width: opts } as Opts) : opts;
+    width = 512,
+    height = width,
+    mirror,
+    style,
+  } = typeof opts === "number" ? ({ width: opts } as Opts) : opts;
   return (
     <svg
       aria-hidden="true"
@@ -81,6 +85,7 @@ export const clipboard = createIcon(
 
 export const trash = createIcon(
   "M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z",
+
   { width: 448, height: 512 },
 );
 
@@ -752,6 +757,21 @@ export const ArrowheadBarIcon = React.memo(
     ),
 );
 
+export const ArrowheadTriangleIcon = React.memo(
+  ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
+    createIcon(
+      <g
+        stroke={iconFillColor(theme)}
+        fill={iconFillColor(theme)}
+        transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
+      >
+        <path d="M32 10L6 10" strokeWidth={2} />
+        <path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" />
+      </g>,
+      { width: 40, height: 20 },
+    ),
+);
+
 export const FontSizeSmallIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <path
@@ -863,3 +883,11 @@ export const TextAlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
     { width: 448, height: 512 },
   ),
 );
+
+export const publishIcon = createIcon(
+  <path
+    d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"
+    fill="currentColor"
+  />,
+  { width: 640, height: 512 },
+);

src/constants.ts

@@ -90,6 +90,12 @@ export const GRID_SIZE = 20; // TODO make it configurable?
 export const MIME_TYPES = {
   excalidraw: "application/vnd.excalidraw+json",
   excalidrawlib: "application/vnd.excalidrawlib+json",
+  json: "application/json",
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpg: "image/jpeg",
+  gif: "image/gif",
+  binary: "application/octet-stream",
 } as const;
 
 export const EXPORT_DATA_TYPES = {
@@ -105,6 +111,7 @@ export const STORAGE_KEYS = {
 } as const;
 
 // time in milliseconds
+export const IMAGE_RENDER_TIMEOUT = 500;
 export const TAP_TWICE_TIMEOUT = 300;
 export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
@@ -154,3 +161,19 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
+
+export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_JPG = 10000;
+export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_OTHER = 1440;
+
+export const ALLOWED_IMAGE_MIME_TYPES = [
+  MIME_TYPES.png,
+  MIME_TYPES.jpg,
+  MIME_TYPES.svg,
+  MIME_TYPES.gif,
+] as const;
+
+export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
+
+export const SVG_NS = "http://www.w3.org/2000/svg";
+
+export const ENCRYPTION_KEY_BITS = 128;

src/css/styles.scss

@@ -517,6 +517,27 @@
     }
   }
 
+  input[type="text"],
+  textarea:not(.excalidraw-wysiwyg) {
+    color: var(--text-primary-color);
+    border: 1.5px solid var(--input-border-color);
+    padding: 0.75rem;
+    white-space: nowrap;
+    border-radius: var(--space-factor);
+    background-color: var(--input-bg-color);
+
+    &:not(:focus) {
+      &:hover {
+        background-color: var(--input-hover-bg-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
+  }
+
   @media print {
     .App-bottom-bar,
     .FixedSideContainer,

src/css/theme.scss

@@ -16,7 +16,7 @@
   --icon-green-fill-color: #{$oc-green-9};
   --default-bg-color: #{$oc-white};
   --input-bg-color: #{$oc-white};
-  --input-border-color: #{$oc-gray-3};
+  --input-border-color: #{$oc-gray-4};
   --input-hover-bg-color: #{$oc-gray-1};
   --input-label-color: #{$oc-gray-7};
   --island-bg-color: rgba(255, 255, 255, 0.96);
@@ -64,6 +64,7 @@
     --input-label-color: #{$oc-gray-2};
     --island-bg-color: rgba(30, 30, 30, 0.98);
     --keybinding-color: #{$oc-gray-6};
+    --link-color: #{$oc-blue-4};
     --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
     --popup-bg-color: #2c2c2c;
     --popup-secondary-bg-color: #222;

src/data/blob.ts

@@ -1,11 +1,17 @@
+import { nanoid } from "nanoid";
 import { cleanAppStateForExport } from "../appState";
-import { EXPORT_DATA_TYPES } from "../constants";
+import {
+  ALLOWED_IMAGE_MIME_TYPES,
+  EXPORT_DATA_TYPES,
+  MIME_TYPES,
+} from "../constants";
 import { clearElementsForExport } from "../element";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
-import { AppState } from "../types";
+import { AppState, DataURL } from "../types";
+import { bytesToHexString } from "../utils";
 import { FileSystemHandle } from "./filesystem";
 import { isValidExcalidrawData } from "./json";
 import { restore } from "./restore";
@@ -14,16 +20,22 @@ import { ImportedLibraryData } from "./types";
 const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
 
-  if (blob.type === "image/png") {
+  if (blob.type === MIME_TYPES.png) {
     try {
       return await (
         await import(/* webpackChunkName: "image" */ "./image")
       ).decodePngMetadata(blob);
-    } catch (error) {
+    } catch (error: any) {
       if (error.message === "INVALID") {
-        throw new Error(t("alerts.imageDoesNotContainScene"));
+        throw new DOMException(
+          t("alerts.imageDoesNotContainScene"),
+          "EncodingError",
+        );
       } else {
-        throw new Error(t("alerts.cannotRestoreFromImage"));
+        throw new DOMException(
+          t("alerts.cannotRestoreFromImage"),
+          "EncodingError",
+        );
       }
     }
   } else {
@@ -40,18 +52,24 @@ const parseFileContents = async (blob: Blob | File) => {
         };
       });
     }
-    if (blob.type === "image/svg+xml") {
+    if (blob.type === MIME_TYPES.svg) {
       try {
         return await (
           await import(/* webpackChunkName: "image" */ "./image")
         ).decodeSvgMetadata({
           svg: contents,
         });
-      } catch (error) {
+      } catch (error: any) {
         if (error.message === "INVALID") {
-          throw new Error(t("alerts.imageDoesNotContainScene"));
+          throw new DOMException(
+            t("alerts.imageDoesNotContainScene"),
+            "EncodingError",
+          );
         } else {
-          throw new Error(t("alerts.cannotRestoreFromImage"));
+          throw new DOMException(
+            t("alerts.cannotRestoreFromImage"),
+            "EncodingError",
+          );
         }
       }
     }
@@ -70,13 +88,13 @@ export const getMimeType = (blob: Blob | string): string => {
     name = blob.name || "";
   }
   if (/\.(excalidraw|json)$/.test(name)) {
-    return "application/json";
+    return MIME_TYPES.json;
   } else if (/\.png$/.test(name)) {
-    return "image/png";
+    return MIME_TYPES.png;
   } else if (/\.jpe?g$/.test(name)) {
-    return "image/jpeg";
+    return MIME_TYPES.jpg;
   } else if (/\.svg$/.test(name)) {
-    return "image/svg+xml";
+    return MIME_TYPES.svg;
   }
   return "";
 };
@@ -100,6 +118,15 @@ export const isImageFileHandle = (handle: FileSystemHandle | null) => {
   return type === "png" || type === "svg";
 };
 
+export const isSupportedImageFile = (
+  blob: Blob | null | undefined,
+): blob is Blob & { type: typeof ALLOWED_IMAGE_MIME_TYPES[number] } => {
+  const { type } = blob || {};
+  return (
+    !!type && (ALLOWED_IMAGE_MIME_TYPES as readonly string[]).includes(type)
+  );
+};
+
 export const loadFromBlob = async (
   blob: Blob,
   /** @see restore.localAppState */
@@ -123,13 +150,14 @@ export const loadFromBlob = async (
             ? calculateScrollCenter(data.elements || [], localAppState, null)
             : {}),
         },
+        files: data.files,
       },
       localAppState,
       localElements,
     );
 
     return result;
-  } catch (error) {
+  } catch (error: any) {
     console.error(error.message);
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   }
@@ -160,8 +188,106 @@ export const canvasToBlob = async (
         }
         resolve(blob);
       });
-    } catch (error) {
+    } catch (error: any) {
       reject(error);
     }
   });
 };
+
+/** generates SHA-1 digest from supplied file (if not supported, falls back
+    to a 40-char base64 random id) */
+export const generateIdFromFile = async (file: File): Promise<FileId> => {
+  try {
+    const hashBuffer = await window.crypto.subtle.digest(
+      "SHA-1",
+      await file.arrayBuffer(),
+    );
+    return bytesToHexString(new Uint8Array(hashBuffer)) as FileId;
+  } catch (error: any) {
+    console.error(error);
+    // length 40 to align with the HEX length of SHA-1 (which is 160 bit)
+    return nanoid(40) as FileId;
+  }
+};
+
+export const getDataURL = async (file: Blob | File): Promise<DataURL> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataURL = reader.result as DataURL;
+      resolve(dataURL);
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(file);
+  });
+};
+
+export const dataURLToFile = (dataURL: DataURL, filename = "") => {
+  const dataIndexStart = dataURL.indexOf(",");
+  const byteString = atob(dataURL.slice(dataIndexStart + 1));
+  const mimeType = dataURL.slice(0, dataIndexStart).split(":")[1].split(";")[0];
+
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+  return new File([ab], filename, { type: mimeType });
+};
+
+export const resizeImageFile = async (
+  file: File,
+  opts: {
+    /** undefined indicates auto */
+    outputType?: typeof MIME_TYPES["jpg"];
+    maxWidthOrHeight: number;
+  },
+): Promise<File> => {
+  // SVG files shouldn't a can't be resized
+  if (file.type === MIME_TYPES.svg) {
+    return file;
+  }
+
+  const [pica, imageBlobReduce] = await Promise.all([
+    import("pica").then((res) => res.default),
+    // a wrapper for pica for better API
+    import("image-blob-reduce").then((res) => res.default),
+  ]);
+
+  // CRA's minification settings break pica in WebWorkers, so let's disable
+  // them for now
+  // https://github.com/nodeca/image-blob-reduce/issues/21#issuecomment-757365513
+  const reduce = imageBlobReduce({
+    pica: pica({ features: ["js", "wasm"] }),
+  });
+
+  if (opts.outputType) {
+    const { outputType } = opts;
+    reduce._create_blob = function (env) {
+      return this.pica.toBlob(env.out_canvas, outputType, 0.8).then((blob) => {
+        env.out_blob = blob;
+        return env;
+      });
+    };
+  }
+
+  const fileType = file.type;
+
+  if (!isSupportedImageFile(file)) {
+    throw new Error(t("errors.unsupportedFileType"));
+  }
+
+  return new File(
+    [await reduce.toBlob(file, { max: opts.maxWidthOrHeight })],
+    file.name,
+    {
+      type: fileType,
+    },
+  );
+};
+
+export const SVGStringToFile = (SVGString: string, filename: string = "") => {
+  return new File([new TextEncoder().encode(SVGString)], filename, {
+    type: MIME_TYPES.svg,
+  }) as File & { type: typeof MIME_TYPES.svg };
+};

src/data/encode.ts

@@ -1,16 +1,19 @@
 import { deflate, inflate } from "pako";
+import { encryptData, decryptData } from "./encryption";
 
 // -----------------------------------------------------------------------------
 // byte (binary) strings
 // -----------------------------------------------------------------------------
 
 // fast, Buffer-compatible implem
-export const toByteString = (data: string | Uint8Array): Promise<string> => {
+export const toByteString = (
+  data: string | Uint8Array | ArrayBuffer,
+): Promise<string> => {
   return new Promise((resolve, reject) => {
     const blob =
       typeof data === "string"
         ? new Blob([new TextEncoder().encode(data)])
-        : new Blob([data]);
+        : new Blob([data instanceof Uint8Array ? data : new Uint8Array(data)]);
     const reader = new FileReader();
     reader.onload = (event) => {
       if (!event.target || typeof event.target.result !== "string") {
@@ -44,12 +47,14 @@ const byteStringToString = (byteString: string) => {
  *  due to reencoding
  */
 export const stringToBase64 = async (str: string, isByteString = false) => {
-  return isByteString ? btoa(str) : btoa(await toByteString(str));
+  return isByteString ? window.btoa(str) : window.btoa(await toByteString(str));
 };
 
 // async to align with stringToBase64
 export const base64ToString = async (base64: string, isByteString = false) => {
-  return isByteString ? atob(base64) : byteStringToString(atob(base64));
+  return isByteString
+    ? window.atob(base64)
+    : byteStringToString(window.atob(base64));
 };
 
 // -----------------------------------------------------------------------------
@@ -80,7 +85,7 @@ export const encode = async ({
   if (compress !== false) {
     try {
       deflated = await toByteString(deflate(text));
-    } catch (error) {
+    } catch (error: any) {
       console.error("encode: cannot deflate", error);
     }
   }
@@ -114,3 +119,261 @@ export const decode = async (data: EncodedData): Promise<string> => {
 
   return decoded;
 };
+
+// -----------------------------------------------------------------------------
+// binary encoding
+// -----------------------------------------------------------------------------
+
+type FileEncodingInfo = {
+  /* version 2 is the version we're shipping the initial image support with.
+    version 1 was a PR version that a lot of people were using anyway.
+    Thus, if there are issues we can check whether they're not using the
+    unoffic version */
+  version: 1 | 2;
+  compression: "pako@1" | null;
+  encryption: "AES-GCM" | null;
+};
+
+// -----------------------------------------------------------------------------
+const CONCAT_BUFFERS_VERSION = 1;
+/** how many bytes we use to encode how many bytes the next chunk has.
+ * Corresponds to DataView setter methods (setUint32, setUint16, etc).
+ *
+ * NOTE ! values must not be changed, which would be backwards incompatible !
+ */
+const VERSION_DATAVIEW_BYTES = 4;
+const NEXT_CHUNK_SIZE_DATAVIEW_BYTES = 4;
+// -----------------------------------------------------------------------------
+
+const DATA_VIEW_BITS_MAP = { 1: 8, 2: 16, 4: 32 } as const;
+
+// getter
+function dataView(buffer: Uint8Array, bytes: 1 | 2 | 4, offset: number): number;
+// setter
+function dataView(
+  buffer: Uint8Array,
+  bytes: 1 | 2 | 4,
+  offset: number,
+  value: number,
+): Uint8Array;
+/**
+ * abstraction over DataView that serves as a typed getter/setter in case
+ * you're using constants for the byte size and want to ensure there's no
+ * discrepenancy in the encoding across refactors.
+ *
+ * DataView serves for an endian-agnostic handling of numbers in ArrayBuffers.
+ */
+function dataView(
+  buffer: Uint8Array,
+  bytes: 1 | 2 | 4,
+  offset: number,
+  value?: number,
+): Uint8Array | number {
+  if (value != null) {
+    if (value > Math.pow(2, DATA_VIEW_BITS_MAP[bytes]) - 1) {
+      throw new Error(
+        `attempting to set value higher than the allocated bytes (value: ${value}, bytes: ${bytes})`,
+      );
+    }
+    const method = `setUint${DATA_VIEW_BITS_MAP[bytes]}` as const;
+    new DataView(buffer.buffer)[method](offset, value);
+    return buffer;
+  }
+  const method = `getUint${DATA_VIEW_BITS_MAP[bytes]}` as const;
+  return new DataView(buffer.buffer)[method](offset);
+}
+
+// -----------------------------------------------------------------------------
+
+/**
+ * Resulting concatenated buffer has this format:
+ *
+ * [
+ *   VERSION chunk (4 bytes)
+ *   LENGTH chunk 1 (4 bytes)
+ *   DATA chunk 1 (up to 2^32 bits)
+ *   LENGTH chunk 2 (4 bytes)
+ *   DATA chunk 2 (up to 2^32 bits)
+ *   ...
+ * ]
+ *
+ * @param buffers each buffer (chunk) must be at most 2^32 bits large (~4GB)
+ */
+const concatBuffers = (...buffers: Uint8Array[]) => {
+  const bufferView = new Uint8Array(
+    VERSION_DATAVIEW_BYTES +
+      NEXT_CHUNK_SIZE_DATAVIEW_BYTES * buffers.length +
+      buffers.reduce((acc, buffer) => acc + buffer.byteLength, 0),
+  );
+
+  let cursor = 0;
+
+  // as the first chunk we'll encode the version for backwards compatibility
+  dataView(bufferView, VERSION_DATAVIEW_BYTES, cursor, CONCAT_BUFFERS_VERSION);
+  cursor += VERSION_DATAVIEW_BYTES;
+
+  for (const buffer of buffers) {
+    dataView(
+      bufferView,
+      NEXT_CHUNK_SIZE_DATAVIEW_BYTES,
+      cursor,
+      buffer.byteLength,
+    );
+    cursor += NEXT_CHUNK_SIZE_DATAVIEW_BYTES;
+
+    bufferView.set(buffer, cursor);
+    cursor += buffer.byteLength;
+  }
+
+  return bufferView;
+};
+
+/** can only be used on buffers created via `concatBuffers()` */
+const splitBuffers = (concatenatedBuffer: Uint8Array) => {
+  const buffers = [];
+
+  let cursor = 0;
+
+  // first chunk is the version (ignored for now)
+  cursor += VERSION_DATAVIEW_BYTES;
+
+  while (true) {
+    const chunkSize = dataView(
+      concatenatedBuffer,
+      NEXT_CHUNK_SIZE_DATAVIEW_BYTES,
+      cursor,
+    );
+    cursor += NEXT_CHUNK_SIZE_DATAVIEW_BYTES;
+
+    buffers.push(concatenatedBuffer.slice(cursor, cursor + chunkSize));
+    cursor += chunkSize;
+    if (cursor >= concatenatedBuffer.byteLength) {
+      break;
+    }
+  }
+
+  return buffers;
+};
+
+// helpers for (de)compressing data with JSON metadata including encryption
+// -----------------------------------------------------------------------------
+
+/** @private */
+const _encryptAndCompress = async (
+  data: Uint8Array | string,
+  encryptionKey: string,
+) => {
+  const { encryptedBuffer, iv } = await encryptData(
+    encryptionKey,
+    deflate(data),
+  );
+
+  return { iv, buffer: new Uint8Array(encryptedBuffer) };
+};
+
+/**
+ * The returned buffer has following format:
+ * `[]` refers to a buffers wrapper (see `concatBuffers`)
+ *
+ * [
+ *   encodingMetadataBuffer,
+ *   iv,
+ *   [
+ *      contentsMetadataBuffer
+ *      contentsBuffer
+ *   ]
+ * ]
+ */
+export const compressData = async <T extends Record<string, any> = never>(
+  dataBuffer: Uint8Array,
+  options: {
+    encryptionKey: string;
+  } & ([T] extends [never]
+    ? {
+        metadata?: T;
+      }
+    : {
+        metadata: T;
+      }),
+): Promise<Uint8Array> => {
+  const fileInfo: FileEncodingInfo = {
+    version: 2,
+    compression: "pako@1",
+    encryption: "AES-GCM",
+  };
+
+  const encodingMetadataBuffer = new TextEncoder().encode(
+    JSON.stringify(fileInfo),
+  );
+
+  const contentsMetadataBuffer = new TextEncoder().encode(
+    JSON.stringify(options.metadata || null),
+  );
+
+  const { iv, buffer } = await _encryptAndCompress(
+    concatBuffers(contentsMetadataBuffer, dataBuffer),
+    options.encryptionKey,
+  );
+
+  return concatBuffers(encodingMetadataBuffer, iv, buffer);
+};
+
+/** @private */
+const _decryptAndDecompress = async (
+  iv: Uint8Array,
+  decryptedBuffer: Uint8Array,
+  decryptionKey: string,
+  isCompressed: boolean,
+) => {
+  decryptedBuffer = new Uint8Array(
+    await decryptData(iv, decryptedBuffer, decryptionKey),
+  );
+
+  if (isCompressed) {
+    return inflate(decryptedBuffer);
+  }
+
+  return decryptedBuffer;
+};
+
+export const decompressData = async <T extends Record<string, any>>(
+  bufferView: Uint8Array,
+  options: { decryptionKey: string },
+) => {
+  // first chunk is encoding metadata (ignored for now)
+  const [encodingMetadataBuffer, iv, buffer] = splitBuffers(bufferView);
+
+  const encodingMetadata: FileEncodingInfo = JSON.parse(
+    new TextDecoder().decode(encodingMetadataBuffer),
+  );
+
+  try {
+    const [contentsMetadataBuffer, contentsBuffer] = splitBuffers(
+      await _decryptAndDecompress(
+        iv,
+        buffer,
+        options.decryptionKey,
+        !!encodingMetadata.compression,
+      ),
+    );
+
+    const metadata = JSON.parse(
+      new TextDecoder().decode(contentsMetadataBuffer),
+    ) as T;
+
+    return {
+      /** metadata source is always JSON so we can decode it here */
+      metadata,
+      /** data can be anything so the caller must decode it */
+      data: contentsBuffer,
+    };
+  } catch (error: any) {
+    console.error(
+      `Error during decompressing and decrypting the file.`,
+      encodingMetadata,
+    );
+    throw error;
+  }
+};
+
+// -----------------------------------------------------------------------------

src/data/encryption.ts

@@ -0,0 +1,92 @@
+import { ENCRYPTION_KEY_BITS } from "../constants";
+
+export const IV_LENGTH_BYTES = 12;
+
+export const createIV = () => {
+  const arr = new Uint8Array(IV_LENGTH_BYTES);
+  return window.crypto.getRandomValues(arr);
+};
+
+export const generateEncryptionKey = async <
+  T extends "string" | "cryptoKey" = "string",
+>(
+  returnAs?: T,
+): Promise<T extends "cryptoKey" ? CryptoKey : string> => {
+  const key = await window.crypto.subtle.generateKey(
+    {
+      name: "AES-GCM",
+      length: ENCRYPTION_KEY_BITS,
+    },
+    true, // extractable
+    ["encrypt", "decrypt"],
+  );
+  return (
+    returnAs === "cryptoKey"
+      ? key
+      : (await window.crypto.subtle.exportKey("jwk", key)).k
+  ) as T extends "cryptoKey" ? CryptoKey : string;
+};
+
+export const getCryptoKey = (key: string, usage: KeyUsage) =>
+  window.crypto.subtle.importKey(
+    "jwk",
+    {
+      alg: "A128GCM",
+      ext: true,
+      k: key,
+      key_ops: ["encrypt", "decrypt"],
+      kty: "oct",
+    },
+    {
+      name: "AES-GCM",
+      length: ENCRYPTION_KEY_BITS,
+    },
+    false, // extractable
+    [usage],
+  );
+
+export const encryptData = async (
+  key: string | CryptoKey,
+  data: Uint8Array | ArrayBuffer | Blob | File | string,
+): Promise<{ encryptedBuffer: ArrayBuffer; iv: Uint8Array }> => {
+  const importedKey =
+    typeof key === "string" ? await getCryptoKey(key, "encrypt") : key;
+  const iv = createIV();
+  const buffer: ArrayBuffer | Uint8Array =
+    typeof data === "string"
+      ? new TextEncoder().encode(data)
+      : data instanceof Uint8Array
+      ? data
+      : data instanceof Blob
+      ? await data.arrayBuffer()
+      : data;
+
+  // We use symmetric encryption. AES-GCM is the recommended algorithm and
+  // includes checks that the ciphertext has not been modified by an attacker.
+  const encryptedBuffer = await window.crypto.subtle.encrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    },
+    importedKey,
+    buffer as ArrayBuffer | Uint8Array,
+  );
+
+  return { encryptedBuffer, iv };
+};
+
+export const decryptData = async (
+  iv: Uint8Array,
+  encrypted: Uint8Array | ArrayBuffer,
+  privateKey: string,
+): Promise<ArrayBuffer> => {
+  const key = await getCryptoKey(privateKey, "decrypt");
+  return window.crypto.subtle.decrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    },
+    key,
+    encrypted,
+  );
+};

src/data/filesystem.ts

@@ -4,12 +4,13 @@ import {
   fileSave as _fileSave,
   FileSystemHandle,
   supported as nativeFileSystemSupported,
-} from "@dwelle/browser-fs-access";
+} from "browser-fs-access";
 import { EVENT, MIME_TYPES } from "../constants";
 import { AbortError } from "../errors";
 import { debounce } from "../utils";
 
 type FILE_EXTENSION =
+  | "gif"
   | "jpg"
   | "png"
   | "svg"
@@ -17,20 +18,11 @@ type FILE_EXTENSION =
   | "excalidraw"
   | "excalidrawlib";
 
-const FILE_TYPE_TO_MIME_TYPE: Record<FILE_EXTENSION, string> = {
-  jpg: "image/jpeg",
-  png: "image/png",
-  svg: "image/svg+xml",
-  json: "application/json",
-  excalidraw: MIME_TYPES.excalidraw,
-  excalidrawlib: MIME_TYPES.excalidrawlib,
-};
-
 const INPUT_CHANGE_INTERVAL_MS = 500;
 
 export const fileOpen = <M extends boolean | undefined = false>(opts: {
   extensions?: FILE_EXTENSION[];
-  description?: string;
+  description: string;
   multiple?: M;
 }): Promise<
   M extends false | undefined ? FileWithHandle : FileWithHandle[]
@@ -41,7 +33,7 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
     : FileWithHandle[];
 
   const mimeTypes = opts.extensions?.reduce((mimeTypes, type) => {
-    mimeTypes.push(FILE_TYPE_TO_MIME_TYPE[type]);
+    mimeTypes.push(MIME_TYPES[type]);
 
     return mimeTypes;
   }, [] as string[]);
@@ -102,7 +94,7 @@ export const fileSave = (
     name: string;
     /** file extension */
     extension: FILE_EXTENSION;
-    description?: string;
+    description: string;
     /** existing FileSystemHandle */
     fileHandle?: FileSystemHandle | null;
   },

src/data/image.ts

@@ -1,8 +1,11 @@
-import decodePng from "png-chunks-extract";
+import extractPngChunks from "png-chunks-extract";
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
 import { stringToBase64, encode, decode, base64ToString } from "./encode";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import { PngChunk } from "../types";
+
+export { extractPngChunks };
 
 // -----------------------------------------------------------------------------
 // PNG
@@ -28,7 +31,9 @@ const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
 export const getTEXtChunk = async (
   blob: Blob,
 ): Promise<{ keyword: string; text: string } | null> => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+  const chunks = extractPngChunks(
+    new Uint8Array(await blobToArrayBuffer(blob)),
+  );
   const metadataChunk = chunks.find((chunk) => chunk.name === "tEXt");
   if (metadataChunk) {
     return tEXt.decode(metadataChunk.data);
@@ -36,6 +41,28 @@ export const getTEXtChunk = async (
   return null;
 };
 
+export const findPngChunk = (
+  chunks: PngChunk[],
+  name: PngChunk["name"],
+  /** this makes the search stop before IDAT chunk (before which most
+   * metadata chunks reside). This is a perf optim. */
+  breakBeforeIDAT = true,
+) => {
+  let i = 0;
+  const len = chunks.length;
+  while (i <= len) {
+    const chunk = chunks[i];
+    if (chunk.name === name) {
+      return chunk;
+    }
+    if (breakBeforeIDAT && chunk.name === "IDAT") {
+      return null;
+    }
+    i++;
+  }
+  return null;
+};
+
 export const encodePngMetadata = async ({
   blob,
   metadata,
@@ -43,7 +70,9 @@ export const encodePngMetadata = async ({
   blob: Blob;
   metadata: string;
 }) => {
-  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
+  const chunks = extractPngChunks(
+    new Uint8Array(await blobToArrayBuffer(blob)),
+  );
 
   const metadataChunk = tEXt.encode(
     MIME_TYPES.excalidraw,
@@ -57,7 +86,7 @@ export const encodePngMetadata = async ({
   // insert metadata before last chunk (iEND)
   chunks.splice(-1, 0, metadataChunk);
 
-  return new Blob([encodePng(chunks)], { type: "image/png" });
+  return new Blob([encodePng(chunks)], { type: MIME_TYPES.png });
 };
 
 export const decodePngMetadata = async (blob: Blob) => {
@@ -76,7 +105,7 @@ export const decodePngMetadata = async (blob: Blob) => {
         throw new Error("FAILED");
       }
       return await decode(encodedData);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
     }
@@ -127,7 +156,7 @@ export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
         throw new Error("FAILED");
       }
       return await decode(encodedData);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
     }

src/data/index.ts

@@ -2,12 +2,12 @@ import {
   copyBlobToClipboardAsPng,
   copyTextToSystemClipboard,
 } from "../clipboard";
-import { DEFAULT_EXPORT_PADDING } from "../constants";
+import { DEFAULT_EXPORT_PADDING, MIME_TYPES } from "../constants";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import { ExportType } from "../scene/types";
-import { AppState } from "../types";
+import { AppState, BinaryFiles } from "../types";
 import { canvasToBlob } from "./blob";
 import { fileSave, FileSystemHandle } from "./filesystem";
 import { serializeAsJSON } from "./json";
@@ -19,6 +19,7 @@ export const exportCanvas = async (
   type: ExportType,
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
+  files: BinaryFiles,
   {
     exportBackground,
     exportPadding = DEFAULT_EXPORT_PADDING,
@@ -37,18 +38,23 @@ export const exportCanvas = async (
     throw new Error(t("alerts.cannotExportEmptyCanvas"));
   }
   if (type === "svg" || type === "clipboard-svg") {
-    const tempSvg = await exportToSvg(elements, {
+    const tempSvg = await exportToSvg(
-      exportBackground,
+      elements,
-      exportWithDarkMode: appState.exportWithDarkMode,
+      {
-      viewBackgroundColor,
+        exportBackground,
-      exportPadding,
+        exportWithDarkMode: appState.exportWithDarkMode,
-      exportScale: appState.exportScale,
+        viewBackgroundColor,
-      exportEmbedScene: appState.exportEmbedScene && type === "svg",
+        exportPadding,
-    });
+        exportScale: appState.exportScale,
+        exportEmbedScene: appState.exportEmbedScene && type === "svg",
+      },
+      files,
+    );
     if (type === "svg") {
       return await fileSave(
-        new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }),
+        new Blob([tempSvg.outerHTML], { type: MIME_TYPES.svg }),
         {
+          description: "Export to SVG",
           name,
           extension: "svg",
           fileHandle,
@@ -60,7 +66,7 @@ export const exportCanvas = async (
     }
   }
 
-  const tempCanvas = exportToCanvas(elements, appState, {
+  const tempCanvas = await exportToCanvas(elements, appState, files, {
     exportBackground,
     viewBackgroundColor,
     exportPadding,
@@ -76,11 +82,12 @@ export const exportCanvas = async (
         await import(/* webpackChunkName: "image" */ "./image")
       ).encodePngMetadata({
         blob,
-        metadata: serializeAsJSON(elements, appState),
+        metadata: serializeAsJSON(elements, appState, files, "local"),
       });
     }
 
     return await fileSave(blob, {
+      description: "Export to PNG",
       name,
       extension: "png",
       fileHandle,
@@ -88,7 +95,7 @@ export const exportCanvas = async (
   } else if (type === "clipboard") {
     try {
       await copyBlobToClipboardAsPng(blob);
-    } catch (error) {
+    } catch (error: any) {
       if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
         throw error;
       }

src/data/json.ts

@@ -1,9 +1,9 @@
 import { fileOpen, fileSave } from "./filesystem";
-import { cleanAppStateForExport } from "../appState";
+import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
 import { EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES } from "../constants";
-import { clearElementsForExport } from "../element";
+import { clearElementsForDatabase, clearElementsForExport } from "../element";
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { AppState, BinaryFiles, LibraryItems } from "../types";
 import { isImageFileHandle, loadFromBlob } from "./blob";
 
 import {
@@ -13,16 +13,50 @@ import {
 } from "./types";
 import Library from "./library";
 
+/**
+ * Strips out files which are only referenced by deleted elements
+ */
+const filterOutDeletedFiles = (
+  elements: readonly ExcalidrawElement[],
+  files: BinaryFiles,
+) => {
+  const nextFiles: BinaryFiles = {};
+  for (const element of elements) {
+    if (
+      !element.isDeleted &&
+      "fileId" in element &&
+      element.fileId &&
+      files[element.fileId]
+    ) {
+      nextFiles[element.fileId] = files[element.fileId];
+    }
+  }
+  return nextFiles;
+};
+
 export const serializeAsJSON = (
   elements: readonly ExcalidrawElement[],
   appState: Partial<AppState>,
+  files: BinaryFiles,
+  type: "local" | "database",
 ): string => {
   const data: ExportedDataState = {
     type: EXPORT_DATA_TYPES.excalidraw,
     version: 2,
     source: EXPORT_SOURCE,
-    elements: clearElementsForExport(elements),
+    elements:
-    appState: cleanAppStateForExport(appState),
+      type === "local"
+        ? clearElementsForExport(elements)
+        : clearElementsForDatabase(elements),
+    appState:
+      type === "local"
+        ? cleanAppStateForExport(appState)
+        : clearAppStateForDatabase(appState),
+    files:
+      type === "local"
+        ? filterOutDeletedFiles(elements, files)
+        : // will be stripped from JSON
+          undefined,
   };
 
   return JSON.stringify(data, null, 2);
@@ -31,8 +65,9 @@ export const serializeAsJSON = (
 export const saveAsJSON = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  files: BinaryFiles,
 ) => {
-  const serialized = serializeAsJSON(elements, appState);
+  const serialized = serializeAsJSON(elements, appState, files, "local");
   const blob = new Blob([serialized], {
     type: MIME_TYPES.excalidraw,
   });
@@ -56,15 +91,7 @@ export const loadFromJSON = async (
     description: "Excalidraw files",
     // ToDo: Be over-permissive until https://bugs.webkit.org/show_bug.cgi?id=34442
     // gets resolved. Else, iOS users cannot open `.excalidraw` files.
-    /*
+    // extensions: ["json", "excalidraw", "png", "svg"],
-    extensions: [".json", ".excalidraw", ".png", ".svg"],
-    mimeTypes: [
-      MIME_TYPES.excalidraw,
-      "application/json",
-      "image/png",
-      "image/svg+xml",
-    ],
-    */
   });
   return loadFromBlob(blob, localAppState, localElements);
 };
@@ -87,17 +114,16 @@ export const isValidLibrary = (json: any) => {
     typeof json === "object" &&
     json &&
     json.type === EXPORT_DATA_TYPES.excalidrawLibrary &&
-    json.version === 1
+    (json.version === 1 || json.version === 2)
   );
 };
 
-export const saveLibraryAsJSON = async (library: Library) => {
+export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
-  const libraryItems = await library.loadLibrary();
   const data: ExportedLibraryData = {
     type: EXPORT_DATA_TYPES.excalidrawLibrary,
-    version: 1,
+    version: 2,
     source: EXPORT_SOURCE,
-    library: libraryItems,
+    libraryItems,
   };
   const serialized = JSON.stringify(data, null, 2);
   await fileSave(

src/data/library.ts

@@ -1,6 +1,6 @@
 import { loadLibraryFromBlob } from "./blob";
 import { LibraryItems, LibraryItem } from "../types";
-import { restoreElements } from "./restore";
+import { restoreElements, restoreLibraryItems } from "./restore";
 import { getNonDeletedElements } from "../element";
 import type App from "../components/App";
 
@@ -18,14 +18,16 @@ class Library {
   };
 
   restoreLibraryItem = (libraryItem: LibraryItem): LibraryItem | null => {
-    const elements = getNonDeletedElements(restoreElements(libraryItem, null));
+    const elements = getNonDeletedElements(
-    return elements.length ? elements : null;
+      restoreElements(libraryItem.elements, null),
+    );
+    return elements.length ? { ...libraryItem, elements } : null;
   };
 
   /** imports library (currently merges, removing duplicates) */
-  async importLibrary(blob: Blob) {
+  async importLibrary(blob: Blob, defaultStatus = "unpublished") {
     const libraryFile = await loadLibraryFromBlob(blob);
-    if (!libraryFile || !libraryFile.library) {
+    if (!libraryFile || !(libraryFile.libraryItems || libraryFile.library)) {
       return;
     }
 
@@ -37,17 +39,17 @@ class Library {
       targetLibraryItem: LibraryItem,
     ) => {
       return !existingLibraryItems.find((libraryItem) => {
-        if (libraryItem.length !== targetLibraryItem.length) {
+        if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
           return false;
         }
 
         // detect z-index difference by checking the excalidraw elements
         // are in order
-        return libraryItem.every((libItemExcalidrawItem, idx) => {
+        return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
           return (
-            libItemExcalidrawItem.id === targetLibraryItem[idx].id &&
+            libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id &&
             libItemExcalidrawItem.versionNonce ===
-              targetLibraryItem[idx].versionNonce
+              targetLibraryItem.elements[idx].versionNonce
           );
         });
       });
@@ -55,15 +57,20 @@ class Library {
 
     const existingLibraryItems = await this.loadLibrary();
 
-    const filtered = libraryFile.library!.reduce((acc, libraryItem) => {
+    const library = libraryFile.libraryItems || libraryFile.library || [];
-      const restoredItem = this.restoreLibraryItem(libraryItem);
+    const restoredLibItems = restoreLibraryItems(
+      library,
+      defaultStatus as "published" | "unpublished",
+    );
+    const filteredItems = [];
+    for (const item of restoredLibItems) {
+      const restoredItem = this.restoreLibraryItem(item as LibraryItem);
       if (restoredItem && isUniqueitem(existingLibraryItems, restoredItem)) {
-        acc.push(restoredItem);
+        filteredItems.push(restoredItem);
       }
-      return acc;
+    }
-    }, [] as Mutable<LibraryItems>);
 
-    await this.saveLibrary([...existingLibraryItems, ...filtered]);
+    await this.saveLibrary([...filteredItems, ...existingLibraryItems]);
   }
 
   loadLibrary = (): Promise<LibraryItems> => {
@@ -90,7 +97,7 @@ class Library {
         this.libraryCache = JSON.parse(JSON.stringify(items));
 
         resolve(items);
-      } catch (error) {
+      } catch (error: any) {
         console.error(error);
         resolve([]);
       }
@@ -105,7 +112,7 @@ class Library {
       // immediately
       this.libraryCache = JSON.parse(serializedItems);
       await this.app.props.onLibraryChange?.(items);
-    } catch (error) {
+    } catch (error: any) {
       this.libraryCache = prevLibraryItems;
       throw error;
     }

src/data/resave.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { AppState, BinaryFiles } from "../types";
 import { exportCanvas } from ".";
 import { getNonDeletedElements } from "../element";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
@@ -7,6 +7,7 @@ import { getFileHandleType, isImageFileHandleType } from "./blob";
 export const resaveAsImageWithScene = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  files: BinaryFiles,
 ) => {
   const { exportBackground, viewBackgroundColor, name, fileHandle } = appState;
 
@@ -26,6 +27,7 @@ export const resaveAsImageWithScene = async (
     fileHandleType,
     getNonDeletedElements(elements),
     appState,
+    files,
     {
       exportBackground,
       viewBackgroundColor,

src/data/restore.ts

@@ -3,7 +3,12 @@ import {
   ExcalidrawSelectionElement,
   FontFamilyValues,
 } from "../element/types";
-import { AppState, NormalizedZoomValue } from "../types";
+import {
+  AppState,
+  BinaryFiles,
+  LibraryItem,
+  NormalizedZoomValue,
+} from "../types";
 import { ImportedDataState } from "./types";
 import {
   getElementMap,
@@ -37,6 +42,7 @@ export const AllowedExcalidrawElementTypes: Record<
   diamond: true,
   ellipse: true,
   line: true,
+  image: true,
   arrow: true,
   freedraw: true,
 };
@@ -44,6 +50,7 @@ export const AllowedExcalidrawElementTypes: Record<
 export type RestoredDataState = {
   elements: ExcalidrawElement[];
   appState: RestoredAppState;
+  files: BinaryFiles;
 };
 
 const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
@@ -57,16 +64,19 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
 
 const restoreElementWithProperties = <
   T extends ExcalidrawElement,
-  K extends keyof Omit<
+  K extends Pick<T, keyof Omit<Required<T>, keyof ExcalidrawElement>>,
-    Required<T>,
-    Exclude<keyof ExcalidrawElement, "type" | "x" | "y">
-  >
 >(
   element: Required<T>,
-  extra: Pick<T, K>,
+  extra: Pick<
+    T,
+    // This extra Pick<T, keyof K> ensure no excess properties are passed.
+    // @ts-ignore TS complains here but type checks the call sites fine.
+    keyof K
+  > &
+    Partial<Pick<ExcalidrawElement, "type" | "x" | "y">>,
 ): T => {
   const base: Pick<T, keyof ExcalidrawElement> = {
-    type: (extra as Partial<T>).type || element.type,
+    type: extra.type || element.type,
     // all elements must have version > 0 so getSceneVersion() will pick up
     // newly added elements
     version: element.version || 1,
@@ -79,8 +89,8 @@ const restoreElementWithProperties = <
     roughness: element.roughness ?? 1,
     opacity: element.opacity == null ? 100 : element.opacity,
     angle: element.angle || 0,
-    x: (extra as Partial<T>).x ?? element.x ?? 0,
+    x: extra.x ?? element.x ?? 0,
-    y: (extra as Partial<T>).y ?? element.y ?? 0,
+    y: extra.y ?? element.y ?? 0,
     strokeColor: element.strokeColor,
     backgroundColor: element.backgroundColor,
     width: element.width || 0,
@@ -93,25 +103,24 @@ const restoreElementWithProperties = <
     boundElementIds: element.boundElementIds ?? [],
   };
 
-  return ({
+  return {
     ...base,
     ...getNormalizedDimensions(base),
     ...extra,
-  } as unknown) as T;
+  } as unknown as T;
 };
 
 const restoreElement = (
   element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-): typeof element => {
+): typeof element | null => {
   switch (element.type) {
     case "text":
       let fontSize = element.fontSize;
       let fontFamily = element.fontFamily;
       if ("font" in element) {
-        const [fontPx, _fontFamily]: [
+        const [fontPx, _fontFamily]: [string, string] = (
-          string,
+          element as any
-          string,
+        ).font.split(" ");
-        ] = (element as any).font.split(" ");
         fontSize = parseInt(fontPx, 10);
         fontFamily = getFontFamilyByName(_fontFamily);
       }
@@ -131,6 +140,12 @@ const restoreElement = (
         pressures: element.pressures,
       });
     }
+    case "image":
+      return restoreElementWithProperties(element, {
+        status: element.status || "pending",
+        fileId: element.fileId,
+        scale: element.scale || [1, 1],
+      });
     case "line":
     // @ts-ignore LEGACY type
     // eslint-disable-next-line no-fallthrough
@@ -194,7 +209,7 @@ export const restoreElements = (
     // filtering out selection, which is legacy, no longer kept in elements,
     // and causing issues if retained
     if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
-      let migratedElement: ExcalidrawElement = restoreElement(element);
+      let migratedElement: ExcalidrawElement | null = restoreElement(element);
       if (migratedElement) {
         const localElement = localElementsMap?.[element.id];
         if (localElement && localElement.version > migratedElement.version) {
@@ -260,5 +275,33 @@ export const restore = (
   return {
     elements: restoreElements(data?.elements, localElements),
     appState: restoreAppState(data?.appState, localAppState || null),
+    files: data?.files || {},
   };
 };
+
+export const restoreLibraryItems = (
+  libraryItems: NonOptional<ImportedDataState["libraryItems"]>,
+  defaultStatus: LibraryItem["status"],
+) => {
+  const restoredItems: LibraryItem[] = [];
+  for (const item of libraryItems) {
+    // migrate older libraries
+    if (Array.isArray(item)) {
+      restoredItems.push({
+        status: defaultStatus,
+        elements: item,
+        id: randomId(),
+        created: Date.now(),
+      });
+    } else {
+      const _item = item as MarkOptional<LibraryItem, "id" | "status">;
+      restoredItems.push({
+        ..._item,
+        id: _item.id || randomId(),
+        status: _item.status || defaultStatus,
+        created: _item.created || Date.now(),
+      });
+    }
+  }
+  return restoredItems;
+};

src/data/types.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState, LibraryItems } from "../types";
+import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
 import type { cleanAppStateForExport } from "../appState";
 
 export interface ExportedDataState {
@@ -8,6 +8,7 @@ export interface ExportedDataState {
   source: string;
   elements: readonly ExcalidrawElement[];
   appState: ReturnType<typeof cleanAppStateForExport>;
+  files: BinaryFiles | undefined;
 }
 
 export interface ImportedDataState {
@@ -17,14 +18,18 @@ export interface ImportedDataState {
   elements?: readonly ExcalidrawElement[] | null;
   appState?: Readonly<Partial<AppState>> | null;
   scrollToContent?: boolean;
-  libraryItems?: LibraryItems;
+  libraryItems?: LibraryItems | LibraryItems_v1;
+  files?: BinaryFiles;
 }
 
 export interface ExportedLibraryData {
   type: string;
-  version: number;
+  version: 2;
   source: string;
-  library: LibraryItems;
+  libraryItems: LibraryItems;
 }
 
-export interface ImportedLibraryData extends Partial<ExportedLibraryData> {}
+export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
+  /** @deprecated v1 */
+  library?: LibraryItems;
+}

src/element/binding.ts

@@ -137,14 +137,13 @@ export const bindOrUnbindSelectedElements = (
 const maybeBindBindableElement = (
   bindableElement: NonDeleted<ExcalidrawBindableElement>,
 ): void => {
-  getElligibleElementsForBindableElementAndWhere(
+  getElligibleElementsForBindableElementAndWhere(bindableElement).forEach(
-    bindableElement,
+    ([linearElement, where]) =>
-  ).forEach(([linearElement, where]) =>
+      bindOrUnbindLinearElement(
-    bindOrUnbindLinearElement(
+        linearElement,
-      linearElement,
+        where === "end" ? "keep" : bindableElement,
-      where === "end" ? "keep" : bindableElement,
+        where === "start" ? "keep" : bindableElement,
-      where === "start" ? "keep" : bindableElement,
+      ),
-    ),
   );
 };
 
@@ -293,9 +292,11 @@ export const updateBoundElements = (
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
-  (Scene.getScene(changedElement)!.getNonDeletedElements(
+  (
-    boundElementIds,
+    Scene.getScene(changedElement)!.getNonDeletedElements(
-  ) as NonDeleted<ExcalidrawLinearElement>[]).forEach((linearElement) => {
+      boundElementIds,
+    ) as NonDeleted<ExcalidrawLinearElement>[]
+  ).forEach((linearElement) => {
     const bindableElement = changedElement as ExcalidrawBindableElement;
     // In case the boundElementIds are stale
     if (!doesNeedUpdate(linearElement, bindableElement)) {
@@ -580,9 +581,11 @@ export const fixBindingsAfterDuplication = (
   });
 
   // Update the linear elements
-  (sceneElements.filter(({ id }) =>
+  (
-    allBoundElementIds.has(id),
+    sceneElements.filter(({ id }) =>
-  ) as ExcalidrawLinearElement[]).forEach((element) => {
+      allBoundElementIds.has(id),
+    ) as ExcalidrawLinearElement[]
+  ).forEach((element) => {
     const { startBinding, endBinding } = element;
     mutateElement(element, {
       startBinding: newBindingAfterDuplication(
@@ -642,17 +645,17 @@ export const fixBindingsAfterDeletion = (
       });
     }
   });
-  (sceneElements.filter(({ id }) =>
+  (
-    boundElementIds.has(id),
+    sceneElements.filter(({ id }) =>
-  ) as ExcalidrawLinearElement[]).forEach(
+      boundElementIds.has(id),
-    (element: ExcalidrawLinearElement) => {
+    ) as ExcalidrawLinearElement[]
-      const { startBinding, endBinding } = element;
+  ).forEach((element: ExcalidrawLinearElement) => {
-      mutateElement(element, {
+    const { startBinding, endBinding } = element;
-        startBinding: newBindingAfterDeletion(startBinding, deletedElementIds),
+    mutateElement(element, {
-        endBinding: newBindingAfterDeletion(endBinding, deletedElementIds),
+      startBinding: newBindingAfterDeletion(startBinding, deletedElementIds),
-      });
+      endBinding: newBindingAfterDeletion(endBinding, deletedElementIds),
-    },
+    });
-  );
+  });
 };
 
 const newBindingAfterDeletion = (

src/element/bounds.ts

@@ -3,6 +3,7 @@ import {
   ExcalidrawLinearElement,
   Arrowhead,
   ExcalidrawFreeDrawElement,
+  NonDeleted,
 } from "./types";
 import { distance2d, rotate } from "../math";
 import rough from "roughjs/bin/rough";
@@ -78,7 +79,7 @@ const getMinMaxXYFromCurvePathOps = (
       // move, bcurveTo, lineTo, and curveTo
       if (op === "move") {
         // change starting point
-        currentP = (data as unknown) as Point;
+        currentP = data as unknown as Point;
         // move operation does not draw anything; so, it always
         // returns false
       } else if (op === "bcurveTo") {
@@ -227,7 +228,7 @@ export const getArrowheadPoints = (
   const prevOp = ops[index - 1];
   let p0: Point = [0, 0];
   if (prevOp.op === "move") {
-    p0 = (prevOp.data as unknown) as Point;
+    p0 = prevOp.data as unknown as Point;
   } else if (prevOp.op === "bcurveTo") {
     p0 = [prevOp.data[4], prevOp.data[5]];
   }
@@ -258,6 +259,7 @@ export const getArrowheadPoints = (
     arrow: 30,
     bar: 15,
     dot: 15,
+    triangle: 15,
   }[arrowhead]; // pixels (will differ for each arrowhead)
 
   let length = 0;
@@ -294,6 +296,7 @@ export const getArrowheadPoints = (
   const angle = {
     arrow: 20,
     bar: 90,
+    triangle: 25,
   }[arrowhead]; // degrees
 
   // Return points
@@ -511,3 +514,17 @@ export const getClosestElementBounds = (
 
   return getElementBounds(closestElement);
 };
+
+export interface Box {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+
+export const getCommonBoundingBox = (
+  elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[],
+): Box => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  return { minX, minY, maxX, maxY };
+};

src/element/collision.ts

@@ -23,6 +23,7 @@ import {
   ExcalidrawEllipseElement,
   NonDeleted,
   ExcalidrawFreeDrawElement,
+  ExcalidrawImageElement,
 } from "./types";
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@@ -30,6 +31,7 @@ import { Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
+import { isImageElement } from "./typeChecks";
 
 const isElementDraggableFromInside = (
   element: NonDeletedExcalidrawElement,
@@ -47,8 +49,7 @@ const isElementDraggableFromInside = (
   if (element.type === "line") {
     return isDraggableFromInside && isPathALoop(element.points);
   }
-
+  return isDraggableFromInside || isImageElement(element);
-  return isDraggableFromInside;
 };
 
 export const hitTest = (
@@ -161,6 +162,7 @@ type HitTestArgs = {
 const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
   switch (args.element.type) {
     case "rectangle":
+    case "image":
     case "text":
     case "diamond":
     case "ellipse":
@@ -195,6 +197,7 @@ export const distanceToBindableElement = (
 ): number => {
   switch (element.type) {
     case "rectangle":
+    case "image":
     case "text":
       return distanceToRectangle(element, point);
     case "diamond":
@@ -224,7 +227,8 @@ const distanceToRectangle = (
   element:
     | ExcalidrawRectangleElement
     | ExcalidrawTextElement
-    | ExcalidrawFreeDrawElement,
+    | ExcalidrawFreeDrawElement
+    | ExcalidrawImageElement,
   point: Point,
 ): number => {
   const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
@@ -486,6 +490,7 @@ export const determineFocusDistance = (
   const nabs = Math.abs(n);
   switch (element.type) {
     case "rectangle":
+    case "image":
     case "text":
       return c / (hwidth * (nabs + q * mabs));
     case "diamond":
@@ -516,6 +521,7 @@ export const determineFocusPoint = (
   let point;
   switch (element.type) {
     case "rectangle":
+    case "image":
     case "text":
     case "diamond":
       point = findFocusPointForRectangulars(element, focus, adjecentPointRel);
@@ -565,6 +571,7 @@ const getSortedElementLineIntersections = (
   let intersections: GA.Point[];
   switch (element.type) {
     case "rectangle":
+    case "image":
     case "text":
     case "diamond":
       const corners = getCorners(element);
@@ -598,6 +605,7 @@ const getSortedElementLineIntersections = (
 const getCorners = (
   element:
     | ExcalidrawRectangleElement
+    | ExcalidrawImageElement
     | ExcalidrawDiamondElement
     | ExcalidrawTextElement,
   scale: number = 1,
@@ -606,6 +614,7 @@ const getCorners = (
   const hy = (scale * element.height) / 2;
   switch (element.type) {
     case "rectangle":
+    case "image":
     case "text":
       return [
         GA.point(hx, hy),
@@ -747,6 +756,7 @@ export const findFocusPointForEllipse = (
 export const findFocusPointForRectangulars = (
   element:
     | ExcalidrawRectangleElement
+    | ExcalidrawImageElement
     | ExcalidrawDiamondElement
     | ExcalidrawTextElement,
   // Between -1 and 1 for how far away should the focus point be relative
@@ -856,7 +866,7 @@ const hitTestRoughShape = (
     // move, bcurveTo, lineTo, and curveTo
     if (op === "move") {
       // change starting point
-      currentP = (data as unknown) as Point;
+      currentP = data as unknown as Point;
       // move operation does not draw anything; so, it always
       // returns false
     } else if (op === "bcurveTo") {

src/element/dragElements.ts

@@ -62,25 +62,32 @@ export const dragNewElement = (
   y: number,
   width: number,
   height: number,
-  isResizeWithSidesSameLength: boolean,
+  shouldMaintainAspectRatio: boolean,
-  isResizeCenterPoint: boolean,
+  shouldResizeFromCenter: boolean,
+  /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
+      true */
+  widthAspectRatio?: number | null,
 ) => {
-  if (isResizeWithSidesSameLength) {
+  if (shouldMaintainAspectRatio) {
-    ({ width, height } = getPerfectElementSize(
+    if (widthAspectRatio) {
-      elementType,
+      height = width / widthAspectRatio;
-      width,
+    } else {
-      y < originY ? -height : height,
+      ({ width, height } = getPerfectElementSize(
-    ));
+        elementType,
+        width,
+        y < originY ? -height : height,
+      ));
 
-    if (height < 0) {
+      if (height < 0) {
-      height = -height;
+        height = -height;
+      }
     }
   }
 
   let newX = x < originX ? originX - width : originX;
   let newY = y < originY ? originY - height : originY;
 
-  if (isResizeCenterPoint) {
+  if (shouldResizeFromCenter) {
     width += width;
     height += height;
     newX = originX - width / 2;

src/element/image.ts

@@ -0,0 +1,190 @@
+// -----------------------------------------------------------------------------
+// ExcalidrawImageElement & related helpers
+// -----------------------------------------------------------------------------
+
+import { MIME_TYPES, SVG_NS } from "../constants";
+import { getDataURL } from "../data/blob";
+import { t } from "../i18n";
+import { AppClassProperties, DataURL, BinaryFiles } from "../types";
+import { isInitializedImageElement } from "./typeChecks";
+import {
+  ExcalidrawElement,
+  FileId,
+  InitializedExcalidrawImageElement,
+} from "./types";
+
+export const loadHTMLImageElement = (dataURL: DataURL) => {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      resolve(image);
+    };
+    image.onerror = (error) => {
+      reject(error);
+    };
+    image.src = dataURL;
+  });
+};
+
+/** NOTE: updates cache even if already populated with given image. Thus,
+ * you should filter out the images upstream if you want to optimize this. */
+export const updateImageCache = async ({
+  fileIds,
+  files,
+  imageCache,
+}: {
+  fileIds: FileId[];
+  files: BinaryFiles;
+  imageCache: AppClassProperties["imageCache"];
+}) => {
+  const updatedFiles = new Map<FileId, true>();
+  const erroredFiles = new Map<FileId, true>();
+
+  await Promise.all(
+    fileIds.reduce((promises, fileId) => {
+      const fileData = files[fileId as string];
+      if (fileData && !updatedFiles.has(fileId)) {
+        updatedFiles.set(fileId, true);
+        return promises.concat(
+          (async () => {
+            try {
+              if (fileData.mimeType === MIME_TYPES.binary) {
+                throw new Error("Only images can be added to ImageCache");
+              }
+
+              const imagePromise = loadHTMLImageElement(fileData.dataURL);
+              const data = {
+                image: imagePromise,
+                mimeType: fileData.mimeType,
+              } as const;
+              // store the promise immediately to indicate there's an in-progress
+              // initialization
+              imageCache.set(fileId, data);
+
+              const image = await imagePromise;
+
+              imageCache.set(fileId, { ...data, image });
+            } catch (error: any) {
+              erroredFiles.set(fileId, true);
+            }
+          })(),
+        );
+      }
+      return promises;
+    }, [] as Promise<any>[]),
+  );
+
+  return {
+    imageCache,
+    /** includes errored files because they cache was updated nonetheless */
+    updatedFiles,
+    /** files that failed when creating HTMLImageElement */
+    erroredFiles,
+  };
+};
+
+export const getInitializedImageElements = (
+  elements: readonly ExcalidrawElement[],
+) =>
+  elements.filter((element) =>
+    isInitializedImageElement(element),
+  ) as InitializedExcalidrawImageElement[];
+
+export const isHTMLSVGElement = (node: Node | null): node is SVGElement => {
+  // lower-casing due to XML/HTML convention differences
+  // https://johnresig.com/blog/nodename-case-sensitivity
+  return node?.nodeName.toLowerCase() === "svg";
+};
+
+export const normalizeSVG = async (SVGString: string) => {
+  const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES.svg);
+  const svg = doc.querySelector("svg");
+  const errorNode = doc.querySelector("parsererror");
+  if (errorNode || !isHTMLSVGElement(svg)) {
+    throw new Error(t("errors.invalidSVGString"));
+  } else {
+    if (!svg.hasAttribute("xmlns")) {
+      svg.setAttribute("xmlns", SVG_NS);
+    }
+
+    return svg.outerHTML;
+  }
+};
+
+/**
+ * To improve perf, uses `createImageBitmap` is available. But there are
+ * quality issues across browsers, so don't use this API where quality matters.
+ */
+export const speedyImageToCanvas = async (imageFile: Blob | File) => {
+  let imageSrc: HTMLImageElement | ImageBitmap;
+  if (
+    typeof ImageBitmap !== "undefined" &&
+    ImageBitmap.prototype &&
+    ImageBitmap.prototype.close &&
+    window.createImageBitmap
+  ) {
+    imageSrc = await window.createImageBitmap(imageFile);
+  } else {
+    imageSrc = await loadHTMLImageElement(await getDataURL(imageFile));
+  }
+  const { width, height } = imageSrc;
+
+  const canvas = document.createElement("canvas");
+  canvas.height = height;
+  canvas.width = width;
+  const context = canvas.getContext("2d")!;
+  context.drawImage(imageSrc, 0, 0, width, height);
+
+  if (typeof ImageBitmap !== "undefined" && imageSrc instanceof ImageBitmap) {
+    imageSrc.close();
+  }
+
+  return { canvas, context, width, height };
+};
+
+/**
+ * Does its best at figuring out if an image (PNG) has any (semi)transparent
+ * pixels. If not PNG, always returns false.
+ */
+export const hasTransparentPixels = async (imageFile: Blob | File) => {
+  if (imageFile.type !== MIME_TYPES.png) {
+    return false;
+  }
+
+  const { findPngChunk, extractPngChunks } = await import("../data/image");
+
+  const buffer = await imageFile.arrayBuffer();
+  const chunks = extractPngChunks(new Uint8Array(buffer));
+
+  // early exit if tRNS not found and IHDR states no support for alpha
+  // -----------------------------------------------------------------------
+
+  const IHDR = findPngChunk(chunks, "IHDR");
+
+  if (
+    IHDR &&
+    IHDR.data[9] !== 4 &&
+    IHDR.data[9] !== 6 &&
+    !findPngChunk(chunks, "tRNS")
+  ) {
+    return false;
+  }
+
+  // otherwise loop through pixels to check if there's any actually
+  // (semi)transparent pixel
+  // -----------------------------------------------------------------------
+
+  const { width, height, context } = await speedyImageToCanvas(imageFile);
+  {
+    const { data } = context.getImageData(0, 0, width, height);
+    const len = data.byteLength;
+    let i = 3;
+    while (i <= len) {
+      if (data[i] !== 255) {
+        return true;
+      }
+      i += 4;
+    }
+  }
+  return false;
+};

src/element/index.ts

@@ -11,6 +11,7 @@ export {
   newTextElement,
   updateTextElement,
   newLinearElement,
+  newImageElement,
   duplicateElement,
 } from "./newElement";
 export {
@@ -93,6 +94,10 @@ const _clearElements = (
       : element,
   );
 
+export const clearElementsForDatabase = (
+  elements: readonly ExcalidrawElement[],
+) => _clearElements(elements);
+
 export const clearElementsForExport = (
   elements: readonly ExcalidrawElement[],
 ) => _clearElements(elements);

src/element/linearElementEditor.ts

@@ -150,9 +150,8 @@ export class LinearElementEditor {
           )
         : null;
       binding = {
-        [activePointIndex === 0
+        [activePointIndex === 0 ? "startBindingElement" : "endBindingElement"]:
-          ? "startBindingElement"
+          bindingElement,
-          : "endBindingElement"]: bindingElement,
       };
     }
     return {
@@ -236,10 +235,8 @@ export class LinearElementEditor {
       // from the end points of the `linearElement` - this is to allow disabling
       // binding (which needs to happen at the point the user finishes moving
       // the point).
-      const {
+      const { startBindingElement, endBindingElement } =
-        startBindingElement,
+        appState.editingLinearElement;
-        endBindingElement,
-      } = appState.editingLinearElement;
       if (isBindingEnabled(appState) && isBindingElement(element)) {
         bindOrUnbindLinearElement(
           element,

src/element/mutateElement.ts

@@ -17,12 +17,13 @@ type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
 export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   element: TElement,
   updates: ElementUpdate<TElement>,
-) => {
+  informMutation = true,
+): TElement => {
   let didChange = false;
 
   // casting to any because can't use `in` operator
   // (see https://github.com/microsoft/TypeScript/issues/21732)
-  const { points } = updates as any;
+  const { points, fileId } = updates as any;
 
   if (typeof points !== "undefined") {
     updates = { ...getSizeFromPoints(points), ...updates };
@@ -33,13 +34,23 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
     if (typeof value !== "undefined") {
       if (
         (element as any)[key] === value &&
-        // if object, always update in case its deep prop was mutated
+        // if object, always update because its attrs could have changed
-        (typeof value !== "object" || value === null || key === "groupIds")
+        // (except for specific keys we handle below)
+        (typeof value !== "object" ||
+          value === null ||
+          key === "groupIds" ||
+          key === "scale")
       ) {
         continue;
       }
 
-      if (key === "points") {
+      if (key === "scale") {
+        const prevScale = (element as any)[key];
+        const nextScale = value;
+        if (prevScale[0] === nextScale[0] && prevScale[1] === nextScale[1]) {
+          continue;
+        }
+      } else if (key === "points") {
         const prevPoints = (element as any)[key];
         const nextPoints = value;
         if (prevPoints.length === nextPoints.length) {
@@ -66,14 +77,14 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
       didChange = true;
     }
   }
-
   if (!didChange) {
-    return;
+    return element;
   }
 
   if (
     typeof updates.height !== "undefined" ||
     typeof updates.width !== "undefined" ||
+    typeof fileId != "undefined" ||
     typeof points !== "undefined"
   ) {
     invalidateShapeForElement(element);
@@ -81,7 +92,12 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 
   element.version++;
   element.versionNonce = randomInteger();
-  Scene.getScene(element)?.informMutation();
+
+  if (informMutation) {
+    Scene.getScene(element)?.informMutation();
+  }
+
+  return element;
 };
 
 export const newElementWith = <TElement extends ExcalidrawElement>(
@@ -94,8 +110,8 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     if (typeof value !== "undefined") {
       if (
         (element as any)[key] === value &&
-        // if object, always update in case its deep prop was mutated
+        // if object, always update because its attrs could have changed
-        (typeof value !== "object" || value === null || key === "groupIds")
+        (typeof value !== "object" || value === null)
       ) {
         continue;
       }

src/element/newElement.ts

@@ -1,5 +1,6 @@
 import {
   ExcalidrawElement,
+  ExcalidrawImageElement,
   ExcalidrawTextElement,
   ExcalidrawLinearElement,
   ExcalidrawGenericElement,
@@ -248,6 +249,22 @@ export const newLinearElement = (
   };
 };
 
+export const newImageElement = (
+  opts: {
+    type: ExcalidrawImageElement["type"];
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawImageElement> => {
+  return {
+    ..._newElementBase<ExcalidrawImageElement>("image", opts),
+    // in the future we'll support changing stroke color for some SVG elements,
+    // and `transparent` will likely mean "use original colors of the image"
+    strokeColor: "transparent",
+    status: "pending",
+    fileId: null,
+    scale: [1, 1],
+  };
+};
+
 // Simplified deep clone for the purpose of cloning ExcalidrawElement only
 // (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)
 //

src/element/resizeElements.ts

@@ -47,9 +47,9 @@ export const transformElements = (
   transformHandleType: MaybeTransformHandleType,
   selectedElements: readonly NonDeletedExcalidrawElement[],
   resizeArrowDirection: "origin" | "end",
-  isRotateWithDiscreteAngle: boolean,
+  shouldRotateWithDiscreteAngle: boolean,
-  isResizeCenterPoint: boolean,
+  shouldResizeFromCenter: boolean,
-  shouldKeepSidesRatio: boolean,
+  shouldMaintainAspectRatio: boolean,
   pointerX: number,
   pointerY: number,
   centerX: number,
@@ -62,7 +62,7 @@ export const transformElements = (
         element,
         pointerX,
         pointerY,
-        isRotateWithDiscreteAngle,
+        shouldRotateWithDiscreteAngle,
       );
       updateBoundElements(element);
     } else if (
@@ -76,7 +76,7 @@ export const transformElements = (
       reshapeSingleTwoPointElement(
         element,
         resizeArrowDirection,
-        isRotateWithDiscreteAngle,
+        shouldRotateWithDiscreteAngle,
         pointerX,
         pointerY,
       );
@@ -90,7 +90,7 @@ export const transformElements = (
       resizeSingleTextElement(
         element,
         transformHandleType,
-        isResizeCenterPoint,
+        shouldResizeFromCenter,
         pointerX,
         pointerY,
       );
@@ -98,10 +98,10 @@ export const transformElements = (
     } else if (transformHandleType) {
       resizeSingleElement(
         pointerDownState.originalElements.get(element.id) as typeof element,
-        shouldKeepSidesRatio,
+        shouldMaintainAspectRatio,
         element,
         transformHandleType,
-        isResizeCenterPoint,
+        shouldResizeFromCenter,
         pointerX,
         pointerY,
       );
@@ -115,7 +115,7 @@ export const transformElements = (
         selectedElements,
         pointerX,
         pointerY,
-        isRotateWithDiscreteAngle,
+        shouldRotateWithDiscreteAngle,
         centerX,
         centerY,
       );
@@ -142,13 +142,13 @@ const rotateSingleElement = (
   element: NonDeletedExcalidrawElement,
   pointerX: number,
   pointerY: number,
-  isRotateWithDiscreteAngle: boolean,
+  shouldRotateWithDiscreteAngle: boolean,
 ) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   let angle = (5 * Math.PI) / 2 + Math.atan2(pointerY - cy, pointerX - cx);
-  if (isRotateWithDiscreteAngle) {
+  if (shouldRotateWithDiscreteAngle) {
     angle += SHIFT_LOCKING_ANGLE / 2;
     angle -= angle % SHIFT_LOCKING_ANGLE;
   }
@@ -187,7 +187,7 @@ const getPerfectElementSizeWithRotation = (
 export const reshapeSingleTwoPointElement = (
   element: NonDeleted<ExcalidrawLinearElement>,
   resizeArrowDirection: "origin" | "end",
-  isRotateWithDiscreteAngle: boolean,
+  shouldRotateWithDiscreteAngle: boolean,
   pointerX: number,
   pointerY: number,
 ) => {
@@ -212,7 +212,7 @@ export const reshapeSingleTwoPointElement = (
           element.x + element.points[1][0] - rotatedX,
           element.y + element.points[1][1] - rotatedY,
         ];
-  if (isRotateWithDiscreteAngle) {
+  if (shouldRotateWithDiscreteAngle) {
     [width, height] = getPerfectElementSizeWithRotation(
       element.type,
       width,
@@ -281,28 +281,28 @@ const measureFontSizeFromWH = (
 
 const getSidesForTransformHandle = (
   transformHandleType: TransformHandleType,
-  isResizeFromCenter: boolean,
+  shouldResizeFromCenter: boolean,
 ) => {
   return {
     n:
       /^(n|ne|nw)$/.test(transformHandleType) ||
-      (isResizeFromCenter && /^(s|se|sw)$/.test(transformHandleType)),
+      (shouldResizeFromCenter && /^(s|se|sw)$/.test(transformHandleType)),
     s:
       /^(s|se|sw)$/.test(transformHandleType) ||
-      (isResizeFromCenter && /^(n|ne|nw)$/.test(transformHandleType)),
+      (shouldResizeFromCenter && /^(n|ne|nw)$/.test(transformHandleType)),
     w:
       /^(w|nw|sw)$/.test(transformHandleType) ||
-      (isResizeFromCenter && /^(e|ne|se)$/.test(transformHandleType)),
+      (shouldResizeFromCenter && /^(e|ne|se)$/.test(transformHandleType)),
     e:
       /^(e|ne|se)$/.test(transformHandleType) ||
-      (isResizeFromCenter && /^(w|nw|sw)$/.test(transformHandleType)),
+      (shouldResizeFromCenter && /^(w|nw|sw)$/.test(transformHandleType)),
   };
 };
 
 const resizeSingleTextElement = (
   element: NonDeleted<ExcalidrawTextElement>,
   transformHandleType: "nw" | "ne" | "sw" | "se",
-  isResizeFromCenter: boolean,
+  shouldResizeFromCenter: boolean,
   pointerX: number,
   pointerY: number,
 ) => {
@@ -361,7 +361,7 @@ const resizeSingleTextElement = (
     const deltaX2 = (x2 - nextX2) / 2;
     const deltaY2 = (y2 - nextY2) / 2;
     const [nextElementX, nextElementY] = adjustXYWithRotation(
-      getSidesForTransformHandle(transformHandleType, isResizeFromCenter),
+      getSidesForTransformHandle(transformHandleType, shouldResizeFromCenter),
       element.x,
       element.y,
       element.angle,
@@ -383,10 +383,10 @@ const resizeSingleTextElement = (
 
 export const resizeSingleElement = (
   stateAtResizeStart: NonDeletedExcalidrawElement,
-  shouldKeepSidesRatio: boolean,
+  shouldMaintainAspectRatio: boolean,
   element: NonDeletedExcalidrawElement,
   transformHandleDirection: TransformHandleDirection,
-  isResizeFromCenter: boolean,
+  shouldResizeFromCenter: boolean,
   pointerX: number,
   pointerY: number,
 ) => {
@@ -444,13 +444,13 @@ export const resizeSingleElement = (
   let eleNewHeight = element.height * scaleY;
 
   // adjust dimensions for resizing from center
-  if (isResizeFromCenter) {
+  if (shouldResizeFromCenter) {
     eleNewWidth = 2 * eleNewWidth - eleInitialWidth;
     eleNewHeight = 2 * eleNewHeight - eleInitialHeight;
   }
 
   // adjust dimensions to keep sides ratio
-  if (shouldKeepSidesRatio) {
+  if (shouldMaintainAspectRatio) {
     const widthRatio = Math.abs(eleNewWidth) / eleInitialWidth;
     const heightRatio = Math.abs(eleNewHeight) / eleInitialHeight;
     if (transformHandleDirection.length === 1) {
@@ -464,16 +464,12 @@ export const resizeSingleElement = (
     }
   }
 
-  const [
+  const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
-    newBoundsX1,
+    getResizedElementAbsoluteCoords(
-    newBoundsY1,
+      stateAtResizeStart,
-    newBoundsX2,
+      eleNewWidth,
-    newBoundsY2,
+      eleNewHeight,
-  ] = getResizedElementAbsoluteCoords(
+    );
-    stateAtResizeStart,
-    eleNewWidth,
-    eleNewHeight,
-  );
   const newBoundsWidth = newBoundsX2 - newBoundsX1;
   const newBoundsHeight = newBoundsY2 - newBoundsY1;
 
@@ -495,7 +491,7 @@ export const resizeSingleElement = (
   }
 
   // Keeps opposite handle fixed during resize
-  if (shouldKeepSidesRatio) {
+  if (shouldMaintainAspectRatio) {
     if (["s", "n"].includes(transformHandleDirection)) {
       newTopLeft[0] = startCenter[0] - newBoundsWidth / 2;
     }
@@ -523,7 +519,7 @@ export const resizeSingleElement = (
     }
   }
 
-  if (isResizeFromCenter) {
+  if (shouldResizeFromCenter) {
     newTopLeft[0] = startCenter[0] - Math.abs(newBoundsWidth) / 2;
     newTopLeft[1] = startCenter[1] - Math.abs(newBoundsHeight) / 2;
   }
@@ -558,6 +554,18 @@ export const resizeSingleElement = (
     ...rescaledPoints,
   };
 
+  if ("scale" in element && "scale" in stateAtResizeStart) {
+    mutateElement(element, {
+      scale: [
+        // defaulting because scaleX/Y can be 0/-0
+        (Math.sign(scaleX) || stateAtResizeStart.scale[0]) *
+          stateAtResizeStart.scale[0],
+        (Math.sign(scaleY) || stateAtResizeStart.scale[1]) *
+          stateAtResizeStart.scale[1],
+      ],
+    });
+  }
+
   if (
     resizedElement.width !== 0 &&
     resizedElement.height !== 0 &&
@@ -692,13 +700,13 @@ const rotateMultipleElements = (
   elements: readonly NonDeletedExcalidrawElement[],
   pointerX: number,
   pointerY: number,
-  isRotateWithDiscreteAngle: boolean,
+  shouldRotateWithDiscreteAngle: boolean,
   centerX: number,
   centerY: number,
 ) => {
   let centerAngle =
     (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
-  if (isRotateWithDiscreteAngle) {
+  if (shouldRotateWithDiscreteAngle) {
     centerAngle += SHIFT_LOCKING_ANGLE / 2;
     centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
   }

src/element/resizeTest.ts

@@ -36,10 +36,8 @@ export const resizeTest = (
     return false;
   }
 
-  const {
+  const { rotation: rotationTransformHandle, ...transformHandles } =
-    rotation: rotationTransformHandle,
+    getTransformHandles(element, zoom, pointerType);
-    ...transformHandles
-  } = getTransformHandles(element, zoom, pointerType);
 
   if (
     rotationTransformHandle &&
@@ -49,9 +47,8 @@ export const resizeTest = (
   }
 
   const filter = Object.keys(transformHandles).filter((key) => {
-    const transformHandle = transformHandles[
+    const transformHandle =
-      key as Exclude<TransformHandleType, "rotation">
+      transformHandles[key as Exclude<TransformHandleType, "rotation">]!;
-    ]!;
     if (!transformHandle) {
       return false;
     }
@@ -105,9 +102,8 @@ export const getTransformHandleTypeFromCoords = (
   );
 
   const found = Object.keys(transformHandles).find((key) => {
-    const transformHandle = transformHandles[
+    const transformHandle =
-      key as Exclude<TransformHandleType, "rotation">
+      transformHandles[key as Exclude<TransformHandleType, "rotation">]!;
-    ]!;
     return (
       transformHandle &&
       isInsideTransformHandle(transformHandle, scenePointerX, scenePointerY)

src/element/textWysiwyg.tsx

@@ -108,6 +108,7 @@ export const textWysiwyg = ({
   editable.dataset.type = "wysiwyg";
   // prevent line wrapping on Safari
   editable.wrap = "off";
+  editable.classList.add("excalidraw-wysiwyg");
 
   Object.assign(editable.style, {
     position: "absolute",

src/element/transformHandles.ts

@@ -17,9 +17,9 @@ export type TransformHandleDirection =
 export type TransformHandleType = TransformHandleDirection | "rotation";
 
 export type TransformHandle = [number, number, number, number];
-export type TransformHandles = Partial<
+export type TransformHandles = Partial<{
-  { [T in TransformHandleType]: TransformHandle }
+  [T in TransformHandleType]: TransformHandle;
->;
+}>;
 export type MaybeTransformHandleType = TransformHandleType | false;
 
 const transformHandleSizes: { [k in PointerType]: number } = {

src/element/typeChecks.ts

@@ -5,6 +5,8 @@ import {
   ExcalidrawBindableElement,
   ExcalidrawGenericElement,
   ExcalidrawFreeDrawElement,
+  InitializedExcalidrawImageElement,
+  ExcalidrawImageElement,
 } from "./types";
 
 export const isGenericElement = (
@@ -19,6 +21,18 @@ export const isGenericElement = (
   );
 };
 
+export const isInitializedImageElement = (
+  element: ExcalidrawElement | null,
+): element is InitializedExcalidrawImageElement => {
+  return !!element && element.type === "image" && !!element.fileId;
+};
+
+export const isImageElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawImageElement => {
+  return !!element && element.type === "image";
+};
+
 export const isTextElement = (
   element: ExcalidrawElement | null,
 ): element is ExcalidrawTextElement => {

src/element/types.ts

@@ -63,6 +63,21 @@ export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
   type: "ellipse";
 };
 
+export type ExcalidrawImageElement = _ExcalidrawElementBase &
+  Readonly<{
+    type: "image";
+    fileId: FileId | null;
+    /** whether respective file is persisted */
+    status: "pending" | "saved" | "error";
+    /** X and Y scale factors <-1, 1>, used for image axis flipping */
+    scale: [number, number];
+  }>;
+
+export type InitializedExcalidrawImageElement = MarkNonNullable<
+  ExcalidrawImageElement,
+  "fileId"
+>;
+
 /**
  * These are elements that don't have any additional properties.
  */
@@ -81,10 +96,11 @@ export type ExcalidrawElement =
   | ExcalidrawGenericElement
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
-  | ExcalidrawFreeDrawElement;
+  | ExcalidrawFreeDrawElement
+  | ExcalidrawImageElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
-  isDeleted: false;
+  isDeleted: boolean;
 };
 
 export type NonDeletedExcalidrawElement = NonDeleted<ExcalidrawElement>;
@@ -104,7 +120,8 @@ export type ExcalidrawBindableElement =
   | ExcalidrawRectangleElement
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
-  | ExcalidrawTextElement;
+  | ExcalidrawTextElement
+  | ExcalidrawImageElement;
 
 export type PointBinding = {
   elementId: ExcalidrawBindableElement["id"];
@@ -112,7 +129,7 @@ export type PointBinding = {
   gap: number;
 };
 
-export type Arrowhead = "arrow" | "bar" | "dot";
+export type Arrowhead = "arrow" | "bar" | "dot" | "triangle";
 
 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
   Readonly<{
@@ -133,3 +150,5 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
     simulatePressure: boolean;
     lastCommittedPoint: Point | null;
   }>;
+
+export type FileId = string & { _brand: "FileId" };

src/excalidraw-app/app_constants.ts

@@ -1,8 +1,14 @@
 // time constants (ms)
 export const SAVE_TO_LOCAL_STORAGE_TIMEOUT = 300;
 export const INITIAL_SCENE_UPDATE_TIMEOUT = 5000;
+export const FILE_UPLOAD_TIMEOUT = 300;
+export const LOAD_IMAGES_TIMEOUT = 500;
 export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 
+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 = {
   SERVER_VOLATILE: "server-volatile-broadcast",
   SERVER: "server-broadcast",
@@ -12,3 +18,10 @@ export enum SCENE {
   INIT = "SCENE_INIT",
   UPDATE = "SCENE_UPDATE",
 }
+
+export const FIREBASE_STORAGE_PREFIXES = {
+  shareLinkFiles: `/files/shareLinks`,
+  collabFiles: `/files/rooms`,
+};
+
+export const ROOM_ID_BYTES = 10;

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -4,20 +4,26 @@ import { ExcalidrawImperativeAPI } from "../../types";
 import { ErrorDialog } from "../../components/ErrorDialog";
 import { APP_NAME, ENV, EVENT } from "../../constants";
 import { ImportedDataState } from "../../data/types";
-import { ExcalidrawElement } from "../../element/types";
 import {
-  getElementMap,
+  ExcalidrawElement,
-  getSceneVersion,
+  InitializedExcalidrawImageElement,
-} from "../../packages/excalidraw/index";
+} from "../../element/types";
+import { getSceneVersion } from "../../packages/excalidraw/index";
 import { Collaborator, Gesture } from "../../types";
-import { resolvablePromise, withBatchedUpdates } from "../../utils";
 import {
+  preventUnload,
+  resolvablePromise,
+  withBatchedUpdates,
+} from "../../utils";
+import {
+  FILE_UPLOAD_MAX_BYTES,
+  FIREBASE_STORAGE_PREFIXES,
   INITIAL_SCENE_UPDATE_TIMEOUT,
+  LOAD_IMAGES_TIMEOUT,
   SCENE,
   SYNC_FULL_SCENE_INTERVAL_MS,
 } from "../app_constants";
 import {
-  decryptAESGEM,
   generateCollaborationLinkData,
   getCollaborationLink,
   SocketUpdateDataSource,
@@ -25,7 +31,9 @@ import {
 } from "../data";
 import {
   isSavedToFirebase,
+  loadFilesFromFirebase,
   loadFromFirebase,
+  saveFilesToFirebase,
   saveToFirebase,
 } from "../data/firebase";
 import {
@@ -41,7 +49,22 @@ import { UserIdleState } from "../../types";
 import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { isInvisiblySmallElement } from "../../element";
-import { getRandomUsername } from "@excalidraw/random-username";
+import {
+  encodeFilesForUpload,
+  FileManager,
+  updateStaleImageStatuses,
+} from "../data/FileManager";
+import { AbortError } from "../../errors";
+import {
+  isImageElement,
+  isInitializedImageElement,
+} from "../../element/typeChecks";
+import { newElementWith } from "../../element/mutateElement";
+import {
+  ReconciledElements,
+  reconcileElements as _reconcileElements,
+} from "./reconciliation";
+import { decryptData } from "../../data/encryption";
 
 interface CollabState {
   modalIsShown: boolean;
@@ -62,14 +85,12 @@ export interface CollabAPI {
   initializeSocketClient: CollabInstance["initializeSocketClient"];
   onCollabButtonClick: CollabInstance["onCollabButtonClick"];
   broadcastElements: CollabInstance["broadcastElements"];
+  fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
 }
 
-type ReconciledElements = readonly ExcalidrawElement[] & {
-  _brand: "reconciledElements";
-};
-
 interface Props {
   excalidrawAPI: ExcalidrawImperativeAPI;
+  onRoomClose?: () => void;
 }
 
 const {
@@ -82,12 +103,13 @@ export { CollabContext, CollabContextConsumer };
 
 class CollabWrapper extends PureComponent<Props, CollabState> {
   portal: Portal;
+  fileManager: FileManager;
   excalidrawAPI: Props["excalidrawAPI"];
   isCollaborating: boolean = false;
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
 
-  private socketInitializationTimer?: NodeJS.Timeout;
+  private socketInitializationTimer?: number;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
   private collaborators = new Map<string, Collaborator>();
 
@@ -101,6 +123,31 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       activeRoomLink: "",
     };
     this.portal = new Portal(this);
+    this.fileManager = new FileManager({
+      getFiles: async (fileIds) => {
+        const { roomId, roomKey } = this.portal;
+        if (!roomId || !roomKey) {
+          throw new AbortError();
+        }
+
+        return loadFilesFromFirebase(`files/rooms/${roomId}`, roomKey, fileIds);
+      },
+      saveFiles: async ({ addedFiles }) => {
+        const { roomId, roomKey } = this.portal;
+        if (!roomId || !roomKey) {
+          throw new AbortError();
+        }
+
+        return saveFilesToFirebase({
+          prefix: `${FIREBASE_STORAGE_PREFIXES.collabFiles}/${roomId}`,
+          files: await encodeFilesForUpload({
+            files: addedFiles,
+            encryptionKey: roomKey,
+            maxBytes: FILE_UPLOAD_MAX_BYTES,
+          }),
+        });
+      },
+    });
     this.excalidrawAPI = props.excalidrawAPI;
     this.activeIntervalId = null;
     this.idleTimeoutId = null;
@@ -153,15 +200,14 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
     if (
       this.isCollaborating &&
-      !isSavedToFirebase(this.portal, syncableElements)
+      (this.fileManager.shouldPreventUnload(syncableElements) ||
+        !isSavedToFirebase(this.portal, syncableElements))
     ) {
       // this won't run in time if user decides to leave the site, but
       //  the purpose is to run in immediately after user decides to stay
       this.saveCollabRoomToFirebase(syncableElements);
 
-      event.preventDefault();
+      preventUnload(event);
-      // NOTE: modern browsers no longer allow showing a custom message here
-      event.returnValue = "";
     }
 
     if (this.isCollaborating || this.portal.roomId) {
@@ -178,13 +224,13 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   });
 
   saveCollabRoomToFirebase = async (
-    syncableElements: ExcalidrawElement[] = this.getSyncableElements(
+    syncableElements: readonly ExcalidrawElement[] = this.getSyncableElements(
       this.excalidrawAPI.getSceneElementsIncludingDeleted(),
     ),
   ) => {
     try {
       await saveToFirebase(this.portal, syncableElements);
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
     }
   };
@@ -195,11 +241,30 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   closePortal = () => {
+    this.queueBroadcastAllElements.cancel();
+    this.loadImageFiles.cancel();
+
     this.saveCollabRoomToFirebase();
     if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
       window.history.pushState({}, APP_NAME, window.location.origin);
       this.destroySocketClient();
       trackEvent("share", "room closed");
+
+      this.props.onRoomClose?.();
+
+      const elements = this.excalidrawAPI
+        .getSceneElementsIncludingDeleted()
+        .map((element) => {
+          if (isImageElement(element) && element.status === "saved") {
+            return newElementWith(element, { status: "pending" });
+          }
+          return element;
+        });
+
+      this.excalidrawAPI.updateScene({
+        elements,
+        commitToHistory: false,
+      });
     }
   };
 
@@ -214,7 +279,47 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       });
       this.isCollaborating = false;
     }
+    this.lastBroadcastedOrReceivedSceneVersion = -1;
     this.portal.close();
+    this.fileManager.reset();
+  };
+
+  private fetchImageFilesFromFirebase = async (scene: {
+    elements: readonly ExcalidrawElement[];
+  }) => {
+    const unfetchedImages = scene.elements
+      .filter((element) => {
+        return (
+          isInitializedImageElement(element) &&
+          !this.fileManager.isFileHandled(element.fileId) &&
+          !element.isDeleted &&
+          element.status === "saved"
+        );
+      })
+      .map((element) => (element as InitializedExcalidrawImageElement).fileId);
+
+    return await this.fileManager.getFiles(unfetchedImages);
+  };
+
+  private decryptPayload = async (
+    iv: Uint8Array,
+    encryptedData: ArrayBuffer,
+    decryptionKey: string,
+  ) => {
+    try {
+      const decrypted = await decryptData(iv, encryptedData, decryptionKey);
+
+      const decodedData = new TextDecoder("utf-8").decode(
+        new Uint8Array(decrypted),
+      );
+      return JSON.parse(decodedData);
+    } catch (error) {
+      window.alert(t("alerts.decryptFailed"));
+      console.error(error);
+      return {
+        type: "INVALID_RESPONSE",
+      };
+    }
   };
 
   private initializeSocketClient = async (
@@ -224,10 +329,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       return null;
     }
 
-    if (!this.state.username) {
-      this.updateUsername(getRandomUsername());
-    }
-
     let roomId;
     let roomKey;
 
@@ -267,12 +368,17 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             scrollToContent: true,
           });
         }
-      } catch (error) {
+      } catch (error: any) {
         // log the error and move on. other peers will sync us the scene.
         console.error(error);
       }
     } else {
-      const elements = this.excalidrawAPI.getSceneElements();
+      const elements = this.excalidrawAPI.getSceneElements().map((element) => {
+        if (isImageElement(element) && element.status === "saved") {
+          return newElementWith(element, { status: "pending" });
+        }
+        return element;
+      });
       // remove deleted elements from elements array & history to ensure we don't
       // expose potentially sensitive user data in case user manually deletes
       // existing elements (or clears scene), which would otherwise be persisted
@@ -282,11 +388,16 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         elements,
         commitToHistory: true,
       });
+
+      this.broadcastElements(elements);
+
+      const syncableElements = this.getSyncableElements(elements);
+      this.saveCollabRoomToFirebase(syncableElements);
     }
 
     // fallback in case you're not alone in the room but still don't receive
     // initial SCENE_UPDATE message
-    this.socketInitializationTimer = setTimeout(() => {
+    this.socketInitializationTimer = window.setTimeout(() => {
       this.initializeSocket();
       scenePromise.resolve(null);
     }, INITIAL_SCENE_UPDATE_TIMEOUT);
@@ -298,10 +409,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         if (!this.portal.roomKey) {
           return;
         }
-        const decryptedData = await decryptAESGEM(
+
+        const decryptedData = await this.decryptPayload(
+          iv,
           encryptedData,
           this.portal.roomKey,
-          iv,
         );
 
         switch (decryptedData.type) {
@@ -329,12 +441,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             );
             break;
           case "MOUSE_LOCATION": {
-            const {
+            const { pointer, button, username, selectedElementIds } =
-              pointer,
+              decryptedData.payload;
-              button,
-              username,
-              selectedElementIds,
-            } = decryptedData.payload;
             const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
               decryptedData.payload.socketId ||
               // @ts-ignore legacy, see #2094 (#2097)
@@ -390,67 +498,43 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   private reconcileElements = (
-    elements: readonly ExcalidrawElement[],
+    remoteElements: readonly ExcalidrawElement[],
   ): ReconciledElements => {
-    const currentElements = this.getSceneElementsIncludingDeleted();
+    const localElements = this.getSceneElementsIncludingDeleted();
-    // create a map of ids so we don't have to iterate
-    // over the array more than once.
-    const localElementMap = getElementMap(currentElements);
-
     const appState = this.excalidrawAPI.getAppState();
 
-    // Reconcile
+    const reconciledElements = _reconcileElements(
-    const newElements: readonly ExcalidrawElement[] = elements
+      localElements,
-      .reduce((elements, element) => {
+      remoteElements,
-        // if the remote element references one that's currently
+      appState,
-        // edited on local, skip it (it'll be added in the next step)
+    );
-        if (
-          element.id === appState.editingElement?.id ||
-          element.id === appState.resizingElement?.id ||
-          element.id === appState.draggingElement?.id
-        ) {
-          return elements;
-        }
-
-        if (
-          localElementMap.hasOwnProperty(element.id) &&
-          localElementMap[element.id].version > element.version
-        ) {
-          elements.push(localElementMap[element.id]);
-          delete localElementMap[element.id];
-        } else if (
-          localElementMap.hasOwnProperty(element.id) &&
-          localElementMap[element.id].version === element.version &&
-          localElementMap[element.id].versionNonce !== element.versionNonce
-        ) {
-          // resolve conflicting edits deterministically by taking the one with the lowest versionNonce
-          if (localElementMap[element.id].versionNonce < element.versionNonce) {
-            elements.push(localElementMap[element.id]);
-          } else {
-            // it should be highly unlikely that the two versionNonces are the same. if we are
-            // really worried about this, we can replace the versionNonce with the socket id.
-            elements.push(element);
-          }
-          delete localElementMap[element.id];
-        } else {
-          elements.push(element);
-          delete localElementMap[element.id];
-        }
-
-        return elements;
-      }, [] as Mutable<typeof elements>)
-      // add local elements that weren't deleted or on remote
-      .concat(...Object.values(localElementMap));
 
     // Avoid broadcasting to the rest of the collaborators the scene
     // we just received!
     // Note: this needs to be set before updating the scene as it
     // synchronously calls render.
-    this.setLastBroadcastedOrReceivedSceneVersion(getSceneVersion(newElements));
+    this.setLastBroadcastedOrReceivedSceneVersion(
+      getSceneVersion(reconciledElements),
+    );
 
-    return newElements as ReconciledElements;
+    return reconciledElements;
   };
 
+  private loadImageFiles = throttle(async () => {
+    const { loadedFiles, erroredFiles } =
+      await this.fetchImageFilesFromFirebase({
+        elements: this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+      });
+
+    this.excalidrawAPI.addFiles(loadedFiles);
+
+    updateStaleImageStatuses({
+      excalidrawAPI: this.excalidrawAPI,
+      erroredFiles,
+      elements: this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+    });
+  }, LOAD_IMAGES_TIMEOUT);
+
   private handleRemoteSceneUpdate = (
     elements: ReconciledElements,
     { init = false }: { init?: boolean } = {},
@@ -465,6 +549,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     // undo, a user makes a change, and then try to redo, your element(s) will be lost. However,
     // right now we think this is the right tradeoff.
     this.excalidrawAPI.history.clear();
+
+    this.loadImageFiles();
   };
 
   private onPointerMove = () => {
@@ -521,9 +607,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
   setCollaborators(sockets: string[]) {
     this.setState((state) => {
-      const collaborators: InstanceType<
+      const collaborators: InstanceType<typeof CollabWrapper>["collaborators"] =
-        typeof CollabWrapper
+        new Map();
-      >["collaborators"] = new Map();
       for (const socketId of sockets) {
         if (this.collaborators.has(socketId)) {
           collaborators.set(socketId, this.collaborators.get(socketId)!);
@@ -568,11 +653,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       getSceneVersion(elements) >
       this.getLastBroadcastedOrReceivedSceneVersion()
     ) {
-      this.portal.broadcastScene(
+      this.portal.broadcastScene(SCENE.UPDATE, elements, false);
-        SCENE.UPDATE,
-        this.getSyncableElements(elements),
-        false,
-      );
       this.lastBroadcastedOrReceivedSceneVersion = getSceneVersion(elements);
       this.queueBroadcastAllElements();
     }
@@ -581,9 +662,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   queueBroadcastAllElements = throttle(() => {
     this.portal.broadcastScene(
       SCENE.UPDATE,
-      this.getSyncableElements(
+      this.excalidrawAPI.getSceneElementsIncludingDeleted(),
-        this.excalidrawAPI.getSceneElementsIncludingDeleted(),
-      ),
       true,
     );
     const currentVersion = this.getLastBroadcastedOrReceivedSceneVersion();
@@ -598,7 +677,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.setState({ modalIsShown: false });
   };
 
-  updateUsername = (username: string) => {
+  onUsernameChange = (username: string) => {
     this.setState({ username });
     saveUsernameToLocalStorage(username);
   };
@@ -609,8 +688,12 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     });
   };
 
+  isSyncableElement = (element: ExcalidrawElement) => {
+    return element.isDeleted || !isInvisiblySmallElement(element);
+  };
+
   getSyncableElements = (elements: readonly ExcalidrawElement[]) =>
-    elements.filter((el) => el.isDeleted || !isInvisiblySmallElement(el));
+    elements.filter((element) => this.isSyncableElement(element));
 
   /** PRIVATE. Use `this.getContextValue()` instead. */
   private contextValue: CollabAPI | null = null;
@@ -627,6 +710,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.contextValue.initializeSocketClient = this.initializeSocketClient;
     this.contextValue.onCollabButtonClick = this.onCollabButtonClick;
     this.contextValue.broadcastElements = this.broadcastElements;
+    this.contextValue.fetchImageFilesFromFirebase =
+      this.fetchImageFilesFromFirebase;
     return this.contextValue;
   };
 
@@ -640,7 +725,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             handleClose={this.handleClose}
             activeRoomLink={activeRoomLink}
             username={username}
-            onUsernameChange={this.updateUsername}
+            onUsernameChange={this.onUsernameChange}
             onRoomCreate={this.openPortal}
             onRoomDestroy={this.closePortal}
             setErrorMessage={(errorMessage) => {

src/excalidraw-app/collab/Portal.tsx

@@ -1,15 +1,15 @@
-import {
+import { SocketUpdateData, SocketUpdateDataSource } from "../data";
-  encryptAESGEM,
-  SocketUpdateData,
-  SocketUpdateDataSource,
-} from "../data";
 
 import CollabWrapper from "./CollabWrapper";
 
 import { ExcalidrawElement } from "../../element/types";
-import { BROADCAST, SCENE } from "../app_constants";
+import { BROADCAST, FILE_UPLOAD_TIMEOUT, SCENE } from "../app_constants";
 import { UserIdleState } from "../../types";
 import { trackEvent } from "../../analytics";
+import { throttle } from "lodash";
+import { newElementWith } from "../../element/mutateElement";
+import { BroadcastedExcalidrawElement } from "./reconciliation";
+import { encryptData } from "../../data/encryption";
 
 class Portal {
   collab: CollabWrapper;
@@ -38,9 +38,7 @@ class Portal {
     this.socket.on("new-user", async (_socketId: string) => {
       this.broadcastScene(
         SCENE.INIT,
-        this.collab.getSyncableElements(
+        this.collab.getSceneElementsIncludingDeleted(),
-          this.collab.getSceneElementsIncludingDeleted(),
-        ),
         /* syncAll */ true,
       );
     });
@@ -53,6 +51,7 @@ class Portal {
     if (!this.socket) {
       return;
     }
+    this.queueFileUpload.flush();
     this.socket.close();
     this.socket = null;
     this.roomId = null;
@@ -77,36 +76,79 @@ class Portal {
     if (this.isOpen()) {
       const json = JSON.stringify(data);
       const encoded = new TextEncoder().encode(json);
-      const encrypted = await encryptAESGEM(encoded, this.roomKey!);
+      const { encryptedBuffer, iv } = await encryptData(this.roomKey!, encoded);
-      this.socket!.emit(
+
+      this.socket?.emit(
         volatile ? BROADCAST.SERVER_VOLATILE : BROADCAST.SERVER,
         this.roomId,
-        encrypted.data,
+        encryptedBuffer,
-        encrypted.iv,
+        iv,
       );
     }
   }
 
+  queueFileUpload = throttle(async () => {
+    try {
+      await this.collab.fileManager.saveFiles({
+        elements: this.collab.excalidrawAPI.getSceneElementsIncludingDeleted(),
+        files: this.collab.excalidrawAPI.getFiles(),
+      });
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        this.collab.excalidrawAPI.updateScene({
+          appState: {
+            errorMessage: error.message,
+          },
+        });
+      }
+    }
+
+    this.collab.excalidrawAPI.updateScene({
+      elements: this.collab.excalidrawAPI
+        .getSceneElementsIncludingDeleted()
+        .map((element) => {
+          if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
+            // this will signal collaborators to pull image data from server
+            // (using mutation instead of newElementWith otherwise it'd break
+            // in-progress dragging)
+            return newElementWith(element, { status: "saved" });
+          }
+          return element;
+        }),
+    });
+  }, FILE_UPLOAD_TIMEOUT);
+
   broadcastScene = async (
     sceneType: SCENE.INIT | SCENE.UPDATE,
-    syncableElements: ExcalidrawElement[],
+    allElements: readonly ExcalidrawElement[],
     syncAll: boolean,
   ) => {
     if (sceneType === SCENE.INIT && !syncAll) {
       throw new Error("syncAll must be true when sending SCENE.INIT");
     }
 
-    if (!syncAll) {
+    // sync out only the elements we think we need to to save bandwidth.
-      // sync out only the elements we think we need to to save bandwidth.
+    // periodically we'll resync the whole thing to make sure no one diverges
-      // periodically we'll resync the whole thing to make sure no one diverges
+    // due to a dropped message (server goes down etc).
-      // due to a dropped message (server goes down etc).
+    const syncableElements = allElements.reduce(
-      syncableElements = syncableElements.filter(
+      (acc, element: BroadcastedExcalidrawElement, idx, elements) => {
-        (syncableElement) =>
+        if (
-          !this.broadcastedElementVersions.has(syncableElement.id) ||
+          (syncAll ||
-          syncableElement.version >
+            !this.broadcastedElementVersions.has(element.id) ||
-            this.broadcastedElementVersions.get(syncableElement.id)!,
+            element.version >
-      );
+              this.broadcastedElementVersions.get(element.id)!) &&
-    }
+          this.collab.isSyncableElement(element)
+        ) {
+          acc.push({
+            ...element,
+            // z-index info for the reconciler
+            parent: idx === 0 ? "^" : elements[idx - 1]?.id,
+          });
+        }
+        return acc;
+      },
+      [] as BroadcastedExcalidrawElement[],
+    );
 
     const data: SocketUpdateDataSource[typeof sceneType] = {
       type: sceneType,
@@ -126,6 +168,8 @@ class Portal {
       data as SocketUpdateData,
     );
 
+    this.queueFileUpload();
+
     if (syncAll && this.collab.isCollaborating) {
       await Promise.all([
         broadcastPromise,
@@ -164,8 +208,8 @@ class Portal {
           socketId: this.socket.id,
           pointer: payload.pointer,
           button: payload.button || "up",
-          selectedElementIds: this.collab.excalidrawAPI.getAppState()
+          selectedElementIds:
-            .selectedElementIds,
+            this.collab.excalidrawAPI.getAppState().selectedElementIds,
           username: this.collab.state.username,
         },
       };

src/excalidraw-app/collab/RoomDialog.scss

@@ -6,7 +6,7 @@
     margin: 1.5em 0;
   }
 
-  .RoomDialog-link {
+  input.RoomDialog-link {
     color: var(--text-primary-color);
     min-width: 0;
     flex: 1 1 auto;
@@ -14,8 +14,6 @@
     display: inline-block;
     cursor: pointer;
     border: none;
-    height: 2.5rem;
-    line-height: 2.5rem;
     padding: 0 0.5rem;
     white-space: nowrap;
     border-radius: var(--space-factor);
@@ -55,10 +53,7 @@
       margin-top: 0.5em;
       margin-inline-start: 0;
     }
-    height: 2.5rem;
     font-size: 1em;
-    line-height: 1.5;
-    padding: 0 0.5rem;
   }
 
   .RoomDialog-sessionStartButtonContainer {