docs: release @excalidraw/excalidraw@0.12.0 🎉 (#5421)

* build: automate release step fully

* exit process when error

* Add npm scripts for release and prerelease

* update docs with release setps

.env.development

@@ -11,3 +11,12 @@ REACT_APP_WS_SERVER_URL=http://localhost:3002
 REACT_APP_PORTAL_URL=
 
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
+
+# put these in your .env.local, or make sure you don't commit!
+# must be lowercase `true` when turned on
+#
+# whether to enable Service Workers in development
+REACT_APP_DEV_ENABLE_SW=
+# whether to disable live reload / HMR. Usuaully what you want to do when
+# debugging Service Workers.
+REACT_APP_DEV_DISABLE_LIVE_RELOAD=

.env.production

@@ -13,3 +13,5 @@ REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","
 
 # production-only vars
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
+
+REACT_APP_PLUS_APP=https://app.excalidraw.com

.github/dependabot.yml

@@ -1,37 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    directory: /
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - lipis
-    assignees:
-      - lipis
-    open-pull-requests-limit: 20
-
-  - package-ecosystem: npm
-    directory: /src/packages/excalidraw/
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - ad1992
-    assignees:
-      - ad1992
-    open-pull-requests-limit: 20
-
-  - package-ecosystem: npm
-    directory: /src/packages/utils/
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - ad1992
-    assignees:
-      - ad1992
-    open-pull-requests-limit: 20

.github/workflows/autorelease-excalidraw.yml

@@ -1,4 +1,4 @@
-name: Auto release @excalidraw/excalidraw-next
+name: Auto release excalidraw next
 on:
   push:
     branches:

.github/workflows/autorelease-preview.yml

@@ -1,4 +1,4 @@
-name: Auto release preview @excalidraw/excalidraw-preview
+name: Auto release excalidraw preview
 on:
   issue_comment:
     types: [created, edited]
@@ -6,7 +6,7 @@ on:
 jobs:
   Auto-release-excalidraw-preview:
     name: Auto release preview
-    if: github.event.comment.body == '@excalibot release package' && github.event.issue.pull_request
+    if: github.event.comment.body == '@excalibot trigger release' && github.event.issue.pull_request
     runs-on: ubuntu-latest
     steps:
       - name: React to release comment

package.json

@@ -22,7 +22,7 @@
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "12.1.5",
     "@tldraw/vec": "1.4.3",
     "@types/jest": "27.4.0",
     "@types/pica": "5.1.3",
@@ -51,7 +51,7 @@
     "react-dom": "17.0.2",
     "react-scripts": "4.0.3",
     "roughjs": "4.5.2",
-    "sass": "1.49.7",
+    "sass": "1.51.0",
     "socket.io-client": "2.3.1",
     "typescript": "4.5.5"
   },
@@ -64,13 +64,13 @@
     "@types/resize-observer-browser": "0.1.6",
     "chai": "4.3.6",
     "dotenv": "10.0.0",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "3.3.1",
     "husky": "7.0.4",
-    "jest-canvas-mock": "2.3.1",
+    "jest-canvas-mock": "2.4.0",
     "lint-staged": "12.3.7",
     "pepjs": "0.5.3",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
     "rewire": "5.0.0"
   },
   "resolutions": {
@@ -94,7 +94,8 @@
     "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
     "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build": "yarn build:app && yarn build:version",
+    "build:prebuild": "node ./scripts/prebuild.js",
+    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
@@ -112,6 +113,8 @@
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --updateSnapshot --watchAll=false",
     "test": "yarn test:app",
-    "autorelease": "node scripts/autorelease.js"
+    "autorelease": "node scripts/autorelease.js",
+    "prerelease": "node scripts/prerelease.js",
+    "release": "node scripts/release.js"
   }
 }

public/index.html

@@ -52,6 +52,25 @@
       content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
 
+    <script>
+      // Redirect Excalidraw+ users which have auto-redirect enabled.
+      //
+      // Redirect only the bare root path, so link/room/library urls are not
+      // redirected.
+      //
+      // Putting into index.html for best performance (can't redirect on server
+      // due to location.hash checks).
+      if (
+        window.location.pathname === "/" &&
+        !window.location.hash &&
+        !window.location.search &&
+        // if its present redirect
+        document.cookie.includes("excplus-autoredirect=true")
+      ) {
+        window.location.href = "https://app.excalidraw.com";
+      }
+    </script>
+
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <!-- Excalidraw version -->
@@ -79,6 +98,22 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
+    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD === "true") { %>
+    <script>
+      {
+        const _WebSocket = window.WebSocket;
+        window.WebSocket = function (url) {
+          if (/ws:\/\/localhost:.+?\/sockjs-node/.test(url)) {
+            console.info(
+              "[!!!] Live reload is disabled via process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD [!!!]",
+            );
+          } else {
+            return new _WebSocket(url);
+          }
+        };
+      }
+    </script>
+    <% } %>
     <script>
       window.EXCALIDRAW_ASSET_PATH = "/";
       // setting this so that libraries installation reuses this window tab.

public/service-worker.js

@@ -17,11 +17,23 @@
  * See https://goo.gl/2aRDsh
  */
 
-importScripts("/workbox/workbox-sw.js");
+// in dev, `process` is undefined because this file is not compiled until build
+const IS_DEVELOPMENT =
+  typeof process === "undefined" || process.env.NODE_ENV !== "production";
 
-workbox.setConfig({
-  modulePathPrefix: "/workbox/",
-});
+if (IS_DEVELOPMENT) {
+  importScripts(
+    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js",
+  );
+  workbox.setConfig({
+    debug: true,
+  });
+} else {
+  importScripts("/workbox/workbox-sw.js");
+  workbox.setConfig({
+    modulePathPrefix: "/workbox/",
+  });
+}
 
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") {
@@ -30,14 +42,17 @@ self.addEventListener("message", (event) => {
 });
 
 workbox.core.clientsClaim();
-workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
 
-workbox.routing.registerNavigationRoute(
-  workbox.precaching.getCacheKeyForURL("./index.html"),
-  {
-    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
-  },
-);
+if (!IS_DEVELOPMENT) {
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+  workbox.routing.registerNavigationRoute(
+    workbox.precaching.getCacheKeyForURL("./index.html"),
+    {
+      blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
+    },
+  );
+}
 
 // Cache relevant font files
 workbox.routing.registerRoute(

scripts/autorelease.js

@@ -5,22 +5,25 @@ const core = require("@actions/core");
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
 const pkg = require(excalidrawPackage);
+const isPreview = process.argv.slice(2)[0] === "preview";
 
 const getShortCommitHash = () => {
   return execSync("git rev-parse --short HEAD").toString().trim();
 };
 
 const publish = () => {
+  const tag = isPreview ? "preview" : "next";
+
   try {
     execSync(`yarn  --frozen-lockfile`);
     execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
     execSync(`yarn run build:umd`, { cwd: excalidrawDir });
-    execSync(`yarn --cwd ${excalidrawDir} publish`);
-    console.info("Published 🎉");
+    execSync(`yarn --cwd ${excalidrawDir} publish --tag ${tag}`);
+    console.info(`Published ${pkg.name}@${tag}🎉`);
     core.setOutput(
       "result",
       `**Preview version has been shipped** :rocket:
-    You can use [@excalidraw/excalidraw-preview@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw-preview/v/${pkg.version}) for testing!`,
+    You can use [@excalidraw/excalidraw@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw/v/${pkg.version}) for testing!`,
     );
   } catch (error) {
     core.setOutput("result", "package couldn't be published :warning:!");
@@ -51,27 +54,19 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
   }
 
   // update package.json
-  pkg.name = "@excalidraw/excalidraw-next";
   let version = `${pkg.version}-${getShortCommitHash()}`;
 
   // update readme
-  let data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
 
-  const isPreview = process.argv.slice(2)[0] === "preview";
   if (isPreview) {
     // use pullNumber-commithash as the version for preview
     const pullRequestNumber = process.argv.slice(3)[0];
     version = `${pkg.version}-${pullRequestNumber}-${getShortCommitHash()}`;
-    // replace "excalidraw-next" with "excalidraw-preview"
-    pkg.name = "@excalidraw/excalidraw-preview";
-    data = data.replace(/excalidraw-next/g, "excalidraw-preview");
-    data = data.trim();
   }
   pkg.version = version;
 
   fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");
 
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
   console.info("Publish in progress...");
   publish();
 });

scripts/prebuild.js

@@ -0,0 +1,20 @@
+const fs = require("fs");
+
+// for development purposes we want to have the service-worker.js file
+// accessible from the public folder. On build though, we need to compile it
+// and CRA expects that file to be in src/ folder.
+const moveServiceWorkerScript = () => {
+  const oldPath = "./public/service-worker.js";
+  const newPath = "./src/service-worker.js";
+
+  fs.rename(oldPath, newPath, (error) => {
+    if (error) {
+      throw error;
+    }
+    console.info("public/service-worker.js moved to src/");
+  });
+};
+
+// -----------------------------------------------------------------------------
+
+moveServiceWorkerScript();

scripts/prerelease.js

@@ -0,0 +1,37 @@
+const fs = require("fs");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+const updateChangelog = require("./updateChangelog");
+
+const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
+const excalidrawPackage = `${excalidrawDir}/package.json`;
+
+const updatePackageVersion = (nextVersion) => {
+  const pkg = require(excalidrawPackage);
+  pkg.version = nextVersion;
+  const content = `${JSON.stringify(pkg, null, 2)}\n`;
+  fs.writeFileSync(excalidrawPackage, content, "utf-8");
+};
+
+const prerelease = async (nextVersion) => {
+  try {
+    await updateChangelog(nextVersion);
+    updatePackageVersion(nextVersion);
+    await exec(`git add -u`);
+    await exec(
+      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
+    );
+
+    console.info("Done!");
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+};
+
+const nextVersion = process.argv.slice(2)[0];
+if (!nextVersion) {
+  console.error("Pass the next version to release!");
+  process.exit(1);
+}
+prerelease(nextVersion);

scripts/release.js

@@ -1,39 +1,44 @@
 const fs = require("fs");
-const util = require("util");
-const exec = util.promisify(require("child_process").exec);
-const updateReadme = require("./updateReadme");
-const updateChangelog = require("./updateChangelog");
+const { execSync } = require("child_process");
 
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
+const pkg = require(excalidrawPackage);
 
-const updatePackageVersion = (nextVersion) => {
-  const pkg = require(excalidrawPackage);
-  pkg.version = nextVersion;
-  const content = `${JSON.stringify(pkg, null, 2)}\n`;
-  fs.writeFileSync(excalidrawPackage, content, "utf-8");
+const originalReadMe = fs.readFileSync(`${excalidrawDir}/README.md`, "utf8");
+
+const updateReadme = () => {
+  const excalidrawIndex = originalReadMe.indexOf("### Excalidraw");
+
+  // remove note for stable readme
+  const data = originalReadMe.slice(excalidrawIndex);
+
+  // update readme
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
 };
 
-const release = async (nextVersion) => {
+const publish = () => {
   try {
-    updateReadme();
-    await updateChangelog(nextVersion);
-    updatePackageVersion(nextVersion);
-    await exec(`git add -u`);
-    await exec(
-      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
-    );
-    /* eslint-disable no-console */
-    console.log("Done!");
+    execSync(`yarn  --frozen-lockfile`);
+    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
+    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
+    execSync(`yarn --cwd ${excalidrawDir} publish`);
   } catch (error) {
     console.error(error);
     process.exit(1);
   }
 };
 
-const nextVersion = process.argv.slice(2)[0];
-if (!nextVersion) {
-  console.error("Pass the next version to release!");
-  process.exit(1);
-}
-release(nextVersion);
+const release = () => {
+  updateReadme();
+  console.info("Note for stable readme removed");
+
+  publish();
+  console.info(`Published ${pkg.version}!`);
+
+  // revert readme after release
+  fs.writeFileSync(`${excalidrawDir}/README.md`, originalReadMe, "utf8");
+  console.info("Readme reverted");
+};
+
+release();

scripts/updateReadme.js

@@ -1,27 +0,0 @@
-const fs = require("fs");
-
-const updateReadme = () => {
-  const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
-  let data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
-
-  // remove note for unstable release
-  data = data.replace(
-    /<!-- unstable-readme-start-->[\s\S]*?<!-- unstable-readme-end-->/,
-    "",
-  );
-
-  // replace "excalidraw-next" with "excalidraw"
-  data = data.replace(/excalidraw-next/g, "excalidraw");
-  data = data.trim();
-
-  const demoIndex = data.indexOf("### Demo");
-  const excalidrawNextNote =
-    "#### Note\n\n**If you don't want to wait for the next stable release and try out the unreleased changes you can use [@excalidraw/excalidraw-next](https://www.npmjs.com/package/@excalidraw/excalidraw-next).**\n\n";
-  // Add excalidraw next note to try out for unreleased changes
-  data = data.slice(0, demoIndex) + excalidrawNextNote + data.slice(demoIndex);
-
-  // update readme
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
-};
-
-module.exports = updateReadme;

src/actions/actionCanvas.tsx

@@ -11,7 +11,7 @@ import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
-import { getShortcutKey } from "../utils";
+import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
@@ -304,21 +304,28 @@ export const actionErase = register({
   name: "eraser",
   trackEvent: { category: "toolbar" },
   perform: (elements, appState) => {
+    let activeTool: AppState["activeTool"];
+
+    if (isEraserActive(appState)) {
+      activeTool = updateActiveTool(appState, {
+        ...(appState.activeTool.lastActiveToolBeforeEraser || {
+          type: "selection",
+        }),
+        lastActiveToolBeforeEraser: null,
+      });
+    } else {
+      activeTool = updateActiveTool(appState, {
+        type: "eraser",
+        lastActiveToolBeforeEraser: appState.activeTool,
+      });
+    }
+
     return {
       appState: {
         ...appState,
         selectedElementIds: {},
         selectedGroupIds: {},
-        activeTool: {
-          ...appState.activeTool,
-          type: isEraserActive(appState)
-            ? appState.activeTool.lastActiveToolBeforeEraser ?? "selection"
-            : "eraser",
-          lastActiveToolBeforeEraser:
-            appState.activeTool.type === "eraser" //node throws incorrect type error when using isEraserActive()
-              ? null
-              : appState.activeTool.type,
-        },
+        activeTool,
       },
       commitToHistory: true,
     };

src/actions/actionDeleteSelected.tsx

@@ -12,6 +12,7 @@ import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import { isBoundToContainer } from "../element/typeChecks";
+import { updateActiveTool } from "../utils";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -134,7 +135,7 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        activeTool: { ...appState.activeTool, type: "selection" },
+        activeTool: updateActiveTool(appState, { type: "selection" }),
         multiElement: null,
       },
       commitToHistory: isSomeElementSelected(

src/actions/actionDistribute.tsx

@@ -3,7 +3,7 @@ import {
   DistributeVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { distributeElements, Distribution } from "../disitrubte";
+import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";

src/actions/actionExport.tsx

@@ -7,7 +7,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@@ -204,7 +204,7 @@ export const actionSaveFileToDisk = register({
       icon={saveAs}
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDeviceType().isMobile}
+      showAriaLabel={useDevice().isMobile}
       hidden={!nativeFileSystemSupported}
       onClick={() => updateData(null)}
       data-testid="save-as-button"
@@ -248,7 +248,7 @@ export const actionLoadScene = register({
       icon={load}
       title={t("buttons.load")}
       aria-label={t("buttons.load")}
-      showAriaLabel={useDeviceType().isMobile}
+      showAriaLabel={useDevice().isMobile}
       onClick={updateData}
       data-testid="load-button"
     />

src/actions/actionFinalize.tsx

@@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { resetCursor } from "../utils";
+import { updateActiveTool, resetCursor } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -14,11 +14,12 @@ import {
   bindOrUnbindLinearElement,
 } from "../element/binding";
 import { isBindingElement } from "../element/typeChecks";
+import { AppState } from "../types";
 
 export const actionFinalize = register({
   name: "finalize",
   trackEvent: false,
-  perform: (elements, appState, _, { canvas, focusContainer }) => {
+  perform: (elements, appState, _, { canvas, focusContainer, scene }) => {
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
@@ -49,8 +50,12 @@ export const actionFinalize = register({
 
     let newElements = elements;
 
-    if (appState.pendingImageElement) {
-      mutateElement(appState.pendingImageElement, { isDeleted: true }, false);
+    const pendingImageElement =
+      appState.pendingImageElementId &&
+      scene.getElement(appState.pendingImageElementId);
+
+    if (pendingImageElement) {
+      mutateElement(pendingImageElement, { isDeleted: true }, false);
     }
 
     if (window.document.activeElement instanceof HTMLElement) {
@@ -137,6 +142,20 @@ export const actionFinalize = register({
       resetCursor(canvas);
     }
 
+    let activeTool: AppState["activeTool"];
+    if (appState.activeTool.type === "eraser") {
+      activeTool = updateActiveTool(appState, {
+        ...(appState.activeTool.lastActiveToolBeforeEraser || {
+          type: "selection",
+        }),
+        lastActiveToolBeforeEraser: null,
+      });
+    } else {
+      activeTool = updateActiveTool(appState, {
+        type: "selection",
+      });
+    }
+
     return {
       elements: newElements,
       appState: {
@@ -147,14 +166,7 @@ export const actionFinalize = register({
             appState.activeTool.type === "freedraw") &&
           multiPointElement
             ? appState.activeTool
-            : {
-                ...appState.activeTool,
-                type:
-                  appState.activeTool.type === "eraser" &&
-                  appState.activeTool.lastActiveToolBeforeEraser
-                    ? appState.activeTool.lastActiveToolBeforeEraser
-                    : "selection",
-              },
+            : activeTool,
         draggingElement: null,
         multiElement: null,
         editingElement: null,
@@ -169,7 +181,7 @@ export const actionFinalize = register({
                 [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
-        pendingImageElement: null,
+        pendingImageElementId: null,
       },
       commitToHistory: appState.activeTool.type === "freedraw",
     };

src/actions/actionNavigate.tsx

@@ -31,16 +31,7 @@ export const actionGoToCollaborator = register({
     };
   },
   PanelComponent: ({ appState, updateData, data }) => {
-    const clientId: string | undefined = data?.id;
-    if (!clientId) {
-      return null;
-    }
-
-    const collaborator = appState.collaborators.get(clientId);
-
-    if (!collaborator) {
-      return null;
-    }
+    const [clientId, collaborator] = data as [string, Collaborator];
 
     const { background, stroke } = getClientColors(clientId, appState);
 
@@ -50,7 +41,7 @@ export const actionGoToCollaborator = register({
         border={stroke}
         onClick={() => updateData(collaborator.pointer)}
         name={collaborator.username || ""}
-        src={collaborator.src}
+        src={collaborator.avatarUrl}
       />
     );
   },

src/actions/actionProperties.tsx

@@ -485,10 +485,14 @@ export const actionChangeOpacity = register({
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(elements, appState, (el) =>
-        newElementWith(el, {
-          opacity: value,
-        }),
+      elements: changeProperty(
+        elements,
+        appState,
+        (el) =>
+          newElementWith(el, {
+            opacity: value,
+          }),
+        true,
       ),
       appState: { ...appState, currentItemOpacity: value },
       commitToHistory: true,

src/actions/actionStyles.test.tsx

@@ -48,7 +48,7 @@ describe("actionStyles", () => {
     Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
       Keyboard.codeDown(CODES.C);
     });
-    const secondRect = JSON.parse(copiedStyles);
+    const secondRect = JSON.parse(copiedStyles)[0];
     expect(secondRect.id).toBe(h.elements[1].id);
 
     mouse.reset();

src/actions/actionStyles.ts

@@ -6,13 +6,15 @@ import {
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
 import { register } from "./register";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+import { newElementWith } from "../element/mutateElement";
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getContainerElement } from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
+import { hasBoundTextElement } from "../element/typeChecks";
+import { getSelectedElements } from "../scene";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -21,9 +23,15 @@ export const actionCopyStyles = register({
   name: "copyStyles",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
+    const elementsCopied = [];
     const element = elements.find((el) => appState.selectedElementIds[el.id]);
+    elementsCopied.push(element);
+    if (element && hasBoundTextElement(element)) {
+      const boundTextElement = getBoundTextElement(element);
+      elementsCopied.push(boundTextElement);
+    }
     if (element) {
-      copiedStyles = JSON.stringify(element);
+      copiedStyles = JSON.stringify(elementsCopied);
     }
     return {
       appState: {
@@ -42,31 +50,62 @@ export const actionPasteStyles = register({
   name: "pasteStyles",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
-    const pastedElement = JSON.parse(copiedStyles);
+    const elementsCopied = JSON.parse(copiedStyles);
+    const pastedElement = elementsCopied[0];
+    const boundTextElement = elementsCopied[1];
     if (!isExcalidrawElement(pastedElement)) {
       return { elements, commitToHistory: false };
     }
+
+    const selectedElements = getSelectedElements(elements, appState, true);
+    const selectedElementIds = selectedElements.map((element) => element.id);
     return {
       elements: elements.map((element) => {
-        if (appState.selectedElementIds[element.id]) {
-          const newElement = newElementWith(element, {
-            backgroundColor: pastedElement?.backgroundColor,
-            strokeWidth: pastedElement?.strokeWidth,
-            strokeColor: pastedElement?.strokeColor,
-            strokeStyle: pastedElement?.strokeStyle,
-            fillStyle: pastedElement?.fillStyle,
-            opacity: pastedElement?.opacity,
-            roughness: pastedElement?.roughness,
-          });
-          if (isTextElement(newElement) && isTextElement(element)) {
-            mutateElement(newElement, {
-              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
-              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
-            });
-
-            redrawTextBoundingBox(newElement, getContainerElement(newElement));
+        if (selectedElementIds.includes(element.id)) {
+          let elementStylesToCopyFrom = pastedElement;
+          if (isTextElement(element) && element.containerId) {
+            elementStylesToCopyFrom = boundTextElement;
           }
+          if (!elementStylesToCopyFrom) {
+            return element;
+          }
+          let newElement = newElementWith(element, {
+            backgroundColor: elementStylesToCopyFrom?.backgroundColor,
+            strokeWidth: elementStylesToCopyFrom?.strokeWidth,
+            strokeColor: elementStylesToCopyFrom?.strokeColor,
+            strokeStyle: elementStylesToCopyFrom?.strokeStyle,
+            fillStyle: elementStylesToCopyFrom?.fillStyle,
+            opacity: elementStylesToCopyFrom?.opacity,
+            roughness: elementStylesToCopyFrom?.roughness,
+          });
+
+          if (isTextElement(newElement)) {
+            newElement = newElementWith(newElement, {
+              fontSize: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
+              fontFamily:
+                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
+              textAlign:
+                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
+            });
+            let container = null;
+            if (newElement.containerId) {
+              container =
+                selectedElements.find(
+                  (element) =>
+                    isTextElement(newElement) &&
+                    element.id === newElement.containerId,
+                ) || null;
+            }
+            redrawTextBoundingBox(newElement, container);
+          }
+
+          if (newElement.type === "arrow") {
+            newElement = newElementWith(newElement, {
+              startArrowhead: elementStylesToCopyFrom.startArrowhead,
+              endArrowhead: elementStylesToCopyFrom.endArrowhead,
+            });
+          }
+
           return newElement;
         }
         return element;

src/actions/manager.tsx

@@ -30,7 +30,7 @@ const trackAction = (
           trackEvent(
             action.trackEvent.category,
             action.trackEvent.action || action.name,
-            `${source} (${app.deviceType.isMobile ? "mobile" : "desktop"})`,
+            `${source} (${app.device.isMobile ? "mobile" : "desktop"})`,
           );
         }
       }

src/actions/types.ts

@@ -6,7 +6,6 @@ import {
   ExcalidrawProps,
   BinaryFiles,
 } from "../types";
-import { ToolButtonSize } from "../components/ToolButton";
 
 export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
 
@@ -119,7 +118,7 @@ export type PanelComponentProps = {
   appState: AppState;
   updateData: (formData?: any) => void;
   appProps: ExcalidrawProps;
-  data?: Partial<{ id: string; size: ToolButtonSize }>;
+  data?: Record<string, any>;
 };
 
 export interface Action {

src/appState.ts

@@ -43,6 +43,7 @@ export const getDefaultAppState = (): Omit<
     editingLinearElement: null,
     activeTool: {
       type: "selection",
+      customType: null,
       locked: false,
       lastActiveToolBeforeEraser: null,
     },
@@ -57,6 +58,7 @@ export const getDefaultAppState = (): Omit<
     gridSize: null,
     isBindingEnabled: true,
     isLibraryOpen: false,
+    isLibraryMenuDocked: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -86,7 +88,7 @@ export const getDefaultAppState = (): Omit<
       value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
-    pendingImageElement: null,
+    pendingImageElementId: null,
     showHyperlinkPopup: false,
   };
 };
@@ -145,7 +147,8 @@ const APP_STATE_STORAGE_CONF = (<
   gridSize: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
-  isLibraryOpen: { browser: false, export: false, server: false },
+  isLibraryOpen: { browser: true, export: false, server: false },
+  isLibraryMenuDocked: { browser: true, export: false, server: false },
   isLoading: { browser: false, export: false, server: false },
   isResizing: { browser: false, export: false, server: false },
   isRotating: { browser: false, export: false, server: false },
@@ -176,7 +179,7 @@ const APP_STATE_STORAGE_CONF = (<
   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 },
+  pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
 });
 

src/charts.test.ts

@@ -0,0 +1,121 @@
+import {
+  Spreadsheet,
+  tryParseCells,
+  tryParseNumber,
+  VALID_SPREADSHEET,
+} from "./charts";
+
+describe("charts", () => {
+  describe("tryParseNumber", () => {
+    it.each<[string, number]>([
+      ["1", 1],
+      ["0", 0],
+      ["-1", -1],
+      ["0.1", 0.1],
+      [".1", 0.1],
+      ["1.", 1],
+      ["424.", 424],
+      ["$1", 1],
+      ["-.1", -0.1],
+      ["-$1", -1],
+      ["$-1", -1],
+    ])("should correctly identify %s as numbers", (given, expected) => {
+      expect(tryParseNumber(given)).toEqual(expected);
+    });
+
+    it.each<[string]>([["a"], ["$"], ["$a"], ["-$a"]])(
+      "should correctly identify %s as not a number",
+      (given) => {
+        expect(tryParseNumber(given)).toBeNull();
+      },
+    );
+  });
+
+  describe("tryParseCells", () => {
+    it("Successfully parses a spreadsheet", () => {
+      const spreadsheet = [
+        ["time", "value"],
+        ["01:00", "61"],
+        ["02:00", "-60"],
+        ["03:00", "85"],
+        ["04:00", "-67"],
+        ["05:00", "54"],
+        ["06:00", "95"],
+      ];
+
+      const result = tryParseCells(spreadsheet);
+
+      expect(result.type).toBe(VALID_SPREADSHEET);
+
+      const { title, labels, values } = (
+        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
+      ).spreadsheet;
+
+      expect(title).toEqual("value");
+      expect(labels).toEqual([
+        "01:00",
+        "02:00",
+        "03:00",
+        "04:00",
+        "05:00",
+        "06:00",
+      ]);
+      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
+    });
+
+    it("Uses the second column as the label if it is not a number", () => {
+      const spreadsheet = [
+        ["time", "value"],
+        ["01:00", "61"],
+        ["02:00", "-60"],
+        ["03:00", "85"],
+        ["04:00", "-67"],
+        ["05:00", "54"],
+        ["06:00", "95"],
+      ];
+
+      const result = tryParseCells(spreadsheet);
+
+      expect(result.type).toBe(VALID_SPREADSHEET);
+
+      const { title, labels, values } = (
+        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
+      ).spreadsheet;
+
+      expect(title).toEqual("value");
+      expect(labels).toEqual([
+        "01:00",
+        "02:00",
+        "03:00",
+        "04:00",
+        "05:00",
+        "06:00",
+      ]);
+      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
+    });
+
+    it("treats the first column as labels if both columns are numbers", () => {
+      const spreadsheet = [
+        ["time", "value"],
+        ["01", "61"],
+        ["02", "-60"],
+        ["03", "85"],
+        ["04", "-67"],
+        ["05", "54"],
+        ["06", "95"],
+      ];
+
+      const result = tryParseCells(spreadsheet);
+
+      expect(result.type).toBe(VALID_SPREADSHEET);
+
+      const { title, labels, values } = (
+        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
+      ).spreadsheet;
+
+      expect(title).toEqual("value");
+      expect(labels).toEqual(["01", "02", "03", "04", "05", "06"]);
+      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
+    });
+  });
+});

src/charts.ts

@@ -29,18 +29,24 @@ type ParseSpreadsheetResult =
   | { type: typeof NOT_SPREADSHEET; reason: string }
   | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };
 
-const tryParseNumber = (s: string): number | null => {
-  const match = /^[$€£¥₩]?([0-9,]+(\.[0-9]+)?)$/.exec(s);
+/**
+ * @private exported for testing
+ */
+export const tryParseNumber = (s: string): number | null => {
+  const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s);
   if (!match) {
     return null;
   }
-  return parseFloat(match[1].replace(/,/g, ""));
+  return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
 };
 
 const isNumericColumn = (lines: string[][], columnIndex: number) =>
   lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
 
-const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
+/**
+ * @private exported for testing
+ */
+export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
   const numCols = cells[0].length;
 
   if (numCols > 2) {
@@ -71,13 +77,16 @@ const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
     };
   }
 
-  const valueColumnIndex = isNumericColumn(cells, 0) ? 0 : 1;
+  const labelColumnNumeric = isNumericColumn(cells, 0);
+  const valueColumnNumeric = isNumericColumn(cells, 1);
 
-  if (!isNumericColumn(cells, valueColumnIndex)) {
+  if (!labelColumnNumeric && !valueColumnNumeric) {
     return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
   }
 
-  const labelColumnIndex = (valueColumnIndex + 1) % 2;
+  const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric
+    ? [0, 1]
+    : [1, 0];
   const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null;
   const rows = hasHeader ? cells.slice(1) : cells;
 

src/components/Actions.tsx

@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
 import {
   canChangeSharpness,
   canHaveArrowheads,
@@ -15,7 +15,12 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
+import {
+  capitalizeString,
+  isTransparent,
+  updateActiveTool,
+  setCursorForShape,
+} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
@@ -47,7 +52,7 @@ export const SelectedShapeActions = ({
     isSingleElementBoundContainer = true;
   }
   const isEditing = Boolean(appState.editingElement);
-  const deviceType = useDeviceType();
+  const device = useDevice();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
@@ -172,8 +177,8 @@ export const SelectedShapeActions = ({
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
-            {!deviceType.isMobile && renderAction("duplicateSelection")}
-            {!deviceType.isMobile && renderAction("deleteSelectedElements")}
+            {!device.isMobile && renderAction("duplicateSelection")}
+            {!device.isMobile && renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
@@ -229,7 +234,9 @@ export const ShapesSwitcher = ({
             if (appState.activeTool.type !== value) {
               trackEvent("toolbar", value, "ui");
             }
-            const nextActiveTool = { ...activeTool, type: value };
+            const nextActiveTool = updateActiveTool(appState, {
+              type: value,
+            });
             setAppState({
               activeTool: nextActiveTool,
               multiElement: null,

src/components/Avatar.tsx

@@ -1,6 +1,6 @@
 import "./Avatar.scss";
 
-import React from "react";
+import React, { useState } from "react";
 import { getClientInitials } from "../clients";
 
 type AvatarProps = {
@@ -13,13 +13,21 @@ type AvatarProps = {
 
 export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
   const shortName = getClientInitials(name);
-  const style = src
+  const [error, setError] = useState(false);
+  const loadImg = !error && src;
+  const style = loadImg
     ? undefined
     : { background: color, border: `1px solid ${border}` };
   return (
     <div className="Avatar" style={style} onClick={onClick}>
-      {src ? (
-        <img className="Avatar-img" src={src} alt={shortName} />
+      {loadImg ? (
+        <img
+          className="Avatar-img"
+          src={src}
+          alt={shortName}
+          referrerPolicy="no-referrer"
+          onError={() => setError(true)}
+        />
       ) : (
         shortName
       )}

src/components/ClearCanvas.tsx

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

src/components/CollabButton.scss

@@ -18,13 +18,15 @@
       left: -5px;
     }
     min-width: 1em;
+    min-height: 1em;
+    line-height: 1;
     position: absolute;
     bottom: -5px;
     padding: 3px;
     border-radius: 50%;
     background-color: $oc-green-6;
     color: $oc-white;
-    font-size: 0.7em;
-    font-family: var(--ui-font);
+    font-size: 0.6em;
+    font-family: "Cascadia";
   }
 }

src/components/CollabButton.tsx

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

src/components/ColorPicker.tsx

@@ -128,45 +128,33 @@ const Picker = ({
   }, []);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === KEYS.TAB) {
-      const { activeElement } = document;
-      if (event.shiftKey) {
-        if (activeElement === firstItem.current) {
-          colorInput.current?.focus();
-          event.preventDefault();
-        }
-      } else if (activeElement === colorInput.current) {
-        firstItem.current?.focus();
-        event.preventDefault();
-      }
-    } else if (isArrowKey(event.key)) {
+    let handled = false;
+    if (isArrowKey(event.key)) {
+      handled = true;
       const { activeElement } = document;
       const isRTL = getLanguage().rtl;
       let isCustom = false;
       let index = Array.prototype.indexOf.call(
-        gallery!.current!.querySelector(".color-picker-content--default")!
-          .children,
+        gallery.current!.querySelector(".color-picker-content--default")
+          ?.children,
         activeElement,
       );
       if (index === -1) {
         index = Array.prototype.indexOf.call(
-          gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!.children,
+          gallery.current!.querySelector(".color-picker-content--canvas-colors")
+            ?.children,
           activeElement,
         );
         if (index !== -1) {
           isCustom = true;
         }
       }
-      const parentSelector = isCustom
-        ? gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
+      const parentElement = isCustom
+        ? gallery.current?.querySelector(".color-picker-content--canvas-colors")
+        : gallery.current?.querySelector(".color-picker-content--default");
 
-      if (index !== -1) {
-        const length = parentSelector!.children.length - (showInput ? 1 : 0);
+      if (parentElement && index !== -1) {
+        const length = parentElement.children.length - (showInput ? 1 : 0);
         const nextIndex =
           event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
             ? (index + 1) % length
@@ -177,30 +165,38 @@ const Picker = ({
             : !isCustom && event.key === KEYS.ARROW_UP
             ? (length + index - 5) % length
             : index;
-        (parentSelector!.children![nextIndex] as HTMLElement)?.focus();
+        (parentElement.children[nextIndex] as HTMLElement | undefined)?.focus();
       }
       event.preventDefault();
     } else if (
       keyBindings.includes(event.key.toLowerCase()) &&
+      !event[KEYS.CTRL_OR_CMD] &&
+      !event.altKey &&
       !isWritableElement(event.target)
     ) {
+      handled = true;
       const index = keyBindings.indexOf(event.key.toLowerCase());
       const isCustom = index >= MAX_DEFAULT_COLORS;
-      const parentSelector = isCustom
-        ? gallery!.current!.querySelector(
+      const parentElement = isCustom
+        ? gallery?.current?.querySelector(
             ".color-picker-content--canvas-colors",
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
+          )
+        : gallery?.current?.querySelector(".color-picker-content--default");
       const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (parentSelector!.children![actualIndex] as HTMLElement)?.focus();
+      (
+        parentElement?.children[actualIndex] as HTMLElement | undefined
+      )?.focus();
 
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+      handled = true;
       event.preventDefault();
       onClose();
     }
-    event.nativeEvent.stopImmediatePropagation();
-    event.stopPropagation();
+    if (handled) {
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    }
   };
 
   const renderColors = (colors: Array<string>, custom: boolean = false) => {
@@ -264,7 +260,8 @@ const Picker = ({
             gallery.current = el;
           }
         }}
-        tabIndex={0}
+        // to allow focusing by clicking but not by tabbing
+        tabIndex={-1}
       >
         <div className="color-picker-content--default">
           {renderColors(colors)}

src/components/Dialog.tsx

@@ -2,13 +2,14 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDeviceType } from "../components/App";
+import { useExcalidrawContainer, useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
+import { queryFocusableElements } from "../utils";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -64,14 +65,6 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
-  const queryFocusableElements = (node: HTMLElement) => {
-    const focusableElements = node.querySelectorAll<HTMLElement>(
-      "button, a, input, select, textarea, div[tabindex]",
-    );
-
-    return focusableElements ? Array.from(focusableElements) : [];
-  };
-
   const onClose = () => {
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
@@ -94,7 +87,7 @@ export const Dialog = (props: DialogProps) => {
             onClick={onClose}
             aria-label={t("buttons.close")}
           >
-            {useDeviceType().isMobile ? back : close}
+            {useDevice().isMobile ? back : close}
           </button>
         </h2>
         <div className="Dialog__content">{props.children}</div>

src/components/HintViewer.tsx

@@ -45,7 +45,7 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.text");
   }
 
-  if (appState.activeTool.type === "image" && appState.pendingImageElement) {
+  if (appState.activeTool.type === "image" && appState.pendingImageElementId) {
     return t("hints.placeImage");
   }
 

src/components/ImageExportDialog.tsx

@@ -5,7 +5,7 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useDevice } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@@ -250,7 +250,7 @@ export const ImageExportDialog = ({
         icon={exportImage}
         type="button"
         aria-label={t("buttons.exportImage")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
         title={t("buttons.exportImage")}
       />
       {modalIsShown && (

src/components/InitializeApp.tsx

@@ -14,11 +14,11 @@ export const InitializeApp = (props: Props) => {
   useEffect(() => {
     const updateLang = async () => {
       await setLanguage(currentLang);
+      setLoading(false);
     };
     const currentLang =
       languages.find((lang) => lang.code === props.langCode) || defaultLang;
     updateLang();
-    setLoading(false);
   }, [props.langCode]);
 
   return loading ? <LoadingMessage /> : props.children;

src/components/JSONExportDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useDevice } from "./App";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
@@ -117,7 +117,7 @@ export const JSONExportDialog = ({
         icon={exportFile}
         type="button"
         aria-label={t("buttons.export")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
         title={t("buttons.export")}
       />
       {modalIsShown && (

src/components/LayerUI.scss

@@ -1,9 +1,63 @@
 @import "open-color/open-color";
+@import "../css/variables.module";
+
+.layer-ui__sidebar {
+  position: absolute;
+  top: var(--sat);
+  bottom: var(--sab);
+  right: var(--sar);
+  z-index: 5;
+
+  box-shadow: var(--shadow-island);
+  overflow: hidden;
+  border-radius: var(--border-radius-lg);
+  margin: var(--space-factor);
+  width: calc(#{$right-sidebar-width} - var(--space-factor) * 2);
+
+  .Island {
+    box-shadow: none;
+  }
+
+  .ToolIcon__icon {
+    border-radius: var(--border-radius-md);
+  }
+
+  .ToolIcon__icon__close {
+    .Modal__close {
+      width: calc(var(--space-factor) * 7);
+      height: calc(var(--space-factor) * 7);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--color-text);
+    }
+  }
+
+  .Island {
+    --padding: 0;
+    background-color: var(--island-bg-color);
+    border-radius: var(--border-radius-lg);
+    padding: calc(var(--padding) * var(--space-factor));
+    position: relative;
+    transition: box-shadow 0.5s ease-in-out;
+  }
+}
 
 .excalidraw {
+  .layer-ui__wrapper.animate {
+    transition: width 0.1s ease-in-out;
+  }
   .layer-ui__wrapper {
+    // when the rightside sidebar is docked, we need to resize the UI by its
+    // width, making the nested UI content shift to the left. To do this,
+    // we need the UI container to actually have dimensions set, but
+    // then we also need to disable pointer events else the canvas below
+    // wouldn't be interactive.
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
     z-index: var(--zIndex-layerUI);
-
     &__top-right {
       display: flex;
     }

src/components/LayerUI.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import React, { useCallback } from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES } from "../constants";
+import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
@@ -25,9 +25,8 @@ import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
-import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
-import Library from "../data/library";
+import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
@@ -37,7 +36,9 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions/actionToggleStats";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -56,11 +57,9 @@ interface LayerUIProps {
   toggleZenMode: () => void;
   langCode: Language["code"];
   isCollaborating: boolean;
-  renderTopRightUI?: (
-    isMobile: boolean,
-    appState: AppState,
-  ) => JSX.Element | null;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
+  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
@@ -69,7 +68,6 @@ interface LayerUIProps {
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
 }
-
 const LayerUI = ({
   actionManager,
   appState,
@@ -88,6 +86,7 @@ const LayerUI = ({
   isCollaborating,
   renderTopRightUI,
   renderCustomFooter,
+  renderCustomStats,
   viewModeEnabled,
   libraryReturnUrl,
   UIOptions,
@@ -96,7 +95,7 @@ const LayerUI = ({
   id,
   onImageAction,
 }: LayerUIProps) => {
-  const deviceType = useDeviceType();
+  const device = useDevice();
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -277,7 +276,9 @@ const LayerUI = ({
     <LibraryMenu
       pendingElements={getSelectedElements(elements, appState, true)}
       onClose={closeLibrary}
-      onInsertShape={onInsertElements}
+      onInsertLibraryItems={(libraryItems) => {
+        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+      }}
       onAddToLibrary={deselectItems}
       setAppState={setAppState}
       libraryReturnUrl={libraryReturnUrl}
@@ -340,7 +341,7 @@ const LayerUI = ({
                       <HintViewer
                         appState={appState}
                         elements={elements}
-                        isMobile={deviceType.isMobile}
+                        isMobile={device.isMobile}
                       />
                       {heading}
                       <Stack.Row gap={1}>
@@ -362,7 +363,6 @@ const LayerUI = ({
                       setAppState={setAppState}
                     />
                   </Stack.Row>
-                  {libraryMenu}
                 </Stack.Col>
               )}
             </Section>
@@ -375,23 +375,11 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList>
-              {appState.collaborators.size > 0 &&
-                Array.from(appState.collaborators)
-                  // Collaborator is either not initialized or is actually the current user.
-                  .filter(([_, client]) => Object.keys(client).length !== 0)
-                  .map(([clientId, client]) => (
-                    <Tooltip
-                      label={client.username || "Unknown user"}
-                      key={clientId}
-                    >
-                      {actionManager.renderAction("goToCollaborator", {
-                        id: clientId,
-                      })}
-                    </Tooltip>
-                  ))}
-            </UserList>
-            {renderTopRightUI?.(deviceType.isMobile, appState)}
+            <UserList
+              collaborators={appState.collaborators}
+              actionManager={actionManager}
+            />
+            {renderTopRightUI?.(device.isMobile, appState)}
           </div>
         </div>
       </FixedSideContainer>
@@ -444,7 +432,7 @@ const LayerUI = ({
               )}
               {!viewModeEnabled &&
                 appState.multiElement &&
-                deviceType.isTouchScreen && (
+                device.isTouchScreen && (
                   <div
                     className={clsx("finalize-button zen-mode-transition", {
                       "layer-ui__wrapper__footer-left--transition-left":
@@ -521,7 +509,24 @@ const LayerUI = ({
     </>
   );
 
-  return deviceType.isMobile ? (
+  const renderStats = () => {
+    if (!appState.showStats) {
+      return null;
+    }
+    return (
+      <Stats
+        appState={appState}
+        setAppState={setAppState}
+        elements={elements}
+        onClose={() => {
+          actionManager.executeAction(actionToggleStats);
+        }}
+        renderCustomStats={renderCustomStats}
+      />
+    );
+  };
+
+  return device.isMobile ? (
     <>
       {dialogs}
       <MobileMenu
@@ -542,33 +547,48 @@ const LayerUI = ({
         showThemeBtn={showThemeBtn}
         onImageAction={onImageAction}
         renderTopRightUI={renderTopRightUI}
+        renderStats={renderStats}
       />
     </>
   ) : (
-    <div
-      className={clsx("layer-ui__wrapper", {
-        "disable-pointerEvents":
-          appState.draggingElement ||
-          appState.resizingElement ||
-          (appState.editingElement && !isTextElement(appState.editingElement)),
-      })}
-    >
-      {dialogs}
-      {renderFixedSideContainer()}
-      {renderBottomAppMenu()}
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
-        >
-          {t("buttons.scrollBackToContent")}
-        </button>
+    <>
+      <div
+        className={clsx("layer-ui__wrapper", {
+          "disable-pointerEvents":
+            appState.draggingElement ||
+            appState.resizingElement ||
+            (appState.editingElement &&
+              !isTextElement(appState.editingElement)),
+        })}
+        style={
+          appState.isLibraryOpen &&
+          appState.isLibraryMenuDocked &&
+          device.canDeviceFitSidebar
+            ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
+            : {}
+        }
+      >
+        {dialogs}
+        {renderFixedSideContainer()}
+        {renderBottomAppMenu()}
+        {renderStats()}
+        {appState.scrolledOutside && (
+          <button
+            className="scroll-back-to-content"
+            onClick={() => {
+              setAppState({
+                ...calculateScrollCenter(elements, appState, canvas),
+              });
+            }}
+          >
+            {t("buttons.scrollBackToContent")}
+          </button>
+        )}
+      </div>
+      {appState.isLibraryOpen && (
+        <div className="layer-ui__sidebar">{libraryMenu}</div>
       )}
-    </div>
+    </>
   );
 };
 

src/components/LibraryButton.tsx

@@ -3,6 +3,8 @@ import clsx from "clsx";
 import { t } from "../i18n";
 import { AppState } from "../types";
 import { capitalizeString } from "../utils";
+import { trackEvent } from "../analytics";
+import { useDevice } from "./App";
 
 const LIBRARY_ICON = (
   <svg viewBox="0 0 576 512">
@@ -18,6 +20,7 @@ export const LibraryButton: React.FC<{
   setAppState: React.Component<any, AppState>["setState"];
   isMobile?: boolean;
 }> = ({ appState, setAppState, isMobile }) => {
+  const device = useDevice();
   return (
     <label
       className={clsx(
@@ -34,7 +37,19 @@ export const LibraryButton: React.FC<{
         type="checkbox"
         name="editor-library"
         onChange={(event) => {
-          setAppState({ isLibraryOpen: event.target.checked });
+          document
+            .querySelector(".layer-ui__wrapper")
+            ?.classList.remove("animate");
+          const nextState = event.target.checked;
+          setAppState({ isLibraryOpen: nextState });
+          // track only openings
+          if (nextState) {
+            trackEvent(
+              "library",
+              "toggleLibrary (open)",
+              `toolbar (${device.isMobile ? "mobile" : "desktop"})`,
+            );
+          }
         }}
         checked={appState.isLibraryOpen}
         aria-label={capitalizeString(t("toolBar.library"))}

src/components/LibraryMenu.scss

@@ -2,7 +2,6 @@
 
 .excalidraw {
   .layer-ui__library {
-    margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -11,8 +10,7 @@
       display: flex;
       align-items: center;
       width: 100%;
-      margin: 2px 0;
-
+      margin: 2px 0 15px 0;
       .Spinner {
         margin-right: 1rem;
       }
@@ -21,13 +19,17 @@
         // 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__sidebar {
+    .layer-ui__library {
+      padding: 0;
+      height: 100%;
+    }
+    .library-menu-items-container {
+      height: 100%;
+      width: 100%;
     }
   }
 
@@ -65,4 +67,38 @@
       }
     }
   }
+
+  .library-menu-browse-button {
+    width: 80%;
+    min-height: 22px;
+    margin: 0 auto;
+    margin-top: 1rem;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    border-radius: var(--border-radius-lg);
+    background-color: var(--color-primary);
+    color: $oc-white;
+    text-align: center;
+    white-space: nowrap;
+    text-decoration: none !important;
+    &:hover {
+      background-color: var(--color-primary-darker);
+    }
+    &:active {
+      background-color: var(--color-primary-darkest);
+    }
+  }
+
+  .library-menu-browse-button--mobile {
+    min-height: 22px;
+    margin-left: auto;
+    a {
+      padding-right: 0;
+    }
+  }
 }

src/components/LibraryMenu.tsx

@@ -25,11 +25,11 @@ import "./LibraryMenu.scss";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { EVENT } from "../constants";
 import { KEYS } from "../keys";
-import { arrayToMap } from "../utils";
 import { trackEvent } from "../analytics";
 import { useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
+import { useDevice } from "./App";
 
 const useOnClickOutside = (
   ref: RefObject<HTMLElement>,
@@ -77,7 +77,7 @@ const LibraryMenuWrapper = forwardRef<
 
 export const LibraryMenu = ({
   onClose,
-  onInsertShape,
+  onInsertLibraryItems,
   pendingElements,
   onAddToLibrary,
   theme,
@@ -91,7 +91,7 @@ export const LibraryMenu = ({
 }: {
   pendingElements: LibraryItem["elements"];
   onClose: () => void;
-  onInsertShape: (elements: LibraryItem["elements"]) => void;
+  onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
   theme: AppState["theme"];
   files: BinaryFiles;
@@ -104,17 +104,30 @@ export const LibraryMenu = ({
 }) => {
   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();
-  });
+  const device = useDevice();
+
+  useOnClickOutside(
+    ref,
+    useCallback(
+      (event) => {
+        // If click on the library icon, do nothing.
+        if ((event.target as Element).closest(".ToolIcon__library")) {
+          return;
+        }
+        if (!appState.isLibraryMenuDocked || !device.canDeviceFitSidebar) {
+          onClose();
+        }
+      },
+      [onClose, appState.isLibraryMenuDocked, device.canDeviceFitSidebar],
+    ),
+  );
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === KEYS.ESCAPE) {
+      if (
+        event.key === KEYS.ESCAPE &&
+        (!appState.isLibraryMenuDocked || !device.canDeviceFitSidebar)
+      ) {
         onClose();
       }
     };
@@ -122,7 +135,7 @@ export const LibraryMenu = ({
     return () => {
       document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
     };
-  }, [onClose]);
+  }, [onClose, appState.isLibraryMenuDocked, device.canDeviceFitSidebar]);
 
   const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
   const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
@@ -225,10 +238,6 @@ export const LibraryMenu = ({
     [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
   );
 
-  const [lastSelectedItem, setLastSelectedItem] = useState<
-    LibraryItem["id"] | null
-  >(null);
-
   if (
     libraryItemsData.status === "loading" &&
     !libraryItemsData.isInitialized
@@ -275,56 +284,17 @@ export const LibraryMenu = ({
         onAddToLibrary={(elements) =>
           addToLibrary(elements, libraryItemsData.libraryItems)
         }
-        onInsertShape={onInsertShape}
+        onInsertLibraryItems={onInsertLibraryItems}
         pendingElements={pendingElements}
         setAppState={setAppState}
+        appState={appState}
         libraryReturnUrl={libraryReturnUrl}
         library={library}
         theme={theme}
         files={files}
         id={id}
         selectedItems={selectedItems}
-        onToggle={(id, event) => {
-          const shouldSelect = !selectedItems.includes(id);
-
-          if (shouldSelect) {
-            if (event.shiftKey && lastSelectedItem) {
-              const rangeStart = libraryItemsData.libraryItems.findIndex(
-                (item) => item.id === lastSelectedItem,
-              );
-              const rangeEnd = libraryItemsData.libraryItems.findIndex(
-                (item) => item.id === id,
-              );
-
-              if (rangeStart === -1 || rangeEnd === -1) {
-                setSelectedItems([...selectedItems, id]);
-                return;
-              }
-
-              const selectedItemsMap = arrayToMap(selectedItems);
-              const nextSelectedIds = libraryItemsData.libraryItems.reduce(
-                (acc: LibraryItem["id"][], item, idx) => {
-                  if (
-                    (idx >= rangeStart && idx <= rangeEnd) ||
-                    selectedItemsMap.has(item.id)
-                  ) {
-                    acc.push(item.id);
-                  }
-                  return acc;
-                },
-                [],
-              );
-
-              setSelectedItems(nextSelectedIds);
-            } else {
-              setSelectedItems([...selectedItems, id]);
-            }
-            setLastSelectedItem(id);
-          } else {
-            setLastSelectedItem(null);
-            setSelectedItems(selectedItems.filter((_id) => _id !== id));
-          }
-        }}
+        onSelectItems={(ids) => setSelectedItems(ids)}
         onPublish={() => setShowPublishLibraryDialog(true)}
         resetLibrary={resetLibrary}
       />

src/components/LibraryMenuItems.scss

@@ -2,8 +2,17 @@
 
 .excalidraw {
   .library-menu-items-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+
     .library-actions {
+      width: 100%;
       display: flex;
+      margin-right: auto;
+      align-items: center;
 
       button .library-actions-counter {
         position: absolute;
@@ -87,12 +96,16 @@
       }
     }
     &__items {
-      max-height: 50vh;
-      overflow: auto;
-      margin-top: 0.5rem;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 1rem;
     }
 
     .separator {
+      width: 100%;
+      display: flex;
+      align-items: center;
       font-weight: 500;
       font-size: 0.9rem;
       margin: 0.6em 0.2em;

src/components/LibraryMenuItems.tsx

@@ -1,6 +1,6 @@
 import { chunk } from "lodash";
-import { useCallback, useState } from "react";
-import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
+import React, { useCallback, useState } from "react";
+import { saveLibraryAsJSON, serializeLibraryAsJSON } from "../data/json";
 import Library from "../data/library";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { t } from "../i18n";
@@ -11,34 +11,39 @@ import {
   LibraryItem,
   LibraryItems,
 } from "../types";
-import { muteFSAbortError } from "../utils";
-import { useDeviceType } from "./App";
+import { arrayToMap, muteFSAbortError } from "../utils";
+import { useDevice } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
-import { exportToFileIcon, load, publishIcon, trash } from "./icons";
+import { close, 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";
-import { VERSIONS } from "../constants";
+import { MIME_TYPES, VERSIONS } from "../constants";
 import Spinner from "./Spinner";
+import { fileOpen } from "../data/filesystem";
+
+import { SidebarLockButton } from "./SidebarLockButton";
+import { trackEvent } from "../analytics";
 
 const LibraryMenuItems = ({
   isLoading,
   libraryItems,
   onRemoveFromLibrary,
   onAddToLibrary,
-  onInsertShape,
+  onInsertLibraryItems,
   pendingElements,
   theme,
   setAppState,
+  appState,
   libraryReturnUrl,
   library,
   files,
   id,
   selectedItems,
-  onToggle,
+  onSelectItems,
   onPublish,
   resetLibrary,
 }: {
@@ -46,16 +51,17 @@ const LibraryMenuItems = ({
   libraryItems: LibraryItems;
   pendingElements: LibraryItem["elements"];
   onRemoveFromLibrary: () => void;
-  onInsertShape: (elements: LibraryItem["elements"]) => void;
+  onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: (elements: LibraryItem["elements"]) => void;
   theme: AppState["theme"];
   files: BinaryFiles;
   setAppState: React.Component<any, AppState>["setState"];
+  appState: AppState;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   library: Library;
   id: string;
   selectedItems: LibraryItem["id"][];
-  onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
+  onSelectItems: (id: LibraryItem["id"][]) => void;
   onPublish: () => void;
   resetLibrary: () => void;
 }) => {
@@ -87,9 +93,7 @@ const LibraryMenuItems = ({
   }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
 
   const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
-
-  const isMobile = useDeviceType().isMobile;
-
+  const device = useDevice();
   const renderLibraryActions = () => {
     const itemsSelected = !!selectedItems.length;
     const items = itemsSelected
@@ -100,20 +104,34 @@ const LibraryMenuItems = ({
       : t("buttons.resetLibrary");
     return (
       <div className="library-actions">
-        {(!itemsSelected || !isMobile) && (
+        {!itemsSelected && (
           <ToolButton
             key="import"
             type="button"
             title={t("buttons.load")}
             aria-label={t("buttons.load")}
             icon={load}
-            onClick={() => {
-              importLibraryFromJSON(library)
-                .catch(muteFSAbortError)
-                .catch((error) => {
-                  console.error(error);
-                  setAppState({ errorMessage: t("errors.importLibraryError") });
+            onClick={async () => {
+              try {
+                await library.updateLibrary({
+                  libraryItems: fileOpen({
+                    description: "Excalidraw library 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", ".excalidrawlib"],
+                    */
+                  }),
+                  merge: true,
+                  openLibraryMenu: true,
                 });
+              } catch (error: any) {
+                if (error?.name === "AbortError") {
+                  console.warn(error);
+                  return;
+                }
+                setAppState({ errorMessage: t("errors.importLibraryError") });
+              }
             }}
             className="library-actions--load"
           />
@@ -161,7 +179,7 @@ const LibraryMenuItems = ({
             </ToolButton>
           </>
         )}
-        {itemsSelected && !isPublished && (
+        {itemsSelected && (
           <Tooltip label={t("hints.publishLibrary")}>
             <ToolButton
               type="button"
@@ -171,7 +189,7 @@ const LibraryMenuItems = ({
               className="library-actions--publish"
               onClick={onPublish}
             >
-              {!isMobile && <label>{t("buttons.publishLibrary")}</label>}
+              {!device.isMobile && <label>{t("buttons.publishLibrary")}</label>}
               {selectedItems.length > 0 && (
                 <span className="library-actions-counter">
                   {selectedItems.length}
@@ -180,17 +198,89 @@ const LibraryMenuItems = ({
             </ToolButton>
           </Tooltip>
         )}
+        {device.isMobile && (
+          <div className="library-menu-browse-button--mobile">
+            <a
+              href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+                window.name || "_blank"
+              }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
+                VERSIONS.excalidrawLibrary
+              }`}
+              target="_excalidraw_libraries"
+            >
+              {t("labels.libraries")}
+            </a>
+          </div>
+        )}
       </div>
     );
   };
 
-  const CELLS_PER_ROW = isMobile ? 4 : 6;
+  const CELLS_PER_ROW = device.isMobile && !device.isSmScreen ? 6 : 4;
 
   const referrer =
     libraryReturnUrl || window.location.origin + window.location.pathname;
-  const isPublished = selectedItems.some(
-    (id) => libraryItems.find((item) => item.id === id)?.status === "published",
-  );
+
+  const [lastSelectedItem, setLastSelectedItem] = useState<
+    LibraryItem["id"] | null
+  >(null);
+
+  const onItemSelectToggle = (
+    id: LibraryItem["id"],
+    event: React.MouseEvent,
+  ) => {
+    const shouldSelect = !selectedItems.includes(id);
+
+    const orderedItems = [...unpublishedItems, ...publishedItems];
+
+    if (shouldSelect) {
+      if (event.shiftKey && lastSelectedItem) {
+        const rangeStart = orderedItems.findIndex(
+          (item) => item.id === lastSelectedItem,
+        );
+        const rangeEnd = orderedItems.findIndex((item) => item.id === id);
+
+        if (rangeStart === -1 || rangeEnd === -1) {
+          onSelectItems([...selectedItems, id]);
+          return;
+        }
+
+        const selectedItemsMap = arrayToMap(selectedItems);
+        const nextSelectedIds = orderedItems.reduce(
+          (acc: LibraryItem["id"][], item, idx) => {
+            if (
+              (idx >= rangeStart && idx <= rangeEnd) ||
+              selectedItemsMap.has(item.id)
+            ) {
+              acc.push(item.id);
+            }
+            return acc;
+          },
+          [],
+        );
+
+        onSelectItems(nextSelectedIds);
+      } else {
+        onSelectItems([...selectedItems, id]);
+      }
+      setLastSelectedItem(id);
+    } else {
+      setLastSelectedItem(null);
+      onSelectItems(selectedItems.filter((_id) => _id !== id));
+    }
+  };
+
+  const getInsertedElements = (id: string) => {
+    let targetElements;
+    if (selectedItems.includes(id)) {
+      targetElements = libraryItems.filter((item) =>
+        selectedItems.includes(item.id),
+      );
+    } else {
+      targetElements = libraryItems.filter((item) => item.id === id);
+    }
+    return targetElements;
+  };
 
   const createLibraryItemCompo = (params: {
     item:
@@ -212,8 +302,12 @@ const LibraryMenuItems = ({
           onClick={params.onClick || (() => {})}
           id={params.item?.id || null}
           selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={(id, event) => {
-            onToggle(id, event);
+          onToggle={onItemSelectToggle}
+          onDrag={(id, event) => {
+            event.dataTransfer.setData(
+              MIME_TYPES.excalidrawlib,
+              serializeLibraryAsJSON(getInsertedElements(id)),
+            );
           }}
         />
       </Stack.Col>
@@ -233,7 +327,7 @@ const LibraryMenuItems = ({
       if (item.id) {
         return createLibraryItemCompo({
           item,
-          onClick: () => onInsertShape(item.elements),
+          onClick: () => onInsertLibraryItems(getInsertedElements(item.id)),
           key: item.id,
         });
       }
@@ -272,53 +366,192 @@ const LibraryMenuItems = ({
     });
   };
 
+  const unpublishedItems = libraryItems.filter(
+    (item) => item.status !== "published",
+  );
   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()}
-        {isLoading ? (
-          <Spinner />
-        ) : (
-          <a
-            href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
-              window.name || "_blank"
-            }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
-              VERSIONS.excalidrawLibrary
-            }`}
-            target="_excalidraw_libraries"
-          >
-            {t("labels.libraries")}
-          </a>
-        )}
-      </div>
+  const renderLibraryHeader = () => {
+    return (
+      <>
+        <div className="layer-ui__library-header" key="library-header">
+          {renderLibraryActions()}
+          {device.canDeviceFitSidebar && (
+            <>
+              <div className="layer-ui__sidebar-lock-button">
+                <SidebarLockButton
+                  checked={appState.isLibraryMenuDocked}
+                  onChange={() => {
+                    document
+                      .querySelector(".layer-ui__wrapper")
+                      ?.classList.add("animate");
+                    const nextState = !appState.isLibraryMenuDocked;
+                    setAppState({
+                      isLibraryMenuDocked: nextState,
+                    });
+                    trackEvent(
+                      "library",
+                      `toggleLibraryDock (${nextState ? "dock" : "undock"})`,
+                      `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
+                    );
+                  }}
+                />
+              </div>
+            </>
+          )}
+          {!device.isMobile && (
+            <div className="ToolIcon__icon__close">
+              <button
+                className="Modal__close"
+                onClick={() =>
+                  setAppState({
+                    isLibraryOpen: false,
+                  })
+                }
+                aria-label={t("buttons.close")}
+              >
+                {close}
+              </button>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  };
+
+  const renderLibraryMenuItems = () => {
+    return (
       <Stack.Col
         className="library-menu-items-container__items"
         align="start"
         gap={1}
+        style={{
+          flex: publishedItems.length > 0 ? 1 : "0 1 auto",
+          marginBottom: 0,
+        }}
       >
         <>
-          <div className="separator">{t("labels.personalLib")}</div>
-          {renderLibrarySection(unpublishedItems)}
+          <div className="separator">
+            {(pendingElements.length > 0 ||
+              unpublishedItems.length > 0 ||
+              publishedItems.length > 0) && (
+              <div>{t("labels.personalLib")}</div>
+            )}
+            {isLoading && (
+              <div
+                style={{
+                  marginLeft: "auto",
+                  marginRight: "1rem",
+                  display: "flex",
+                  alignItems: "center",
+                  fontWeight: "normal",
+                }}
+              >
+                <div style={{ transform: "translateY(2px)" }}>
+                  <Spinner />
+                </div>
+              </div>
+            )}
+          </div>
+          {!pendingElements.length && !unpublishedItems.length ? (
+            <div
+              style={{
+                height: 65,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                fontSize: ".9rem",
+              }}
+            >
+              {t("library.noItems")}
+              <div
+                style={{
+                  margin: ".6rem 0",
+                  fontSize: ".8em",
+                  width: "70%",
+                  textAlign: "center",
+                }}
+              >
+                {publishedItems.length > 0
+                  ? t("library.hint_emptyPrivateLibrary")
+                  : t("library.hint_emptyLibrary")}
+              </div>
+            </div>
+          ) : (
+            renderLibrarySection([
+              // append pending library item
+              ...(pendingElements.length
+                ? [{ id: null, elements: pendingElements }]
+                : []),
+              ...unpublishedItems,
+            ])
+          )}
         </>
 
         <>
-          <div className="separator">{t("labels.excalidrawLib")} </div>
-
-          {renderLibrarySection(publishedItems)}
+          {(publishedItems.length > 0 ||
+            (!device.isMobile &&
+              (pendingElements.length > 0 || unpublishedItems.length > 0))) && (
+            <div className="separator">{t("labels.excalidrawLib")}</div>
+          )}
+          {publishedItems.length > 0 ? (
+            renderLibrarySection(publishedItems)
+          ) : unpublishedItems.length > 0 ? (
+            <div
+              style={{
+                margin: "1rem 0",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                fontSize: ".9rem",
+              }}
+            >
+              {t("library.noItems")}
+            </div>
+          ) : null}
         </>
       </Stack.Col>
+    );
+  };
+
+  const renderLibraryFooter = () => {
+    return (
+      <a
+        className="library-menu-browse-button"
+        href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+          window.name || "_blank"
+        }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
+          VERSIONS.excalidrawLibrary
+        }`}
+        target="_excalidraw_libraries"
+      >
+        {t("labels.libraries")}
+      </a>
+    );
+  };
+
+  return (
+    <div
+      className="library-menu-items-container"
+      style={
+        device.isMobile
+          ? {
+              minHeight: "200px",
+              maxHeight: "70vh",
+            }
+          : undefined
+      }
+    >
+      {showRemoveLibAlert && renderRemoveLibAlert()}
+      {renderLibraryHeader()}
+      {renderLibraryMenuItems()}
+      {!device.isMobile && renderLibraryFooter()}
     </div>
   );
 };

src/components/LibraryUnit.scss

@@ -3,7 +3,7 @@
 .excalidraw {
   .library-unit {
     align-items: center;
-    border: 1px solid var(--button-gray-2);
+    border: 1px solid transparent;
     display: flex;
     justify-content: center;
     position: relative;
@@ -21,10 +21,6 @@
     }
   }
 
-  &.theme--dark .library-unit {
-    border-color: rgb(48, 48, 48);
-  }
-
   .library-unit__dragger {
     display: flex;
     align-items: center;

src/components/LibraryUnit.tsx

@@ -1,8 +1,7 @@
 import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
-import { MIME_TYPES } from "../constants";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
 import { exportToSvg } from "../scene/export";
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
@@ -29,6 +28,7 @@ export const LibraryUnit = ({
   onClick,
   selected,
   onToggle,
+  onDrag,
 }: {
   id: LibraryItem["id"] | /** for pending item */ null;
   elements?: LibraryItem["elements"];
@@ -37,6 +37,7 @@ export const LibraryUnit = ({
   onClick: () => void;
   selected: boolean;
   onToggle: (id: string, event: React.MouseEvent) => void;
+  onDrag: (id: string, event: React.DragEvent) => void;
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
@@ -66,7 +67,7 @@ export const LibraryUnit = ({
   }, [elements, files]);
 
   const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useDeviceType().isMobile;
+  const isMobile = useDevice().isMobile;
   const adder = isPending && (
     <div className="library-unit__adder">{PLUS_ICON}</div>
   );
@@ -99,11 +100,12 @@ export const LibraryUnit = ({
             : undefined
         }
         onDragStart={(event) => {
+          if (!id) {
+            event.preventDefault();
+            return;
+          }
           setIsHovered(false);
-          event.dataTransfer.setData(
-            MIME_TYPES.excalidrawlib,
-            JSON.stringify(elements),
-          );
+          onDrag(id, event);
         }}
       />
       {adder}

src/components/MobileMenu.tsx

@@ -32,7 +32,10 @@ type MobileMenuProps = {
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderCustomFooter?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   viewModeEnabled: boolean;
   showThemeBtn: boolean;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
@@ -40,6 +43,7 @@ type MobileMenuProps = {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
+  renderStats: () => JSX.Element | null;
 };
 
 export const MobileMenu = ({
@@ -60,6 +64,7 @@ export const MobileMenu = ({
   showThemeBtn,
   onImageAction,
   renderTopRightUI,
+  renderStats,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -181,6 +186,7 @@ export const MobileMenu = ({
   return (
     <>
       {!viewModeEnabled && renderToolbar()}
+      {renderStats()}
       <div
         className="App-bottom-bar"
         style={{
@@ -199,20 +205,11 @@ export const MobileMenu = ({
                   {appState.collaborators.size > 0 && (
                     <fieldset>
                       <legend>{t("labels.collaborators")}</legend>
-                      <UserList mobile>
-                        {Array.from(appState.collaborators)
-                          // Collaborator is either not initialized or is actually the current user.
-                          .filter(
-                            ([_, client]) => Object.keys(client).length !== 0,
-                          )
-                          .map(([clientId, client]) => (
-                            <React.Fragment key={clientId}>
-                              {actionManager.renderAction("goToCollaborator", {
-                                id: clientId,
-                              })}
-                            </React.Fragment>
-                          ))}
-                      </UserList>
+                      <UserList
+                        mobile
+                        collaborators={appState.collaborators}
+                        actionManager={actionManager}
+                      />
                     </fieldset>
                   )}
                 </Stack.Col>

src/components/Modal.tsx

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

src/components/Popover.tsx

@@ -1,6 +1,8 @@
 import React, { useLayoutEffect, useRef, useEffect } from "react";
 import "./Popover.scss";
 import { unstable_batchedUpdates } from "react-dom";
+import { queryFocusableElements } from "../utils";
+import { KEYS } from "../keys";
 
 type Props = {
   top?: number;
@@ -27,6 +29,41 @@ export const Popover = ({
 }: Props) => {
   const popoverRef = useRef<HTMLDivElement>(null);
 
+  const container = popoverRef.current;
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === KEYS.TAB) {
+        const focusableElements = queryFocusableElements(container);
+        const { activeElement } = document;
+        const currentIndex = focusableElements.findIndex(
+          (element) => element === activeElement,
+        );
+
+        if (currentIndex === 0 && event.shiftKey) {
+          focusableElements[focusableElements.length - 1].focus();
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        } else if (
+          currentIndex === focusableElements.length - 1 &&
+          !event.shiftKey
+        ) {
+          focusableElements[0].focus();
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+      }
+    };
+
+    container.addEventListener("keydown", handleKeyDown);
+
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [container]);
+
   // ensure the popover doesn't overflow the viewport
   useLayoutEffect(() => {
     if (fitInViewport && popoverRef.current) {

src/components/PublishLibrary.scss

@@ -82,6 +82,10 @@
       }
     }
 
+    &-warning {
+      color: $oc-red-6;
+    }
+
     &-note {
       padding: 1em;
       font-style: italic;

src/components/PublishLibrary.tsx

@@ -295,6 +295,11 @@ const PublishLibrary = ({
   }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);
 
   const shouldRenderForm = !!libraryItems.length;
+
+  const containsPublishedItems = libraryItems.some(
+    (item) => item.status === "published",
+  );
+
   return (
     <Dialog
       onCloseRequest={onDialogClose}
@@ -329,6 +334,11 @@ const PublishLibrary = ({
           <div className="publish-library-note">
             {t("publishDialog.noteItems")}
           </div>
+          {containsPublishedItems && (
+            <span className="publish-library-note publish-library-warning">
+              {t("publishDialog.republishWarning")}
+            </span>
+          )}
           {renderLibraryItems()}
           <div className="publish-library__fields">
             <label>

src/components/SidebarLockButton.scss

@@ -0,0 +1,22 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .layer-ui__sidebar-lock-button {
+    @include toolbarButtonColorStates;
+    margin-right: 0.2rem;
+  }
+  .ToolIcon_type_floating .side_lock_icon {
+    width: calc(var(--space-factor) * 7);
+    height: calc(var(--space-factor) * 7);
+    svg {
+      // mirror
+      transform: scale(-1, 1);
+    }
+  }
+
+  .ToolIcon_type_checkbox {
+    &:not(.ToolIcon_toggle_opaque):checked + .side_lock_icon {
+      background-color: var(--color-primary);
+    }
+  }
+}

src/components/SidebarLockButton.tsx

@@ -0,0 +1,46 @@
+import "./ToolIcon.scss";
+
+import React from "react";
+import clsx from "clsx";
+import { ToolButtonSize } from "./ToolButton";
+import { t } from "../i18n";
+import { Tooltip } from "./Tooltip";
+
+import "./SidebarLockButton.scss";
+
+type SidebarLockIconProps = {
+  checked: boolean;
+  onChange?(): void;
+};
+
+const DEFAULT_SIZE: ToolButtonSize = "medium";
+
+const SIDE_LIBRARY_TOGGLE_ICON = (
+  <svg viewBox="0 0 24 24" fill="#ffffff">
+    <path d="M19 22H5a3 3 0 01-3-3V5a3 3 0 013-3h14a3 3 0 013 3v14a3 3 0 01-3 3zm0-18h-9v16h9a1.01 1.01 0 001-1V5a1.01 1.01 0 00-1-1z"></path>
+  </svg>
+);
+
+export const SidebarLockButton = (props: SidebarLockIconProps) => {
+  return (
+    <Tooltip label={t("labels.sidebarLock")}>
+      <label
+        className={clsx(
+          "ToolIcon ToolIcon__lock ToolIcon_type_floating",
+          `ToolIcon_size_${DEFAULT_SIZE}`,
+        )}
+      >
+        <input
+          className="ToolIcon_type_checkbox"
+          type="checkbox"
+          onChange={props.onChange}
+          checked={props.checked}
+          aria-label={t("labels.sidebarLock")}
+        />{" "}
+        <div className="ToolIcon__icon side_lock_icon" tabIndex={0}>
+          {SIDE_LIBRARY_TOGGLE_ICON}
+        </div>{" "}
+      </label>{" "}
+    </Tooltip>
+  );
+};

src/components/SingleLibraryItem.scss

@@ -3,11 +3,24 @@
 .excalidraw {
   .single-library-item {
     position: relative;
+
+    &-status {
+      position: absolute;
+      top: 0.3rem;
+      left: 0.3rem;
+      font-size: 0.7rem;
+      color: $oc-red-7;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 0.1rem 0.2rem;
+      border-radius: 0.2rem;
+    }
+
     &__svg {
+      background-color: $oc-white;
+      padding: 0.3rem;
       width: 7.5rem;
       height: 7.5rem;
       border: 1px solid var(--button-gray-2);
-      margin: 0.3rem;
       svg {
         width: 100%;
         height: 100%;
@@ -40,7 +53,7 @@
     &--remove {
       position: absolute;
       top: 0.2rem;
-      right: 1.3rem;
+      right: 1rem;
 
       .ToolIcon__icon {
         margin: 0;

src/components/SingleLibraryItem.tsx

@@ -45,6 +45,11 @@ const SingleLibraryItem = ({
 
   return (
     <div className="single-library-item">
+      {libItem.status === "published" && (
+        <span className="single-library-item-status">
+          {t("labels.statusPublished")}
+        </span>
+      )}
       <div ref={svgRef} className="single-library-item__svg" />
       <ToolButton
         aria-label={t("buttons.remove")}

src/components/Stack.tsx

@@ -41,6 +41,7 @@ const ColStack = ({
   align,
   justifyContent,
   className,
+  style,
 }: StackProps) => {
   return (
     <div
@@ -49,6 +50,7 @@ const ColStack = ({
         "--gap": gap,
         justifyItems: align,
         justifyContent,
+        ...style,
       }}
     >
       {children}

src/components/Stats.scss

@@ -7,6 +7,7 @@
     right: 12px;
     font-size: 12px;
     z-index: 10;
+    pointer-events: all;
 
     h3 {
       margin: 0 24px 8px 0;

src/components/Stats.tsx

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

src/components/Toast.scss

@@ -2,6 +2,9 @@
 
 .excalidraw {
   .Toast {
+    $closeButtonSize: 1.2rem;
+    $closeButtonPadding: 0.4rem;
+
     animation: fade-in 0.5s;
     background-color: var(--button-gray-1);
     border-radius: 4px;
@@ -15,11 +18,24 @@
     text-align: center;
     width: 300px;
     z-index: 999999;
-  }
 
-  .Toast__message {
-    color: var(--popup-text-color);
-    white-space: pre-wrap;
+    .Toast__message {
+      padding: 0 $closeButtonSize + ($closeButtonPadding);
+      color: var(--popup-text-color);
+      white-space: pre-wrap;
+    }
+
+    .close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: $closeButtonPadding;
+
+      .ToolIcon__icon {
+        width: $closeButtonSize;
+        height: $closeButtonSize;
+      }
+    }
   }
 
   @keyframes fade-in {

src/components/Toast.tsx

@@ -1,34 +1,59 @@
 import { useCallback, useEffect, useRef } from "react";
-import { TOAST_TIMEOUT } from "../constants";
+import { close } from "./icons";
 import "./Toast.scss";
+import { ToolButton } from "./ToolButton";
+
+const DEFAULT_TOAST_TIMEOUT = 5000;
 
 export const Toast = ({
   message,
   clearToast,
+  closable = false,
+  // To prevent autoclose, pass duration as Infinity
+  duration = DEFAULT_TOAST_TIMEOUT,
 }: {
   message: string;
   clearToast: () => void;
+  closable?: boolean;
+  duration?: number;
 }) => {
   const timerRef = useRef<number>(0);
-
-  const scheduleTimeout = useCallback(
-    () =>
-      (timerRef.current = window.setTimeout(() => clearToast(), TOAST_TIMEOUT)),
-    [clearToast],
-  );
+  const shouldAutoClose = duration !== Infinity;
+  const scheduleTimeout = useCallback(() => {
+    if (!shouldAutoClose) {
+      return;
+    }
+    timerRef.current = window.setTimeout(() => clearToast(), duration);
+  }, [clearToast, duration, shouldAutoClose]);
 
   useEffect(() => {
+    if (!shouldAutoClose) {
+      return;
+    }
     scheduleTimeout();
     return () => clearTimeout(timerRef.current);
-  }, [scheduleTimeout, message]);
+  }, [scheduleTimeout, message, duration, shouldAutoClose]);
 
+  const onMouseEnter = shouldAutoClose
+    ? () => clearTimeout(timerRef?.current)
+    : undefined;
+  const onMouseLeave = shouldAutoClose ? scheduleTimeout : undefined;
   return (
     <div
       className="Toast"
-      onMouseEnter={() => clearTimeout(timerRef?.current)}
-      onMouseLeave={scheduleTimeout}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <p className="Toast__message">{message}</p>
+      {closable && (
+        <ToolButton
+          icon={close}
+          aria-label="close"
+          type="icon"
+          onClick={clearToast}
+          className="close"
+        />
+      )}
     </div>
   );
 };

src/components/Toolbar.scss

@@ -1,26 +1,5 @@
 @import "open-color/open-color.scss";
-
-@mixin toolbarButtonColorStates {
-  .ToolIcon_type_radio,
-  .ToolIcon_type_checkbox {
-    & + .ToolIcon__icon:active {
-      background: var(--color-primary-light);
-    }
-    &:checked + .ToolIcon__icon {
-      background: var(--color-primary);
-      --icon-fill-color: #{$oc-white};
-      --keybinding-color: #{$oc-white};
-    }
-    &:checked + .ToolIcon__icon:active {
-      background: var(--color-primary-darker);
-    }
-  }
-
-  .ToolIcon__keybinding {
-    bottom: 4px;
-    right: 4px;
-  }
-}
+@import "../css/variables.module";
 
 .excalidraw {
   .App-toolbar-container {

src/components/UserList.tsx

@@ -2,17 +2,51 @@ import "./UserList.scss";
 
 import React from "react";
 import clsx from "clsx";
+import { AppState, Collaborator } from "../types";
+import { Tooltip } from "./Tooltip";
+import { ActionManager } from "../actions/manager";
 
-type UserListProps = {
-  children: React.ReactNode;
+export const UserList: React.FC<{
   className?: string;
   mobile?: boolean;
-};
+  collaborators: AppState["collaborators"];
+  actionManager: ActionManager;
+}> = ({ className, mobile, collaborators, actionManager }) => {
+  const uniqueCollaborators = new Map<string, Collaborator>();
+
+  collaborators.forEach((collaborator, socketId) => {
+    uniqueCollaborators.set(
+      // filter on user id, else fall back on unique socketId
+      collaborator.id || socketId,
+      collaborator,
+    );
+  });
+
+  const avatars =
+    uniqueCollaborators.size > 0 &&
+    Array.from(uniqueCollaborators)
+      .filter(([_, client]) => Object.keys(client).length !== 0)
+      .map(([clientId, collaborator]) => {
+        const avatarJSX = actionManager.renderAction("goToCollaborator", [
+          clientId,
+          collaborator,
+        ]);
+
+        return mobile ? (
+          <Tooltip
+            label={collaborator.username || "Unknown user"}
+            key={clientId}
+          >
+            {avatarJSX}
+          </Tooltip>
+        ) : (
+          <React.Fragment key={clientId}>{avatarJSX}</React.Fragment>
+        );
+      });
 
-export const UserList = ({ children, className, mobile }: UserListProps) => {
   return (
     <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
-      {children}
+      {avatars}
     </div>
   );
 };

src/constants.ts

@@ -116,7 +116,6 @@ export const IMAGE_RENDER_TIMEOUT = 500;
 export const TAP_TWICE_TIMEOUT = 300;
 export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
-export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
@@ -155,9 +154,19 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
   },
 };
 
+// breakpoints
+// -----------------------------------------------------------------------------
+// sm screen
+export const MQ_SM_MAX_WIDTH = 640;
+// md screen
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
 export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
+// sidebar
+export const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
+// -----------------------------------------------------------------------------
+
+export const LIBRARY_SIDEBAR_WIDTH = parseInt(cssVariables.rightSidebarWidth);
 
 export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
@@ -193,3 +202,7 @@ export const VERTICAL_ALIGN = {
 };
 
 export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
+
+export const COOKIES = {
+  AUTH_STATE_COOKIE: "excplus-auth",
+} as const;

src/createInverseContext.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-
-export const createInverseContext = <T extends unknown = null>(
-  initialValue: T,
-) => {
-  const Context = React.createContext(initialValue) as React.Context<T> & {
-    _updateProviderValue?: (value: T) => void;
-  };
-
-  class InverseConsumer extends React.Component {
-    state = { value: initialValue };
-    constructor(props: any) {
-      super(props);
-      Context._updateProviderValue = (value: T) => this.setState({ value });
-    }
-    render() {
-      return (
-        <Context.Provider value={this.state.value}>
-          {this.props.children}
-        </Context.Provider>
-      );
-    }
-  }
-
-  class InverseProvider extends React.Component<{ value: T }> {
-    componentDidMount() {
-      Context._updateProviderValue?.(this.props.value);
-    }
-    componentDidUpdate() {
-      Context._updateProviderValue?.(this.props.value);
-    }
-    render() {
-      return <Context.Consumer>{() => this.props.children}</Context.Consumer>;
-    }
-  }
-
-  return {
-    Context,
-    Consumer: InverseConsumer,
-    Provider: InverseProvider,
-  };
-};

src/css/styles.scss

@@ -350,7 +350,6 @@
     align-items: flex-start;
     cursor: default;
     pointer-events: none !important;
-    z-index: 100;
 
     :root[dir="ltr"] & {
       left: 0.25rem;
@@ -391,6 +390,7 @@
 
   .App-menu__left {
     overflow-y: auto;
+    box-shadow: var(--shadow-island);
   }
 
   .dropdown-select {
@@ -449,6 +449,7 @@
     bottom: 30px;
     transform: translateX(-50%);
     padding: 10px 20px;
+    pointer-events: all;
   }
 
   .help-icon {
@@ -567,6 +568,22 @@
       display: none;
     }
   }
+
+  // use custom, minimalistic scrollbar
+  // (doesn't work in Firefox)
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--button-gray-2);
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--button-gray-3);
+  }
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--button-gray-2);
+  }
 }
 
 .ErrorSplash.excalidraw {

src/css/variables.module.scss

@@ -6,8 +6,32 @@
   }
 }
 
+@mixin toolbarButtonColorStates {
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    & + .ToolIcon__icon:active {
+      background: var(--color-primary-light);
+    }
+    &:checked + .ToolIcon__icon {
+      background: var(--color-primary);
+      --icon-fill-color: #{$oc-white};
+      --keybinding-color: #{$oc-white};
+    }
+    &:checked + .ToolIcon__icon:active {
+      background: var(--color-primary-darker);
+    }
+  }
+
+  .ToolIcon__keybinding {
+    bottom: 4px;
+    right: 4px;
+  }
+}
+
 $theme-filter: "invert(93%) hue-rotate(180deg)";
+$right-sidebar-width: "302px";
 
 :export {
   themeFilter: unquote($theme-filter);
+  rightSidebarWidth: unquote($right-sidebar-width);
 }

src/data/blob.ts

@@ -8,7 +8,7 @@ import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL, LibraryItem } from "../types";
 import { bytesToHexString } from "../utils";
-import { FileSystemHandle } from "./filesystem";
+import { FileSystemHandle, nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
 import { ImportedLibraryData } from "./types";
@@ -123,48 +123,79 @@ export const isSupportedImageFile = (
   );
 };
 
-export const loadFromBlob = async (
-  blob: Blob,
+export const loadSceneOrLibraryFromBlob = async (
+  blob: Blob | File,
   /** @see restore.localAppState */
   localAppState: AppState | null,
   localElements: readonly ExcalidrawElement[] | null,
+  /** FileSystemHandle. Defaults to `blob.handle` if defined, otherwise null. */
+  fileHandle?: FileSystemHandle | null,
 ) => {
   const contents = await parseFileContents(blob);
   try {
     const data = JSON.parse(contents);
-    if (!isValidExcalidrawData(data)) {
-      throw new Error(t("alerts.couldNotLoadInvalidFile"));
+    if (isValidExcalidrawData(data)) {
+      return {
+        type: MIME_TYPES.excalidraw,
+        data: restore(
+          {
+            elements: clearElementsForExport(data.elements || []),
+            appState: {
+              theme: localAppState?.theme,
+              fileHandle: fileHandle || blob.handle || null,
+              ...cleanAppStateForExport(data.appState || {}),
+              ...(localAppState
+                ? calculateScrollCenter(
+                    data.elements || [],
+                    localAppState,
+                    null,
+                  )
+                : {}),
+            },
+            files: data.files,
+          },
+          localAppState,
+          localElements,
+        ),
+      };
+    } else if (isValidLibrary(data)) {
+      return {
+        type: MIME_TYPES.excalidrawlib,
+        data,
+      };
     }
-    const result = restore(
-      {
-        elements: clearElementsForExport(data.elements || []),
-        appState: {
-          theme: localAppState?.theme,
-          fileHandle: blob.handle || null,
-          ...cleanAppStateForExport(data.appState || {}),
-          ...(localAppState
-            ? calculateScrollCenter(data.elements || [], localAppState, null)
-            : {}),
-        },
-        files: data.files,
-      },
-      localAppState,
-      localElements,
-    );
-
-    return result;
+    throw new Error(t("alerts.couldNotLoadInvalidFile"));
   } catch (error: any) {
     console.error(error.message);
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   }
 };
 
-export const loadLibraryFromBlob = async (
+export const loadFromBlob = async (
   blob: Blob,
+  /** @see restore.localAppState */
+  localAppState: AppState | null,
+  localElements: readonly ExcalidrawElement[] | null,
+  /** FileSystemHandle. Defaults to `blob.handle` if defined, otherwise null. */
+  fileHandle?: FileSystemHandle | null,
+) => {
+  const ret = await loadSceneOrLibraryFromBlob(
+    blob,
+    localAppState,
+    localElements,
+    fileHandle,
+  );
+  if (ret.type !== MIME_TYPES.excalidraw) {
+    throw new Error(t("alerts.couldNotLoadInvalidFile"));
+  }
+  return ret.data;
+};
+
+export const parseLibraryJSON = (
+  json: string,
   defaultStatus: LibraryItem["status"] = "unpublished",
 ) => {
-  const contents = await parseFileContents(blob);
-  const data: ImportedLibraryData | undefined = JSON.parse(contents);
+  const data: ImportedLibraryData | undefined = JSON.parse(json);
   if (!isValidLibrary(data)) {
     throw new Error("Invalid library");
   }
@@ -172,6 +203,13 @@ export const loadLibraryFromBlob = async (
   return restoreLibraryItems(libraryItems, defaultStatus);
 };
 
+export const loadLibraryFromBlob = async (
+  blob: Blob,
+  defaultStatus: LibraryItem["status"] = "unpublished",
+) => {
+  return parseLibraryJSON(await parseFileContents(blob), defaultStatus);
+};
+
 export const canvasToBlob = async (
   canvas: HTMLCanvasElement,
 ): Promise<Blob> => {
@@ -200,7 +238,7 @@ export const generateIdFromFile = async (file: File): Promise<FileId> => {
   try {
     const hashBuffer = await window.crypto.subtle.digest(
       "SHA-1",
-      await file.arrayBuffer(),
+      await blobToArrayBuffer(file),
     );
     return bytesToHexString(new Uint8Array(hashBuffer)) as FileId;
   } catch (error: any) {
@@ -289,3 +327,125 @@ export const SVGStringToFile = (SVGString: string, filename: string = "") => {
     type: MIME_TYPES.svg,
   }) as File & { type: typeof MIME_TYPES.svg };
 };
+
+export const getFileFromEvent = async (
+  event: React.DragEvent<HTMLDivElement>,
+) => {
+  const file = event.dataTransfer.files.item(0);
+  const fileHandle = await getFileHandle(event);
+
+  return { file: file ? await normalizeFile(file) : null, fileHandle };
+};
+
+export const getFileHandle = async (
+  event: React.DragEvent<HTMLDivElement>,
+): Promise<FileSystemHandle | null> => {
+  if (nativeFileSystemSupported) {
+    try {
+      const item = event.dataTransfer.items[0];
+      const handle: FileSystemHandle | null =
+        (await (item as any).getAsFileSystemHandle()) || null;
+
+      return handle;
+    } catch (error: any) {
+      console.warn(error.name, error.message);
+      return null;
+    }
+  }
+  return null;
+};
+
+/**
+ * attemps to detect if a buffer is a valid image by checking its leading bytes
+ */
+const getActualMimeTypeFromImage = (buffer: ArrayBuffer) => {
+  let mimeType: ValueOf<Pick<typeof MIME_TYPES, "png" | "jpg" | "gif">> | null =
+    null;
+
+  const first8Bytes = `${[...new Uint8Array(buffer).slice(0, 8)].join(" ")} `;
+
+  // uint8 leading bytes
+  const headerBytes = {
+    // https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_header
+    png: "137 80 78 71 13 10 26 10 ",
+    // https://en.wikipedia.org/wiki/JPEG#Syntax_and_structure
+    // jpg is a bit wonky. Checking the first three bytes should be enough,
+    // but may yield false positives. (https://stackoverflow.com/a/23360709/927631)
+    jpg: "255 216 255 ",
+    // https://en.wikipedia.org/wiki/GIF#Example_GIF_file
+    gif: "71 73 70 56 57 97 ",
+  };
+
+  if (first8Bytes === headerBytes.png) {
+    mimeType = MIME_TYPES.png;
+  } else if (first8Bytes.startsWith(headerBytes.jpg)) {
+    mimeType = MIME_TYPES.jpg;
+  } else if (first8Bytes.startsWith(headerBytes.gif)) {
+    mimeType = MIME_TYPES.gif;
+  }
+  return mimeType;
+};
+
+export const createFile = (
+  blob: File | Blob | ArrayBuffer,
+  mimeType: ValueOf<typeof MIME_TYPES>,
+  name: string | undefined,
+) => {
+  return new File([blob], name || "", {
+    type: mimeType,
+  });
+};
+
+/** attemps to detect correct mimeType if none is set, or if an image
+ * has an incorrect extension.
+ * Note: doesn't handle missing .excalidraw/.excalidrawlib extension  */
+export const normalizeFile = async (file: File) => {
+  if (!file.type) {
+    if (file?.name?.endsWith(".excalidrawlib")) {
+      file = createFile(
+        await blobToArrayBuffer(file),
+        MIME_TYPES.excalidrawlib,
+        file.name,
+      );
+    } else if (file?.name?.endsWith(".excalidraw")) {
+      file = createFile(
+        await blobToArrayBuffer(file),
+        MIME_TYPES.excalidraw,
+        file.name,
+      );
+    } else {
+      const buffer = await blobToArrayBuffer(file);
+      const mimeType = getActualMimeTypeFromImage(buffer);
+      if (mimeType) {
+        file = createFile(buffer, mimeType, file.name);
+      }
+    }
+    // when the file is an image, make sure the extension corresponds to the
+    // actual mimeType (this is an edge case, but happens sometime)
+  } else if (isSupportedImageFile(file)) {
+    const buffer = await blobToArrayBuffer(file);
+    const mimeType = getActualMimeTypeFromImage(buffer);
+    if (mimeType && mimeType !== file.type) {
+      file = createFile(buffer, mimeType, file.name);
+    }
+  }
+
+  return file;
+};
+
+export const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
+  if ("arrayBuffer" in blob) {
+    return blob.arrayBuffer();
+  }
+  // Safari
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (!event.target?.result) {
+        return reject(new Error("Couldn't convert blob to ArrayBuffer"));
+      }
+      resolve(event.target.result as ArrayBuffer);
+    };
+    reader.readAsArrayBuffer(blob);
+  });
+};

src/data/encryption.ts

@@ -1,4 +1,5 @@
 import { ENCRYPTION_KEY_BITS } from "../constants";
+import { blobToArrayBuffer } from "./blob";
 
 export const IV_LENGTH_BYTES = 12;
 
@@ -58,7 +59,7 @@ export const encryptData = async (
       : data instanceof Uint8Array
       ? data
       : data instanceof Blob
-      ? await data.arrayBuffer()
+      ? await blobToArrayBuffer(data)
       : data;
 
   // We use symmetric encryption. AES-GCM is the recommended algorithm and

src/data/filesystem.ts

@@ -1,5 +1,4 @@
 import {
-  FileWithHandle,
   fileOpen as _fileOpen,
   fileSave as _fileSave,
   FileSystemHandle,
@@ -26,13 +25,9 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
   extensions?: FILE_EXTENSION[];
   description: string;
   multiple?: M;
-}): Promise<
-  M extends false | undefined ? FileWithHandle : FileWithHandle[]
-> => {
+}): Promise<M extends false | undefined ? File : File[]> => {
   // an unsafe TS hack, alas not much we can do AFAIK
-  type RetType = M extends false | undefined
-    ? FileWithHandle
-    : FileWithHandle[];
+  type RetType = M extends false | undefined ? File : File[];
 
   const mimeTypes = opts.extensions?.reduce((mimeTypes, type) => {
     mimeTypes.push(MIME_TYPES[type]);

src/data/image.ts

@@ -3,28 +3,12 @@ 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 { blobToArrayBuffer } from "./blob";
 
 // -----------------------------------------------------------------------------
 // PNG
 // -----------------------------------------------------------------------------
 
-const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
-  if ("arrayBuffer" in blob) {
-    return blob.arrayBuffer();
-  }
-  // Safari
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      if (!event.target?.result) {
-        return reject(new Error("couldn't convert blob to ArrayBuffer"));
-      }
-      resolve(event.target.result as ArrayBuffer);
-    };
-    reader.readAsArrayBuffer(blob);
-  });
-};
-
 export const getTEXtChunk = async (
   blob: Blob,
 ): Promise<{ keyword: string; text: string } | null> => {

src/data/json.ts

@@ -9,7 +9,7 @@ import {
 import { clearElementsForDatabase, clearElementsForExport } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems } from "../types";
-import { isImageFileHandle, loadFromBlob } from "./blob";
+import { isImageFileHandle, loadFromBlob, normalizeFile } from "./blob";
 
 import {
   ExportedDataState,
@@ -17,7 +17,6 @@ import {
   ExportedLibraryData,
   ImportedLibraryData,
 } from "./types";
-import Library from "./library";
 
 /**
  * Strips out files which are only referenced by deleted elements
@@ -93,13 +92,18 @@ export const loadFromJSON = async (
   localAppState: AppState,
   localElements: readonly ExcalidrawElement[] | null,
 ) => {
-  const blob = await fileOpen({
+  const file = await fileOpen({
     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"],
   });
-  return loadFromBlob(blob, localAppState, localElements);
+  return loadFromBlob(
+    await normalizeFile(file),
+    localAppState,
+    localElements,
+    file.handle,
+  );
 };
 
 export const isValidExcalidrawData = (data?: {
@@ -147,15 +151,3 @@ export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
     },
   );
 };
-
-export const importLibraryFromJSON = async (library: Library) => {
-  const blob = await fileOpen({
-    description: "Excalidraw library 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", ".excalidrawlib"],
-    */
-  });
-  await library.importLibrary(blob);
-};

src/data/library.ts

@@ -1,10 +1,20 @@
 import { loadLibraryFromBlob } from "./blob";
-import { LibraryItems, LibraryItem } from "../types";
+import {
+  LibraryItems,
+  LibraryItem,
+  ExcalidrawImperativeAPI,
+  LibraryItemsSource,
+} from "../types";
 import { restoreLibraryItems } from "./restore";
 import type App from "../components/App";
-import { ImportedDataState } from "./types";
 import { atom } from "jotai";
 import { jotaiStore } from "../jotai";
+import { ExcalidrawElement } from "../element/types";
+import { getCommonBoundingBox } from "../element/bounds";
+import { AbortError } from "../errors";
+import { t } from "../i18n";
+import { useEffect, useRef } from "react";
+import { URL_HASH_KEYS, URL_QUERY_KEYS, APP_NAME, EVENT } from "../constants";
 
 export const libraryItemsAtom = atom<{
   status: "loading" | "loaded";
@@ -102,36 +112,6 @@ class Library {
     return this.setLibrary([]);
   };
 
-  /**
-   * imports library (from blob or libraryItems), merging with current library
-   * (attempting to remove duplicates)
-   */
-  importLibrary(
-    library:
-      | Blob
-      | Required<ImportedDataState>["libraryItems"]
-      | Promise<Required<ImportedDataState>["libraryItems"]>,
-    defaultStatus: LibraryItem["status"] = "unpublished",
-  ): Promise<LibraryItems> {
-    return this.setLibrary(
-      () =>
-        new Promise<LibraryItems>(async (resolve, reject) => {
-          try {
-            let libraryItems: LibraryItems;
-            if (library instanceof Blob) {
-              libraryItems = await loadLibraryFromBlob(library, defaultStatus);
-            } else {
-              libraryItems = restoreLibraryItems(await library, defaultStatus);
-            }
-
-            resolve(mergeLibraryItems(this.lastLibraryItems, libraryItems));
-          } catch (error) {
-            reject(error);
-          }
-        }),
-    );
-  }
-
   /**
    * @returns latest cloned libraryItems. Awaits all in-progress updates first.
    */
@@ -151,6 +131,65 @@ class Library {
     });
   };
 
+  // NOTE this is a high-level public API (exposed on ExcalidrawAPI) with
+  // a slight overhead (always restoring library items). For internal use
+  // where merging isn't needed, use `library.setLibrary()` directly.
+  updateLibrary = async ({
+    libraryItems,
+    prompt = false,
+    merge = false,
+    openLibraryMenu = false,
+    defaultStatus = "unpublished",
+  }: {
+    libraryItems: LibraryItemsSource;
+    merge?: boolean;
+    prompt?: boolean;
+    openLibraryMenu?: boolean;
+    defaultStatus?: "unpublished" | "published";
+  }): Promise<LibraryItems> => {
+    if (openLibraryMenu) {
+      this.app.setState({ isLibraryOpen: true });
+    }
+
+    return this.setLibrary(() => {
+      return new Promise<LibraryItems>(async (resolve, reject) => {
+        try {
+          const source = await (typeof libraryItems === "function"
+            ? libraryItems(this.lastLibraryItems)
+            : libraryItems);
+
+          let nextItems;
+
+          if (source instanceof Blob) {
+            nextItems = await loadLibraryFromBlob(source, defaultStatus);
+          } else {
+            nextItems = restoreLibraryItems(source, defaultStatus);
+          }
+          if (
+            !prompt ||
+            window.confirm(
+              t("alerts.confirmAddLibrary", {
+                numShapes: nextItems.length,
+              }),
+            )
+          ) {
+            if (merge) {
+              resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
+            } else {
+              resolve(nextItems);
+            }
+          } else {
+            reject(new AbortError());
+          }
+        } catch (error: any) {
+          reject(error);
+        }
+      });
+    }).finally(() => {
+      this.app.focusContainer();
+    });
+  };
+
   setLibrary = (
     /**
      * LibraryItems that will replace current items. Can be a function which
@@ -204,3 +243,194 @@ class Library {
 }
 
 export default Library;
+
+export const distributeLibraryItemsOnSquareGrid = (
+  libraryItems: LibraryItems,
+) => {
+  const PADDING = 50;
+  const ITEMS_PER_ROW = Math.ceil(Math.sqrt(libraryItems.length));
+
+  const resElements: ExcalidrawElement[] = [];
+
+  const getMaxHeightPerRow = (row: number) => {
+    const maxHeight = libraryItems
+      .slice(row * ITEMS_PER_ROW, row * ITEMS_PER_ROW + ITEMS_PER_ROW)
+      .reduce((acc, item) => {
+        const { height } = getCommonBoundingBox(item.elements);
+        return Math.max(acc, height);
+      }, 0);
+    return maxHeight;
+  };
+
+  const getMaxWidthPerCol = (targetCol: number) => {
+    let index = 0;
+    let currCol = 0;
+    let maxWidth = 0;
+    for (const item of libraryItems) {
+      if (index % ITEMS_PER_ROW === 0) {
+        currCol = 0;
+      }
+      if (currCol === targetCol) {
+        const { width } = getCommonBoundingBox(item.elements);
+        maxWidth = Math.max(maxWidth, width);
+      }
+      index++;
+      currCol++;
+    }
+    return maxWidth;
+  };
+
+  let colOffsetX = 0;
+  let rowOffsetY = 0;
+
+  let maxHeightCurrRow = 0;
+  let maxWidthCurrCol = 0;
+
+  let index = 0;
+  let col = 0;
+  let row = 0;
+
+  for (const item of libraryItems) {
+    if (index && index % ITEMS_PER_ROW === 0) {
+      rowOffsetY += maxHeightCurrRow + PADDING;
+      colOffsetX = 0;
+      col = 0;
+      row++;
+    }
+
+    if (col === 0) {
+      maxHeightCurrRow = getMaxHeightPerRow(row);
+    }
+    maxWidthCurrCol = getMaxWidthPerCol(col);
+
+    const { minX, minY, width, height } = getCommonBoundingBox(item.elements);
+    const offsetCenterX = (maxWidthCurrCol - width) / 2;
+    const offsetCenterY = (maxHeightCurrRow - height) / 2;
+    resElements.push(
+      // eslint-disable-next-line no-loop-func
+      ...item.elements.map((element) => ({
+        ...element,
+        x:
+          element.x +
+          // offset for column
+          colOffsetX +
+          // offset to center in given square grid
+          offsetCenterX -
+          // subtract minX so that given item starts at 0 coord
+          minX,
+        y:
+          element.y +
+          // offset for row
+          rowOffsetY +
+          // offset to center in given square grid
+          offsetCenterY -
+          // subtract minY so that given item starts at 0 coord
+          minY,
+      })),
+    );
+    colOffsetX += maxWidthCurrCol + PADDING;
+    index++;
+    col++;
+  }
+
+  return resElements;
+};
+
+export const parseLibraryTokensFromUrl = () => {
+  const libraryUrl =
+    // current
+    new URLSearchParams(window.location.hash.slice(1)).get(
+      URL_HASH_KEYS.addLibrary,
+    ) ||
+    // legacy, kept for compat reasons
+    new URLSearchParams(window.location.search).get(URL_QUERY_KEYS.addLibrary);
+  const idToken = libraryUrl
+    ? new URLSearchParams(window.location.hash.slice(1)).get("token")
+    : null;
+
+  return libraryUrl ? { libraryUrl, idToken } : null;
+};
+
+export const useHandleLibrary = ({
+  excalidrawAPI,
+  getInitialLibraryItems,
+}: {
+  excalidrawAPI: ExcalidrawImperativeAPI | null;
+  getInitialLibraryItems?: () => LibraryItemsSource;
+}) => {
+  const getInitialLibraryRef = useRef(getInitialLibraryItems);
+
+  useEffect(() => {
+    if (!excalidrawAPI) {
+      return;
+    }
+
+    const importLibraryFromURL = ({
+      libraryUrl,
+      idToken,
+    }: {
+      libraryUrl: string;
+      idToken: string | null;
+    }) => {
+      if (window.location.hash.includes(URL_HASH_KEYS.addLibrary)) {
+        const hash = new URLSearchParams(window.location.hash.slice(1));
+        hash.delete(URL_HASH_KEYS.addLibrary);
+        window.history.replaceState({}, APP_NAME, `#${hash.toString()}`);
+      } else if (window.location.search.includes(URL_QUERY_KEYS.addLibrary)) {
+        const query = new URLSearchParams(window.location.search);
+        query.delete(URL_QUERY_KEYS.addLibrary);
+        window.history.replaceState({}, APP_NAME, `?${query.toString()}`);
+      }
+
+      excalidrawAPI.updateLibrary({
+        libraryItems: new Promise<Blob>(async (resolve, reject) => {
+          try {
+            const request = await fetch(decodeURIComponent(libraryUrl));
+            const blob = await request.blob();
+            resolve(blob);
+          } catch (error: any) {
+            reject(error);
+          }
+        }),
+        prompt: idToken !== excalidrawAPI.id,
+        merge: true,
+        defaultStatus: "published",
+        openLibraryMenu: true,
+      });
+    };
+    const onHashChange = (event: HashChangeEvent) => {
+      event.preventDefault();
+      const libraryUrlTokens = parseLibraryTokensFromUrl();
+      if (libraryUrlTokens) {
+        event.stopImmediatePropagation();
+        // If hash changed and it contains library url, import it and replace
+        // the url to its previous state (important in case of collaboration
+        // and similar).
+        // Using history API won't trigger another hashchange.
+        window.history.replaceState({}, "", event.oldURL);
+
+        importLibraryFromURL(libraryUrlTokens);
+      }
+    };
+
+    // -------------------------------------------------------------------------
+    // ------ init load --------------------------------------------------------
+    if (getInitialLibraryRef.current) {
+      excalidrawAPI.updateLibrary({
+        libraryItems: getInitialLibraryRef.current(),
+      });
+    }
+
+    const libraryUrlTokens = parseLibraryTokensFromUrl();
+
+    if (libraryUrlTokens) {
+      importLibraryFromURL(libraryUrlTokens);
+    }
+    // --------------------------------------------------------- init load -----
+
+    window.addEventListener(EVENT.HASHCHANGE, onHashChange);
+    return () => {
+      window.removeEventListener(EVENT.HASHCHANGE, onHashChange);
+    };
+  }, [excalidrawAPI]);
+};

src/data/restore.ts

@@ -26,7 +26,7 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp } from "../utils";
+import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 
 type RestoredAppState = Omit<
@@ -48,6 +48,7 @@ export const AllowedExcalidrawActiveTools: Record<
   arrow: true,
   freedraw: true,
   eraser: false,
+  custom: true,
 };
 
 export type RestoredDataState = {
@@ -198,6 +199,7 @@ const restoreElement = (
         y,
       });
     }
+
     // generic elements
     case "ellipse":
       return restoreElementWithProperties(element, {});
@@ -255,6 +257,7 @@ export const restoreAppState = (
         ? localValue
         : defaultValue;
   }
+
   return {
     ...nextAppState,
     cursorButton: localAppState?.cursorButton || "up",
@@ -263,11 +266,15 @@ export const restoreAppState = (
       localAppState?.penDetected ??
       (appState.penMode ? appState.penDetected ?? false : false),
     activeTool: {
+      ...updateActiveTool(
+        defaultAppState,
+        nextAppState.activeTool.type &&
+          AllowedExcalidrawActiveTools[nextAppState.activeTool.type]
+          ? nextAppState.activeTool
+          : { type: "selection" },
+      ),
       lastActiveToolBeforeEraser: null,
       locked: nextAppState.activeTool.locked ?? false,
-      type: AllowedExcalidrawActiveTools[nextAppState.activeTool.type]
-        ? nextAppState.activeTool.type ?? "selection"
-        : "selection",
     },
     // Migrates from previous version where appState.zoom was a number
     zoom:
@@ -276,6 +283,11 @@ export const restoreAppState = (
             value: appState.zoom as NormalizedZoomValue,
           }
         : appState.zoom || defaultAppState.zoom,
+    // when sidebar docked and user left it open in last session,
+    // keep it open. If not docked, keep it closed irrespective of last state.
+    isLibraryOpen: nextAppState.isLibraryMenuDocked
+      ? nextAppState.isLibraryOpen
+      : false,
   };
 };
 

src/data/types.ts

@@ -1,5 +1,10 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
+import {
+  AppState,
+  BinaryFiles,
+  LibraryItems,
+  LibraryItems_anyVersion,
+} from "../types";
 import type { cleanAppStateForExport } from "../appState";
 import { VERSIONS } from "../constants";
 
@@ -19,7 +24,7 @@ export interface ImportedDataState {
   elements?: readonly ExcalidrawElement[] | null;
   appState?: Readonly<Partial<AppState>> | null;
   scrollToContent?: boolean;
-  libraryItems?: LibraryItems | LibraryItems_v1;
+  libraryItems?: LibraryItems_anyVersion;
   files?: BinaryFiles;
 }
 

src/element/binding.ts

@@ -47,6 +47,20 @@ export const isBindingEnabled = (appState: AppState): boolean => {
   return appState.isBindingEnabled;
 };
 
+const getNonDeletedElements = (
+  scene: Scene,
+  ids: readonly ExcalidrawElement["id"][],
+): NonDeleted<ExcalidrawElement>[] => {
+  const result: NonDeleted<ExcalidrawElement>[] = [];
+  ids.forEach((id) => {
+    const element = scene.getNonDeletedElement(id);
+    if (element != null) {
+      result.push(element);
+    }
+  });
+  return result;
+};
+
 export const bindOrUnbindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   startBindingElement: ExcalidrawBindableElement | null | "keep",
@@ -74,16 +88,17 @@ export const bindOrUnbindLinearElement = (
   const onlyUnbound = Array.from(unboundFromElementIds).filter(
     (id) => !boundToElementIds.has(id),
   );
-  Scene.getScene(linearElement)!
-    .getNonDeletedElements(onlyUnbound)
-    .forEach((element) => {
+
+  getNonDeletedElements(Scene.getScene(linearElement)!, onlyUnbound).forEach(
+    (element) => {
       mutateElement(element, {
         boundElements: element.boundElements?.filter(
           (element) =>
             element.type !== "arrow" || element.id !== linearElement.id,
         ),
       });
-    });
+    },
+  );
 };
 
 const bindOrUnbindLinearElementEdge = (
@@ -253,7 +268,7 @@ export const getHoveredElementForBinding = (
   scene: Scene,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
   const hoveredElement = getElementAtPosition(
-    scene.getElements(),
+    scene.getNonDeletedElements(),
     (element) =>
       isBindableElement(element, false) &&
       bindingBorderTest(element, pointerCoords),
@@ -305,46 +320,48 @@ export const updateBoundElements = (
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
-  Scene.getScene(changedElement)!
-    .getNonDeletedElements(boundLinearElements.map((el) => el.id))
-    .forEach((element) => {
-      if (!isLinearElement(element)) {
-        return;
-      }
 
-      const bindableElement = changedElement as ExcalidrawBindableElement;
-      // In case the boundElements are stale
-      if (!doesNeedUpdate(element, bindableElement)) {
-        return;
-      }
-      const startBinding = maybeCalculateNewGapWhenScaling(
-        bindableElement,
-        element.startBinding,
-        newSize,
-      );
-      const endBinding = maybeCalculateNewGapWhenScaling(
-        bindableElement,
-        element.endBinding,
-        newSize,
-      );
-      // `linearElement` is being moved/scaled already, just update the binding
-      if (simultaneouslyUpdatedElementIds.has(element.id)) {
-        mutateElement(element, { startBinding, endBinding });
-        return;
-      }
-      updateBoundPoint(
-        element,
-        "start",
-        startBinding,
-        changedElement as ExcalidrawBindableElement,
-      );
-      updateBoundPoint(
-        element,
-        "end",
-        endBinding,
-        changedElement as ExcalidrawBindableElement,
-      );
-    });
+  getNonDeletedElements(
+    Scene.getScene(changedElement)!,
+    boundLinearElements.map((el) => el.id),
+  ).forEach((element) => {
+    if (!isLinearElement(element)) {
+      return;
+    }
+
+    const bindableElement = changedElement as ExcalidrawBindableElement;
+    // In case the boundElements are stale
+    if (!doesNeedUpdate(element, bindableElement)) {
+      return;
+    }
+    const startBinding = maybeCalculateNewGapWhenScaling(
+      bindableElement,
+      element.startBinding,
+      newSize,
+    );
+    const endBinding = maybeCalculateNewGapWhenScaling(
+      bindableElement,
+      element.endBinding,
+      newSize,
+    );
+    // `linearElement` is being moved/scaled already, just update the binding
+    if (simultaneouslyUpdatedElementIds.has(element.id)) {
+      mutateElement(element, { startBinding, endBinding });
+      return;
+    }
+    updateBoundPoint(
+      element,
+      "start",
+      startBinding,
+      changedElement as ExcalidrawBindableElement,
+    );
+    updateBoundPoint(
+      element,
+      "end",
+      endBinding,
+      changedElement as ExcalidrawBindableElement,
+    );
+  });
 };
 
 const doesNeedUpdate = (
@@ -507,7 +524,7 @@ const getElligibleElementsForBindableElementAndWhere = (
   bindableElement: NonDeleted<ExcalidrawBindableElement>,
 ): SuggestedPointBinding[] => {
   return Scene.getScene(bindableElement)!
-    .getElements()
+    .getNonDeletedElements()
     .map((element) => {
       if (!isBindingElement(element, false)) {
         return null;

src/element/showSelectedShapeActions.ts

@@ -7,9 +7,10 @@ export const showSelectedShapeActions = (
   elements: readonly NonDeletedExcalidrawElement[],
 ) =>
   Boolean(
-    !appState.viewModeEnabled &&
+    (!appState.viewModeEnabled &&
+      appState.activeTool.type !== "custom" &&
       (appState.editingElement ||
-        getSelectedElements(elements, appState).length ||
         (appState.activeTool.type !== "selection" &&
-          appState.activeTool.type !== "eraser")),
+          appState.activeTool.type !== "eraser"))) ||
+      getSelectedElements(elements, appState).length,
   );

src/element/textWysiwyg.test.tsx

@@ -115,6 +115,9 @@ describe("textWysiwyg", () => {
         height: textSize,
         containerId: container.id,
       });
+      mutateElement(container, {
+        boundElements: [{ type: "text", id: text.id }],
+      });
 
       h.elements = [container, text];
 

src/excalidraw-app/app_constants.ts

@@ -6,6 +6,7 @@ export const LOAD_IMAGES_TIMEOUT = 500;
 export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 export const SYNC_BROWSER_TABS_TIMEOUT = 50;
 export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
+export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
 
 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)

src/excalidraw-app/collab/Collab.tsx

@@ -8,10 +8,12 @@ import {
   ExcalidrawElement,
   InitializedExcalidrawImageElement,
 } from "../../element/types";
-import { getSceneVersion } from "../../packages/excalidraw/index";
+import {
+  getSceneVersion,
+  restoreElements,
+} from "../../packages/excalidraw/index";
 import { Collaborator, Gesture } from "../../types";
 import {
-  getFrame,
   preventUnload,
   resolvablePromise,
   withBatchedUpdates,
@@ -30,7 +32,9 @@ import {
   generateCollaborationLinkData,
   getCollaborationLink,
   getCollabServer,
+  getSyncableElements,
   SocketUpdateDataSource,
+  SyncableExcalidrawElement,
 } from "../data";
 import {
   isSavedToFirebase,
@@ -45,12 +49,9 @@ import {
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
-import { createInverseContext } from "../../createInverseContext";
 import { t } from "../../i18n";
 import { UserIdleState } from "../../types";
 import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
-import { trackEvent } from "../../analytics";
-import { isInvisiblySmallElement } from "../../element";
 import {
   encodeFilesForUpload,
   FileManager,
@@ -69,52 +70,45 @@ import {
 import { decryptData } from "../../data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
+import { atom, useAtom } from "jotai";
+import { jotaiStore } from "../../jotai";
+
+export const collabAPIAtom = atom<CollabAPI | null>(null);
+export const collabDialogShownAtom = atom(false);
+export const isCollaboratingAtom = atom(false);
 
 interface CollabState {
-  modalIsShown: boolean;
   errorMessage: string;
   username: string;
-  userState: UserIdleState;
   activeRoomLink: string;
 }
 
-type CollabInstance = InstanceType<typeof CollabWrapper>;
+type CollabInstance = InstanceType<typeof Collab>;
 
 export interface CollabAPI {
   /** function so that we can access the latest value from stale callbacks */
   isCollaborating: () => boolean;
-  username: CollabState["username"];
-  userState: CollabState["userState"];
   onPointerUpdate: CollabInstance["onPointerUpdate"];
-  initializeSocketClient: CollabInstance["initializeSocketClient"];
-  onCollabButtonClick: CollabInstance["onCollabButtonClick"];
+  startCollaboration: CollabInstance["startCollaboration"];
+  stopCollaboration: CollabInstance["stopCollaboration"];
   syncElements: CollabInstance["syncElements"];
   fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
   setUsername: (username: string) => void;
 }
 
-interface Props {
+interface PublicProps {
   excalidrawAPI: ExcalidrawImperativeAPI;
-  onRoomClose?: () => void;
 }
 
-const {
-  Context: CollabContext,
-  Consumer: CollabContextConsumer,
-  Provider: CollabContextProvider,
-} = createInverseContext<{ api: CollabAPI | null }>({ api: null });
+type Props = PublicProps & { modalIsShown: boolean };
 
-export { CollabContext, CollabContextConsumer };
-
-class CollabWrapper extends PureComponent<Props, CollabState> {
+class Collab extends PureComponent<Props, CollabState> {
   portal: Portal;
   fileManager: FileManager;
   excalidrawAPI: Props["excalidrawAPI"];
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
 
-  // marked as private to ensure we don't change it outside this class
-  private _isCollaborating: boolean = false;
   private socketInitializationTimer?: number;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
   private collaborators = new Map<string, Collaborator>();
@@ -122,10 +116,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      modalIsShown: false,
       errorMessage: "",
       username: importUsernameFromLocalStorage() || "",
-      userState: UserIdleState.ACTIVE,
       activeRoomLink: "",
     };
     this.portal = new Portal(this);
@@ -163,6 +155,18 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     window.addEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
     window.addEventListener(EVENT.UNLOAD, this.onUnload);
 
+    const collabAPI: CollabAPI = {
+      isCollaborating: this.isCollaborating,
+      onPointerUpdate: this.onPointerUpdate,
+      startCollaboration: this.startCollaboration,
+      syncElements: this.syncElements,
+      fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
+      stopCollaboration: this.stopCollaboration,
+      setUsername: this.setUsername,
+    };
+
+    jotaiStore.set(collabAPIAtom, collabAPI);
+
     if (
       process.env.NODE_ENV === ENV.TEST ||
       process.env.NODE_ENV === ENV.DEVELOPMENT
@@ -195,19 +199,23 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     }
   }
 
-  isCollaborating = () => this._isCollaborating;
+  isCollaborating = () => jotaiStore.get(isCollaboratingAtom)!;
+
+  private setIsCollaborating = (isCollaborating: boolean) => {
+    jotaiStore.set(isCollaboratingAtom, isCollaborating);
+  };
 
   private onUnload = () => {
     this.destroySocketClient({ isUnload: true });
   };
 
   private beforeUnload = withBatchedUpdates((event: BeforeUnloadEvent) => {
-    const syncableElements = this.getSyncableElements(
+    const syncableElements = getSyncableElements(
       this.getSceneElementsIncludingDeleted(),
     );
 
     if (
-      this._isCollaborating &&
+      this.isCollaborating() &&
       (this.fileManager.shouldPreventUnload(syncableElements) ||
         !isSavedToFirebase(this.portal, syncableElements))
     ) {
@@ -232,7 +240,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   });
 
   saveCollabRoomToFirebase = async (
-    syncableElements: readonly ExcalidrawElement[],
+    syncableElements: readonly SyncableExcalidrawElement[],
   ) => {
     try {
       const savedData = await saveToFirebase(
@@ -251,31 +259,36 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     }
   };
 
-  openPortal = async () => {
-    trackEvent("share", "room creation", `ui (${getFrame()})`);
-    return this.initializeSocketClient(null);
-  };
-
-  closePortal = () => {
+  stopCollaboration = (keepRemoteState = true) => {
     this.queueBroadcastAllElements.cancel();
     this.queueSaveToFirebase.cancel();
     this.loadImageFiles.cancel();
 
     this.saveCollabRoomToFirebase(
-      this.getSyncableElements(
+      getSyncableElements(
         this.excalidrawAPI.getSceneElementsIncludingDeleted(),
       ),
     );
-    if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
+
+    if (this.portal.socket && this.fallbackInitializationHandler) {
+      this.portal.socket.off(
+        "connect_error",
+        this.fallbackInitializationHandler,
+      );
+    }
+
+    if (!keepRemoteState) {
+      LocalData.fileStorage.reset();
+      this.destroySocketClient();
+    } else if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
       // hack to ensure that we prefer we disregard any new browser state
       // that could have been saved in other tabs while we were collaborating
       resetBrowserStateVersions();
 
       window.history.pushState({}, APP_NAME, window.location.origin);
       this.destroySocketClient();
-      trackEvent("share", "room closed");
 
-      this.props.onRoomClose?.();
+      LocalData.fileStorage.reset();
 
       const elements = this.excalidrawAPI
         .getSceneElementsIncludingDeleted()
@@ -294,20 +307,20 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   private destroySocketClient = (opts?: { isUnload: boolean }) => {
+    this.lastBroadcastedOrReceivedSceneVersion = -1;
+    this.portal.close();
+    this.fileManager.reset();
     if (!opts?.isUnload) {
+      this.setIsCollaborating(false);
+      this.setState({
+        activeRoomLink: "",
+      });
       this.collaborators = new Map();
       this.excalidrawAPI.updateScene({
         collaborators: this.collaborators,
       });
-      this.setState({
-        activeRoomLink: "",
-      });
-      this._isCollaborating = false;
       LocalData.resumeSave("collaboration");
     }
-    this.lastBroadcastedOrReceivedSceneVersion = -1;
-    this.portal.close();
-    this.fileManager.reset();
   };
 
   private fetchImageFilesFromFirebase = async (scene: {
@@ -348,7 +361,9 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     }
   };
 
-  private initializeSocketClient = async (
+  private fallbackInitializationHandler: null | (() => any) = null;
+
+  startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
   ): Promise<ImportedDataState | null> => {
     if (this.portal.socket) {
@@ -371,13 +386,23 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
     const scenePromise = resolvablePromise<ImportedDataState | null>();
 
-    this._isCollaborating = true;
+    this.setIsCollaborating(true);
     LocalData.pauseSave("collaboration");
 
     const { default: socketIOClient } = await import(
       /* webpackChunkName: "socketIoClient" */ "socket.io-client"
     );
 
+    const fallbackInitializationHandler = () => {
+      this.initializeRoom({
+        roomLinkData: existingRoomLinkData,
+        fetchScene: true,
+      }).then((scene) => {
+        scenePromise.resolve(scene);
+      });
+    };
+    this.fallbackInitializationHandler = fallbackInitializationHandler;
+
     try {
       const socketServerData = await getCollabServer();
 
@@ -390,6 +415,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         roomId,
         roomKey,
       );
+
+      this.portal.socket.once("connect_error", fallbackInitializationHandler);
     } catch (error: any) {
       console.error(error);
       this.setState({ errorMessage: error.message });
@@ -413,18 +440,15 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         commitToHistory: true,
       });
 
-      this.saveCollabRoomToFirebase(this.getSyncableElements(elements));
+      this.saveCollabRoomToFirebase(getSyncableElements(elements));
     }
 
     // fallback in case you're not alone in the room but still don't receive
     // initial SCENE_INIT message
-    this.socketInitializationTimer = window.setTimeout(() => {
-      this.initializeRoom({
-        roomLinkData: existingRoomLinkData,
-        fetchScene: true,
-      });
-      scenePromise.resolve(null);
-    }, INITIAL_SCENE_UPDATE_TIMEOUT);
+    this.socketInitializationTimer = window.setTimeout(
+      fallbackInitializationHandler,
+      INITIAL_SCENE_UPDATE_TIMEOUT,
+    );
 
     // All socket listeners are moving to Portal
     this.portal.socket.on(
@@ -529,6 +553,12 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       }
     | { fetchScene: false; roomLinkData?: null }) => {
     clearTimeout(this.socketInitializationTimer!);
+    if (this.portal.socket && this.fallbackInitializationHandler) {
+      this.portal.socket.off(
+        "connect_error",
+        this.fallbackInitializationHandler,
+      );
+    }
     if (fetchScene && roomLinkData && this.portal.socket) {
       this.excalidrawAPI.resetScene();
 
@@ -566,6 +596,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     const localElements = this.getSceneElementsIncludingDeleted();
     const appState = this.excalidrawAPI.getAppState();
 
+    remoteElements = restoreElements(remoteElements, null);
+
     const reconciledElements = _reconcileElements(
       localElements,
       remoteElements,
@@ -671,19 +703,17 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   setCollaborators(sockets: string[]) {
-    this.setState((state) => {
-      const collaborators: InstanceType<typeof CollabWrapper>["collaborators"] =
-        new Map();
-      for (const socketId of sockets) {
-        if (this.collaborators.has(socketId)) {
-          collaborators.set(socketId, this.collaborators.get(socketId)!);
-        } else {
-          collaborators.set(socketId, {});
-        }
+    const collaborators: InstanceType<typeof Collab>["collaborators"] =
+      new Map();
+    for (const socketId of sockets) {
+      if (this.collaborators.has(socketId)) {
+        collaborators.set(socketId, this.collaborators.get(socketId)!);
+      } else {
+        collaborators.set(socketId, {});
       }
-      this.collaborators = collaborators;
-      this.excalidrawAPI.updateScene({ collaborators });
-    });
+    }
+    this.collaborators = collaborators;
+    this.excalidrawAPI.updateScene({ collaborators });
   }
 
   public setLastBroadcastedOrReceivedSceneVersion = (version: number) => {
@@ -712,7 +742,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   );
 
   onIdleStateChange = (userState: UserIdleState) => {
-    this.setState({ userState });
     this.portal.broadcastIdleChange(userState);
   };
 
@@ -746,18 +775,22 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.setLastBroadcastedOrReceivedSceneVersion(newVersion);
   }, SYNC_FULL_SCENE_INTERVAL_MS);
 
-  queueSaveToFirebase = throttle(() => {
-    if (this.portal.socketInitialized) {
-      this.saveCollabRoomToFirebase(
-        this.getSyncableElements(
-          this.excalidrawAPI.getSceneElementsIncludingDeleted(),
-        ),
-      );
-    }
-  }, SYNC_FULL_SCENE_INTERVAL_MS);
+  queueSaveToFirebase = throttle(
+    () => {
+      if (this.portal.socketInitialized) {
+        this.saveCollabRoomToFirebase(
+          getSyncableElements(
+            this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+          ),
+        );
+      }
+    },
+    SYNC_FULL_SCENE_INTERVAL_MS,
+    { leading: false },
+  );
 
   handleClose = () => {
-    this.setState({ modalIsShown: false });
+    jotaiStore.set(collabDialogShownAtom, false);
   };
 
   setUsername = (username: string) => {
@@ -769,42 +802,10 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     saveUsernameToLocalStorage(username);
   };
 
-  onCollabButtonClick = () => {
-    this.setState({
-      modalIsShown: true,
-    });
-  };
-
-  isSyncableElement = (element: ExcalidrawElement) => {
-    return element.isDeleted || !isInvisiblySmallElement(element);
-  };
-
-  getSyncableElements = (elements: readonly ExcalidrawElement[]) =>
-    elements.filter((element) => this.isSyncableElement(element));
-
-  /** PRIVATE. Use `this.getContextValue()` instead. */
-  private contextValue: CollabAPI | null = null;
-
-  /** Getter of context value. Returned object is stable. */
-  getContextValue = (): CollabAPI => {
-    if (!this.contextValue) {
-      this.contextValue = {} as CollabAPI;
-    }
-
-    this.contextValue.isCollaborating = this.isCollaborating;
-    this.contextValue.username = this.state.username;
-    this.contextValue.onPointerUpdate = this.onPointerUpdate;
-    this.contextValue.initializeSocketClient = this.initializeSocketClient;
-    this.contextValue.onCollabButtonClick = this.onCollabButtonClick;
-    this.contextValue.syncElements = this.syncElements;
-    this.contextValue.fetchImageFilesFromFirebase =
-      this.fetchImageFilesFromFirebase;
-    this.contextValue.setUsername = this.setUsername;
-    return this.contextValue;
-  };
-
   render() {
-    const { modalIsShown, username, errorMessage, activeRoomLink } = this.state;
+    const { username, errorMessage, activeRoomLink } = this.state;
+
+    const { modalIsShown } = this.props;
 
     return (
       <>
@@ -814,8 +815,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             activeRoomLink={activeRoomLink}
             username={username}
             onUsernameChange={this.onUsernameChange}
-            onRoomCreate={this.openPortal}
-            onRoomDestroy={this.closePortal}
+            onRoomCreate={() => this.startCollaboration(null)}
+            onRoomDestroy={this.stopCollaboration}
             setErrorMessage={(errorMessage) => {
               this.setState({ errorMessage });
             }}
@@ -828,11 +829,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             onClose={() => this.setState({ errorMessage: "" })}
           />
         )}
-        <CollabContextProvider
-          value={{
-            api: this.getContextValue(),
-          }}
-        />
       </>
     );
   }
@@ -840,7 +836,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
 declare global {
   interface Window {
-    collab: InstanceType<typeof CollabWrapper>;
+    collab: InstanceType<typeof Collab>;
   }
 }
 
@@ -851,4 +847,11 @@ if (
   window.collab = window.collab || ({} as Window["collab"]);
 }
 
-export default CollabWrapper;
+const _Collab: React.FC<PublicProps> = (props) => {
+  const [collabDialogShown] = useAtom(collabDialogShownAtom);
+  return <Collab {...props} modalIsShown={collabDialogShown} />;
+};
+
+export default _Collab;
+
+export type TCollabClass = Collab;

src/excalidraw-app/collab/Portal.tsx

@@ -1,6 +1,10 @@
-import { SocketUpdateData, SocketUpdateDataSource } from "../data";
+import {
+  isSyncableElement,
+  SocketUpdateData,
+  SocketUpdateDataSource,
+} from "../data";
 
-import CollabWrapper from "./CollabWrapper";
+import { TCollabClass } from "./Collab";
 
 import { ExcalidrawElement } from "../../element/types";
 import {
@@ -16,14 +20,14 @@ import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../data/encryption";
 
 class Portal {
-  collab: CollabWrapper;
+  collab: TCollabClass;
   socket: SocketIOClient.Socket | null = null;
   socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
   roomId: string | null = null;
   roomKey: string | null = null;
   broadcastedElementVersions: Map<string, number> = new Map();
 
-  constructor(collab: CollabWrapper) {
+  constructor(collab: TCollabClass) {
     this.collab = collab;
   }
 
@@ -143,7 +147,7 @@ class Portal {
             !this.broadcastedElementVersions.has(element.id) ||
             element.version >
               this.broadcastedElementVersions.get(element.id)!) &&
-          this.collab.isSyncableElement(element)
+          isSyncableElement(element)
         ) {
           acc.push({
             ...element,

src/excalidraw-app/collab/RoomDialog.tsx

@@ -14,6 +14,8 @@ import { t } from "../../i18n";
 import "./RoomDialog.scss";
 import Stack from "../../components/Stack";
 import { AppState } from "../../types";
+import { trackEvent } from "../../analytics";
+import { getFrame } from "../../utils";
 
 const getShareIcon = () => {
   const navigator = window.navigator as any;
@@ -95,7 +97,10 @@ const RoomDialog = ({
                 title={t("roomDialog.button_startSession")}
                 aria-label={t("roomDialog.button_startSession")}
                 showAriaLabel={true}
-                onClick={onRoomCreate}
+                onClick={() => {
+                  trackEvent("share", "room creation", `ui (${getFrame()})`);
+                  onRoomCreate();
+                }}
               />
             </div>
           </>
@@ -160,7 +165,10 @@ const RoomDialog = ({
                 title={t("roomDialog.button_stopSession")}
                 aria-label={t("roomDialog.button_stopSession")}
                 showAriaLabel={true}
-                onClick={onRoomDestroy}
+                onClick={() => {
+                  trackEvent("share", "room closed");
+                  onRoomDestroy();
+                }}
               />
             </div>
           </>

src/excalidraw-app/data/firebase.ts

@@ -13,6 +13,7 @@ import { decompressData } from "../../data/encode";
 import { encryptData, decryptData } from "../../data/encryption";
 import { MIME_TYPES } from "../../constants";
 import { reconcileElements } from "../collab/reconciliation";
+import { getSyncableElements, SyncableExcalidrawElement } from ".";
 
 // private
 // -----------------------------------------------------------------------------
@@ -127,7 +128,18 @@ const decryptElements = async (
   return JSON.parse(decodedData);
 };
 
-const firebaseSceneVersionCache = new WeakMap<SocketIOClient.Socket, number>();
+class FirebaseSceneVersionCache {
+  private static cache = new WeakMap<SocketIOClient.Socket, number>();
+  static get = (socket: SocketIOClient.Socket) => {
+    return FirebaseSceneVersionCache.cache.get(socket);
+  };
+  static set = (
+    socket: SocketIOClient.Socket,
+    elements: readonly SyncableExcalidrawElement[],
+  ) => {
+    FirebaseSceneVersionCache.cache.set(socket, getSceneVersion(elements));
+  };
+}
 
 export const isSavedToFirebase = (
   portal: Portal,
@@ -136,7 +148,7 @@ export const isSavedToFirebase = (
   if (portal.socket && portal.roomId && portal.roomKey) {
     const sceneVersion = getSceneVersion(elements);
 
-    return firebaseSceneVersionCache.get(portal.socket) === sceneVersion;
+    return FirebaseSceneVersionCache.get(portal.socket) === sceneVersion;
   }
   // if no room exists, consider the room saved so that we don't unnecessarily
   // prevent unload (there's nothing we could do at that point anyway)
@@ -181,7 +193,7 @@ export const saveFilesToFirebase = async ({
 
 const createFirebaseSceneDocument = async (
   firebase: ResolutionType<typeof loadFirestore>,
-  elements: readonly ExcalidrawElement[],
+  elements: readonly SyncableExcalidrawElement[],
   roomKey: string,
 ) => {
   const sceneVersion = getSceneVersion(elements);
@@ -197,7 +209,7 @@ const createFirebaseSceneDocument = async (
 
 export const saveToFirebase = async (
   portal: Portal,
-  elements: readonly ExcalidrawElement[],
+  elements: readonly SyncableExcalidrawElement[],
   appState: AppState,
 ) => {
   const { roomId, roomKey, socket } = portal;
@@ -229,18 +241,18 @@ export const saveToFirebase = async (
       transaction.set(docRef, sceneDocument);
 
       return {
-        sceneVersion: sceneDocument.sceneVersion,
+        elements,
         reconciledElements: null,
       };
     }
 
     const prevDocData = snapshot.data() as FirebaseStoredScene;
-    const prevElements = await decryptElements(prevDocData, roomKey);
+    const prevElements = getSyncableElements(
+      await decryptElements(prevDocData, roomKey),
+    );
 
-    const reconciledElements = reconcileElements(
-      elements,
-      prevElements,
-      appState,
+    const reconciledElements = getSyncableElements(
+      reconcileElements(elements, prevElements, appState),
     );
 
     const sceneDocument = await createFirebaseSceneDocument(
@@ -251,14 +263,14 @@ export const saveToFirebase = async (
 
     transaction.update(docRef, sceneDocument);
     return {
+      elements,
       reconciledElements,
-      sceneVersion: sceneDocument.sceneVersion,
     };
   });
 
-  firebaseSceneVersionCache.set(socket, savedData.sceneVersion);
+  FirebaseSceneVersionCache.set(socket, savedData.elements);
 
-  return savedData;
+  return { reconciledElements: savedData.reconciledElements };
 };
 
 export const loadFromFirebase = async (
@@ -275,10 +287,12 @@ export const loadFromFirebase = async (
     return null;
   }
   const storedScene = doc.data() as FirebaseStoredScene;
-  const elements = await decryptElements(storedScene, roomKey);
+  const elements = getSyncableElements(
+    await decryptElements(storedScene, roomKey),
+  );
 
   if (socket) {
-    firebaseSceneVersionCache.set(socket, getSceneVersion(elements));
+    FirebaseSceneVersionCache.set(socket, elements);
   }
 
   return restoreElements(elements, null);

src/excalidraw-app/data/index.ts

@@ -7,6 +7,7 @@ import {
 import { serializeAsJSON } from "../../data/json";
 import { restore } from "../../data/restore";
 import { ImportedDataState } from "../../data/types";
+import { isInvisiblySmallElement } from "../../element/sizeHelpers";
 import { isInitializedImageElement } from "../../element/typeChecks";
 import { ExcalidrawElement, FileId } from "../../element/types";
 import { t } from "../../i18n";
@@ -17,10 +18,35 @@ import {
   UserIdleState,
 } from "../../types";
 import { bytesToHexString } from "../../utils";
-import { FILE_UPLOAD_MAX_BYTES, ROOM_ID_BYTES } from "../app_constants";
+import {
+  DELETED_ELEMENT_TIMEOUT,
+  FILE_UPLOAD_MAX_BYTES,
+  ROOM_ID_BYTES,
+} from "../app_constants";
 import { encodeFilesForUpload } from "./FileManager";
 import { saveFilesToFirebase } from "./firebase";
 
+export type SyncableExcalidrawElement = ExcalidrawElement & {
+  _brand: "SyncableExcalidrawElement";
+};
+
+export const isSyncableElement = (
+  element: ExcalidrawElement,
+): element is SyncableExcalidrawElement => {
+  if (element.isDeleted) {
+    if (element.updated > Date.now() - DELETED_ELEMENT_TIMEOUT) {
+      return true;
+    }
+    return false;
+  }
+  return !isInvisiblySmallElement(element);
+};
+
+export const getSyncableElements = (elements: readonly ExcalidrawElement[]) =>
+  elements.filter((element) =>
+    isSyncableElement(element),
+  ) as SyncableExcalidrawElement[];
+
 const BACKEND_V2_GET = process.env.REACT_APP_BACKEND_V2_GET_URL;
 const BACKEND_V2_POST = process.env.REACT_APP_BACKEND_V2_POST_URL;
 
@@ -108,9 +134,16 @@ export type SocketUpdateData =
     _brand: "socketUpdateData";
   };
 
+const RE_COLLAB_LINK = /^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/;
+
+export const isCollaborationLink = (link: string) => {
+  const hash = new URL(link).hash;
+  return RE_COLLAB_LINK.test(hash);
+};
+
 export const getCollaborationLinkData = (link: string) => {
   const hash = new URL(link).hash;
-  const match = hash.match(/^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/);
+  const match = hash.match(RE_COLLAB_LINK);
   if (match && match[2].length !== 22) {
     window.alert(t("alerts.invalidEncryptionKey"));
     return null;

src/excalidraw-app/index.scss

@@ -32,3 +32,25 @@
     pointer-events: none;
   }
 }
+
+.plus-button {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  align-items: center;
+  border: 1px solid var(--color-primary);
+  padding: 0.6em 0.7em;
+  border-radius: var(--space-factor);
+  color: var(--color-primary) !important;
+  margin: 8px;
+  text-decoration: none !important;
+
+  &:hover {
+    background-color: var(--color-primary);
+    color: white !important;
+  }
+
+  &:active {
+    background-color: var(--color-primary-darker);
+  }
+}

src/excalidraw-app/index.tsx

@@ -1,14 +1,14 @@
 import LanguageDetector from "i18next-browser-languagedetector";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import {
   APP_NAME,
+  COOKIES,
   EVENT,
   TITLE_TIMEOUT,
-  URL_HASH_KEYS,
   VERSION_TIMEOUT,
 } from "../constants";
 import { loadFromBlob } from "../data/blob";
@@ -18,7 +18,7 @@ import {
   NonDeletedExcalidrawElement,
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
-import { Language, t } from "../i18n";
+import { t } from "../i18n";
 import {
   Excalidraw,
   defaultLang,
@@ -45,20 +45,26 @@ import {
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
-import CollabWrapper, {
+import Collab, {
   CollabAPI,
-  CollabContext,
-  CollabContextConsumer,
-} from "./collab/CollabWrapper";
+  collabAPIAtom,
+  collabDialogShownAtom,
+  isCollaboratingAtom,
+} from "./collab/Collab";
 import { LanguageList } from "./components/LanguageList";
-import { exportToBackend, getCollaborationLinkData, loadScene } from "./data";
+import {
+  exportToBackend,
+  getCollaborationLinkData,
+  isCollaborationLink,
+  loadScene,
+} from "./data";
 import {
   getLibraryItemsFromStorage,
   importFromLocalStorage,
   importUsernameFromLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
-import { restoreAppState, RestoredDataState } from "../data/restore";
+import { restore, restoreAppState, RestoredDataState } from "../data/restore";
 import { Tooltip } from "../components/Tooltip";
 import { shield } from "../components/icons";
 
@@ -72,14 +78,18 @@ import { loadFilesFromFirebase } from "./data/firebase";
 import { LocalData } from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
 import clsx from "clsx";
+import { Provider, useAtom } from "jotai";
+import { jotaiStore, useAtomWithInitialValue } from "../jotai";
+import { reconcileElements } from "./collab/reconciliation";
+import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
+
+const isExcalidrawPlusSignedUser = document.cookie.includes(
+  COOKIES.AUTH_STATE_COOKIE,
+);
 
 const languageDetector = new LanguageDetector();
 languageDetector.init({
-  languageUtils: {
-    formatLanguageCode: (langCode: Language["code"]) => langCode,
-    isWhitelisted: () => true,
-  },
-  checkWhitelist: false,
+  languageUtils: {},
 });
 
 const initializeScene = async (opts: {
@@ -169,7 +179,7 @@ const initializeScene = async (opts: {
 
   if (roomLinkData) {
     return {
-      scene: await opts.collabAPI.initializeSocketClient(roomLinkData),
+      scene: await opts.collabAPI.startCollaboration(roomLinkData),
       isExternalScene: true,
       id: roomLinkData.roomId,
       key: roomLinkData.roomKey,
@@ -187,7 +197,7 @@ const initializeScene = async (opts: {
   return { scene: null, isExternalScene: false };
 };
 
-const PlusLinkJSX = (
+const PlusLPLinkJSX = (
   <p style={{ direction: "ltr", unicodeBidi: "embed" }}>
     Introducing Excalidraw+
     <br />
@@ -201,6 +211,17 @@ const PlusLinkJSX = (
   </p>
 );
 
+const PlusAppLinkJSX = (
+  <a
+    href={`${process.env.REACT_APP_PLUS_APP}/#excalidraw-redirect`}
+    target="_blank"
+    rel="noreferrer"
+    className="plus-button"
+  >
+    Go to Excalidraw+
+  </a>
+);
+
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   let currentLangCode = languageDetector.detect() || defaultLang.code;
@@ -230,7 +251,16 @@ const ExcalidrawWrapper = () => {
   const [excalidrawAPI, excalidrawRefCallback] =
     useCallbackRefState<ExcalidrawImperativeAPI>();
 
-  const collabAPI = useContext(CollabContext)?.api;
+  const [collabAPI] = useAtom(collabAPIAtom);
+  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
+  const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
+    return isCollaborationLink(window.location.href);
+  });
+
+  useHandleLibrary({
+    excalidrawAPI,
+    getInitialLibraryItems: getLibraryItemsFromStorage,
+  });
 
   useEffect(() => {
     if (!collabAPI || !excalidrawAPI) {
@@ -301,33 +331,46 @@ const ExcalidrawWrapper = () => {
           LocalData.fileStorage.clearObsoleteFiles({ currentFileIds: fileIds });
         }
       }
-
-      data.scene.libraryItems = getLibraryItemsFromStorage();
     };
 
-    initializeScene({ collabAPI }).then((data) => {
+    initializeScene({ collabAPI }).then(async (data) => {
       loadImages(data, /* isInitialLoad */ true);
-      initialStatePromiseRef.current.promise.resolve(data.scene);
+
+      initialStatePromiseRef.current.promise.resolve({
+        ...data.scene,
+        // at this point the state may have already been updated (e.g. when
+        // collaborating, we may have received updates from other clients)
+        appState: restoreAppState(
+          data.scene?.appState,
+          excalidrawAPI.getAppState(),
+        ),
+        elements: reconcileElements(
+          data.scene?.elements || [],
+          excalidrawAPI.getSceneElementsIncludingDeleted(),
+          excalidrawAPI.getAppState(),
+        ),
+      });
     });
 
-    const onHashChange = (event: HashChangeEvent) => {
+    const onHashChange = async (event: HashChangeEvent) => {
       event.preventDefault();
-      const hash = new URLSearchParams(window.location.hash.slice(1));
-      const libraryUrl = hash.get(URL_HASH_KEYS.addLibrary);
-      if (libraryUrl) {
-        // If hash changed and it contains library url, import it and replace
-        // the url to its previous state (important in case of collaboration
-        // and similar).
-        // Using history API won't trigger another hashchange.
-        window.history.replaceState({}, "", event.oldURL);
-        excalidrawAPI.importLibrary(libraryUrl, hash.get("token"));
-      } else {
+      const libraryUrlTokens = parseLibraryTokensFromUrl();
+      if (!libraryUrlTokens) {
+        if (
+          collabAPI.isCollaborating() &&
+          !isCollaborationLink(window.location.href)
+        ) {
+          collabAPI.stopCollaboration(false);
+        }
+        excalidrawAPI.updateScene({ appState: { isLoading: true } });
+
         initializeScene({ collabAPI }).then((data) => {
           loadImages(data);
           if (data.scene) {
             excalidrawAPI.updateScene({
               ...data.scene,
-              appState: restoreAppState(data.scene.appState, null),
+              ...restore(data.scene, null, null),
+              commitToHistory: true,
             });
           }
         });
@@ -355,6 +398,8 @@ const ExcalidrawWrapper = () => {
           setLangCode(langCode);
           excalidrawAPI.updateScene({
             ...localDataState,
+          });
+          excalidrawAPI.updateLibrary({
             libraryItems: getLibraryItemsFromStorage(),
           });
           collabAPI.setUsername(username || "");
@@ -466,19 +511,17 @@ const ExcalidrawWrapper = () => {
         if (excalidrawAPI) {
           let didChange = false;
 
-          let pendingImageElement = appState.pendingImageElement;
           const elements = excalidrawAPI
             .getSceneElementsIncludingDeleted()
             .map((element) => {
               if (
                 LocalData.fileStorage.shouldUpdateImageElementStatus(element)
               ) {
-                didChange = true;
-                const newEl = newElementWith(element, { status: "saved" });
-                if (pendingImageElement === element) {
-                  pendingImageElement = newEl;
+                const newElement = newElementWith(element, { status: "saved" });
+                if (newElement !== element) {
+                  didChange = true;
                 }
-                return newEl;
+                return newElement;
               }
               return element;
             });
@@ -486,9 +529,6 @@ const ExcalidrawWrapper = () => {
           if (didChange) {
             excalidrawAPI.updateScene({
               elements,
-              appState: {
-                pendingImageElement,
-              },
             });
           }
         }
@@ -532,17 +572,16 @@ const ExcalidrawWrapper = () => {
       if (isMobile) {
         return null;
       }
+
       return (
         <div
           style={{
-            width: "24ch",
+            width: isExcalidrawPlusSignedUser ? "21ch" : "23ch",
             fontSize: "0.7em",
             textAlign: "center",
           }}
         >
-          {/* <GitHubCorner theme={appState.theme} dir={document.dir} /> */}
-          {/* FIXME remove after 2021-05-20 */}
-          {PlusLinkJSX}
+          {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
         </div>
       );
     },
@@ -594,12 +633,14 @@ const ExcalidrawWrapper = () => {
                 marginTop: isTinyDevice ? 16 : undefined,
                 marginLeft: "auto",
                 marginRight: isTinyDevice ? "auto" : undefined,
-                padding: "4px 2px",
-                border: "1px dashed #aaa",
+                padding: isExcalidrawPlusSignedUser ? undefined : "4px 2px",
+                border: isExcalidrawPlusSignedUser
+                  ? undefined
+                  : "1px dashed #aaa",
                 borderRadius: 12,
               }}
             >
-              {PlusLinkJSX}
+              {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
             </div>
           </div>
         );
@@ -631,23 +672,19 @@ const ExcalidrawWrapper = () => {
     localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
   };
 
-  const onRoomClose = useCallback(() => {
-    LocalData.fileStorage.reset();
-  }, []);
-
   return (
     <div
       style={{ height: "100%" }}
       className={clsx("excalidraw-app", {
-        "is-collaborating": collabAPI?.isCollaborating(),
+        "is-collaborating": isCollaborating,
       })}
     >
       <Excalidraw
         ref={excalidrawRefCallback}
         onChange={onChange}
         initialData={initialStatePromiseRef.current.promise}
-        onCollabButtonClick={collabAPI?.onCollabButtonClick}
-        isCollaborating={collabAPI?.isCollaborating()}
+        onCollabButtonClick={() => setCollabDialogShown(true)}
+        isCollaborating={isCollaborating}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         UIOptions={{
           canvasActions: {
@@ -681,12 +718,7 @@ const ExcalidrawWrapper = () => {
         onLibraryChange={onLibraryChange}
         autoFocus={true}
       />
-      {excalidrawAPI && (
-        <CollabWrapper
-          excalidrawAPI={excalidrawAPI}
-          onRoomClose={onRoomClose}
-        />
-      )}
+      {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (
         <ErrorDialog
           message={errorMessage}
@@ -700,9 +732,9 @@ const ExcalidrawWrapper = () => {
 const ExcalidrawApp = () => {
   return (
     <TopErrorBoundary>
-      <CollabContextConsumer>
+      <Provider unstable_createStore={() => jotaiStore}>
         <ExcalidrawWrapper />
-      </CollabContextConsumer>
+      </Provider>
     </TopErrorBoundary>
   );
 };

src/global.d.ts

@@ -35,6 +35,8 @@ type Mutable<T> = {
   -readonly [P in keyof T]: T[P];
 };
 
+type ValueOf<T> = T[keyof T];
+
 type Merge<M, N> = Omit<M, keyof N> & N;
 
 /** utility type to assert that the second type is a subtype of the first type.

src/i18n.ts

@@ -86,7 +86,7 @@ export const setLanguage = async (lang: Language) => {
     currentLangData = {};
   } else {
     currentLangData = await import(
-      /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLang.code}.json`
+      /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
     );
   }
 };

src/jotai.ts

@@ -1,4 +1,27 @@
-import { unstable_createStore } from "jotai";
+import { unstable_createStore, useAtom, WritableAtom } from "jotai";
+import { useLayoutEffect } from "react";
 
 export const jotaiScope = Symbol();
 export const jotaiStore = unstable_createStore();
+
+export const useAtomWithInitialValue = <
+  T extends unknown,
+  A extends WritableAtom<T, T>,
+>(
+  atom: A,
+  initialValue: T | (() => T),
+) => {
+  const [value, setValue] = useAtom(atom);
+
+  useLayoutEffect(() => {
+    if (typeof initialValue === "function") {
+      // @ts-ignore
+      setValue(initialValue());
+    } else {
+      setValue(initialValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [value, setValue] as const;
+};

src/locales/ar-SA.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "إعادة تعيين اللوحة",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "تم تأمين التحميل بتشفير النهاية إلى النهاية، مما يعني أن خادوم Excalidraw والأطراف الثالثة لا يمكنها قراءة المحتوى.",
     "loadSceneOverridePrompt": "تحميل الرسم الخارجي سيحل محل المحتوى الموجود لديك. هل ترغب في المتابعة؟",
     "collabStopOverridePrompt": "إيقاف الجلسة سيؤدي إلى الكتابة فوق رسومك السابقة المخزنة داخليا. هل أنت متأكد؟\n\n(إذا كنت ترغب في الاحتفاظ برسمك المخزن داخليا، ببساطة أغلق علامة تبويب المتصفح بدلاً من ذلك.)",
-    "errorLoadingLibrary": "حصل خطأ أثناء تحميل مكتبة الطرف الثالث.",
     "errorAddingToLibrary": "تعذر إضافة العنصر للمكتبة",
     "errorRemovingFromLibrary": "تعذر إزالة العنصر من المكتبة",
     "confirmAddLibrary": "هذا سيضيف {{numShapes}} شكل إلى مكتبتك. هل أنت متأكد؟",
@@ -189,7 +189,8 @@
     "fileTooBig": "الملف كبير جداً. الحد الأقصى المسموح به للحجم هو {{maxSize}}.",
     "svgImageInsertError": "تعذر إدراج صورة SVG. يبدو أن ترميز SVG غير صحيح.",
     "invalidSVGString": "SVG غير صالح.",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "تحديد",
@@ -341,7 +342,8 @@
       "post": "وهو ما يعني باختصار أنه يمكن لأي شخص استخدامها دون قيود."
     },
     "noteItems": "يجب أن يكون لكل عنصر مكتبة اسمه الخاص حتى يكون قابلاً للتصفية. سيتم تضمين عناصر المكتبة التالية:",
-    "atleastOneLibItem": "يرجى تحديد عنصر مكتبة واحد على الأقل للبدء"
+    "atleastOneLibItem": "يرجى تحديد عنصر مكتبة واحد على الأقل للبدء",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "تم إرسال المكتبة",

src/locales/bg-BG.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Нулиране на платно",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Качването е защитено с криптиране от край до край, което означава, че сървърът Excalidraw и трети страни не могат да четат съдържанието.",
     "loadSceneOverridePrompt": "Зареждането на външна рисунка ще презапише настоящото ви съдържание. Желаете ли да продължите?",
     "collabStopOverridePrompt": "Прекратяването на сесията ще презапише предишната, локално запазена, рисунка. Сигурни ли сте?\n\n(Ако искате да продължите с локалната рисунка, просто затворете таба на браузъра.)",
-    "errorLoadingLibrary": "Възникна грешка при зареждането на външна библиотека.",
     "errorAddingToLibrary": "",
     "errorRemovingFromLibrary": "",
     "confirmAddLibrary": "Ще се добавят {{numShapes}} фигура(и) във вашата библиотека. Сигурни ли сте?",
@@ -189,7 +189,8 @@
     "fileTooBig": "",
     "svgImageInsertError": "",
     "invalidSVGString": "",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Селекция",
@@ -341,7 +342,8 @@
       "post": ""
     },
     "noteItems": "",
-    "atleastOneLibItem": ""
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",

src/locales/bn-BD.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "",
     "loadSceneOverridePrompt": "",
     "collabStopOverridePrompt": "",
-    "errorLoadingLibrary": "",
     "errorAddingToLibrary": "",
     "errorRemovingFromLibrary": "",
     "confirmAddLibrary": "",
@@ -189,7 +189,8 @@
     "fileTooBig": "",
     "svgImageInsertError": "",
     "invalidSVGString": "",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "",
@@ -341,7 +342,8 @@
       "post": ""
     },
     "noteItems": "",
-    "atleastOneLibItem": ""
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",

src/locales/ca-ES.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Neteja el llenç",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "La càrrega s'ha assegurat amb xifratge punta a punta, cosa que significa que el servidor Excalidraw i tercers no poden llegir el contingut.",
     "loadSceneOverridePrompt": "Si carregas aquest dibuix extern, substituirá el que tens. Vols continuar?",
     "collabStopOverridePrompt": "Aturar la sessió provocarà la sobreescriptura del dibuix previ, que hi ha desat en l'emmagatzematge local. N'esteu segur?\n\n(Si voleu conservar el dibuix local, tanqueu la pentanya del navegador en comptes d'aturar la sessió).",
-    "errorLoadingLibrary": "S'ha produït un error en carregar la biblioteca de tercers.",
     "errorAddingToLibrary": "No s'ha pogut afegir l'element a la biblioteca",
     "errorRemovingFromLibrary": "No s'ha pogut eliminar l'element de la biblioteca",
     "confirmAddLibrary": "Això afegirà {{numShapes}} forma(es) a la vostra biblioteca. Estàs segur?",
@@ -189,7 +189,8 @@
     "fileTooBig": "El fitxer és massa gros. La mida màxima permesa és {{maxSize}}.",
     "svgImageInsertError": "No ha estat possible inserir la imatge SVG. Les marques SVG semblen invàlides.",
     "invalidSVGString": "SVG no vàlid.",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Selecció",
@@ -341,7 +342,8 @@
       "post": "que, en resum, vol dir que qualsevol persona pot fer-ne ús sense restriccions."
     },
     "noteItems": "Cada element de la biblioteca ha de tenir el seu propi nom per tal que sigui filtrable. S'hi inclouran els elements següents:",
-    "atleastOneLibItem": "Si us plau, seleccioneu si més no un element de la biblioteca per a començar"
+    "atleastOneLibItem": "Si us plau, seleccioneu si més no un element de la biblioteca per a començar",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",

src/locales/cs-CZ.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "",
     "loadSceneOverridePrompt": "",
     "collabStopOverridePrompt": "",
-    "errorLoadingLibrary": "",
     "errorAddingToLibrary": "",
     "errorRemovingFromLibrary": "",
     "confirmAddLibrary": "",
@@ -189,7 +189,8 @@
     "fileTooBig": "",
     "svgImageInsertError": "",
     "invalidSVGString": "",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Výběr",
@@ -341,7 +342,8 @@
       "post": ""
     },
     "noteItems": "",
-    "atleastOneLibItem": ""
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",

src/locales/da-DK.json

@@ -1,74 +1,74 @@
 {
   "labels": {
     "paste": "Indsæt",
-    "pasteCharts": "",
+    "pasteCharts": "Indsæt diagrammer",
     "selectAll": "Marker alle",
-    "multiSelect": "",
-    "moveCanvas": "",
+    "multiSelect": "Tilføj element til markering",
+    "moveCanvas": "Flyt lærred",
     "cut": "Klip",
     "copy": "Kopier",
     "copyAsPng": "Kopier til klippebord som PNG",
     "copyAsSvg": "Kopier til klippebord som SVG",
-    "copyText": "",
-    "bringForward": "",
-    "sendToBack": "",
-    "bringToFront": "",
-    "sendBackward": "",
+    "copyText": "Kopiér til udklipsholder som tekst",
+    "bringForward": "Flyt fremad",
+    "sendToBack": "Placer bagest",
+    "bringToFront": "Placer forrest",
+    "sendBackward": "Send bagud",
     "delete": "Fjern",
-    "copyStyles": "",
-    "pasteStyles": "",
+    "copyStyles": "Kopier stil",
+    "pasteStyles": "Indsæt stil",
     "stroke": "Linje",
     "background": "Baggrund",
-    "fill": "",
+    "fill": "Udfyld",
     "strokeWidth": "Linjebredde",
-    "strokeStyle": "",
-    "strokeStyle_solid": "",
-    "strokeStyle_dashed": "",
-    "strokeStyle_dotted": "",
-    "sloppiness": "",
-    "opacity": "",
-    "textAlign": "",
-    "edges": "",
-    "sharp": "",
-    "round": "",
-    "arrowheads": "",
-    "arrowhead_none": "",
+    "strokeStyle": "Linjeform",
+    "strokeStyle_solid": "Solid",
+    "strokeStyle_dashed": "Stiplet",
+    "strokeStyle_dotted": "Prikket",
+    "sloppiness": "Sjuskethed",
+    "opacity": "Gennemsigtighed",
+    "textAlign": "Tekstjustering",
+    "edges": "Kanter",
+    "sharp": "Skarp",
+    "round": "Rund",
+    "arrowheads": "Pilehoveder",
+    "arrowhead_none": "Ingen",
     "arrowhead_arrow": "Pil",
-    "arrowhead_bar": "",
-    "arrowhead_dot": "",
-    "arrowhead_triangle": "",
-    "fontSize": "",
-    "fontFamily": "",
-    "onlySelected": "",
-    "withBackground": "",
-    "exportEmbedScene": "",
-    "exportEmbedScene_details": "",
-    "addWatermark": "",
-    "handDrawn": "",
-    "normal": "",
-    "code": "",
-    "small": "",
-    "medium": "",
-    "large": "",
-    "veryLarge": "",
-    "solid": "",
-    "hachure": "",
-    "crossHatch": "",
-    "thin": "",
+    "arrowhead_bar": "Bjælke",
+    "arrowhead_dot": "Prik",
+    "arrowhead_triangle": "Trekant",
+    "fontSize": "Skriftstørrelse",
+    "fontFamily": "Skrifttypefamilie",
+    "onlySelected": "Kun valgte",
+    "withBackground": "Baggrund",
+    "exportEmbedScene": "Indlejr scene",
+    "exportEmbedScene_details": "Scene data vil blive gemt i den eksporterede PNG/SVG-fil, så scenen kan gendannes fra den.\nDette vil øge den eksporterede filstørrelse.",
+    "addWatermark": "Tilføj \"Lavet med Excalidraw\"",
+    "handDrawn": "Hånd-tegnet",
+    "normal": "Normal",
+    "code": "Kode",
+    "small": "Lille",
+    "medium": "Mellem",
+    "large": "Stor",
+    "veryLarge": "Meget stor",
+    "solid": "Solid",
+    "hachure": "Skravering",
+    "crossHatch": "Krydsskravering",
+    "thin": "Tynd",
     "bold": "Fed",
     "left": "Venstre",
     "center": "Centrere",
     "right": "Højre",
     "extraBold": "Extra fed",
-    "architect": "",
-    "artist": "",
-    "cartoonist": "",
+    "architect": "Arkitekt",
+    "artist": "Kunstner",
+    "cartoonist": "Tegneserietegner",
     "fileTitle": "Filnavn",
     "colorPicker": "Farvevælger",
     "canvasColors": "Brugt på lærred",
-    "canvasBackground": "",
-    "drawingCanvas": "",
-    "layers": "",
+    "canvasBackground": "Lærredsbaggrund",
+    "drawingCanvas": "Tegnelærred",
+    "layers": "Lag",
     "actions": "",
     "language": "Sprog",
     "liveCollaboration": "Direkte samarbejde",
@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "",
@@ -132,10 +133,10 @@
     "copyPngToClipboard": "Kopier PNG til klippebord",
     "scale": "",
     "save": "",
-    "saveAs": "",
-    "load": "",
-    "getShareableLink": "",
-    "close": "",
+    "saveAs": "Gem som",
+    "load": "Indlæs",
+    "getShareableLink": "Lav et delbart link",
+    "close": "Luk",
     "selectLanguage": "Vælg sprog",
     "scrollBackToContent": "Scroll tilbage til indhold",
     "zoomIn": "Zoom ind",
@@ -146,33 +147,32 @@
     "edit": "Rediger",
     "undo": "Fortryd",
     "redo": "Gendan",
-    "resetLibrary": "",
+    "resetLibrary": "Nulstil bibliotek",
     "createNewRoom": "Opret nyt rum",
     "fullScreen": "Fuld skærm",
     "darkMode": "Mørk tilstand",
     "lightMode": "Lys baggrund",
-    "zenMode": "",
-    "exitZenMode": "",
-    "cancel": "",
-    "clear": "",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "zenMode": "Zentilstand",
+    "exitZenMode": "Stop zentilstand",
+    "cancel": "Annuller",
+    "clear": "Ryd",
+    "remove": "Fjern",
+    "publishLibrary": "Publicér",
+    "submit": "Gem",
+    "confirm": "Bekræft"
   },
   "alerts": {
-    "clearReset": "",
-    "couldNotCreateShareableLink": "",
-    "couldNotCreateShareableLinkTooBig": "",
-    "couldNotLoadInvalidFile": "",
-    "importBackendFailed": "",
+    "clearReset": "Dette vil rydde hele lærredet. Er du sikker?",
+    "couldNotCreateShareableLink": "Kunne ikke oprette delbart link.",
+    "couldNotCreateShareableLinkTooBig": "Kunne ikke oprette delbart link: scenen er for stor",
+    "couldNotLoadInvalidFile": "Kunne ikke indlæse ugyldig fil",
+    "importBackendFailed": "Import fra backend mislykkedes.",
     "cannotExportEmptyCanvas": "",
     "couldNotCopyToClipboard": "",
     "decryptFailed": "",
     "uploadedSecurly": "",
     "loadSceneOverridePrompt": "",
     "collabStopOverridePrompt": "",
-    "errorLoadingLibrary": "",
     "errorAddingToLibrary": "",
     "errorRemovingFromLibrary": "",
     "confirmAddLibrary": "",
@@ -189,7 +189,8 @@
     "fileTooBig": "",
     "svgImageInsertError": "",
     "invalidSVGString": "",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "",
@@ -341,7 +342,8 @@
       "post": ""
     },
     "noteItems": "",
-    "atleastOneLibItem": ""
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",

src/locales/de-DE.json

@@ -119,7 +119,8 @@
       "unlock": "Entsperren",
       "lockAll": "Alle sperren",
       "unlockAll": "Alle entsperren"
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Der Upload wurde mit Ende-zu-Ende-Verschlüsselung gespeichert. Weder Excalidraw noch Dritte können den Inhalt einsehen.",
     "loadSceneOverridePrompt": "Das Laden einer externen Zeichnung ersetzt den vorhandenen Inhalt. Möchtest du fortfahren?",
     "collabStopOverridePrompt": "Das Stoppen der Sitzung wird deine vorherige, lokal gespeicherte Zeichnung überschreiben. Bist du dir sicher?\n\n(Wenn du deine lokale Zeichnung behalten möchtest, schließe stattdessen den Browser-Tab.)",
-    "errorLoadingLibrary": "Beim Laden der Drittanbieter-Bibliothek ist ein Fehler aufgetreten.",
     "errorAddingToLibrary": "Das Element konnte nicht zur Bibliothek hinzugefügt werden",
     "errorRemovingFromLibrary": "Das Element konnte nicht aus der Bibliothek entfernt werden",
     "confirmAddLibrary": "Dies fügt {{numShapes}} Form(en) zu deiner Bibliothek hinzu. Bist du dir sicher?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Die Datei ist zu groß. Die maximal zulässige Größe ist {{maxSize}}.",
     "svgImageInsertError": "SVG-Bild konnte nicht eingefügt werden. Das SVG-Markup sieht ungültig aus.",
     "invalidSVGString": "Ungültige SVG.",
-    "cannotResolveCollabServer": "Konnte keine Verbindung zum Collab-Server herstellen. Bitte lade die Seite neu und versuche es erneut."
+    "cannotResolveCollabServer": "Konnte keine Verbindung zum Collab-Server herstellen. Bitte lade die Seite neu und versuche es erneut.",
+    "importLibraryError": "Bibliothek konnte nicht geladen werden"
   },
   "toolBar": {
     "selection": "Auswahl",
@@ -341,7 +342,8 @@
       "post": "die zusammengefasst beinhaltet, dass jeder sie ohne Einschränkungen nutzen kann."
     },
     "noteItems": "Jedes Bibliothekselement muss einen eigenen Namen haben, damit es gefiltert werden kann. Die folgenden Bibliothekselemente werden hinzugefügt:",
-    "atleastOneLibItem": "Bitte wähle mindestens ein Bibliothekselement aus, um zu beginnen"
+    "atleastOneLibItem": "Bitte wähle mindestens ein Bibliothekselement aus, um zu beginnen",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Bibliothek übermittelt",

src/locales/el-GR.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Επαναφορά του καμβά",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Η μεταφόρτωση έχει εξασφαλιστεί με κρυπτογράφηση από άκρο σε άκρο, πράγμα που σημαίνει ότι ο διακομιστής Excalidraw και τρίτα μέρη δεν μπορούν να διαβάσουν το περιεχόμενο.",
     "loadSceneOverridePrompt": "Η φόρτωση εξωτερικού σχεδίου θα αντικαταστήσει το υπάρχον περιεχόμενο. Επιθυμείτε να συνεχίσετε;",
     "collabStopOverridePrompt": "Η διακοπή της συνεδρίας θα αντικαταστήσει το προηγούμενο, τοπικά αποθηκευμένο σχέδιο. Είστε σίγουροι?\n\n(Αν θέλετε να διατηρήσετε το τοπικό σας σχέδιο, απλά κλείστε την καρτέλα του προγράμματος περιήγησης.)",
-    "errorLoadingLibrary": "Υπήρξε ένα σφάλμα κατά τη φόρτωση της βιβλιοθήκης τρίτου μέρους.",
     "errorAddingToLibrary": "Αδυναμία προσθήκης αντικειμένου στη βιβλιοθήκη",
     "errorRemovingFromLibrary": "Αδυναμία αφαίρεσης αντικειμένου από τη βιβλιοθήκη",
     "confirmAddLibrary": "Αυτό θα προσθέσει {{numShapes}} σχήμα(τα) στη βιβλιοθήκη σας. Είστε σίγουροι;",
@@ -189,7 +189,8 @@
     "fileTooBig": "Το αρχείο είναι πολύ μεγάλο. Το μέγιστο επιτρεπόμενο μέγεθος είναι {{maxSize}}.",
     "svgImageInsertError": "",
     "invalidSVGString": "Μη έγκυρο SVG.",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Επιλογή",
@@ -341,7 +342,8 @@
       "post": ""
     },
     "noteItems": "",
-    "atleastOneLibItem": ""
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "",

src/locales/en.json

@@ -119,7 +119,14 @@
       "unlock": "Unlock",
       "lockAll": "Lock all",
       "unlockAll": "Unlock all"
-    }
+    },
+    "statusPublished": "Published",
+    "sidebarLock": "Keep sidebar open"
+  },
+  "library": {
+    "noItems": "No items added yet...",
+    "hint_emptyLibrary": "Select an item on canvas to add it here, or install a library from the public repository, below.",
+    "hint_emptyPrivateLibrary": "Select an item on canvas to add it here."
   },
   "buttons": {
     "clearReset": "Reset the canvas",
@@ -341,7 +348,8 @@
       "post": "which in short means anyone can use them without restrictions."
     },
     "noteItems": "Each library item must have its own name so it's filterable. The following library items will be included:",
-    "atleastOneLibItem": "Please select at least one library item to get started"
+    "atleastOneLibItem": "Please select at least one library item to get started",
+    "republishWarning": "Note: some of the selected items are marked as already published/submitted. You should only resubmit items when updating an existing library or submission."
   },
   "publishSuccessDialog": {
     "title": "Library submitted",