don't clean export options on load

* fix: library not scrollable when no published items installed

* show empty lib message in one case & fix i18n

.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/workflows/autorelease-preview.yml

@@ -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": {

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 -->

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,36 +304,22 @@ export const actionErase = register({
   name: "eraser",
   trackEvent: { category: "toolbar" },
   perform: (elements, appState) => {
-    const activeTool: any = { ...appState.activeTool };
+    let activeTool: AppState["activeTool"];
 
-    if (appState.activeTool.type !== "eraser") {
-      if (appState.activeTool.type === "custom") {
-        activeTool.lastActiveToolBeforeEraser = {
-          type: "custom",
-          customType: appState.activeTool.customType,
-        };
-      } else {
-        activeTool.lastActiveToolBeforeEraser = appState.activeTool.type;
-      }
-    }
     if (isEraserActive(appState)) {
-      if (appState.activeTool.lastActiveToolBeforeEraser) {
-        if (
-          typeof appState.activeTool.lastActiveToolBeforeEraser === "object" &&
-          appState.activeTool.lastActiveToolBeforeEraser?.type === "custom"
-        ) {
-          activeTool.type = "custom";
-          activeTool.customType =
-            appState.activeTool.lastActiveToolBeforeEraser.customType;
-        } else {
-          activeTool.type = appState.activeTool.lastActiveToolBeforeEraser;
-        }
-      } else {
-        activeTool.type = "selection";
-      }
+      activeTool = updateActiveTool(appState, {
+        ...(appState.activeTool.lastActiveToolBeforeEraser || {
+          type: "selection",
+        }),
+        lastActiveToolBeforeEraser: null,
+      });
     } else {
-      activeTool.type = "eraser";
+      activeTool = updateActiveTool(appState, {
+        type: "eraser",
+        lastActiveToolBeforeEraser: appState.activeTool,
+      });
     }
+
     return {
       appState: {
         ...appState,

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) {
@@ -136,21 +141,21 @@ export const actionFinalize = register({
     ) {
       resetCursor(canvas);
     }
-    const activeTool: any = { ...appState.activeTool };
-    if (appState.activeTool.lastActiveToolBeforeEraser) {
-      if (
-        typeof appState.activeTool.lastActiveToolBeforeEraser === "object" &&
-        appState.activeTool.lastActiveToolBeforeEraser.type === "custom"
-      ) {
-        activeTool.type = appState.activeTool.lastActiveToolBeforeEraser.type;
-        activeTool.customType =
-          appState.activeTool.lastActiveToolBeforeEraser.customType;
-      } else {
-        activeTool.type = appState.activeTool.lastActiveToolBeforeEraser;
-      }
+
+    let activeTool: AppState["activeTool"];
+    if (appState.activeTool.type === "eraser") {
+      activeTool = updateActiveTool(appState, {
+        ...(appState.activeTool.lastActiveToolBeforeEraser || {
+          type: "selection",
+        }),
+        lastActiveToolBeforeEraser: null,
+      });
     } else {
-      activeTool.type = "selection";
+      activeTool = updateActiveTool(appState, {
+        type: "selection",
+      });
     }
+
     return {
       elements: newElements,
       appState: {
@@ -176,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,
   };
 };
@@ -99,89 +101,228 @@ const APP_STATE_STORAGE_CONF = (<
   Values extends {
     /** whether to keep when storing to browser storage (localStorage/IDB) */
     browser: boolean;
-    /** whether to keep when exporting to file/database */
-    export: boolean;
+    /** whether to keep when exporting to a text file */
+    text: boolean;
+    /** whether to keep when exporting to an image file */
+    image: boolean;
     /** server (shareLink/collab/...) */
     server: boolean;
   },
   T extends Record<keyof AppState, Values>,
 >(config: { [K in keyof T]: K extends keyof AppState ? T[K] : never }) =>
   config)({
-  theme: { browser: true, export: false, server: false },
-  collaborators: { browser: false, export: false, server: false },
-  currentChartType: { browser: true, export: false, server: false },
-  currentItemBackgroundColor: { browser: true, export: false, server: false },
-  currentItemEndArrowhead: { browser: true, export: false, server: false },
-  currentItemFillStyle: { browser: true, export: false, server: false },
-  currentItemFontFamily: { browser: true, export: false, server: false },
-  currentItemFontSize: { browser: true, export: false, server: false },
-  currentItemLinearStrokeSharpness: {
+  theme: { browser: true, text: false, image: false, server: false },
+  collaborators: { browser: false, text: false, image: false, server: false },
+  currentChartType: { browser: true, text: false, image: false, server: false },
+  currentItemBackgroundColor: {
     browser: true,
-    export: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemEndArrowhead: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemFillStyle: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemFontFamily: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemFontSize: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemLinearStrokeSharpness: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemOpacity: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemRoughness: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemStartArrowhead: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemStrokeColor: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemStrokeSharpness: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemStrokeStyle: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemStrokeWidth: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  currentItemTextAlign: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  cursorButton: { browser: true, text: false, image: false, server: false },
+  draggingElement: { browser: false, text: false, image: false, server: false },
+  editingElement: { browser: false, text: false, image: false, server: false },
+  editingGroupId: { browser: true, text: false, image: false, server: false },
+  editingLinearElement: {
+    browser: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  activeTool: { browser: true, text: false, image: false, server: false },
+  penMode: { browser: true, text: false, image: false, server: false },
+  penDetected: { browser: true, text: false, image: false, server: false },
+  errorMessage: { browser: false, text: false, image: false, server: false },
+  exportBackground: { browser: true, text: false, image: true, server: false },
+  exportEmbedScene: { browser: true, text: false, image: true, server: false },
+  exportScale: { browser: true, text: false, image: true, server: false },
+  exportWithDarkMode: {
+    browser: true,
+    text: false,
+    image: true,
+    server: false,
+  },
+  fileHandle: { browser: false, text: false, image: false, server: false },
+  gridSize: { browser: true, text: true, image: true, server: true },
+  height: { browser: false, text: false, image: false, server: false },
+  isBindingEnabled: {
+    browser: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  isLibraryOpen: { browser: true, text: false, image: false, server: false },
+  isLibraryMenuDocked: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  isLoading: { browser: false, text: false, image: false, server: false },
+  isResizing: { browser: false, text: false, image: false, server: false },
+  isRotating: { browser: false, text: false, image: false, server: false },
+  lastPointerDownWith: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  multiElement: { browser: false, text: false, image: false, server: false },
+  name: { browser: true, text: false, image: false, server: false },
+  offsetLeft: { browser: false, text: false, image: false, server: false },
+  offsetTop: { browser: false, text: false, image: false, server: false },
+  openMenu: { browser: true, text: false, image: false, server: false },
+  openPopup: { browser: false, text: false, image: false, server: false },
+  pasteDialog: { browser: false, text: false, image: false, server: false },
+  previousSelectedElementIds: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  resizingElement: { browser: false, text: false, image: false, server: false },
+  scrolledOutside: { browser: true, text: false, image: false, server: false },
+  scrollX: { browser: true, text: false, image: false, server: false },
+  scrollY: { browser: true, text: false, image: false, server: false },
+  selectedElementIds: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  selectedGroupIds: { browser: true, text: false, image: false, server: false },
+  selectionElement: {
+    browser: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  shouldCacheIgnoreZoom: {
+    browser: true,
+    text: false,
+    image: false,
+    server: false,
+  },
+  showHelpDialog: { browser: false, text: false, image: false, server: false },
+  showStats: { browser: true, text: false, image: false, server: false },
+  startBoundElement: {
+    browser: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  suggestedBindings: {
+    browser: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  toastMessage: { browser: false, text: false, image: false, server: false },
+  viewBackgroundColor: {
+    browser: true,
+    text: true,
+    image: true,
+    server: true,
+  },
+  width: { browser: false, text: false, image: false, server: false },
+  zenModeEnabled: { browser: true, text: false, image: false, server: false },
+  zoom: { browser: true, text: false, image: false, server: false },
+  viewModeEnabled: { browser: false, text: false, image: false, server: false },
+  pendingImageElementId: {
+    browser: false,
+    text: false,
+    image: false,
+    server: false,
+  },
+  showHyperlinkPopup: {
+    browser: false,
+    text: false,
+    image: false,
     server: false,
   },
-  currentItemOpacity: { browser: true, export: false, server: false },
-  currentItemRoughness: { browser: true, export: false, server: false },
-  currentItemStartArrowhead: { browser: true, export: false, server: false },
-  currentItemStrokeColor: { browser: true, export: false, server: false },
-  currentItemStrokeSharpness: { browser: true, export: false, server: false },
-  currentItemStrokeStyle: { browser: true, export: false, server: false },
-  currentItemStrokeWidth: { browser: true, export: false, server: false },
-  currentItemTextAlign: { browser: true, export: false, server: false },
-  cursorButton: { browser: true, export: false, server: false },
-  draggingElement: { browser: false, export: false, server: false },
-  editingElement: { browser: false, export: false, server: false },
-  editingGroupId: { browser: true, export: false, server: false },
-  editingLinearElement: { browser: false, export: false, server: false },
-  activeTool: { browser: true, export: false, server: false },
-  penMode: { browser: true, export: false, server: false },
-  penDetected: { browser: true, export: false, server: false },
-  errorMessage: { browser: false, export: false, server: false },
-  exportBackground: { browser: true, export: false, server: false },
-  exportEmbedScene: { browser: true, export: false, server: false },
-  exportScale: { browser: true, export: false, server: false },
-  exportWithDarkMode: { browser: true, export: false, server: false },
-  fileHandle: { browser: false, export: false, server: false },
-  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 },
-  isLoading: { browser: false, export: false, server: false },
-  isResizing: { browser: false, export: false, server: false },
-  isRotating: { browser: false, export: false, server: false },
-  lastPointerDownWith: { browser: true, export: false, server: false },
-  multiElement: { browser: false, export: false, server: false },
-  name: { browser: true, export: false, server: false },
-  offsetLeft: { browser: false, export: false, server: false },
-  offsetTop: { browser: false, export: false, server: false },
-  openMenu: { browser: true, export: false, server: false },
-  openPopup: { browser: false, export: false, server: false },
-  pasteDialog: { browser: false, export: false, server: false },
-  previousSelectedElementIds: { browser: true, export: false, server: false },
-  resizingElement: { browser: false, export: false, server: false },
-  scrolledOutside: { browser: true, export: false, server: false },
-  scrollX: { browser: true, export: false, server: false },
-  scrollY: { browser: true, export: false, server: false },
-  selectedElementIds: { browser: true, export: false, server: false },
-  selectedGroupIds: { browser: true, export: false, server: false },
-  selectionElement: { browser: false, export: false, server: false },
-  shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
-  showHelpDialog: { browser: false, export: false, server: false },
-  showStats: { browser: true, export: false, server: false },
-  startBoundElement: { browser: false, export: false, server: false },
-  suggestedBindings: { browser: false, export: false, server: false },
-  toastMessage: { browser: false, export: false, server: false },
-  viewBackgroundColor: { browser: true, export: true, server: true },
-  width: { browser: false, export: false, server: false },
-  zenModeEnabled: { browser: true, export: false, server: false },
-  zoom: { browser: true, export: false, server: false },
-  viewModeEnabled: { browser: false, export: false, server: false },
-  pendingImageElement: { browser: false, export: false, server: false },
-  showHyperlinkPopup: { browser: false, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <
-  ExportType extends "export" | "browser" | "server",
+  ExportType extends "image" | "text" | "browser" | "server",
 >(
   appState: Partial<AppState>,
   exportType: ExportType,
@@ -208,8 +349,12 @@ export const clearAppStateForLocalStorage = (appState: Partial<AppState>) => {
   return _clearAppStateForStorage(appState, "browser");
 };
 
-export const cleanAppStateForExport = (appState: Partial<AppState>) => {
-  return _clearAppStateForStorage(appState, "export");
+export const cleanAppStateForTextExport = (appState: Partial<AppState>) => {
+  return _clearAppStateForStorage(appState, "text");
+};
+
+export const cleanAppStateForImageExport = (appState: Partial<AppState>) => {
+  return _clearAppStateForStorage(appState, "image");
 };
 
 export const clearAppStateForDatabase = (appState: Partial<AppState>) => {

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.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,7 +26,7 @@ const CollabButton = ({
         type="button"
         title={t("labels.liveCollaboration")}
         aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
       >
         {collaboratorCount > 0 && (
           <div className="CollabButton-collaborators">{collaboratorCount}</div>

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"];
@@ -68,9 +67,7 @@ interface LayerUIProps {
   library: Library;
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
-  renderCustomElementWidget?: (appState: AppState) => void;
 }
-
 const LayerUI = ({
   actionManager,
   appState,
@@ -89,6 +86,7 @@ const LayerUI = ({
   isCollaborating,
   renderTopRightUI,
   renderCustomFooter,
+  renderCustomStats,
   viewModeEnabled,
   libraryReturnUrl,
   UIOptions,
@@ -96,9 +94,8 @@ const LayerUI = ({
   library,
   id,
   onImageAction,
-  renderCustomElementWidget,
 }: LayerUIProps) => {
-  const deviceType = useDeviceType();
+  const device = useDevice();
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -279,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}
@@ -342,7 +341,7 @@ const LayerUI = ({
                       <HintViewer
                         appState={appState}
                         elements={elements}
-                        isMobile={deviceType.isMobile}
+                        isMobile={device.isMobile}
                       />
                       {heading}
                       <Stack.Row gap={1}>
@@ -364,7 +363,6 @@ const LayerUI = ({
                       setAppState={setAppState}
                     />
                   </Stack.Row>
-                  {libraryMenu}
                 </Stack.Col>
               )}
             </Section>
@@ -377,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>
@@ -441,14 +427,12 @@ const LayerUI = ({
                     })}
                   >
                     {actionManager.renderAction("eraser", { size: "small" })}
-                    {renderCustomElementWidget &&
-                      renderCustomElementWidget(appState)}
                   </div>
                 </>
               )}
               {!viewModeEnabled &&
                 appState.multiElement &&
-                deviceType.isTouchScreen && (
+                device.isTouchScreen && (
                   <div
                     className={clsx("finalize-button zen-mode-transition", {
                       "layer-ui__wrapper__footer-left--transition-left":
@@ -525,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
@@ -546,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/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

@@ -1,5 +1,5 @@
 import cssVariables from "./css/variables.module.scss";
-import { AppProps, CustomElementConfig } from "./types";
+import { AppProps } from "./types";
 import { FontFamilyValues } from "./element/types";
 
 export const APP_NAME = "Excalidraw";
@@ -155,20 +155,19 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
   },
 };
 
-export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
-  type: "custom",
-  customType: "custom",
-  transformHandles: true,
-  displayData: { content: "", type: "svg" },
-  width: 40,
-  height: 40,
-  stackedOnTop: false,
-  onCreate: () => {},
-  disableContextMenu: false,
-};
+// 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;
 
@@ -204,3 +203,7 @@ export const VERTICAL_ALIGN = {
 };
 
 export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
+
+export const COOKIES = {
+  AUTH_STATE_COOKIE: "excplus-auth",
+} as const;

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

@@ -1,5 +1,5 @@
 import { nanoid } from "nanoid";
-import { cleanAppStateForExport } from "../appState";
+import { cleanAppStateForImageExport } from "../appState";
 import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
@@ -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,
+              ...cleanAppStateForImageExport(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/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/index.ts

@@ -82,7 +82,7 @@ export const exportCanvas = async (
         await import(/* webpackChunkName: "image" */ "./image")
       ).encodePngMetadata({
         blob,
-        metadata: serializeAsJSON(elements, appState, files, "local"),
+        metadata: serializeAsJSON(elements, appState, files, "image"),
       });
     }
 

src/data/json.ts

@@ -1,5 +1,9 @@
 import { fileOpen, fileSave } from "./filesystem";
-import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
+import {
+  cleanAppStateForImageExport,
+  cleanAppStateForTextExport,
+  clearAppStateForDatabase,
+} from "../appState";
 import {
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
@@ -9,7 +13,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 +21,6 @@ import {
   ExportedLibraryData,
   ImportedLibraryData,
 } from "./types";
-import Library from "./library";
 
 /**
  * Strips out files which are only referenced by deleted elements
@@ -44,25 +47,32 @@ export const serializeAsJSON = (
   elements: readonly ExcalidrawElement[],
   appState: Partial<AppState>,
   files: BinaryFiles,
-  type: "local" | "database",
+  destination: "text" | "image" | "database",
 ): string => {
+  const cleanAppState = () => {
+    switch (destination) {
+      case "database":
+        return clearAppStateForDatabase(appState);
+      case "text":
+        return cleanAppStateForTextExport(appState);
+      case "image":
+        return cleanAppStateForImageExport(appState);
+    }
+  };
   const data: ExportedDataState = {
     type: EXPORT_DATA_TYPES.excalidraw,
     version: VERSIONS.excalidraw,
     source: EXPORT_SOURCE,
     elements:
-      type === "local"
-        ? clearElementsForExport(elements)
-        : clearElementsForDatabase(elements),
-    appState:
-      type === "local"
-        ? cleanAppStateForExport(appState)
-        : clearAppStateForDatabase(appState),
+      destination === "database"
+        ? clearElementsForDatabase(elements)
+        : clearElementsForExport(elements),
+    appState: cleanAppState(),
     files:
-      type === "local"
-        ? filterOutDeletedFiles(elements, files)
-        : // will be stripped from JSON
-          undefined,
+      destination === "database"
+        ? // will be stripped from JSON
+          undefined
+        : filterOutDeletedFiles(elements, files),
   };
 
   return JSON.stringify(data, null, 2);
@@ -73,7 +83,7 @@ export const saveAsJSON = async (
   appState: AppState,
   files: BinaryFiles,
 ) => {
-  const serialized = serializeAsJSON(elements, appState, files, "local");
+  const serialized = serializeAsJSON(elements, appState, files, "text");
   const blob = new Blob([serialized], {
     type: MIME_TYPES.excalidraw,
   });
@@ -93,13 +103,13 @@ 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);
 };
 
 export const isValidExcalidrawData = (data?: {
@@ -147,15 +157,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<
@@ -199,10 +199,7 @@ const restoreElement = (
         y,
       });
     }
-    case "custom":
-      return restoreElementWithProperties(element, {
-        customType: element.customType || "custom",
-      });
+
     // generic elements
     case "ellipse":
       return restoreElementWithProperties(element, {});
@@ -260,19 +257,7 @@ export const restoreAppState = (
         ? localValue
         : defaultValue;
   }
-  const activeTool: any = {
-    lastActiveToolBeforeEraser: null,
-    locked: nextAppState.activeTool.locked ?? false,
-    type: "selection",
-  };
-  if (AllowedExcalidrawActiveTools[nextAppState.activeTool.type]) {
-    if (nextAppState.activeTool.type === "custom") {
-      activeTool.type = "custom";
-      activeTool.customType = nextAppState.activeTool.customType ?? "custom";
-    } else {
-      activeTool.type = nextAppState.activeTool.type;
-    }
-  }
+
   return {
     ...nextAppState,
     cursorButton: localAppState?.cursorButton || "up",
@@ -280,7 +265,17 @@ export const restoreAppState = (
     penDetected:
       localAppState?.penDetected ??
       (appState.penMode ? appState.penDetected ?? false : false),
-    activeTool,
+    activeTool: {
+      ...updateActiveTool(
+        defaultAppState,
+        nextAppState.activeTool.type &&
+          AllowedExcalidrawActiveTools[nextAppState.activeTool.type]
+          ? nextAppState.activeTool
+          : { type: "selection" },
+      ),
+      lastActiveToolBeforeEraser: null,
+      locked: nextAppState.activeTool.locked ?? false,
+    },
     // Migrates from previous version where appState.zoom was a number
     zoom:
       typeof appState.zoom === "number"
@@ -288,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,6 +1,11 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
-import type { cleanAppStateForExport } from "../appState";
+import {
+  AppState,
+  BinaryFiles,
+  LibraryItems,
+  LibraryItems_anyVersion,
+} from "../types";
+import type { cleanAppStateForTextExport } from "../appState";
 import { VERSIONS } from "../constants";
 
 export interface ExportedDataState {
@@ -8,7 +13,7 @@ export interface ExportedDataState {
   version: number;
   source: string;
   elements: readonly ExcalidrawElement[];
-  appState: ReturnType<typeof cleanAppStateForExport>;
+  appState: ReturnType<typeof cleanAppStateForTextExport>;
   files: BinaryFiles | undefined;
 }
 
@@ -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/collision.ts

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

src/element/newElement.ts

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

src/element/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/element/typeChecks.ts

@@ -10,7 +10,6 @@ import {
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
   ExcalidrawTextContainer,
-  ExcalidrawCustomElement,
 } from "./types";
 
 export const isGenericElement = (
@@ -143,7 +142,3 @@ export const isBoundToContainer = (
     element !== null && isTextElement(element) && element.containerId !== null
   );
 };
-
-export const isCustomElement = (
-  element: ExcalidrawElement,
-): element is ExcalidrawCustomElement => element && element.type === "custom";

src/element/types.ts

@@ -84,9 +84,6 @@ export type ExcalidrawImageElement = _ExcalidrawElementBase &
     scale: [number, number];
   }>;
 
-export type ExcalidrawCustomElement = _ExcalidrawElementBase &
-  Readonly<{ type: "custom"; customType: string }>;
-
 export type InitializedExcalidrawImageElement = MarkNonNullable<
   ExcalidrawImageElement,
   "fileId"
@@ -111,8 +108,7 @@ export type ExcalidrawElement =
   | ExcalidrawTextElement
   | ExcalidrawLinearElement
   | ExcalidrawFreeDrawElement
-  | ExcalidrawImageElement
-  | ExcalidrawCustomElement;
+  | ExcalidrawImageElement;
 
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
   isDeleted: boolean;
@@ -138,8 +134,7 @@ export type ExcalidrawBindableElement =
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
   | ExcalidrawTextElement
-  | ExcalidrawImageElement
-  | ExcalidrawCustomElement;
+  | ExcalidrawImageElement;
 
 export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement

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/CollabWrapper.tsx

@@ -30,7 +30,9 @@ import {
   generateCollaborationLinkData,
   getCollaborationLink,
   getCollabServer,
+  getSyncableElements,
   SocketUpdateDataSource,
+  SyncableExcalidrawElement,
 } from "../data";
 import {
   isSavedToFirebase,
@@ -50,7 +52,6 @@ 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,
@@ -202,7 +203,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   private beforeUnload = withBatchedUpdates((event: BeforeUnloadEvent) => {
-    const syncableElements = this.getSyncableElements(
+    const syncableElements = getSyncableElements(
       this.getSceneElementsIncludingDeleted(),
     );
 
@@ -232,7 +233,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   });
 
   saveCollabRoomToFirebase = async (
-    syncableElements: readonly ExcalidrawElement[],
+    syncableElements: readonly SyncableExcalidrawElement[],
   ) => {
     try {
       const savedData = await saveToFirebase(
@@ -262,7 +263,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.loadImageFiles.cancel();
 
     this.saveCollabRoomToFirebase(
-      this.getSyncableElements(
+      getSyncableElements(
         this.excalidrawAPI.getSceneElementsIncludingDeleted(),
       ),
     );
@@ -413,7 +414,7 @@ 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
@@ -749,7 +750,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   queueSaveToFirebase = throttle(() => {
     if (this.portal.socketInitialized) {
       this.saveCollabRoomToFirebase(
-        this.getSyncableElements(
+        getSyncableElements(
           this.excalidrawAPI.getSceneElementsIncludingDeleted(),
         ),
       );
@@ -775,13 +776,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     });
   };
 
-  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;
 

src/excalidraw-app/collab/Portal.tsx

@@ -1,4 +1,8 @@
-import { SocketUpdateData, SocketUpdateDataSource } from "../data";
+import {
+  isSyncableElement,
+  SocketUpdateData,
+  SocketUpdateDataSource,
+} from "../data";
 
 import CollabWrapper from "./CollabWrapper";
 
@@ -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/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;
 

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

@@ -6,9 +6,9 @@ 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,
@@ -72,14 +72,15 @@ import { loadFilesFromFirebase } from "./data/firebase";
 import { LocalData } from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
 import clsx from "clsx";
+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: {
@@ -187,7 +188,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 +202,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;
@@ -232,6 +244,11 @@ const ExcalidrawWrapper = () => {
 
   const collabAPI = useContext(CollabContext)?.api;
 
+  useHandleLibrary({
+    excalidrawAPI,
+    getInitialLibraryItems: getLibraryItemsFromStorage,
+  });
+
   useEffect(() => {
     if (!collabAPI || !excalidrawAPI) {
       return;
@@ -301,8 +318,6 @@ const ExcalidrawWrapper = () => {
           LocalData.fileStorage.clearObsoleteFiles({ currentFileIds: fileIds });
         }
       }
-
-      data.scene.libraryItems = getLibraryItemsFromStorage();
     };
 
     initializeScene({ collabAPI }).then((data) => {
@@ -310,18 +325,10 @@ const ExcalidrawWrapper = () => {
       initialStatePromiseRef.current.promise.resolve(data.scene);
     });
 
-    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) {
         initializeScene({ collabAPI }).then((data) => {
           loadImages(data);
           if (data.scene) {
@@ -355,6 +362,8 @@ const ExcalidrawWrapper = () => {
           setLangCode(langCode);
           excalidrawAPI.updateScene({
             ...localDataState,
+          });
+          excalidrawAPI.updateLibrary({
             libraryItems: getLibraryItemsFromStorage(),
           });
           collabAPI.setUsername(username || "");
@@ -466,19 +475,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 +493,6 @@ const ExcalidrawWrapper = () => {
           if (didChange) {
             excalidrawAPI.updateScene({
               elements,
-              appState: {
-                pendingImageElement,
-              },
             });
           }
         }
@@ -532,17 +536,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 +597,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>
         );

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/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",

src/locales/es-ES.json

@@ -9,7 +9,7 @@
     "copy": "Copiar",
     "copyAsPng": "Copiar al portapapeles como PNG",
     "copyAsSvg": "Copiar al portapapeles como SVG",
-    "copyText": "",
+    "copyText": "Copiar al portapapeles como texto",
     "bringForward": "Traer hacia delante",
     "sendToBack": "Enviar al fondo",
     "bringToFront": "Traer al frente",
@@ -115,11 +115,12 @@
       "label": "Enlace"
     },
     "elementLock": {
-      "lock": "",
-      "unlock": "",
-      "lockAll": "",
-      "unlockAll": ""
-    }
+      "lock": "Bloquear",
+      "unlock": "Desbloquear",
+      "lockAll": "Bloquear todo",
+      "unlockAll": "Desbloquear todo"
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
@@ -172,8 +173,7 @@
     "uploadedSecurly": "La carga ha sido asegurada con cifrado de principio a fin, lo que significa que el servidor de Excalidraw y terceros no pueden leer el contenido.",
     "loadSceneOverridePrompt": "Si carga este dibujo externo, reemplazará el que tiene. ¿Desea continuar?",
     "collabStopOverridePrompt": "Detener la sesión sobrescribirá su dibujo anterior almacenado localmente. ¿Está seguro?\n\n(Si desea mantener su dibujo local, simplemente cierre la pestaña del navegador.)",
-    "errorLoadingLibrary": "Se ha producido un error al cargar la biblioteca de terceros.",
-    "errorAddingToLibrary": "No se pudo agregar elemento a la biblioteca",
+    "errorAddingToLibrary": "No se pudo agregar el elemento a la biblioteca",
     "errorRemovingFromLibrary": "No se pudo quitar el elemento de la biblioteca",
     "confirmAddLibrary": "Esto añadirá {{numShapes}} forma(s) a tu biblioteca. ¿Estás seguro?",
     "imageDoesNotContainScene": "Esta imagen no parece contener datos de escena. ¿Ha habilitado la inserción de la escena durante la exportación?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Archivo demasiado grande. El tamaño máximo permitido es {{maxSize}}.",
     "svgImageInsertError": "No se pudo insertar la imagen SVG. El código SVG parece inválido.",
     "invalidSVGString": "SVG no válido.",
-    "cannotResolveCollabServer": "No se pudo conectar al servidor colaborador. Por favor, vuelva a cargar la página y vuelva a intentarlo."
+    "cannotResolveCollabServer": "No se pudo conectar al servidor colaborador. Por favor, vuelva a cargar la página y vuelva a intentarlo.",
+    "importLibraryError": "No se pudo cargar la librería"
   },
   "toolBar": {
     "selection": "Selección",
@@ -299,7 +300,7 @@
     "view": "Vista",
     "zoomToFit": "Ajustar la vista para mostrar todos los elementos",
     "zoomToSelection": "Zoom a la selección",
-    "toggleElementLock": ""
+    "toggleElementLock": "Bloquear/desbloquear selección"
   },
   "clearCanvasDialog": {
     "title": "Borrar lienzo"
@@ -341,7 +342,8 @@
       "post": "que en breve significa que cualquiera puede utilizarlos sin restricciones."
     },
     "noteItems": "Cada elemento de la biblioteca debe tener su propio nombre para que sea filtrable. Los siguientes elementos de la biblioteca serán incluidos:",
-    "atleastOneLibItem": "Por favor, seleccione al menos un elemento de la biblioteca para empezar"
+    "atleastOneLibItem": "Por favor, seleccione al menos un elemento de la biblioteca para empezar",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Biblioteca enviada",

src/locales/eu-ES.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Garbitu oihala",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Kargatzea muturretik muturrerako zifratze bidez ziurtatu da, hau da, Excalidraw zerbitzariak eta hirugarrenek ezin dutela edukia irakurri.",
     "loadSceneOverridePrompt": "Kanpoko marrazkia kargatzeak lehendik duzun edukia ordezkatuko du. Jarraitu nahi duzu?",
     "collabStopOverridePrompt": "Saioa gelditzeak lokalean gordetako zure aurreko marrazkia gainidatziko du. Ziur zaude?\n\n(Zure marrazki lokala mantendu nahi baduzu, itxi arakatzailearen fitxa.)",
-    "errorLoadingLibrary": "Errore bat gertatu da hirugarrenen liburutegia kargatzean.",
     "errorAddingToLibrary": "Ezin izan da elementua liburutegian gehitu",
     "errorRemovingFromLibrary": "Ezin izan da elementua liburutegitik kendu",
     "confirmAddLibrary": "Honek {{numShapes}} forma gehituko ditu zure liburutegian. Ziur zaude?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Fitxategia handiegia da. Onartutako gehienezko tamaina {{maxSize}} da.",
     "svgImageInsertError": "Ezin izan da SVG irudia txertatu. SVG markak baliogabea dirudi.",
     "invalidSVGString": "SVG baliogabea.",
-    "cannotResolveCollabServer": "Ezin izan da elkarlaneko zerbitzarira konektatu. Mesedez, berriro kargatu orria eta saiatu berriro."
+    "cannotResolveCollabServer": "Ezin izan da elkarlaneko zerbitzarira konektatu. Mesedez, berriro kargatu orria eta saiatu berriro.",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Hautapena",
@@ -341,7 +342,8 @@
       "post": "zeinak, laburbilduz, esan nahi du edozeinek erabiltzen ahal duela murrizketarik gabe."
     },
     "noteItems": "Liburutegiko elementu bakoitzak bere izena eduki behar du iragazi ahal izateko. Liburutegiko hurrengo elementuak barne daude:",
-    "atleastOneLibItem": "Hautatu gutxienez liburutegiko elementu bat gutxienez hasi ahal izateko"
+    "atleastOneLibItem": "Hautatu gutxienez liburutegiko elementu bat gutxienez hasi ahal izateko",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Liburutegia bidali da",

src/locales/fa-IR.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "پاکسازی بوم نقاشی",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "آپلود با رمزگذاری دو طرفه انجام میشود، به این معنی که سرور Excalidraw و اشخاص ثالث نمی توانند مطالب شما را بخوانند.",
     "loadSceneOverridePrompt": "بارگزاری یک طرح خارجی محتوای فعلی رو از بین میبرد. آیا میخواهید ادامه دهید؟",
     "collabStopOverridePrompt": "",
-    "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/fi-FI.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": "Julkaistu"
   },
   "buttons": {
     "clearReset": "Tyhjennä piirtoalue",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Lähetys on turvattu päästä-päähän-salauksella. Excalidrawin palvelin ja kolmannet osapuolet eivät voi lukea sisältöä.",
     "loadSceneOverridePrompt": "Ulkopuolisen piirroksen lataaminen korvaa nykyisen sisältösi. Jatketaanko?",
     "collabStopOverridePrompt": "Istunnon lopettaminen korvaa aiemman, paikallisesti tallennetun piirustuksen. Jatketaanko?\n\n(Jos haluat säilyttää paikallisesti tallennetun piirustuksen, sulje selaimen välilehti lopettamisen sijaan.)",
-    "errorLoadingLibrary": "Virhe ladattaessa kolmannen osapuolen kirjastoa.",
     "errorAddingToLibrary": "Kohdetta ei voitu lisätä kirjastoon",
     "errorRemovingFromLibrary": "Kohdetta ei voitu poistaa kirjastosta",
     "confirmAddLibrary": "Tämä lisää {{numShapes}} muotoa kirjastoosi. Jatketaanko?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Tiedosto on liian suuri. Suurin sallittu koko on {{maxSize}}.",
     "svgImageInsertError": "SVG- kuvaa ei voitu lisätä. Tiedoston SVG-sisältö näyttää virheelliseltä.",
     "invalidSVGString": "Virheellinen SVG.",
-    "cannotResolveCollabServer": "Yhteyden muodostaminen collab-palvelimeen epäonnistui. Virkistä sivu ja yritä uudelleen."
+    "cannotResolveCollabServer": "Yhteyden muodostaminen collab-palvelimeen epäonnistui. Virkistä sivu ja yritä uudelleen.",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Valinta",
@@ -341,7 +342,8 @@
       "post": "alla, mikä lyhyesti antaa muiden käyttää sitä ilman rajoituksia."
     },
     "noteItems": "Jokaisella kirjaston kohteella on oltava oma nimensä suodatusta varten. Seuraavat kirjaston kohteet sisältyvät:",
-    "atleastOneLibItem": "Valitse vähintään yksi kirjaston kohde aloittaaksesi"
+    "atleastOneLibItem": "Valitse vähintään yksi kirjaston kohde aloittaaksesi",
+    "republishWarning": "Huom! Osa valituista kohteista on merkitty jo julkaistu/lähetetyiksi. Lähetä kohteita uudelleen vain päivitettäessä olemassa olevaa kirjastoa tai ehdotusta."
   },
   "publishSuccessDialog": {
     "title": "Kirjasto lähetetty",

src/locales/fr-FR.json

@@ -9,7 +9,7 @@
     "copy": "Copier",
     "copyAsPng": "Copier dans le presse-papier en PNG",
     "copyAsSvg": "Copier dans le presse-papier en SVG",
-    "copyText": "Copier dans le presse-papiers comme du texte",
+    "copyText": "Copier dans le presse-papier en tant que texte",
     "bringForward": "Envoyer vers l'avant",
     "sendToBack": "Mettre en arrière-plan",
     "bringToFront": "Mettre au premier plan",
@@ -44,7 +44,7 @@
     "exportEmbedScene": "Intégrer la scène",
     "exportEmbedScene_details": "Les données de scène seront enregistrées dans le fichier PNG/SVG exporté, afin que la scène puisse être restaurée à partir de celui-ci.\nCela augmentera la taille du fichier exporté.",
     "addWatermark": "Ajouter \"Fait avec Excalidraw\"",
-    "handDrawn": "Manuscrit",
+    "handDrawn": "À la main",
     "normal": "Normale",
     "code": "Code",
     "small": "Petit",
@@ -119,7 +119,8 @@
       "unlock": "Déverrouiller",
       "lockAll": "Tout verrouiller",
       "unlockAll": "Tout déverouiller"
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Réinitialiser le canevas",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Le téléchargement a été sécurisé avec un chiffrement de bout en bout, ce qui signifie que ni Excalidraw ni personne d'autre ne peut en lire le contenu.",
     "loadSceneOverridePrompt": "Le chargement d'un dessin externe remplacera votre contenu actuel. Souhaitez-vous continuer ?",
     "collabStopOverridePrompt": "Arrêter la session écrasera votre précédent dessin stocké localement. Êtes-vous sûr·e ?\n\n(Si vous voulez garder votre dessin local, fermez simplement l'onglet du navigateur à la place.)",
-    "errorLoadingLibrary": "Une erreur s'est produite lors du chargement de la bibliothèque tierce.",
     "errorAddingToLibrary": "Impossible d'ajouter l'élément à la bibliothèque",
     "errorRemovingFromLibrary": "Impossible de retirer l'élément de la bibliothèque",
     "confirmAddLibrary": "Cela va ajouter {{numShapes}} forme(s) à votre bibliothèque. Êtes-vous sûr·e ?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Le fichier est trop volumineux. La taille maximale autorisée est de {{maxSize}}.",
     "svgImageInsertError": "Impossible d'insérer l'image SVG. Le balisage SVG semble invalide.",
     "invalidSVGString": "SVG invalide.",
-    "cannotResolveCollabServer": "Impossible de se connecter au serveur collaboratif. Veuillez recharger la page et réessayer."
+    "cannotResolveCollabServer": "Impossible de se connecter au serveur collaboratif. Veuillez recharger la page et réessayer.",
+    "importLibraryError": "Impossible de charger la bibliothèque"
   },
   "toolBar": {
     "selection": "Sélection",
@@ -341,7 +342,8 @@
       "post": "ce qui en gros signifie que tout le monde peut l'utiliser sans restrictions."
     },
     "noteItems": "Chaque élément de la bibliothèque doit avoir son propre nom afin qu'il soit filtrable. Les éléments de bibliothèque suivants seront inclus :",
-    "atleastOneLibItem": "Veuillez sélectionner au moins un élément de bibliothèque pour commencer"
+    "atleastOneLibItem": "Veuillez sélectionner au moins un élément de bibliothèque pour commencer",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Bibliothèque soumise",

src/locales/he-IL.json

@@ -9,7 +9,7 @@
     "copy": "העתק",
     "copyAsPng": "העתק ללוח כ PNG",
     "copyAsSvg": "העתק ללוח כ SVG",
-    "copyText": "",
+    "copyText": "העתק ללוח כ-PNG",
     "bringForward": "הבא שכבה קדימה",
     "sendToBack": "העבר לסוף",
     "bringToFront": "העבר לחזית",
@@ -36,7 +36,7 @@
     "arrowhead_arrow": "חץ",
     "arrowhead_bar": "שורה",
     "arrowhead_dot": "נקודה",
-    "arrowhead_triangle": "",
+    "arrowhead_triangle": "משולש",
     "fontSize": "גודל גופן",
     "fontFamily": "סוג הגופן",
     "onlySelected": "רק מה שנבחר",
@@ -65,7 +65,7 @@
     "cartoonist": "קריקטוריסט",
     "fileTitle": "שם קובץ",
     "colorPicker": "בחירת צבע",
-    "canvasColors": "",
+    "canvasColors": "בשימוש בקנבס",
     "canvasBackground": "רקע הלוח",
     "drawingCanvas": "לוח ציור",
     "layers": "שכבות",
@@ -103,23 +103,24 @@
     "showStroke": "הצג צבעי קו מתאר",
     "showBackground": "הצג צבעי רקע",
     "toggleTheme": "שינוי ערכת העיצוב",
-    "personalLib": "",
-    "excalidrawLib": "",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
-    "unbindText": "",
-    "bindText": "",
+    "personalLib": "ספריה פרטית",
+    "excalidrawLib": "הספריה של Excalidraw",
+    "decreaseFontSize": "הקטן את גודל הגופן",
+    "increaseFontSize": "הגדל את גודל הגופן",
+    "unbindText": "ביטול קיבוע הטקסט",
+    "bindText": "קיבוע הטקסט לאוגד",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "עריכת קישור",
+      "create": "יצירת קישור",
+      "label": "קישור"
     },
     "elementLock": {
-      "lock": "",
-      "unlock": "",
-      "lockAll": "",
-      "unlockAll": ""
-    }
+      "lock": "נעילה",
+      "unlock": "ביטול נעילה",
+      "lockAll": "לנעול הכל",
+      "unlockAll": "שחרור הכול"
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "אפס את הלוח",
@@ -153,12 +154,12 @@
     "lightMode": "מצב בהיר",
     "zenMode": "מצב זן",
     "exitZenMode": "צא ממצב תפריט מרחף",
-    "cancel": "",
-    "clear": "",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "cancel": "ביטול",
+    "clear": "ניקוי",
+    "remove": "מחיקה",
+    "publishLibrary": "פירסום",
+    "submit": "שליחה",
+    "confirm": "לאשר"
   },
   "alerts": {
     "clearReset": "פעולה זו תנקה את כל הלוח. אתה בטוח?",
@@ -167,33 +168,33 @@
     "couldNotLoadInvalidFile": "לא ניתן לטעון קובץ שאיננו תואם",
     "importBackendFailed": "ייבוא מהשרת נכשל.",
     "cannotExportEmptyCanvas": "לא ניתן לייצא לוח ריק.",
-    "couldNotCopyToClipboard": "",
+    "couldNotCopyToClipboard": "לא ניתן היה להעתיק ללוח",
     "decryptFailed": "לא ניתן לפענח מידע.",
     "uploadedSecurly": "ההעלאה הוצפנה מקצה לקצה, ולכן שרת Excalidraw וצד שלישי לא יכולים לקרוא את התוכן.",
     "loadSceneOverridePrompt": "טעינה של ציור חיצוני תחליף את התוכן הקיים שלך. האם תרצה להמשיך?",
     "collabStopOverridePrompt": "עצירת השיתוף תוביל למחיקת התרשימים השמורים בדפדפן. האם את/ה בטוח/ה?\n(אם תרצה לשמור את התרשימים הקיימים, תוכל לסגור את הדפדפן מבלי לסיים את השיתוף.)",
-    "errorLoadingLibrary": "קרתה שגיאה בטעינת הספריה החיצונית.",
     "errorAddingToLibrary": "לא ניתן להוסיף פריט לספרייה",
     "errorRemovingFromLibrary": "לא ניתן למחוק פריט מהספריה",
     "confirmAddLibrary": "הפעולה תוסיף {{numShapes}} צורה(ות) לספריה שלך. האם אתה בטוח?",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "נראה שהתמונה לא מכילה מידע על הסצינה. האם אפשרת הטמעת מידע הסצינה בעת השמירה?",
     "cannotRestoreFromImage": "לא הצלחנו לשחזר את התצוגה מקובץ התמונה",
     "invalidSceneUrl": "ייבוא המידע מן סצינה מכתובת האינטרנט נכשלה. המידע בנוי באופן משובש או שהוא אינו קובץ JSON תקין של Excalidraw.",
     "resetLibrary": "פעולה זו תנקה את כל הלוח. אתה בטוח?",
-    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "removeItemsFromsLibrary": "מחיקת {{count}} פריטים(ים) מתוך הספריה?",
+    "invalidEncryptionKey": "מפתח ההצפנה חייב להיות בן 22 תוים. השיתוף החי מבוטל."
   },
   "errors": {
-    "unsupportedFileType": "",
-    "imageInsertError": "",
-    "fileTooBig": "",
-    "svgImageInsertError": "",
-    "invalidSVGString": "",
-    "cannotResolveCollabServer": ""
+    "unsupportedFileType": "סוג הקובץ אינו נתמך.",
+    "imageInsertError": "לא ניתן היה להטמיע את התמונה, אנא נסו שוב מאוחר יותר...",
+    "fileTooBig": "הקובץ כבד מדי. הגודל המקסימלי המותר הוא {{maxSize}}.",
+    "svgImageInsertError": "לא ניתן היה להטמיע את תמונת ה-SVG. קידוד ה-SVG אינו תקני.",
+    "invalidSVGString": "SVG בלתי תקני.",
+    "cannotResolveCollabServer": "",
+    "importLibraryError": "לא ניתן היה לטעון את הספריה"
   },
   "toolBar": {
     "selection": "בחירה",
-    "image": "",
+    "image": "הוספת תמונה",
     "rectangle": "מרובע",
     "diamond": "מעוין",
     "ellipse": "אליפסה",
@@ -204,8 +205,8 @@
     "library": "ספריה",
     "lock": "השאר את הכלי הנבחר פעיל גם לאחר סיום הציור",
     "penMode": "",
-    "link": "",
-    "eraser": ""
+    "link": "הוספה/עדכון של קישור עבור הצורה הנבחרת",
+    "eraser": "מחק"
   },
   "headings": {
     "canvasActions": "פעולות הלוח",
@@ -213,7 +214,7 @@
     "shapes": "צורות"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "כדי להזיז את הקנבס לחצו על גלגל העכבר או על מקש הרווח תוך כדי גרירה",
     "linearElement": "הקלק בשביל לבחור נקודות מרובות, גרור בשביל קו בודד",
     "freeDraw": "לחץ וגרור, שחרר כשסיימת",
     "text": "טיפ: אפשר להוסיף טקסט על ידי לחיצה כפולה בכל מקום עם כלי הבחירה",
@@ -228,8 +229,8 @@
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
-    "publishLibrary": "",
-    "bindTextToElement": "",
+    "publishLibrary": "פירסום ספריה אישית",
+    "bindTextToElement": "יש להקיש Enter כדי להוסיף טקסט",
     "deepBoxSelect": "",
     "eraserRevert": ""
   },
@@ -278,8 +279,8 @@
   "helpDialog": {
     "blog": "קרא את הבלוג שלנו",
     "click": "קליק",
-    "deepSelect": "",
-    "deepBoxSelect": "",
+    "deepSelect": "בחירה עמוקה",
+    "deepBoxSelect": "בחירה עמוקה בתוך קופסה ומניעת גרירה",
     "curvedArrow": "חץ מעוגל",
     "curvedLine": "קו מעוגל",
     "documentation": "תיעוד",
@@ -291,7 +292,7 @@
     "howto": "עקוב אחר המדריכים שלנו",
     "or": "או",
     "preventBinding": "למנוע נעיצת חיצים",
-    "tools": "",
+    "tools": "כלים",
     "shortcuts": "קיצורי מקלדת",
     "textFinish": "סיים עריכה (טקסט)",
     "textNewLine": "הוסף שורה חדשה (טקסט)",
@@ -299,58 +300,59 @@
     "view": "תצוגה",
     "zoomToFit": "גלילה להצגת כל האלמנטים במסך",
     "zoomToSelection": "התמקד בבחירה",
-    "toggleElementLock": ""
+    "toggleElementLock": "נעילה/ביטול הנעילה של הרכיבים הנבחרים"
   },
   "clearCanvasDialog": {
-    "title": ""
+    "title": "ניקוי הקנבס"
   },
   "publishDialog": {
-    "title": "",
-    "itemName": "",
-    "authorName": "",
-    "githubUsername": "",
-    "twitterUsername": "",
-    "libraryName": "",
-    "libraryDesc": "",
-    "website": "",
+    "title": "פרסום ספריה",
+    "itemName": "שם הפריט",
+    "authorName": "שם היוצר",
+    "githubUsername": "שם המשתמש שלך ב-GitHub",
+    "twitterUsername": "שם המשתמש שלך ב-Twitter",
+    "libraryName": "שם הספריה",
+    "libraryDesc": "תיאור הספריה",
+    "website": "אתר",
     "placeholder": {
-      "authorName": "",
-      "libraryName": "",
-      "libraryDesc": "",
+      "authorName": "שם או שם משתמש",
+      "libraryName": "תנו שם לספריה",
+      "libraryDesc": "תיאור של הספריה שלך כדי לסייע למשתמשים להבין את השימוש בה",
       "githubHandle": "",
       "twitterHandle": "",
-      "website": ""
+      "website": "קישור לאתר הפרטי שלך או לכל מקום אחר (אופציונאלי)"
     },
     "errors": {
-      "required": "",
-      "website": ""
+      "required": "נדרש",
+      "website": "הזינו כתובת URL תקינה"
     },
     "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "להציע את הספריה שלך להיות כלולה ב",
+      "link": "מאגר הספריה הציבורי",
+      "post": "כך שאחרים יוכלו לעשות שימוש בציורים שלהם."
     },
     "noteGuidelines": {
-      "pre": "",
-      "link": "",
+      "pre": "הספריה צריכה לקבל אישור ידני. אנא קרא את ",
+      "link": "הנחיות",
       "post": ""
     },
     "noteLicense": {
       "pre": "",
-      "link": "",
-      "post": ""
+      "link": "רישיון MIT, ",
+      "post": "שאומר בקצרה שכל אחד יכול לעשות בהם שימוש ללא מגבלות."
     },
     "noteItems": "",
-    "atleastOneLibItem": ""
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
-    "title": "",
-    "content": "",
-    "link": ""
+    "title": "הספריה נשלחה",
+    "content": "תודה {{authorName}}. הספריה שלך נשלחה לבחינה. תוכל לעקוב אחרי סטטוס הפרסום",
+    "link": "כאן"
   },
   "confirmDialog": {
-    "resetLibrary": "",
-    "removeItemsFromLib": ""
+    "resetLibrary": "איפוס ספריה",
+    "removeItemsFromLib": "להסיר את הפריטים הנבחרים מהספריה"
   },
   "encrypted": {
     "tooltip": "הרישומים שלך מוצפנים מקצה לקצה כך שהשרתים של Excalidraw לא יראו אותם לעולם.",
@@ -372,7 +374,7 @@
     "width": "רוחב"
   },
   "toast": {
-    "addedToLibrary": "",
+    "addedToLibrary": "נוסף לספריה",
     "copyStyles": "העתק סגנונות.",
     "copyToClipboard": "הועתק אל הלוח.",
     "copyToClipboardAsPng": "{{exportSelection}} הועתקה ללוח כ-PNG\n({{exportColorScheme}})",

src/locales/hi-IN.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/hu-HU.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Vászon törlése",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "A feltöltést végpontok közötti titkosítással biztosítottuk, ami azt jelenti, hogy egy harmadik fél nem tudja megnézni a tartalmát, beleértve az Excalidraw szervereit is.",
     "loadSceneOverridePrompt": "A betöltött külső rajz felül fogja írnia meglévőt. Szeretnéd folytatni?",
     "collabStopOverridePrompt": "A munkamenet leállítása felül fogja írni az előzőleg helyben tárolt rajzot. Biztosan ezt akarod?\n(Ha meg akarod tartani a helyben tárolt rajzot, egyszerűen csak zárd be a böngésző fület)",
-    "errorLoadingLibrary": "Hibába ütközött a harmarmadik féltől származó könyvtár betöltése.",
     "errorAddingToLibrary": "A tétel nem addható hozzá a könyvtárhoz",
     "errorRemovingFromLibrary": "A tétel nem távolítható el a könyvtárból",
     "confirmAddLibrary": "Ez a művelet {{numShapes}} formát fog hozzáadni a könyvtáradhoz. Biztos vagy benne?",
@@ -189,7 +189,8 @@
     "fileTooBig": "A fájl túl nagy. A megengedett maximális méret {{maxSize}}.",
     "svgImageInsertError": "Nem sikerült beszúrni az SVG-képet. Az SVG szintaktika érvénytelennek tűnik.",
     "invalidSVGString": "Érvénytelen SVG.",
-    "cannotResolveCollabServer": ""
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Kijelölés",
@@ -341,7 +342,8 @@
       "post": "ami röviden azt jelenti, hogy bárki korlátozás nélkül használhatja őket."
     },
     "noteItems": "Minden könyvtárelemnek saját nevével kell rendelkeznie, hogy szűrhető legyen. A következő könyvtári tételek kerülnek bele:",
-    "atleastOneLibItem": "A kezdéshez válassz ki legalább egy könyvtári elemet"
+    "atleastOneLibItem": "A kezdéshez válassz ki legalább egy könyvtári elemet",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "A könyvtár beküldve",

src/locales/id-ID.json

@@ -119,7 +119,8 @@
       "unlock": "Lepas",
       "lockAll": "Kunci semua",
       "unlockAll": "Lepas semua"
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Setel Ulang Kanvas",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Pengunggahan ini telah diamankan menggunakan enkripsi end-to-end, artinya server Excalidraw dan pihak ketiga tidak data membaca nya",
     "loadSceneOverridePrompt": "Memuat gambar external akan mengganti konten Anda yang ada. Apakah Anda ingin melanjutkan?",
     "collabStopOverridePrompt": "Menghentikan sesi akan menimpa gambar Anda yang tersimpan secara lokal. Anda yakin?\n\n(Jika Anda ingin menyimpan gambar lokal Anda, gantinya cukup tutup tab browser.)",
-    "errorLoadingLibrary": "Terdapat kesalahan dalam memuat pustaka pihak ketiga.",
     "errorAddingToLibrary": "Tidak dapat menambahkan item ke pustaka",
     "errorRemovingFromLibrary": "Tidak dapat membuang item dari pustaka",
     "confirmAddLibrary": "Ini akan menambahkan {{numShapes}} bentuk ke pustaka Anda. Anda yakin?",
@@ -189,7 +189,8 @@
     "fileTooBig": "File terlalu besar. Ukuran maksimum yang dibolehkan {{maxSize}}.",
     "svgImageInsertError": "Tidak dapat menyisipkan gambar SVG. Markup SVG sepertinya tidak valid.",
     "invalidSVGString": "SVG tidak valid.",
-    "cannotResolveCollabServer": "Tidak dapat terhubung ke server kolab. Muat ulang laman dan coba lagi."
+    "cannotResolveCollabServer": "Tidak dapat terhubung ke server kolab. Muat ulang laman dan coba lagi.",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Pilihan",
@@ -341,7 +342,8 @@
       "post": "yang artinya siapa pun dapat menggunakannya tanpa batasan."
     },
     "noteItems": "Setiap item pustaka harus memiliki nama, sehingga bisa disortir. Item pustaka di bawah ini akan dimasukan:",
-    "atleastOneLibItem": "Pilih setidaknya satu item pustaka untuk mulai"
+    "atleastOneLibItem": "Pilih setidaknya satu item pustaka untuk mulai",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Pustaka telah dikirm",

src/locales/it-IT.json

@@ -119,7 +119,8 @@
       "unlock": "Sblocca",
       "lockAll": "Blocca tutto",
       "unlockAll": "Sblocca tutto"
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Svuota la tela",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "L'upload è stato protetto con la crittografia end-to-end, il che significa che il server Excalidraw e terze parti non possono leggere il contenuto.",
     "loadSceneOverridePrompt": "Se carichi questo disegno esterno, sostituirà quello che hai. Vuoi continuare?",
     "collabStopOverridePrompt": "Interrompere la sessione sovrascriverà il precedente disegno memorizzato localmente. Sei sicuro?\n\n(Se vuoi mantenere il tuo disegno locale, chiudi semplicemente la scheda del browser.)",
-    "errorLoadingLibrary": "Si è verificato un errore nel caricamento della libreria di terze parti.",
     "errorAddingToLibrary": "Impossibile aggiungere l'elemento alla libreria",
     "errorRemovingFromLibrary": "Impossibile rimuovere l'elemento dalla libreria",
     "confirmAddLibrary": "Questo aggiungerà {{numShapes}} forma(e) alla tua libreria. Sei sicuro?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Il file è troppo grande. La dimensione massima consentita è {{maxSize}}.",
     "svgImageInsertError": "Impossibile inserire l'immagine SVG. Il markup SVG non sembra corretto.",
     "invalidSVGString": "SVG non valido.",
-    "cannotResolveCollabServer": "Impossibile connettersi al server di collab. Ricarica la pagina e riprova."
+    "cannotResolveCollabServer": "Impossibile connettersi al server di collab. Ricarica la pagina e riprova.",
+    "importLibraryError": "Impossibile caricare la libreria"
   },
   "toolBar": {
     "selection": "Selezione",
@@ -341,7 +342,8 @@
       "post": "che in breve significa che chiunque possa usarla senza restrizioni."
     },
     "noteItems": "Ogni elemento della libreria deve avere il proprio nome, così che sia filtrabile. Gli elementi della seguente libreria saranno inclusi:",
-    "atleastOneLibItem": "Sei pregato di selezionare almeno un elemento della libreria per iniziare"
+    "atleastOneLibItem": "Sei pregato di selezionare almeno un elemento della libreria per iniziare",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Libreria inviata",

src/locales/ja-JP.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": "開始するには少なくとも1つのライブラリ項目を選択してください"
+    "atleastOneLibItem": "開始するには少なくとも1つのライブラリ項目を選択してください",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "ライブラリを送信しました",

src/locales/kab-KAB.json

@@ -119,7 +119,8 @@
       "unlock": "",
       "lockAll": "",
       "unlockAll": ""
-    }
+    },
+    "statusPublished": ""
   },
   "buttons": {
     "clearReset": "Ales awennez n teɣzut n usuneɣ",
@@ -172,7 +173,6 @@
     "uploadedSecurly": "Asili yettwasɣelles s uwgelhen ixef s ixef, ayagi yebɣa ad d-yini belli aqeddac n Excalidraw akked medden ur zmiren ara ad ɣren agbur.",
     "loadSceneOverridePrompt": "Asali n wunuɣ uffiɣ ad isemselsi agbur-inek (m) yellan. Tebɣiḍ ad tkemmeleḍ?",
     "collabStopOverridePrompt": "Aḥbas n tɣimit ad yesefsex unuɣ-inek (m) yettwaḥerzen yakan s wudem adigan. Tetḥeqqeḍ?\n(Ma tebɣiḍ ad teǧǧeḍ unuɣ-inek (m) adigan, mdel iccer n yiminig, deg umḍiq.)",
-    "errorLoadingLibrary": "Teḍra-d tuccḍa deg usali n temkarḍit n wis kraḍ.",
     "errorAddingToLibrary": "Ulamek ara yettwarnu uferdis ɣer temkarḍit",
     "errorRemovingFromLibrary": "Ulamek ara yettwakkes uferdis si temkarḍit",
     "confirmAddLibrary": "Ayagi adirnu talɣa (win) {{numShapes}} ɣer temkarḍit-inek (m). Tetḥeqqeḍ?",
@@ -189,7 +189,8 @@
     "fileTooBig": "Afaylu meqqer aṭas. Tiddi tafellayt yurgen d {{maxSize}}.",
     "svgImageInsertError": "D awezɣi tugra n tugna SVG. Acraḍ SVG yettban-d d armeɣtu.",
     "invalidSVGString": "SVG armeɣtu.",
-    "cannotResolveCollabServer": "Ulamek tuqqna s aqeddac n umyalel. Ma ulac uɣilif ales asali n usebter sakin eɛreḍ tikkelt-nniḍen."
+    "cannotResolveCollabServer": "Ulamek tuqqna s aqeddac n umyalel. Ma ulac uɣilif ales asali n usebter sakin eɛreḍ tikkelt-nniḍen.",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Tafrayt",
@@ -341,7 +342,8 @@
       "post": "ayen yebɣan ad d-yini belli yal yiwen izmer ad ten-iseqdec war tilist."
     },
     "noteItems": "Yal aferdis n temkarḍit isefk ad isɛu isem-is i yiman-is akken ad yili wamek ara yettusizdeg. Iferdisen-agi n temkarḍit ad ddun:",
-    "atleastOneLibItem": "Ma ulac uɣilif fern ma drus yiwen n uferdis n temkarḍit akken ad tebduḍ"
+    "atleastOneLibItem": "Ma ulac uɣilif fern ma drus yiwen n uferdis n temkarḍit akken ad tebduḍ",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
     "title": "Tamkarḍit tettwazen",