docs: release @excalidraw/excalidraw@0.13.0 🎉 (#5793)

* New translations en.json (Ukrainian)

* New translations en.json (Czech)

* Auto commit: Calculate translation coverage

* New translations en.json (Czech)

* Auto commit: Calculate translation coverage

* New translations en.json (Czech)

* Auto commit: Calculate translation coverage

* New translations en.json (French)

* New translations en.json (Bengali)

* Auto commit: Calculate translation coverage

* New translations en.json (Ukrainian)

* New translations en.json (Ukrainian)

* Auto commit: Calculate translation coverage

* New translations en.json (French)

* New translations en.json (Turkish)

* Auto commit: Calculate translation coverage

* New translations en.json (Turkish)

* Auto commit: Calculate translation coverage

* New translations en.json (Hindi)

* New translations en.json (Kurdish)

* Auto commit: Calculate translation coverage

* New translations en.json (Kurdish)

* New translations en.json (Chinese Simplified)

* Auto commit: Calculate translation coverage

* New translations en.json (Kurdish)

* Auto commit: Calculate translation coverage

* New translations en.json (Kurdish)

* Auto commit: Calculate translation coverage

* New translations en.json (Kurdish)

* Auto commit: Calculate translation coverage

* New translations en.json (Italian)

* Auto commit: Calculate translation coverage

* New translations en.json (Portuguese, Brazilian)

* Auto commit: Calculate translation coverage

* Add Kurdi

* Add Galego

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

.codesandbox/tasks.json

@@ -0,0 +1,43 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "yarn install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "build": {
+      "name": "Build",
+      "command": "yarn build",
+      "runAtStart": false
+    },
+    "fix": {
+      "name": "Fix",
+      "command": "yarn fix",
+      "runAtStart": false
+    },
+    "prettier": {
+      "name": "Prettify",
+      "command": "yarn prettier",
+      "runAtStart": false
+    },
+    "start": {
+      "name": "Start Excalidraw",
+      "command": "yarn start",
+      "runAtStart": true
+    },
+    "test": {
+      "name": "Run Tests",
+      "command": "yarn test",
+      "runAtStart": false
+    },
+    "install-deps": {
+      "name": "Install Dependencies",
+      "command": "yarn install",
+      "restartOn": { "files": ["yarn.lock"] }
+    }
+  }
+}

.gitignore

@@ -25,4 +25,3 @@ src/packages/excalidraw/types
 src/packages/excalidraw/example/public/bundle.js
 src/packages/excalidraw/example/public/excalidraw-assets-dev
 src/packages/excalidraw/example/public/excalidraw.development.js
-

README.md

@@ -88,7 +88,7 @@ Try out [`@excalidraw/excalidraw`](https://www.npmjs.com/package/@excalidraw/exc
 
 ### Code Sandbox
 
-- Go to https://codesandbox.io/s/github/excalidraw/excalidraw
+- Go to https://codesandbox.io/p/github/excalidraw/excalidraw
   - You may need to sign in with GitHub and reload the page
 - You can start coding instantly, and even send PRs from there!
 

package.json

@@ -41,7 +41,8 @@
     "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "1.0.11",
-    "perfect-freehand": "1.0.16",
+    "perfect-freehand": "1.2.0",
+    "pica": "7.1.1",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",

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."
     />
 
+    <!------------------------------------------------------------------------->
+    <!--   to minimize white flash on load when user has dark mode enabled   -->
+    <script>
+      try {
+        //
+        const theme = window.localStorage.getItem("excalidraw-theme");
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
+        }
+      } catch {}
+    </script>
+    <style>
+      html.dark {
+        background-color: #121212;
+        color: #fff;
+      }
+    </style>
+    <!------------------------------------------------------------------------->
+
     <script>
       // Redirect Excalidraw+ users which have auto-redirect enabled.
       //
@@ -98,7 +117,7 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
-    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD === "true") { %>
+    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %>
     <script>
       {
         const _WebSocket = window.WebSocket;
@@ -155,7 +174,7 @@
         width: 1px;
         overflow: hidden;
         clip: rect(1px, 1px, 1px, 1px);
-        white-space: nowrap; /* added line */
+        white-space: nowrap;
         user-select: none;
       }
 

scripts/locales-coverage-description.js

@@ -15,6 +15,7 @@ const crowdinMap = {
   "fa-IR": "en-fa",
   "fi-FI": "en-fi",
   "fr-FR": "en-fr",
+  "gl-ES": "en-gl",
   "he-IL": "en-he",
   "hi-IN": "en-hi",
   "hu-HU": "en-hu",
@@ -23,6 +24,7 @@ const crowdinMap = {
   "ja-JP": "en-ja",
   "kab-KAB": "en-kab",
   "ko-KR": "en-ko",
+  "ku-TR": "en-ku",
   "my-MM": "en-my",
   "nb-NO": "en-nb",
   "nl-NL": "en-nl",
@@ -65,6 +67,7 @@ const flags = {
   "fa-IR": "🇮🇷",
   "fi-FI": "🇫🇮",
   "fr-FR": "🇫🇷",
+  "gl-ES": "🇪🇸",
   "he-IL": "🇮🇱",
   "hi-IN": "🇮🇳",
   "hu-HU": "🇭🇺",
@@ -74,6 +77,7 @@ const flags = {
   "kab-KAB": "🏳",
   "kk-KZ": "🇰🇿",
   "ko-KR": "🇰🇷",
+  "ku-TR": "🏳",
   "lt-LT": "🇱🇹",
   "lv-LV": "🇱🇻",
   "my-MM": "🇲🇲",

src/actions/actionClipboard.tsx

@@ -36,7 +36,7 @@ export const actionCut = register({
     return actionDeleteSelected.perform(elements, appState);
   },
   contextItemLabel: "labels.cut",
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
 
 export const actionCopyAsSvg = register({

src/actions/actionExport.tsx

@@ -244,7 +244,7 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData, appState }) => (
+  PanelComponent: ({ updateData }) => (
     <ToolButton
       type="button"
       icon={load}

src/actions/actionFlip.ts

@@ -6,10 +6,14 @@ import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
 import { AppState } from "../types";
 import { getTransformHandles } from "../element/transformHandles";
-import { isFreeDrawElement, isLinearElement } from "../element/typeChecks";
 import { updateBoundElements } from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
 import { arrayToMap } from "../utils";
+import {
+  getElementAbsoluteCoords,
+  getElementPointsCoords,
+} from "../element/bounds";
+import { isLinearElement } from "../element/typeChecks";
+import { LinearElementEditor } from "../element/linearElementEditor";
 
 const enableActionFlipHorizontal = (
   elements: readonly ExcalidrawElement[],
@@ -118,13 +122,6 @@ const flipElement = (
   const height = element.height;
   const originalAngle = normalizeAngle(element.angle);
 
-  let finalOffsetX = 0;
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    finalOffsetX =
-      element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
-      element.width;
-  }
-
   // Rotate back to zero, if necessary
   mutateElement(element, {
     angle: normalizeAngle(0),
@@ -132,7 +129,6 @@ const flipElement = (
   // Flip unrotated by pulling TransformHandle to opposite side
   const transformHandles = getTransformHandles(element, appState.zoom);
   let usingNWHandle = true;
-  let newNCoordsX = 0;
   let nHandle = transformHandles.nw;
   if (!nHandle) {
     // Use ne handle instead
@@ -146,30 +142,51 @@ const flipElement = (
     }
   }
 
+  let finalOffsetX = 0;
+  if (isLinearElement(element) && element.points.length < 3) {
+    finalOffsetX =
+      element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
+      element.width;
+  }
+
+  let initialPointsCoords;
   if (isLinearElement(element)) {
+    initialPointsCoords = getElementPointsCoords(
+      element,
+      element.points,
+      element.strokeSharpness,
+    );
+  }
+  const initialElementAbsoluteCoords = getElementAbsoluteCoords(element);
+
+  if (isLinearElement(element) && element.points.length < 3) {
     for (let index = 1; index < element.points.length; index++) {
       LinearElementEditor.movePoints(element, [
-        { index, point: [-element.points[index][0], element.points[index][1]] },
+        {
+          index,
+          point: [-element.points[index][0], element.points[index][1]],
+        },
       ]);
     }
     LinearElementEditor.normalizePoints(element);
   } else {
-    // calculate new x-coord for transformation
-    newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
+    const elWidth = initialPointsCoords
+      ? initialPointsCoords[2] - initialPointsCoords[0]
+      : initialElementAbsoluteCoords[2] - initialElementAbsoluteCoords[0];
+
+    const startPoint = initialPointsCoords
+      ? [initialPointsCoords[0], initialPointsCoords[1]]
+      : [initialElementAbsoluteCoords[0], initialElementAbsoluteCoords[1]];
+
     resizeSingleElement(
       new Map().set(element.id, element),
-      true,
+      false,
       element,
       usingNWHandle ? "nw" : "ne",
-      false,
-      newNCoordsX,
-      nHandle[1],
+      true,
+      usingNWHandle ? startPoint[0] + elWidth : startPoint[0] - elWidth,
+      startPoint[1],
     );
-    // fix the size to account for handle sizes
-    mutateElement(element, {
-      width,
-      height,
-    });
   }
 
   // Rotate by (360 degrees - original angle)
@@ -186,9 +203,34 @@ const flipElement = (
   mutateElement(element, {
     x: originalX + finalOffsetX,
     y: originalY,
+    width,
+    height,
   });
 
   updateBoundElements(element);
+
+  if (initialPointsCoords && isLinearElement(element)) {
+    // Adjusting origin because when a beizer curve path exceeds min/max points it offsets the origin.
+    // There's still room for improvement since when the line roughness is > 1
+    // we still have a small offset of the origin when fliipping the element.
+    const finalPointsCoords = getElementPointsCoords(
+      element,
+      element.points,
+      element.strokeSharpness,
+    );
+
+    const topLeftCoordsDiff = initialPointsCoords[0] - finalPointsCoords[0];
+    const topRightCoordDiff = initialPointsCoords[2] - finalPointsCoords[2];
+
+    const coordsDiff = topLeftCoordsDiff + topRightCoordDiff;
+
+    mutateElement(element, {
+      x: element.x + coordsDiff * 0.5,
+      y: element.y,
+      width,
+      height,
+    });
+  }
 };
 
 const rotateElement = (element: ExcalidrawElement, rotationAngle: number) => {

src/actions/actionGroup.tsx

@@ -1,4 +1,4 @@
-import { CODES, KEYS } from "../keys";
+import { KEYS } from "../keys";
 import { t } from "../i18n";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
@@ -132,7 +132,7 @@ export const actionGroup = register({
   contextItemPredicate: (elements, appState) =>
     enableActionGroup(elements, appState),
   keyTest: (event) =>
-    !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
+    !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
@@ -189,7 +189,9 @@ export const actionUngroup = register({
     };
   },
   keyTest: (event) =>
-    event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
+    event.shiftKey &&
+    event[KEYS.CTRL_OR_CMD] &&
+    event.key === KEYS.G.toUpperCase(),
   contextItemLabel: "labels.ungroup",
   contextItemPredicate: (elements, appState) =>
     getSelectedGroupIds(appState).length > 0,

src/actions/actionLinearEditor.ts

@@ -0,0 +1,49 @@
+import { getNonDeletedElements } from "../element";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { isLinearElement } from "../element/typeChecks";
+import { ExcalidrawLinearElement } from "../element/types";
+import { getSelectedElements } from "../scene";
+import { register } from "./register";
+
+export const actionToggleLinearEditor = register({
+  name: "toggleLinearEditor",
+  trackEvent: {
+    category: "element",
+  },
+  contextItemPredicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
+      return true;
+    }
+    return false;
+  },
+  perform(elements, appState, _, app) {
+    const selectedElement = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+      true,
+    )[0] as ExcalidrawLinearElement;
+
+    const editingLinearElement =
+      appState.editingLinearElement?.elementId === selectedElement.id
+        ? null
+        : new LinearElementEditor(selectedElement, app.scene);
+    return {
+      appState: {
+        ...appState,
+        editingLinearElement,
+      },
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: (elements, appState) => {
+    const selectedElement = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+      true,
+    )[0] as ExcalidrawLinearElement;
+    return appState.editingLinearElement?.elementId === selectedElement.id
+      ? "labels.lineEditor.exit"
+      : "labels.lineEditor.edit";
+  },
+});

src/actions/actionMenu.tsx

@@ -4,7 +4,7 @@ import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
-import { CODES, KEYS } from "../keys";
+import { KEYS } from "../keys";
 import { HelpIcon } from "../components/HelpIcon";
 
 export const actionToggleCanvasMenu = register({
@@ -67,7 +67,7 @@ export const actionFullScreen = register({
       commitToHistory: false,
     };
   },
-  keyTest: (event) => event.code === CODES.F && !event[KEYS.CTRL_OR_CMD],
+  keyTest: (event) => event.key === KEYS.F && !event[KEYS.CTRL_OR_CMD],
 });
 
 export const actionShortcuts = register({

src/actions/index.ts

@@ -85,3 +85,4 @@ export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "../element/Hyperlink";
 export { actionToggleLock } from "./actionToggleLock";
+export { actionToggleLinearEditor } from "./actionLinearEditor";

src/actions/manager.tsx

@@ -137,7 +137,6 @@ export class ActionManager {
    */
   renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
     const canvasActions = this.app.props.UIOptions.canvasActions;
-
     if (
       this.actions[name] &&
       "PanelComponent" in this.actions[name] &&
@@ -147,6 +146,7 @@ export class ActionManager {
     ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
+      PanelComponent.displayName = "PanelComponent";
       const elements = this.getElementsIncludingDeleted();
       const appState = this.getAppState();
       const updateData = (formState?: any) => {

src/actions/types.ts

@@ -111,7 +111,8 @@ export type ActionName =
   | "hyperlink"
   | "eraser"
   | "bindText"
-  | "toggleLock";
+  | "toggleLock"
+  | "toggleLinearEditor";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/appState.ts

@@ -57,8 +57,7 @@ export const getDefaultAppState = (): Omit<
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
-    isLibraryOpen: false,
-    isLibraryMenuDocked: false,
+    isSidebarDocked: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -67,6 +66,7 @@ export const getDefaultAppState = (): Omit<
     name: `${t("labels.untitled")}-${getDateTime()}`,
     openMenu: null,
     openPopup: null,
+    openSidebar: null,
     pasteDialog: { shown: false, data: null },
     previousSelectedElementIds: {},
     resizingElement: null,
@@ -148,8 +148,7 @@ const APP_STATE_STORAGE_CONF = (<
   gridSize: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
-  isLibraryOpen: { browser: true, export: false, server: false },
-  isLibraryMenuDocked: { browser: true, export: false, server: false },
+  isSidebarDocked: { browser: true, export: false, server: false },
   isLoading: { browser: false, export: false, server: false },
   isResizing: { browser: false, export: false, server: false },
   isRotating: { browser: false, export: false, server: false },
@@ -160,6 +159,7 @@ const APP_STATE_STORAGE_CONF = (<
   offsetTop: { browser: false, export: false, server: false },
   openMenu: { browser: true, export: false, server: false },
   openPopup: { browser: false, export: false, server: false },
+  openSidebar: { browser: true, 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 },

src/components/Actions.tsx

@@ -26,17 +26,17 @@ import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
+import clsx from "clsx";
+import { actionToggleZenMode } from "../actions";
 
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  activeTool,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  activeTool: AppState["activeTool"]["type"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
@@ -56,13 +56,13 @@ export const SelectedShapeActions = ({
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(activeTool) ||
+    hasBackground(appState.activeTool.type) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(activeTool) ||
+    hasBackground(appState.activeTool.type) ||
     targetElements.some((element) => hasBackground(element.type));
 
   const showLinkIcon =
@@ -79,23 +79,23 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(activeTool) &&
-        activeTool !== "image" &&
+      {((hasStrokeColor(appState.activeTool.type) &&
+        appState.activeTool.type !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(activeTool) ||
+      {(hasStrokeWidth(appState.activeTool.type) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(activeTool === "freedraw" ||
+      {(appState.activeTool.type === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(activeTool) ||
+      {(hasStrokeStyle(appState.activeTool.type) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
@@ -103,12 +103,12 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(activeTool) ||
+      {(canChangeSharpness(appState.activeTool.type) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(activeTool) ||
+      {(hasText(appState.activeTool.type) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -123,7 +123,7 @@ export const SelectedShapeActions = ({
         (element) =>
           hasBoundTextElement(element) || isBoundToContainer(element),
       ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(activeTool) ||
+      {(canHaveArrowheads(appState.activeTool.type) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}
@@ -271,3 +271,45 @@ export const ZoomActions = ({
     </Stack.Row>
   </Stack.Col>
 );
+
+export const UndoRedoActions = ({
+  renderAction,
+  className,
+}: {
+  renderAction: ActionManager["renderAction"];
+  className?: string;
+}) => (
+  <div className={`undo-redo-buttons ${className}`}>
+    {renderAction("undo", { size: "small" })}
+    {renderAction("redo", { size: "small" })}
+  </div>
+);
+
+export const ExitZenModeAction = ({
+  actionManager,
+  showExitZenModeBtn,
+}: {
+  actionManager: ActionManager;
+  showExitZenModeBtn: boolean;
+}) => (
+  <button
+    className={clsx("disable-zen-mode", {
+      "disable-zen-mode--visible": showExitZenModeBtn,
+    })}
+    onClick={() => actionManager.executeAction(actionToggleZenMode)}
+  >
+    {t("buttons.exitZenMode")}
+  </button>
+);
+
+export const FinalizeAction = ({
+  renderAction,
+  className,
+}: {
+  renderAction: ActionManager["renderAction"];
+  className?: string;
+}) => (
+  <div className={`finalize-button ${className}`}>
+    {renderAction("finalize", { size: "small" })}
+  </div>
+);

src/components/App.tsx

@@ -34,6 +34,7 @@ import {
   actionUngroup,
   actionLink,
   actionToggleLock,
+  actionToggleLinearEditor,
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
@@ -252,6 +253,7 @@ import {
   getApproxMinLineHeight,
   getApproxMinLineWidth,
   getBoundTextElement,
+  getContainerDims,
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
 import {
@@ -272,6 +274,7 @@ const deviceContextInitialValue = {
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 export const useDevice = () => useContext<Device>(DeviceContext);
+
 const ExcalidrawContainerContext = React.createContext<{
   container: HTMLDivElement | null;
   id: string | null;
@@ -279,6 +282,29 @@ const ExcalidrawContainerContext = React.createContext<{
 export const useExcalidrawContainer = () =>
   useContext(ExcalidrawContainerContext);
 
+const ExcalidrawElementsContext = React.createContext<
+  readonly NonDeletedExcalidrawElement[]
+>([]);
+
+const ExcalidrawAppStateContext = React.createContext<AppState>({
+  ...getDefaultAppState(),
+  width: 0,
+  height: 0,
+  offsetLeft: 0,
+  offsetTop: 0,
+});
+
+const ExcalidrawSetAppStateContent = React.createContext<
+  React.Component<any, AppState>["setState"]
+>(() => {});
+
+export const useExcalidrawElements = () =>
+  useContext(ExcalidrawElementsContext);
+export const useExcalidrawAppState = () =>
+  useContext(ExcalidrawAppStateContext);
+export const useExcalidrawSetAppState = () =>
+  useContext(ExcalidrawSetAppStateContent);
+
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
 let cursorX = 0;
@@ -361,7 +387,7 @@ class App extends React.Component<AppProps, AppState> {
       width: window.innerWidth,
       height: window.innerHeight,
       showHyperlinkPopup: false,
-      isLibraryMenuDocked: false,
+      isSidebarDocked: false,
     };
 
     this.id = nanoid();
@@ -393,6 +419,7 @@ class App extends React.Component<AppProps, AppState> {
         setActiveTool: this.setActiveTool,
         setCursor: this.setCursor,
         resetCursor: this.resetCursor,
+        toggleMenu: this.toggleMenu,
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -505,63 +532,68 @@ class App extends React.Component<AppProps, AppState> {
           value={this.excalidrawContainerValue}
         >
           <DeviceContext.Provider value={this.device}>
-            <LayerUI
-              canvas={this.canvas}
-              appState={this.state}
-              files={this.files}
-              setAppState={this.setAppState}
-              actionManager={this.actionManager}
-              elements={this.scene.getNonDeletedElements()}
-              onCollabButtonClick={onCollabButtonClick}
-              onLockToggle={this.toggleLock}
-              onPenModeToggle={this.togglePenMode}
-              onInsertElements={(elements) =>
-                this.addElementsFromPasteOrLibrary({
-                  elements,
-                  position: "center",
-                  files: null,
-                })
-              }
-              langCode={getLanguage().code}
-              isCollaborating={this.props.isCollaborating}
-              renderTopRightUI={renderTopRightUI}
-              renderCustomFooter={renderFooter}
-              renderCustomStats={renderCustomStats}
-              showExitZenModeBtn={
-                typeof this.props?.zenModeEnabled === "undefined" &&
-                this.state.zenModeEnabled
-              }
-              showThemeBtn={
-                typeof this.props?.theme === "undefined" &&
-                this.props.UIOptions.canvasActions.theme
-              }
-              libraryReturnUrl={this.props.libraryReturnUrl}
-              UIOptions={this.props.UIOptions}
-              focusContainer={this.focusContainer}
-              library={this.library}
-              id={this.id}
-              onImageAction={this.onImageAction}
-            />
-            <div className="excalidraw-textEditorContainer" />
-            <div className="excalidraw-contextMenuContainer" />
-            {selectedElement.length === 1 && this.state.showHyperlinkPopup && (
-              <Hyperlink
-                key={selectedElement[0].id}
-                element={selectedElement[0]}
-                appState={this.state}
-                setAppState={this.setAppState}
-                onLinkOpen={this.props.onLinkOpen}
-              />
-            )}
-            {this.state.toast !== null && (
-              <Toast
-                message={this.state.toast.message}
-                onClose={() => this.setToast(null)}
-                duration={this.state.toast.duration}
-                closable={this.state.toast.closable}
-              />
-            )}
-            <main>{this.renderCanvas()}</main>
+            <ExcalidrawSetAppStateContent.Provider value={this.setAppState}>
+              <ExcalidrawAppStateContext.Provider value={this.state}>
+                <ExcalidrawElementsContext.Provider
+                  value={this.scene.getNonDeletedElements()}
+                >
+                  <LayerUI
+                    canvas={this.canvas}
+                    appState={this.state}
+                    files={this.files}
+                    setAppState={this.setAppState}
+                    actionManager={this.actionManager}
+                    elements={this.scene.getNonDeletedElements()}
+                    onCollabButtonClick={onCollabButtonClick}
+                    onLockToggle={this.toggleLock}
+                    onPenModeToggle={this.togglePenMode}
+                    onInsertElements={(elements) =>
+                      this.addElementsFromPasteOrLibrary({
+                        elements,
+                        position: "center",
+                        files: null,
+                      })
+                    }
+                    langCode={getLanguage().code}
+                    isCollaborating={this.props.isCollaborating}
+                    renderTopRightUI={renderTopRightUI}
+                    renderCustomFooter={renderFooter}
+                    renderCustomStats={renderCustomStats}
+                    renderCustomSidebar={this.props.renderSidebar}
+                    showExitZenModeBtn={
+                      typeof this.props?.zenModeEnabled === "undefined" &&
+                      this.state.zenModeEnabled
+                    }
+                    libraryReturnUrl={this.props.libraryReturnUrl}
+                    UIOptions={this.props.UIOptions}
+                    focusContainer={this.focusContainer}
+                    library={this.library}
+                    id={this.id}
+                    onImageAction={this.onImageAction}
+                  />
+                  <div className="excalidraw-textEditorContainer" />
+                  <div className="excalidraw-contextMenuContainer" />
+                  {selectedElement.length === 1 &&
+                    this.state.showHyperlinkPopup && (
+                      <Hyperlink
+                        key={selectedElement[0].id}
+                        element={selectedElement[0]}
+                        setAppState={this.setAppState}
+                        onLinkOpen={this.props.onLinkOpen}
+                      />
+                    )}
+                  {this.state.toast !== null && (
+                    <Toast
+                      message={this.state.toast.message}
+                      onClose={() => this.setToast(null)}
+                      duration={this.state.toast.duration}
+                      closable={this.state.toast.closable}
+                    />
+                  )}
+                  <main>{this.renderCanvas()}</main>
+                </ExcalidrawElementsContext.Provider>{" "}
+              </ExcalidrawAppStateContext.Provider>
+            </ExcalidrawSetAppStateContent.Provider>
           </DeviceContext.Provider>
         </ExcalidrawContainerContext.Provider>
       </div>
@@ -622,7 +654,8 @@ class App extends React.Component<AppProps, AppState> {
         let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         let gridSize = actionResult?.appState?.gridSize || null;
-        let theme = actionResult?.appState?.theme || THEME.LIGHT;
+        const theme =
+          actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
         let name = actionResult?.appState?.name ?? this.state.name;
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
@@ -636,10 +669,6 @@ class App extends React.Component<AppProps, AppState> {
           gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
         }
 
-        if (typeof this.props.theme !== "undefined") {
-          theme = this.props.theme;
-        }
-
         if (typeof this.props.name !== "undefined") {
           name = this.props.name;
         }
@@ -732,6 +761,9 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
+    if (this.props.theme) {
+      this.setState({ theme: this.props.theme });
+    }
     if (!this.state.isLoading) {
       this.setState({ isLoading: true });
     }
@@ -761,12 +793,12 @@ class App extends React.Component<AppProps, AppState> {
     const scene = restore(initialData, null, null);
     scene.appState = {
       ...scene.appState,
+      theme: this.props.theme || scene.appState.theme,
       // we're falling back to current (pre-init) state when deciding
       // whether to open the library, to handle a case where we
       // update the state outside of initialData (e.g. when loading the app
       // with a library install link, which should auto-open the library)
-      isLibraryOpen:
-        initialData?.appState?.isLibraryOpen || this.state.isLibraryOpen,
+      openSidebar: scene.appState?.openSidebar || this.state.openSidebar,
       activeTool:
         scene.appState.activeTool.type === "image"
           ? { ...scene.appState.activeTool, type: "selection" }
@@ -1133,7 +1165,11 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       // defer so that the commitToHistory flag isn't reset via current update
       setTimeout(() => {
-        this.actionManager.executeAction(actionFinalize);
+        // execute only if the condition still holds when the deferred callback
+        // executes (it can be scheduled multiple times depending on how
+        // many times the component renders)
+        this.state.editingLinearElement &&
+          this.actionManager.executeAction(actionFinalize);
       });
     }
 
@@ -1536,10 +1572,17 @@ class App extends React.Component<AppProps, AppState> {
       selectGroupsForSelectedElements(
         {
           ...this.state,
-          isLibraryOpen:
-            this.state.isLibraryOpen && this.device.canDeviceFitSidebar
-              ? this.state.isLibraryMenuDocked
-              : false,
+          // keep sidebar (presumably the library) open if it's docked and
+          // can fit.
+          //
+          // Note, we should close the sidebar only if we're dropping items
+          // from library, not when pasting from clipboard. Alas.
+          openSidebar:
+            this.state.openSidebar &&
+            this.device.canDeviceFitSidebar &&
+            this.state.isSidebarDocked
+              ? this.state.openSidebar
+              : null,
           selectedElementIds: newElements.reduce(
             (acc: Record<ExcalidrawElement["id"], true>, element) => {
               if (!isBoundToContainer(element)) {
@@ -1597,8 +1640,8 @@ class App extends React.Component<AppProps, AppState> {
 
   // Collaboration
 
-  setAppState = (obj: any) => {
-    this.setState(obj);
+  setAppState: React.Component<any, AppState>["setState"] = (state) => {
+    this.setState(state);
   };
 
   removePointer = (event: React.PointerEvent<HTMLElement> | PointerEvent) => {
@@ -1736,6 +1779,35 @@ class App extends React.Component<AppProps, AppState> {
     this.setState({});
   };
 
+  /**
+   * @returns whether the menu was toggled on or off
+   */
+  public toggleMenu = (
+    type: "library" | "customSidebar",
+    force?: boolean,
+  ): boolean => {
+    if (type === "customSidebar" && !this.props.renderSidebar) {
+      console.warn(
+        `attempting to toggle "customSidebar", but no "props.renderSidebar" is defined`,
+      );
+      return false;
+    }
+
+    if (type === "library" || type === "customSidebar") {
+      let nextValue;
+      if (force === undefined) {
+        nextValue = this.state.openSidebar === type ? null : type;
+      } else {
+        nextValue = force ? type : null;
+      }
+      this.setState({ openSidebar: nextValue });
+
+      return !!nextValue;
+    }
+
+    return false;
+  };
+
   private updateCurrentCursorPosition = withBatchedUpdates(
     (event: MouseEvent) => {
       cursorX = event.clientX;
@@ -1811,8 +1883,7 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (event.code === CODES.ZERO) {
-        const nextState = !this.state.isLibraryOpen;
-        this.setState({ isLibraryOpen: nextState });
+        const nextState = this.toggleMenu("library");
         // track only openings
         if (nextState) {
           trackEvent(
@@ -2361,8 +2432,9 @@ class App extends React.Component<AppProps, AppState> {
       };
       const minWidth = getApproxMinLineWidth(getFontString(fontString));
       const minHeight = getApproxMinLineHeight(getFontString(fontString));
-      const newHeight = Math.max(container.height, minHeight);
-      const newWidth = Math.max(container.width, minWidth);
+      const containerDims = getContainerDims(container);
+      const newHeight = Math.max(containerDims.height, minHeight);
+      const newWidth = Math.max(containerDims.width, minWidth);
       mutateElement(container, { height: newHeight, width: newWidth });
       sceneX = container.x + newWidth / 2;
       sceneY = container.y + newHeight / 2;
@@ -2695,18 +2767,23 @@ class App extends React.Component<AppProps, AppState> {
         event,
         scenePointerX,
         scenePointerY,
-        this.state.editingLinearElement,
-        this.state.gridSize,
+        this.state,
       );
-      if (editingLinearElement !== this.state.editingLinearElement) {
+
+      if (
+        editingLinearElement &&
+        editingLinearElement !== this.state.editingLinearElement
+      ) {
         // Since we are reading from previous state which is not possible with
         // automatic batching in React 18 hence using flush sync to synchronously
         // update the state. Check https://github.com/excalidraw/excalidraw/pull/5508 for more details.
         flushSync(() => {
-          this.setState({ editingLinearElement });
+          this.setState({
+            editingLinearElement,
+          });
         });
       }
-      if (editingLinearElement.lastUncommittedPoint != null) {
+      if (editingLinearElement?.lastUncommittedPoint != null) {
         this.maybeSuggestBindingAtCursor(scenePointer);
       } else {
         this.setState({ suggestedBindings: [] });
@@ -3035,7 +3112,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     if (this.state.selectedLinearElement) {
       let hoverPointIndex = -1;
-      let midPointHovered = false;
+      let segmentMidPointHoveredCoords = null;
       if (
         isHittingElementNotConsideringBoundingBox(element, this.state, [
           scenePointerX,
@@ -3048,13 +3125,14 @@ class App extends React.Component<AppProps, AppState> {
           scenePointerX,
           scenePointerY,
         );
-        midPointHovered = LinearElementEditor.isHittingMidPoint(
-          linearElementEditor,
-          { x: scenePointerX, y: scenePointerY },
-          this.state,
-        );
+        segmentMidPointHoveredCoords =
+          LinearElementEditor.getSegmentMidpointHitCoords(
+            linearElementEditor,
+            { x: scenePointerX, y: scenePointerY },
+            this.state,
+          );
 
-        if (hoverPointIndex >= 0 || midPointHovered) {
+        if (hoverPointIndex >= 0 || segmentMidPointHoveredCoords) {
           setCursor(this.canvas, CURSOR_TYPE.POINTER);
         } else {
           setCursor(this.canvas, CURSOR_TYPE.MOVE);
@@ -3083,12 +3161,15 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
-        this.state.selectedLinearElement.midPointHovered !== midPointHovered
+        !LinearElementEditor.arePointsEqual(
+          this.state.selectedLinearElement.segmentMidPointHoveredCoords,
+          segmentMidPointHoveredCoords,
+        )
       ) {
         this.setState({
           selectedLinearElement: {
             ...this.state.selectedLinearElement,
-            midPointHovered,
+            segmentMidPointHoveredCoords,
           },
         });
       }
@@ -5841,6 +5922,12 @@ class App extends React.Component<AppProps, AppState> {
       this.actionManager.getAppState(),
     );
 
+    const mayBeAllowToggleLineEditing =
+      actionToggleLinearEditor.contextItemPredicate(
+        this.actionManager.getElementsIncludingDeleted(),
+        this.actionManager.getAppState(),
+      );
+
     const separator = "separator";
 
     const elements = this.scene.getNonDeletedElements();
@@ -5982,6 +6069,7 @@ class App extends React.Component<AppProps, AppState> {
             maybeFlipHorizontal && actionFlipHorizontal,
             maybeFlipVertical && actionFlipVertical,
             (maybeFlipHorizontal || maybeFlipVertical) && separator,
+            mayBeAllowToggleLineEditing && actionToggleLinearEditor,
             actionLink.contextItemPredicate(elements, this.state) && actionLink,
             actionDuplicateSelection,
             actionToggleLock,

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -1,20 +1,12 @@
-import React from "react";
 import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
 
 export const BackgroundPickerAndDarkModeToggle = ({
-  appState,
-  setAppState,
   actionManager,
-  showThemeBtn,
 }: {
   actionManager: ActionManager;
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-  showThemeBtn: boolean;
 }) => (
   <div style={{ display: "flex" }}>
     {actionManager.renderAction("changeViewBackgroundColor")}
-    {showThemeBtn && actionManager.renderAction("toggleTheme")}
+    {actionManager.renderAction("toggleTheme")}
   </div>
 );

src/components/ColorPicker.tsx

@@ -343,6 +343,8 @@ const ColorInput = React.forwardRef(
   },
 );
 
+ColorInput.displayName = "ColorInput";
+
 export const ColorPicker = ({
   type,
   color,

src/components/Footer.tsx

@@ -0,0 +1,106 @@
+import clsx from "clsx";
+import { ActionManager } from "../actions/manager";
+import { AppState, ExcalidrawProps } from "../types";
+import {
+  ExitZenModeAction,
+  FinalizeAction,
+  UndoRedoActions,
+  ZoomActions,
+} from "./Actions";
+import { useDevice } from "./App";
+import { Island } from "./Island";
+import { Section } from "./Section";
+import Stack from "./Stack";
+
+const Footer = ({
+  appState,
+  actionManager,
+  renderCustomFooter,
+  showExitZenModeBtn,
+}: {
+  appState: AppState;
+  actionManager: ActionManager;
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
+  showExitZenModeBtn: boolean;
+}) => {
+  const device = useDevice();
+  const showFinalize =
+    !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
+  return (
+    <footer
+      role="contentinfo"
+      className="layer-ui__wrapper__footer App-menu App-menu_bottom"
+    >
+      <div
+        className={clsx("layer-ui__wrapper__footer-left zen-mode-transition", {
+          "layer-ui__wrapper__footer-left--transition-left":
+            appState.zenModeEnabled,
+        })}
+      >
+        <Stack.Col gap={2}>
+          <Section heading="canvasActions">
+            <Island padding={1}>
+              <ZoomActions
+                renderAction={actionManager.renderAction}
+                zoom={appState.zoom}
+              />
+            </Island>
+            {!appState.viewModeEnabled && (
+              <>
+                <UndoRedoActions
+                  renderAction={actionManager.renderAction}
+                  className={clsx("zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-bottom":
+                      appState.zenModeEnabled,
+                  })}
+                />
+
+                <div
+                  className={clsx("eraser-buttons zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-left":
+                      appState.zenModeEnabled,
+                  })}
+                >
+                  {actionManager.renderAction("eraser", { size: "small" })}
+                </div>
+              </>
+            )}
+            {showFinalize && (
+              <FinalizeAction
+                renderAction={actionManager.renderAction}
+                className={clsx("zen-mode-transition", {
+                  "layer-ui__wrapper__footer-left--transition-left":
+                    appState.zenModeEnabled,
+                })}
+              />
+            )}
+          </Section>
+        </Stack.Col>
+      </div>
+      <div
+        className={clsx(
+          "layer-ui__wrapper__footer-center zen-mode-transition",
+          {
+            "layer-ui__wrapper__footer-left--transition-bottom":
+              appState.zenModeEnabled,
+          },
+        )}
+      >
+        {renderCustomFooter?.(false, appState)}
+      </div>
+      <div
+        className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
+          "transition-right disable-pointerEvents": appState.zenModeEnabled,
+        })}
+      >
+        {actionManager.renderAction("toggleShortcuts")}
+      </div>
+      <ExitZenModeAction
+        actionManager={actionManager}
+        showExitZenModeBtn={showExitZenModeBtn}
+      />
+    </footer>
+  );
+};
+
+export default Footer;

src/components/HintViewer.tsx

@@ -3,7 +3,7 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { getSelectedElements } from "../scene";
 
 import "./HintViewer.scss";
-import { AppState } from "../types";
+import { AppState, Device } from "../types";
 import {
   isImageElement,
   isLinearElement,
@@ -17,13 +17,19 @@ interface HintViewerProps {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   isMobile: boolean;
+  device: Device;
 }
 
-const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
+const getHints = ({
+  appState,
+  elements,
+  isMobile,
+  device,
+}: HintViewerProps) => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.isLibraryOpen) {
+  if (appState.openSidebar === "library" && !device.canDeviceFitSidebar) {
     return null;
   }
 
@@ -111,11 +117,13 @@ export const HintViewer = ({
   appState,
   elements,
   isMobile,
+  device,
 }: HintViewerProps) => {
   let hint = getHints({
     appState,
     elements,
     isMobile,
+    device,
   });
   if (!hint) {
     return null;

src/components/InitializeApp.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { LoadingMessage } from "./LoadingMessage";
 import { defaultLang, Language, languages, setLanguage } from "../i18n";
+import { Theme } from "../element/types";
 
 interface Props {
   langCode: Language["code"];
   children: React.ReactElement;
+  theme?: Theme;
 }
 
 export const InitializeApp = (props: Props) => {
@@ -21,5 +23,5 @@ export const InitializeApp = (props: Props) => {
     updateLang();
   }, [props.langCode]);
 
-  return loading ? <LoadingMessage /> : props.children;
+  return loading ? <LoadingMessage theme={props.theme} /> : props.children;
 };

src/components/LayerUI.scss

@@ -1,48 +1,6 @@
 @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;

src/components/LayerUI.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
-import React, { useCallback } from "react";
+import React from "react";
 import { ActionManager } from "../actions/manager";
 import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import { calculateScrollCenter, getSelectedElements } from "../scene";
+import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
 import { muteFSAbortError } from "../utils";
-import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
@@ -26,7 +26,7 @@ import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
 import { UserList } from "./UserList";
-import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
+import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
@@ -39,7 +39,10 @@ import { trackEvent } from "../analytics";
 import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
-import { actionToggleZenMode } from "../actions";
+import Footer from "./Footer";
+import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
+import { jotaiScope } from "../jotai";
+import { useAtom } from "jotai";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -53,12 +56,12 @@ interface LayerUIProps {
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   showExitZenModeBtn: boolean;
-  showThemeBtn: boolean;
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
   renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
+  renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
   focusContainer: () => void;
@@ -71,18 +74,18 @@ const LayerUI = ({
   appState,
   files,
   setAppState,
-  canvas,
   elements,
+  canvas,
   onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
-  showThemeBtn,
   isCollaborating,
   renderTopRightUI,
   renderCustomFooter,
   renderCustomStats,
+  renderCustomSidebar,
   libraryReturnUrl,
   UIOptions,
   focusContainer,
@@ -209,12 +212,7 @@ const LayerUI = ({
               />
             )}
           </Stack.Row>
-          <BackgroundPickerAndDarkModeToggle
-            actionManager={actionManager}
-            appState={appState}
-            setAppState={setAppState}
-            showThemeBtn={showThemeBtn}
-          />
+          <BackgroundPickerAndDarkModeToggle actionManager={actionManager} />
           {appState.fileHandle && (
             <>{actionManager.renderAction("saveToActiveFile")}</>
           )}
@@ -244,48 +242,11 @@ const LayerUI = ({
           appState={appState}
           elements={elements}
           renderAction={actionManager.renderAction}
-          activeTool={appState.activeTool.type}
         />
       </Island>
     </Section>
   );
 
-  const closeLibrary = useCallback(() => {
-    const isDialogOpen = !!document.querySelector(".Dialog");
-
-    // Prevent closing if any dialog is open
-    if (isDialogOpen) {
-      return;
-    }
-    setAppState({ isLibraryOpen: false });
-  }, [setAppState]);
-
-  const deselectItems = useCallback(() => {
-    setAppState({
-      selectedElementIds: {},
-      selectedGroupIds: {},
-    });
-  }, [setAppState]);
-
-  const libraryMenu = appState.isLibraryOpen ? (
-    <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState, true)}
-      onClose={closeLibrary}
-      onInsertLibraryItems={(libraryItems) => {
-        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
-      }}
-      onAddToLibrary={deselectItems}
-      setAppState={setAppState}
-      libraryReturnUrl={libraryReturnUrl}
-      focusContainer={focusContainer}
-      library={library}
-      theme={appState.theme}
-      files={files}
-      id={id}
-      appState={appState}
-    />
-  ) : null;
-
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = showSelectedShapeActions(
       appState,
@@ -339,6 +300,7 @@ const LayerUI = ({
                         appState={appState}
                         elements={elements}
                         isMobile={device.isMobile}
+                        device={device}
                       />
                       {heading}
                       <Stack.Row gap={1}>
@@ -383,100 +345,24 @@ const LayerUI = ({
     );
   };
 
-  const renderBottomAppMenu = () => {
-    return (
-      <footer
-        role="contentinfo"
-        className="layer-ui__wrapper__footer App-menu App-menu_bottom"
-      >
-        <div
-          className={clsx(
-            "layer-ui__wrapper__footer-left zen-mode-transition",
-            {
-              "layer-ui__wrapper__footer-left--transition-left":
-                appState.zenModeEnabled,
-            },
-          )}
-        >
-          <Stack.Col gap={2}>
-            <Section heading="canvasActions">
-              <Island padding={1}>
-                <ZoomActions
-                  renderAction={actionManager.renderAction}
-                  zoom={appState.zoom}
-                />
-              </Island>
-              {!appState.viewModeEnabled && (
-                <>
-                  <div
-                    className={clsx("undo-redo-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-bottom":
-                        appState.zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("undo", { size: "small" })}
-                    {actionManager.renderAction("redo", { size: "small" })}
-                  </div>
-
-                  <div
-                    className={clsx("eraser-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        appState.zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("eraser", { size: "small" })}
-                  </div>
-                </>
-              )}
-              {!appState.viewModeEnabled &&
-                appState.multiElement &&
-                device.isTouchScreen && (
-                  <div
-                    className={clsx("finalize-button zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        appState.zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("finalize", { size: "small" })}
-                  </div>
-                )}
-            </Section>
-          </Stack.Col>
-        </div>
-        <div
-          className={clsx(
-            "layer-ui__wrapper__footer-center zen-mode-transition",
-            {
-              "layer-ui__wrapper__footer-left--transition-bottom":
-                appState.zenModeEnabled,
-            },
-          )}
-        >
-          {renderCustomFooter?.(false, appState)}
-        </div>
-        <div
-          className={clsx(
-            "layer-ui__wrapper__footer-right zen-mode-transition",
-            {
-              "transition-right disable-pointerEvents": appState.zenModeEnabled,
-            },
-          )}
-        >
-          {actionManager.renderAction("toggleShortcuts")}
-        </div>
-        <button
-          className={clsx("disable-zen-mode", {
-            "disable-zen-mode--visible": showExitZenModeBtn,
-          })}
-          onClick={() => actionManager.executeAction(actionToggleZenMode)}
-        >
-          {t("buttons.exitZenMode")}
-        </button>
-      </footer>
-    );
+  const renderSidebars = () => {
+    return appState.openSidebar === "customSidebar" ? (
+      renderCustomSidebar?.() || null
+    ) : appState.openSidebar === "library" ? (
+      <LibraryMenu
+        appState={appState}
+        onInsertElements={onInsertElements}
+        libraryReturnUrl={libraryReturnUrl}
+        focusContainer={focusContainer}
+        library={library}
+        id={id}
+      />
+    ) : null;
   };
 
-  const dialogs = (
+  const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
+
+  return (
     <>
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
@@ -504,86 +390,80 @@ const LayerUI = ({
           }
         />
       )}
-    </>
-  );
+      {device.isMobile && (
+        <MobileMenu
+          appState={appState}
+          elements={elements}
+          actionManager={actionManager}
+          renderJSONExportDialog={renderJSONExportDialog}
+          renderImageExportDialog={renderImageExportDialog}
+          setAppState={setAppState}
+          onCollabButtonClick={onCollabButtonClick}
+          onLockToggle={() => onLockToggle()}
+          onPenModeToggle={onPenModeToggle}
+          canvas={canvas}
+          isCollaborating={isCollaborating}
+          renderCustomFooter={renderCustomFooter}
+          onImageAction={onImageAction}
+          renderTopRightUI={renderTopRightUI}
+          renderCustomStats={renderCustomStats}
+          renderSidebars={renderSidebars}
+          device={device}
+        />
+      )}
 
-  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
-        appState={appState}
-        elements={elements}
-        actionManager={actionManager}
-        libraryMenu={libraryMenu}
-        renderJSONExportDialog={renderJSONExportDialog}
-        renderImageExportDialog={renderImageExportDialog}
-        setAppState={setAppState}
-        onCollabButtonClick={onCollabButtonClick}
-        onLockToggle={() => onLockToggle()}
-        onPenModeToggle={onPenModeToggle}
-        canvas={canvas}
-        isCollaborating={isCollaborating}
-        renderCustomFooter={renderCustomFooter}
-        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)),
-        })}
-        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),
-              });
-            }}
+      {!device.isMobile && (
+        <>
+          <div
+            className={clsx("layer-ui__wrapper", {
+              "disable-pointerEvents":
+                appState.draggingElement ||
+                appState.resizingElement ||
+                (appState.editingElement &&
+                  !isTextElement(appState.editingElement)),
+            })}
+            style={
+              ((appState.openSidebar === "library" &&
+                appState.isSidebarDocked) ||
+                hostSidebarCounters.docked) &&
+              device.canDeviceFitSidebar
+                ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
+                : {}
+            }
           >
-            {t("buttons.scrollBackToContent")}
-          </button>
-        )}
-      </div>
-      {appState.isLibraryOpen && (
-        <div className="layer-ui__sidebar">{libraryMenu}</div>
+            {renderFixedSideContainer()}
+            <Footer
+              appState={appState}
+              actionManager={actionManager}
+              renderCustomFooter={renderCustomFooter}
+              showExitZenModeBtn={showExitZenModeBtn}
+            />
+            {appState.showStats && (
+              <Stats
+                appState={appState}
+                setAppState={setAppState}
+                elements={elements}
+                onClose={() => {
+                  actionManager.executeAction(actionToggleStats);
+                }}
+                renderCustomStats={renderCustomStats}
+              />
+            )}
+            {appState.scrolledOutside && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
+              >
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </div>
+          {renderSidebars()}
+        </>
       )}
     </>
   );
@@ -602,8 +482,12 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const nextAppState = getNecessaryObj(next.appState);
 
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
+
   return (
     prev.renderCustomFooter === next.renderCustomFooter &&
+    prev.renderTopRightUI === next.renderTopRightUI &&
+    prev.renderCustomStats === next.renderCustomStats &&
+    prev.renderCustomSidebar === next.renderCustomSidebar &&
     prev.langCode === next.langCode &&
     prev.elements === next.elements &&
     prev.files === next.files &&

src/components/LibraryButton.tsx

@@ -40,10 +40,10 @@ export const LibraryButton: React.FC<{
           document
             .querySelector(".layer-ui__wrapper")
             ?.classList.remove("animate");
-          const nextState = event.target.checked;
-          setAppState({ isLibraryOpen: nextState });
+          const isOpen = event.target.checked;
+          setAppState({ openSidebar: isOpen ? "library" : null });
           // track only openings
-          if (nextState) {
+          if (isOpen) {
             trackEvent(
               "library",
               "toggleLibrary (open)",
@@ -51,7 +51,7 @@ export const LibraryButton: React.FC<{
             );
           }
         }}
-        checked={appState.isLibraryOpen}
+        checked={appState.openSidebar === "library"}
         aria-label={capitalizeString(t("toolBar.library"))}
         aria-keyshortcuts="0"
       />

src/components/LibraryMenu.scss

@@ -1,10 +1,16 @@
 @import "open-color/open-color";
 
 .excalidraw {
+  .layer-ui__library-sidebar {
+    display: flex;
+    flex-direction: column;
+  }
+
   .layer-ui__library {
     display: flex;
-    align-items: center;
-    justify-content: center;
+    flex-direction: column;
+
+    flex: 1 1 auto;
 
     .layer-ui__library-header {
       display: flex;
@@ -23,16 +29,100 @@
   }
 
   .layer-ui__sidebar {
-    .layer-ui__library {
-      padding: 0;
-      height: 100%;
-    }
     .library-menu-items-container {
       height: 100%;
       width: 100%;
     }
   }
 
+  .library-actions {
+    width: 100%;
+    display: flex;
+    margin-right: auto;
+    align-items: center;
+
+    button .library-actions-counter {
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      width: 1em;
+      height: 1em;
+      padding: 1px;
+      font-size: 0.7rem;
+      background: #fff;
+    }
+
+    &--remove {
+      background-color: $oc-red-7;
+      &:hover {
+        background-color: $oc-red-8;
+      }
+      &:active {
+        background-color: $oc-red-9;
+      }
+      svg {
+        color: $oc-white;
+      }
+      .library-actions-counter {
+        color: $oc-red-7;
+      }
+    }
+
+    &--export {
+      background-color: $oc-lime-5;
+
+      &:hover {
+        background-color: $oc-lime-7;
+      }
+
+      &:active {
+        background-color: $oc-lime-8;
+      }
+      svg {
+        color: $oc-white;
+      }
+      .library-actions-counter {
+        color: $oc-lime-5;
+      }
+    }
+
+    &--publish {
+      background-color: $oc-cyan-6;
+      &:hover {
+        background-color: $oc-cyan-7;
+      }
+      &:active {
+        background-color: $oc-cyan-9;
+      }
+      svg {
+        color: $oc-white;
+      }
+      label {
+        margin-left: -0.2em;
+        margin-right: 1.1em;
+        color: $oc-white;
+        font-size: 0.86em;
+      }
+      .library-actions-counter {
+        color: $oc-cyan-6;
+      }
+    }
+
+    &--load {
+      background-color: $oc-blue-6;
+      &:hover {
+        background-color: $oc-blue-7;
+      }
+      &:active {
+        background-color: $oc-blue-9;
+      }
+      svg {
+        color: $oc-white;
+      }
+    }
+  }
+
   .layer-ui__library-message {
     padding: 2em 4em;
     min-width: 200px;

src/components/LibraryMenu.tsx

@@ -6,30 +6,31 @@ import {
   RefObject,
   forwardRef,
 } from "react";
-import Library, { libraryItemsAtom } from "../data/library";
+import Library, {
+  distributeLibraryItemsOnSquareGrid,
+  libraryItemsAtom,
+} from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
-import {
-  LibraryItems,
-  LibraryItem,
-  AppState,
-  BinaryFiles,
-  ExcalidrawProps,
-} from "../types";
-import { Dialog } from "./Dialog";
-import { Island } from "./Island";
-import PublishLibrary from "./PublishLibrary";
-import { ToolButton } from "./ToolButton";
+import { LibraryItems, LibraryItem, AppState, ExcalidrawProps } from "../types";
 
 import "./LibraryMenu.scss";
 import LibraryMenuItems from "./LibraryMenuItems";
-import { EVENT } from "../constants";
+import { EVENT, VERSIONS } from "../constants";
 import { KEYS } from "../keys";
 import { trackEvent } from "../analytics";
 import { useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
-import { useDevice } from "./App";
+import {
+  useDevice,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
+import { Sidebar } from "./Sidebar/Sidebar";
+import { getSelectedElements } from "../scene";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { LibraryMenuHeader } from "./LibraryMenuHeaderContent";
 
 const useOnClickOutside = (
   ref: RefObject<HTMLElement>,
@@ -59,112 +60,45 @@ const useOnClickOutside = (
   }, [ref, cb]);
 };
 
-const getSelectedItems = (
-  libraryItems: LibraryItems,
-  selectedItems: LibraryItem["id"][],
-) => libraryItems.filter((item) => selectedItems.includes(item.id));
-
 const LibraryMenuWrapper = forwardRef<
   HTMLDivElement,
   { children: React.ReactNode }
 >(({ children }, ref) => {
   return (
-    <Island padding={1} ref={ref} className="layer-ui__library">
+    <div ref={ref} className="layer-ui__library">
       {children}
-    </Island>
+    </div>
   );
 });
 
-export const LibraryMenu = ({
-  onClose,
+export const LibraryMenuContent = ({
   onInsertLibraryItems,
   pendingElements,
   onAddToLibrary,
-  theme,
   setAppState,
-  files,
   libraryReturnUrl,
-  focusContainer,
   library,
   id,
   appState,
+  selectedItems,
+  onSelectItems,
 }: {
   pendingElements: LibraryItem["elements"];
-  onClose: () => void;
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
-  theme: AppState["theme"];
-  files: BinaryFiles;
   setAppState: React.Component<any, AppState>["setState"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  focusContainer: () => void;
   library: Library;
   id: string;
   appState: AppState;
+  selectedItems: LibraryItem["id"][];
+  onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  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 &&
-        (!appState.isLibraryMenuDocked || !device.canDeviceFitSidebar)
-      ) {
-        onClose();
-      }
-    };
-    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
-    return () => {
-      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
-    };
-  }, [onClose, appState.isLibraryMenuDocked, device.canDeviceFitSidebar]);
-
-  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
-  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
-    useState(false);
-  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
-    url: string;
-    authorName: string;
-  }>(null);
+  const referrer =
+    libraryReturnUrl || window.location.origin + window.location.pathname;
 
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      setSelectedItems([]);
-    },
-    [library, setAppState, selectedItems, setSelectedItems],
-  );
-
-  const resetLibrary = useCallback(() => {
-    library.resetLibrary();
-    focusContainer();
-  }, [library, focusContainer]);
-
   const addToLibrary = useCallback(
     async (elements: LibraryItem["elements"], libraryItems: LibraryItems) => {
       trackEvent("element", "addToLibrary", "ui");
@@ -190,60 +124,12 @@ export const LibraryMenu = ({
     [onAddToLibrary, library, setAppState],
   );
 
-  const renderPublishSuccess = useCallback(() => {
-    return (
-      <Dialog
-        onCloseRequest={() => setPublishLibSuccess(null)}
-        title={t("publishSuccessDialog.title")}
-        className="publish-library-success"
-        small={true}
-      >
-        <p>
-          {t("publishSuccessDialog.content", {
-            authorName: publishLibSuccess!.authorName,
-          })}{" "}
-          <a
-            href={publishLibSuccess?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {t("publishSuccessDialog.link")}
-          </a>
-        </p>
-        <ToolButton
-          type="button"
-          title={t("buttons.close")}
-          aria-label={t("buttons.close")}
-          label={t("buttons.close")}
-          onClick={() => setPublishLibSuccess(null)}
-          data-testid="publish-library-success-close"
-          className="publish-library-success-close"
-        />
-      </Dialog>
-    );
-  }, [setPublishLibSuccess, publishLibSuccess]);
-
-  const onPublishLibSuccess = useCallback(
-    (data: { url: string; authorName: string }, libraryItems: LibraryItems) => {
-      setShowPublishLibraryDialog(false);
-      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
-      const nextLibItems = libraryItems.slice();
-      nextLibItems.forEach((libItem) => {
-        if (selectedItems.includes(libItem.id)) {
-          libItem.status = "published";
-        }
-      });
-      library.setLibrary(nextLibItems);
-    },
-    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
-  );
-
   if (
     libraryItemsData.status === "loading" &&
     !libraryItemsData.isInitialized
   ) {
     return (
-      <LibraryMenuWrapper ref={ref}>
+      <LibraryMenuWrapper>
         <div className="layer-ui__library-message">
           <Spinner size="2em" />
           <span>{t("labels.libraryLoadingMessage")}</span>
@@ -253,51 +139,168 @@ export const LibraryMenu = ({
   }
 
   return (
-    <LibraryMenuWrapper ref={ref}>
-      {showPublishLibraryDialog && (
-        <PublishLibrary
-          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(
-            libraryItemsData.libraryItems,
-            selectedItems,
-          )}
-          appState={appState}
-          onSuccess={(data) =>
-            onPublishLibSuccess(data, libraryItemsData.libraryItems)
-          }
-          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() =>
-            library.setLibrary(libraryItemsData.libraryItems)
-          }
-          onRemove={(id: string) =>
-            setSelectedItems(selectedItems.filter((_id) => _id !== id))
-          }
-        />
-      )}
-      {publishLibSuccess && renderPublishSuccess()}
+    <LibraryMenuWrapper>
       <LibraryMenuItems
         isLoading={libraryItemsData.status === "loading"}
         libraryItems={libraryItemsData.libraryItems}
-        onRemoveFromLibrary={() =>
-          removeFromLibrary(libraryItemsData.libraryItems)
-        }
         onAddToLibrary={(elements) =>
           addToLibrary(elements, libraryItemsData.libraryItems)
         }
         onInsertLibraryItems={onInsertLibraryItems}
         pendingElements={pendingElements}
-        setAppState={setAppState}
-        appState={appState}
-        libraryReturnUrl={libraryReturnUrl}
-        library={library}
-        theme={theme}
-        files={files}
-        id={id}
         selectedItems={selectedItems}
-        onSelectItems={(ids) => setSelectedItems(ids)}
-        onPublish={() => setShowPublishLibraryDialog(true)}
-        resetLibrary={resetLibrary}
+        onSelectItems={onSelectItems}
       />
+      <a
+        className="library-menu-browse-button"
+        href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+          window.name || "_blank"
+        }&referrer=${referrer}&useHash=true&token=${id}&theme=${
+          appState.theme
+        }&version=${VERSIONS.excalidrawLibrary}`}
+        target="_excalidraw_libraries"
+      >
+        {t("labels.libraries")}
+      </a>
     </LibraryMenuWrapper>
   );
 };
+
+export const LibraryMenu: React.FC<{
+  appState: AppState;
+  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  focusContainer: () => void;
+  library: Library;
+  id: string;
+}> = ({
+  appState,
+  onInsertElements,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+}) => {
+  const setAppState = useExcalidrawSetAppState();
+  const elements = useExcalidrawElements();
+  const device = useDevice();
+
+  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const closeLibrary = useCallback(() => {
+    const isDialogOpen = !!document.querySelector(".Dialog");
+
+    // Prevent closing if any dialog is open
+    if (isDialogOpen) {
+      return;
+    }
+    setAppState({ openSidebar: null });
+  }, [setAppState]);
+
+  useOnClickOutside(
+    ref,
+    useCallback(
+      (event) => {
+        // If click on the library icon, do nothing so that LibraryButton
+        // can toggle library menu
+        if ((event.target as Element).closest(".ToolIcon__library")) {
+          return;
+        }
+        if (!appState.isSidebarDocked || !device.canDeviceFitSidebar) {
+          closeLibrary();
+        }
+      },
+      [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar],
+    ),
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === KEYS.ESCAPE &&
+        (!appState.isSidebarDocked || !device.canDeviceFitSidebar)
+      ) {
+        closeLibrary();
+      }
+    };
+    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+    return () => {
+      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+    };
+  }, [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar]);
+
+  const deselectItems = useCallback(() => {
+    setAppState({
+      selectedElementIds: {},
+      selectedGroupIds: {},
+    });
+  }, [setAppState]);
+
+  const removeFromLibrary = useCallback(
+    async (libraryItems: LibraryItems) => {
+      const nextItems = libraryItems.filter(
+        (item) => !selectedItems.includes(item.id),
+      );
+      library.setLibrary(nextItems).catch(() => {
+        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+      });
+      setSelectedItems([]);
+    },
+    [library, setAppState, selectedItems, setSelectedItems],
+  );
+
+  const resetLibrary = useCallback(() => {
+    library.resetLibrary();
+    focusContainer();
+  }, [library, focusContainer]);
+
+  return (
+    <Sidebar
+      __isInternal
+      // necessary to remount when switching between internal
+      // and custom (host app) sidebar, so that the `props.onClose`
+      // is colled correctly
+      key="library"
+      className="layer-ui__library-sidebar"
+      onDock={(docked) => {
+        trackEvent(
+          "library",
+          `toggleLibraryDock (${docked ? "dock" : "undock"})`,
+          `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
+        );
+      }}
+      ref={ref}
+    >
+      <Sidebar.Header className="layer-ui__library-header">
+        <LibraryMenuHeader
+          appState={appState}
+          setAppState={setAppState}
+          selectedItems={selectedItems}
+          onSelectItems={setSelectedItems}
+          library={library}
+          onRemoveFromLibrary={() =>
+            removeFromLibrary(libraryItemsData.libraryItems)
+          }
+          resetLibrary={resetLibrary}
+        />
+      </Sidebar.Header>
+      <LibraryMenuContent
+        pendingElements={getSelectedElements(elements, appState, true)}
+        onInsertLibraryItems={(libraryItems) => {
+          onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+        }}
+        onAddToLibrary={deselectItems}
+        setAppState={setAppState}
+        libraryReturnUrl={libraryReturnUrl}
+        library={library}
+        id={id}
+        appState={appState}
+        selectedItems={selectedItems}
+        onSelectItems={setSelectedItems}
+      />
+    </Sidebar>
+  );
+};

src/components/LibraryMenuHeaderContent.tsx

@@ -0,0 +1,258 @@
+import React, { useCallback, useState } from "react";
+import { saveLibraryAsJSON } from "../data/json";
+import Library, { libraryItemsAtom } from "../data/library";
+import { t } from "../i18n";
+import { AppState, LibraryItem, LibraryItems } from "../types";
+import { exportToFileIcon, load, publishIcon, trash } from "./icons";
+import { ToolButton } from "./ToolButton";
+import { Tooltip } from "./Tooltip";
+import { fileOpen } from "../data/filesystem";
+import { muteFSAbortError } from "../utils";
+import { useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
+import ConfirmDialog from "./ConfirmDialog";
+import PublishLibrary from "./PublishLibrary";
+import { Dialog } from "./Dialog";
+
+const getSelectedItems = (
+  libraryItems: LibraryItems,
+  selectedItems: LibraryItem["id"][],
+) => libraryItems.filter((item) => selectedItems.includes(item.id));
+
+export const LibraryMenuHeader: React.FC<{
+  setAppState: React.Component<any, AppState>["setState"];
+  selectedItems: LibraryItem["id"][];
+  library: Library;
+  onRemoveFromLibrary: () => void;
+  resetLibrary: () => void;
+  onSelectItems: (items: LibraryItem["id"][]) => void;
+  appState: AppState;
+}> = ({
+  setAppState,
+  selectedItems,
+  library,
+  onRemoveFromLibrary,
+  resetLibrary,
+  onSelectItems,
+  appState,
+}) => {
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  const renderRemoveLibAlert = useCallback(() => {
+    const content = selectedItems.length
+      ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
+      : t("alerts.resetLibrary");
+    const title = selectedItems.length
+      ? t("confirmDialog.removeItemsFromLib")
+      : t("confirmDialog.resetLibrary");
+    return (
+      <ConfirmDialog
+        onConfirm={() => {
+          if (selectedItems.length) {
+            onRemoveFromLibrary();
+          } else {
+            resetLibrary();
+          }
+          setShowRemoveLibAlert(false);
+        }}
+        onCancel={() => {
+          setShowRemoveLibAlert(false);
+        }}
+        title={title}
+      >
+        <p>{content}</p>
+      </ConfirmDialog>
+    );
+  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
+
+  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
+
+  const itemsSelected = !!selectedItems.length;
+  const items = itemsSelected
+    ? libraryItemsData.libraryItems.filter((item) =>
+        selectedItems.includes(item.id),
+      )
+    : libraryItemsData.libraryItems;
+  const resetLabel = itemsSelected
+    ? t("buttons.remove")
+    : t("buttons.resetLibrary");
+
+  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
+    useState(false);
+  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
+    url: string;
+    authorName: string;
+  }>(null);
+  const renderPublishSuccess = useCallback(() => {
+    return (
+      <Dialog
+        onCloseRequest={() => setPublishLibSuccess(null)}
+        title={t("publishSuccessDialog.title")}
+        className="publish-library-success"
+        small={true}
+      >
+        <p>
+          {t("publishSuccessDialog.content", {
+            authorName: publishLibSuccess!.authorName,
+          })}{" "}
+          <a
+            href={publishLibSuccess?.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t("publishSuccessDialog.link")}
+          </a>
+        </p>
+        <ToolButton
+          type="button"
+          title={t("buttons.close")}
+          aria-label={t("buttons.close")}
+          label={t("buttons.close")}
+          onClick={() => setPublishLibSuccess(null)}
+          data-testid="publish-library-success-close"
+          className="publish-library-success-close"
+        />
+      </Dialog>
+    );
+  }, [setPublishLibSuccess, publishLibSuccess]);
+
+  const onPublishLibSuccess = useCallback(
+    (data: { url: string; authorName: string }, libraryItems: LibraryItems) => {
+      setShowPublishLibraryDialog(false);
+      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
+      const nextLibItems = libraryItems.slice();
+      nextLibItems.forEach((libItem) => {
+        if (selectedItems.includes(libItem.id)) {
+          libItem.status = "published";
+        }
+      });
+      library.setLibrary(nextLibItems);
+    },
+    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
+  );
+
+  const onLibraryImport = 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") });
+    }
+  };
+
+  const onLibraryExport = async () => {
+    const libraryItems = itemsSelected
+      ? items
+      : await library.getLatestLibrary();
+    saveLibraryAsJSON(libraryItems)
+      .catch(muteFSAbortError)
+      .catch((error) => {
+        setAppState({ errorMessage: error.message });
+      });
+  };
+
+  return (
+    <div className="library-actions">
+      {showRemoveLibAlert && renderRemoveLibAlert()}
+      {showPublishLibraryDialog && (
+        <PublishLibrary
+          onClose={() => setShowPublishLibraryDialog(false)}
+          libraryItems={getSelectedItems(
+            libraryItemsData.libraryItems,
+            selectedItems,
+          )}
+          appState={appState}
+          onSuccess={(data) =>
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
+          onError={(error) => window.alert(error)}
+          updateItemsInStorage={() =>
+            library.setLibrary(libraryItemsData.libraryItems)
+          }
+          onRemove={(id: string) =>
+            onSelectItems(selectedItems.filter((_id) => _id !== id))
+          }
+        />
+      )}
+      {publishLibSuccess && renderPublishSuccess()}
+      {!itemsSelected && (
+        <ToolButton
+          key="import"
+          type="button"
+          title={t("buttons.load")}
+          aria-label={t("buttons.load")}
+          icon={load}
+          onClick={onLibraryImport}
+          className="library-actions--load"
+        />
+      )}
+      {!!items.length && (
+        <>
+          <ToolButton
+            key="export"
+            type="button"
+            title={t("buttons.export")}
+            aria-label={t("buttons.export")}
+            icon={exportToFileIcon}
+            onClick={onLibraryExport}
+            className="library-actions--export"
+          >
+            {selectedItems.length > 0 && (
+              <span className="library-actions-counter">
+                {selectedItems.length}
+              </span>
+            )}
+          </ToolButton>
+          <ToolButton
+            key="reset"
+            type="button"
+            title={resetLabel}
+            aria-label={resetLabel}
+            icon={trash}
+            onClick={() => setShowRemoveLibAlert(true)}
+            className="library-actions--remove"
+          >
+            {selectedItems.length > 0 && (
+              <span className="library-actions-counter">
+                {selectedItems.length}
+              </span>
+            )}
+          </ToolButton>
+        </>
+      )}
+      {itemsSelected && (
+        <Tooltip label={t("hints.publishLibrary")}>
+          <ToolButton
+            type="button"
+            aria-label={t("buttons.publishLibrary")}
+            label={t("buttons.publishLibrary")}
+            icon={publishIcon}
+            className="library-actions--publish"
+            onClick={() => setShowPublishLibraryDialog(true)}
+          >
+            <label>{t("buttons.publishLibrary")}</label>
+            {selectedItems.length > 0 && (
+              <span className="library-actions-counter">
+                {selectedItems.length}
+              </span>
+            )}
+          </ToolButton>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

src/components/LibraryMenuItems.scss

@@ -5,96 +5,7 @@
     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;
-        right: 2px;
-        bottom: 2px;
-        border-radius: 50%;
-        width: 1em;
-        height: 1em;
-        padding: 1px;
-        font-size: 0.7rem;
-        background: #fff;
-      }
-
-      &--remove {
-        background-color: $oc-red-7;
-        &:hover {
-          background-color: $oc-red-8;
-        }
-        &:active {
-          background-color: $oc-red-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-        .library-actions-counter {
-          color: $oc-red-7;
-        }
-      }
-
-      &--export {
-        background-color: $oc-lime-5;
-
-        &:hover {
-          background-color: $oc-lime-7;
-        }
-
-        &:active {
-          background-color: $oc-lime-8;
-        }
-        svg {
-          color: $oc-white;
-        }
-        .library-actions-counter {
-          color: $oc-lime-5;
-        }
-      }
-
-      &--publish {
-        background-color: $oc-cyan-6;
-        &:hover {
-          background-color: $oc-cyan-7;
-        }
-        &:active {
-          background-color: $oc-cyan-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-        label {
-          margin-left: -0.2em;
-          margin-right: 1.1em;
-          color: $oc-white;
-          font-size: 0.86em;
-        }
-        .library-actions-counter {
-          color: $oc-cyan-6;
-        }
-      }
-
-      &--load {
-        background-color: $oc-blue-6;
-        &:hover {
-          background-color: $oc-blue-7;
-        }
-        &:active {
-          background-color: $oc-blue-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-      }
-    }
     &__items {
       flex: 1;
       overflow-y: auto;

src/components/LibraryMenuItems.tsx

@@ -1,226 +1,35 @@
-import { chunk } from "lodash";
-import React, { useCallback, useState } from "react";
-import { saveLibraryAsJSON, serializeLibraryAsJSON } from "../data/json";
-import Library from "../data/library";
+import React, { useState } from "react";
+import { serializeLibraryAsJSON } from "../data/json";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { t } from "../i18n";
-import {
-  AppState,
-  BinaryFiles,
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-} from "../types";
-import { arrayToMap, muteFSAbortError } from "../utils";
-import { useDevice } from "./App";
-import ConfirmDialog from "./ConfirmDialog";
-import { close, exportToFileIcon, load, publishIcon, trash } from "./icons";
+import { LibraryItem, LibraryItems } from "../types";
+import { arrayToMap, chunk } from "../utils";
 import { LibraryUnit } from "./LibraryUnit";
 import Stack from "./Stack";
-import { ToolButton } from "./ToolButton";
-import { Tooltip } from "./Tooltip";
 
 import "./LibraryMenuItems.scss";
-import { MIME_TYPES, VERSIONS } from "../constants";
+import { MIME_TYPES } from "../constants";
 import Spinner from "./Spinner";
-import { fileOpen } from "../data/filesystem";
 
-import { SidebarLockButton } from "./SidebarLockButton";
-import { trackEvent } from "../analytics";
+const CELLS_PER_ROW = 4;
 
 const LibraryMenuItems = ({
   isLoading,
   libraryItems,
-  onRemoveFromLibrary,
   onAddToLibrary,
   onInsertLibraryItems,
   pendingElements,
-  theme,
-  setAppState,
-  appState,
-  libraryReturnUrl,
-  library,
-  files,
-  id,
   selectedItems,
   onSelectItems,
-  onPublish,
-  resetLibrary,
 }: {
   isLoading: boolean;
   libraryItems: LibraryItems;
   pendingElements: LibraryItem["elements"];
-  onRemoveFromLibrary: () => 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"][];
   onSelectItems: (id: LibraryItem["id"][]) => void;
-  onPublish: () => void;
-  resetLibrary: () => void;
 }) => {
-  const renderRemoveLibAlert = useCallback(() => {
-    const content = selectedItems.length
-      ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
-      : t("alerts.resetLibrary");
-    const title = selectedItems.length
-      ? t("confirmDialog.removeItemsFromLib")
-      : t("confirmDialog.resetLibrary");
-    return (
-      <ConfirmDialog
-        onConfirm={() => {
-          if (selectedItems.length) {
-            onRemoveFromLibrary();
-          } else {
-            resetLibrary();
-          }
-          setShowRemoveLibAlert(false);
-        }}
-        onCancel={() => {
-          setShowRemoveLibAlert(false);
-        }}
-        title={title}
-      >
-        <p>{content}</p>
-      </ConfirmDialog>
-    );
-  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
-
-  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
-  const device = useDevice();
-  const renderLibraryActions = () => {
-    const itemsSelected = !!selectedItems.length;
-    const items = itemsSelected
-      ? libraryItems.filter((item) => selectedItems.includes(item.id))
-      : libraryItems;
-    const resetLabel = itemsSelected
-      ? t("buttons.remove")
-      : t("buttons.resetLibrary");
-    return (
-      <div className="library-actions">
-        {!itemsSelected && (
-          <ToolButton
-            key="import"
-            type="button"
-            title={t("buttons.load")}
-            aria-label={t("buttons.load")}
-            icon={load}
-            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"
-          />
-        )}
-        {!!items.length && (
-          <>
-            <ToolButton
-              key="export"
-              type="button"
-              title={t("buttons.export")}
-              aria-label={t("buttons.export")}
-              icon={exportToFileIcon}
-              onClick={async () => {
-                const libraryItems = itemsSelected
-                  ? items
-                  : await library.getLatestLibrary();
-                saveLibraryAsJSON(libraryItems)
-                  .catch(muteFSAbortError)
-                  .catch((error) => {
-                    setAppState({ errorMessage: error.message });
-                  });
-              }}
-              className="library-actions--export"
-            >
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-            <ToolButton
-              key="reset"
-              type="button"
-              title={resetLabel}
-              aria-label={resetLabel}
-              icon={trash}
-              onClick={() => setShowRemoveLibAlert(true)}
-              className="library-actions--remove"
-            >
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-          </>
-        )}
-        {itemsSelected && (
-          <Tooltip label={t("hints.publishLibrary")}>
-            <ToolButton
-              type="button"
-              aria-label={t("buttons.publishLibrary")}
-              label={t("buttons.publishLibrary")}
-              icon={publishIcon}
-              className="library-actions--publish"
-              onClick={onPublish}
-            >
-              {!device.isMobile && <label>{t("buttons.publishLibrary")}</label>}
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </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 = device.isMobile && !device.isSmScreen ? 6 : 4;
-
-  const referrer =
-    libraryReturnUrl || window.location.origin + window.location.pathname;
-
   const [lastSelectedItem, setLastSelectedItem] = useState<
     LibraryItem["id"] | null
   >(null);
@@ -297,7 +106,6 @@ const LibraryMenuItems = ({
       <Stack.Col key={params.key}>
         <LibraryUnit
           elements={params.item?.elements}
-          files={files}
           isPending={!params.item?.id && !!params.item?.elements}
           onClick={params.onClick || (() => {})}
           id={params.item?.id || null}
@@ -373,56 +181,21 @@ const LibraryMenuItems = ({
     (item) => item.status === "published",
   );
 
-  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 (
+  return (
+    <div
+      className="library-menu-items-container"
+      style={
+        publishedItems.length || unpublishedItems.length
+          ? {
+              flex: "1 1 0",
+              overflowY: "auto",
+            }
+          : {
+              marginBottom: "2rem",
+              flex: 0,
+            }
+      }
+    >
       <Stack.Col
         className="library-menu-items-container__items"
         align="start"
@@ -494,8 +267,8 @@ const LibraryMenuItems = ({
 
         <>
           {(publishedItems.length > 0 ||
-            (!device.isMobile &&
-              (pendingElements.length > 0 || unpublishedItems.length > 0))) && (
+            pendingElements.length > 0 ||
+            unpublishedItems.length > 0) && (
             <div className="separator">{t("labels.excalidrawLib")}</div>
           )}
           {publishedItems.length > 0 ? (
@@ -517,41 +290,6 @@ const LibraryMenuItems = ({
           ) : 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.tsx

@@ -3,7 +3,7 @@ import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
 import { useDevice } from "../components/App";
 import { exportToSvg } from "../scene/export";
-import { BinaryFiles, LibraryItem } from "../types";
+import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";
 
@@ -23,7 +23,6 @@ const PLUS_ICON = (
 export const LibraryUnit = ({
   id,
   elements,
-  files,
   isPending,
   onClick,
   selected,
@@ -32,7 +31,6 @@ export const LibraryUnit = ({
 }: {
   id: LibraryItem["id"] | /** for pending item */ null;
   elements?: LibraryItem["elements"];
-  files: BinaryFiles;
   isPending?: boolean;
   onClick: () => void;
   selected: boolean;
@@ -56,7 +54,7 @@ export const LibraryUnit = ({
           exportBackground: false,
           viewBackgroundColor: oc.white,
         },
-        files,
+        null,
       );
       node.innerHTML = svg.outerHTML;
     })();
@@ -64,7 +62,7 @@ export const LibraryUnit = ({
     return () => {
       node.innerHTML = "";
     };
-  }, [elements, files]);
+  }, [elements]);
 
   const [isHovered, setIsHovered] = useState(false);
   const isMobile = useDevice().isMobile;

src/components/LoadingMessage.tsx

@@ -1,8 +1,14 @@
 import { t } from "../i18n";
 import { useState, useEffect } from "react";
 import Spinner from "./Spinner";
+import clsx from "clsx";
+import { THEME } from "../constants";
+import { Theme } from "../element/types";
 
-export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
+export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({
+  delay,
+  theme,
+}) => {
   const [isWaiting, setIsWaiting] = useState(!!delay);
 
   useEffect(() => {
@@ -20,7 +26,11 @@ export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
   }
 
   return (
-    <div className="LoadingMessage">
+    <div
+      className={clsx("LoadingMessage", {
+        "LoadingMessage--dark": theme === THEME.DARK,
+      })}
+    >
       <div>
         <Spinner />
       </div>

src/components/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState } from "../types";
+import { AppState, Device, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -18,6 +18,8 @@ import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -26,7 +28,6 @@ type MobileMenuProps = {
   renderImageExportDialog: () => React.ReactNode;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
-  libraryMenu: JSX.Element | null;
   onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
@@ -36,19 +37,19 @@ type MobileMenuProps = {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
-  showThemeBtn: boolean;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
-  renderStats: () => JSX.Element | null;
+  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
+  renderSidebars: () => JSX.Element | null;
+  device: Device;
 };
 
 export const MobileMenu = ({
   appState,
   elements,
-  libraryMenu,
   actionManager,
   renderJSONExportDialog,
   renderImageExportDialog,
@@ -59,10 +60,11 @@ export const MobileMenu = ({
   canvas,
   isCollaborating,
   renderCustomFooter,
-  showThemeBtn,
   onImageAction,
   renderTopRightUI,
-  renderStats,
+  renderCustomStats,
+  renderSidebars,
+  device,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -107,11 +109,15 @@ export const MobileMenu = ({
                   penDetected={appState.penDetected}
                 />
               </Stack.Row>
-              {libraryMenu}
             </Stack.Col>
           )}
         </Section>
-        <HintViewer appState={appState} elements={elements} isMobile={true} />
+        <HintViewer
+          appState={appState}
+          elements={elements}
+          isMobile={true}
+          device={device}
+        />
       </FixedSideContainer>
     );
   };
@@ -119,7 +125,6 @@ export const MobileMenu = ({
   const renderAppToolbar = () => {
     // Render eraser conditionally in mobile
     const showEraser =
-      !appState.viewModeEnabled &&
       !appState.editingElement &&
       getSelectedElements(elements, appState).length === 0;
 
@@ -138,11 +143,11 @@ export const MobileMenu = ({
 
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
-        {showEraser && actionManager.renderAction("eraser")}
-
-        {actionManager.renderAction(
-          appState.multiElement ? "finalize" : "duplicateSelection",
-        )}
+        {showEraser
+          ? actionManager.renderAction("eraser")
+          : actionManager.renderAction(
+              appState.multiElement ? "finalize" : "duplicateSelection",
+            )}
         {actionManager.renderAction("deleteSelectedElements")}
       </div>
     );
@@ -170,21 +175,25 @@ export const MobileMenu = ({
             onClick={onCollabButtonClick}
           />
         )}
-        {
-          <BackgroundPickerAndDarkModeToggle
-            actionManager={actionManager}
-            appState={appState}
-            setAppState={setAppState}
-            showThemeBtn={showThemeBtn}
-          />
-        }
+        {<BackgroundPickerAndDarkModeToggle actionManager={actionManager} />}
       </>
     );
   };
   return (
     <>
+      {renderSidebars()}
       {!appState.viewModeEnabled && renderToolbar()}
-      {renderStats()}
+      {!appState.openMenu && appState.showStats && (
+        <Stats
+          appState={appState}
+          setAppState={setAppState}
+          elements={elements}
+          onClose={() => {
+            actionManager.executeAction(actionToggleStats);
+          }}
+          renderCustomStats={renderCustomStats}
+        />
+      )}
       <div
         className="App-bottom-bar"
         style={{
@@ -221,7 +230,6 @@ export const MobileMenu = ({
                 appState={appState}
                 elements={elements}
                 renderAction={actionManager.renderAction}
-                activeTool={appState.activeTool.type}
               />
             </Section>
           ) : null}
@@ -229,7 +237,7 @@ export const MobileMenu = ({
             {renderAppToolbar()}
             {appState.scrolledOutside &&
               !appState.openMenu &&
-              !appState.isLibraryOpen && (
+              appState.openSidebar !== "library" && (
                 <button
                   className="scroll-back-to-content"
                   onClick={() => {

src/components/Sidebar/Sidebar.scss

@@ -0,0 +1,89 @@
+@import "open-color/open-color";
+@import "../../css/variables.module";
+
+.excalidraw {
+  .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);
+
+    padding: 0.5rem;
+    box-sizing: border-box;
+
+    .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;
+    }
+  }
+
+  .layer-ui__sidebar__header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 2px 0 15px 0;
+    &:empty {
+      margin: 0;
+    }
+    button {
+      // 2px from the left to account for focus border of left-most button
+      margin: 0 2px;
+    }
+  }
+
+  .layer-ui__sidebar__header__buttons {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .layer-ui__sidebar-dock-button {
+    @include toolbarButtonColorStates;
+    margin-right: 0.2rem;
+
+    .ToolIcon_type_floating .ToolIcon__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 + .ToolIcon__icon {
+        background-color: var(--color-primary);
+      }
+    }
+  }
+}

src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,355 @@
+import React from "react";
+import { Excalidraw, Sidebar } from "../../packages/excalidraw/index";
+import {
+  act,
+  fireEvent,
+  queryAllByTestId,
+  queryByTestId,
+  render,
+  waitFor,
+  withExcalidrawDimensions,
+} from "../../tests/test-utils";
+
+describe("Sidebar", () => {
+  it("should render custom sidebar", async () => {
+    const { container } = await render(
+      <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
+        renderSidebar={() => (
+          <Sidebar>
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    const node = container.querySelector("#test-sidebar-content");
+    expect(node).not.toBe(null);
+  });
+
+  it("should render custom sidebar header", async () => {
+    const { container } = await render(
+      <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
+        renderSidebar={() => (
+          <Sidebar>
+            <Sidebar.Header>
+              <div id="test-sidebar-header-content">42</div>
+            </Sidebar.Header>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    const node = container.querySelector("#test-sidebar-header-content");
+    expect(node).not.toBe(null);
+    // make sure we don't render the default fallback header,
+    // just the custom one
+    expect(queryAllByTestId(container, "sidebar-header").length).toBe(1);
+  });
+
+  it("should render only one sidebar and prefer the custom one", async () => {
+    const { container } = await render(
+      <Excalidraw
+        initialData={{ appState: { openSidebar: "customSidebar" } }}
+        renderSidebar={() => (
+          <Sidebar>
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    await waitFor(() => {
+      // make sure the custom sidebar is rendered
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).not.toBe(null);
+
+      // make sure only one sidebar is rendered
+      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
+      expect(sidebars.length).toBe(1);
+    });
+  });
+
+  it("should always render custom sidebar with close button & close on click", async () => {
+    const onClose = jest.fn();
+    const CustomExcalidraw = () => {
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar className="test-sidebar" onClose={onClose}>
+              hello
+            </Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+    expect(sidebar).not.toBe(null);
+    const closeButton = queryByTestId(sidebar!, "sidebar-close");
+    expect(closeButton).not.toBe(null);
+
+    fireEvent.click(closeButton!.querySelector("button")!);
+    await waitFor(() => {
+      expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(null);
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  it("should render custom sidebar with dock (irrespective of onDock prop)", async () => {
+    const CustomExcalidraw = () => {
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar className="test-sidebar">hello</Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    // should show dock button when the sidebar fits to be docked
+    // -------------------------------------------------------------------------
+
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, () => {
+      const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+      expect(sidebar).not.toBe(null);
+      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
+      expect(closeButton).not.toBe(null);
+    });
+
+    // should not show dock button when the sidebar does not fit to be docked
+    // -------------------------------------------------------------------------
+
+    await withExcalidrawDimensions({ width: 400, height: 1080 }, () => {
+      const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+      expect(sidebar).not.toBe(null);
+      const closeButton = queryByTestId(sidebar!, "sidebar-dock");
+      expect(closeButton).toBe(null);
+    });
+  });
+
+  it("should support controlled docking", async () => {
+    let _setDockable: (dockable: boolean) => void = null!;
+
+    const CustomExcalidraw = () => {
+      const [dockable, setDockable] = React.useState(false);
+      _setDockable = setDockable;
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar
+              className="test-sidebar"
+              docked={false}
+              dockable={dockable}
+            >
+              hello
+            </Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
+      // should not show dock button when `dockable` is `false`
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDockable(false);
+      });
+
+      await waitFor(() => {
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+        expect(sidebar).not.toBe(null);
+        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
+        expect(closeButton).toBe(null);
+      });
+
+      // should show dock button when `dockable` is `true`, even if `docked`
+      // prop is set
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDockable(true);
+      });
+
+      await waitFor(() => {
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+        expect(sidebar).not.toBe(null);
+        const closeButton = queryByTestId(sidebar!, "sidebar-dock");
+        expect(closeButton).not.toBe(null);
+      });
+    });
+  });
+
+  it("should support controlled docking", async () => {
+    let _setDocked: (docked?: boolean) => void = null!;
+
+    const CustomExcalidraw = () => {
+      const [docked, setDocked] = React.useState<boolean | undefined>();
+      _setDocked = setDocked;
+      return (
+        <Excalidraw
+          initialData={{ appState: { openSidebar: "customSidebar" } }}
+          renderSidebar={() => (
+            <Sidebar className="test-sidebar" docked={docked}>
+              hello
+            </Sidebar>
+          )}
+        />
+      );
+    };
+
+    const { container } = await render(<CustomExcalidraw />);
+
+    const { h } = window;
+
+    await withExcalidrawDimensions({ width: 1920, height: 1080 }, async () => {
+      const dockButton = await waitFor(() => {
+        const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
+        expect(sidebar).not.toBe(null);
+        const dockBotton = queryByTestId(sidebar!, "sidebar-dock");
+        expect(dockBotton).not.toBe(null);
+        return dockBotton!;
+      });
+
+      const dockButtonInput = dockButton.querySelector("input")!;
+
+      // should not show dock button when `dockable` is `false`
+      // -------------------------------------------------------------------------
+
+      expect(h.state.isSidebarDocked).toBe(false);
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(true);
+        expect(dockButtonInput).toBeChecked();
+      });
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(false);
+        expect(dockButtonInput).not.toBeChecked();
+      });
+
+      // shouldn't update `appState.isSidebarDocked` when the sidebar
+      // is controlled (`docked` prop is set), as host apps should handle
+      // the state themselves
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDocked(true);
+      });
+
+      await waitFor(() => {
+        expect(dockButtonInput).toBeChecked();
+        expect(h.state.isSidebarDocked).toBe(false);
+        expect(dockButtonInput).toBeChecked();
+      });
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(false);
+        expect(dockButtonInput).toBeChecked();
+      });
+
+      // the `appState.isSidebarDocked` should remain untouched when
+      // `props.docked` is set to `false`, and user toggles
+      // -------------------------------------------------------------------------
+
+      act(() => {
+        _setDocked(false);
+        h.setState({ isSidebarDocked: true });
+      });
+
+      await waitFor(() => {
+        expect(h.state.isSidebarDocked).toBe(true);
+        expect(dockButtonInput).not.toBeChecked();
+      });
+
+      fireEvent.click(dockButtonInput);
+      await waitFor(() => {
+        expect(dockButtonInput).not.toBeChecked();
+        expect(h.state.isSidebarDocked).toBe(true);
+      });
+    });
+  });
+
+  it("should toggle sidebar using props.toggleMenu()", async () => {
+    const { container } = await render(
+      <Excalidraw
+        renderSidebar={() => (
+          <Sidebar>
+            <div id="test-sidebar-content">42</div>
+          </Sidebar>
+        )}
+      />,
+    );
+
+    // sidebar isn't rendered initially
+    // -------------------------------------------------------------------------
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+    });
+
+    // toggle sidebar on
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar")).toBe(true);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).not.toBe(null);
+    });
+
+    // toggle sidebar off
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar")).toBe(false);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+    });
+
+    // force-toggle sidebar off (=> still hidden)
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar", false)).toBe(false);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+    });
+
+    // force-toggle sidebar on
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("customSidebar", true)).toBe(true);
+    expect(window.h.app.toggleMenu("customSidebar", true)).toBe(true);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).not.toBe(null);
+    });
+
+    // toggle library (= hide custom sidebar)
+    // -------------------------------------------------------------------------
+    expect(window.h.app.toggleMenu("library")).toBe(true);
+
+    await waitFor(() => {
+      const node = container.querySelector("#test-sidebar-content");
+      expect(node).toBe(null);
+
+      // make sure only one sidebar is rendered
+      const sidebars = container.querySelectorAll(".layer-ui__sidebar");
+      expect(sidebars.length).toBe(1);
+    });
+  });
+});

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,139 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  forwardRef,
+} from "react";
+import { Island } from ".././Island";
+import { atom, useAtom } from "jotai";
+import { jotaiScope } from "../../jotai";
+import {
+  SidebarPropsContext,
+  SidebarProps,
+  SidebarPropsContextValue,
+} from "./common";
+
+import { SidebarHeaderComponents } from "./SidebarHeader";
+
+import "./Sidebar.scss";
+import clsx from "clsx";
+import { useExcalidrawSetAppState } from "../App";
+import { updateObject } from "../../utils";
+
+/** using a counter instead of boolean to handle race conditions where
+ * the host app may render (mount/unmount) multiple different sidebar */
+export const hostSidebarCountersAtom = atom({ rendered: 0, docked: 0 });
+
+export const Sidebar = Object.assign(
+  forwardRef(
+    (
+      {
+        children,
+        onClose,
+        onDock,
+        docked,
+        dockable = true,
+        className,
+        __isInternal,
+      }: SidebarProps<{
+        // NOTE sidebars we use internally inside the editor must have this flag set.
+        // It indicates that this sidebar should have lower precedence over host
+        // sidebars, if both are open.
+        /** @private internal */
+        __isInternal?: boolean;
+      }>,
+      ref: React.ForwardedRef<HTMLDivElement>,
+    ) => {
+      const [hostSidebarCounters, setHostSidebarCounters] = useAtom(
+        hostSidebarCountersAtom,
+        jotaiScope,
+      );
+
+      const setAppState = useExcalidrawSetAppState();
+
+      const [isDockedFallback, setIsDockedFallback] = useState(docked ?? false);
+
+      useLayoutEffect(() => {
+        if (docked === undefined) {
+          // ugly hack to get initial state out of AppState without subscribing
+          // to it as a whole (once we have granular subscriptions, we'll move
+          // to that)
+          //
+          // NOTE this means that is updated `state.isSidebarDocked` changes outside
+          // of this compoent, it won't be reflected here. Currently doesn't happen.
+          setAppState((state) => {
+            setIsDockedFallback(state.isSidebarDocked);
+            // bail from update
+            return null;
+          });
+        }
+      }, [setAppState, docked]);
+
+      useLayoutEffect(() => {
+        if (!__isInternal) {
+          setHostSidebarCounters((s) => ({
+            rendered: s.rendered + 1,
+            docked: isDockedFallback ? s.docked + 1 : s.docked,
+          }));
+          return () => {
+            setHostSidebarCounters((s) => ({
+              rendered: s.rendered - 1,
+              docked: isDockedFallback ? s.docked - 1 : s.docked,
+            }));
+          };
+        }
+      }, [__isInternal, setHostSidebarCounters, isDockedFallback]);
+
+      const onCloseRef = useRef(onClose);
+      onCloseRef.current = onClose;
+
+      useEffect(() => {
+        return () => {
+          onCloseRef.current?.();
+        };
+      }, []);
+
+      const headerPropsRef = useRef<SidebarPropsContextValue>({});
+      headerPropsRef.current.onClose = () => {
+        setAppState({ openSidebar: null });
+      };
+      headerPropsRef.current.onDock = (isDocked) => {
+        if (docked === undefined) {
+          setAppState({ isSidebarDocked: isDocked });
+          setIsDockedFallback(isDocked);
+        }
+        onDock?.(isDocked);
+      };
+      // renew the ref object if the following props change since we want to
+      // rerender. We can't pass down as component props manually because
+      // the <Sidebar.Header/> can be rendered upsream.
+      headerPropsRef.current = updateObject(headerPropsRef.current, {
+        docked: docked ?? isDockedFallback,
+        dockable,
+      });
+
+      if (hostSidebarCounters.rendered > 0 && __isInternal) {
+        return null;
+      }
+
+      return (
+        <Island
+          padding={2}
+          className={clsx("layer-ui__sidebar", className)}
+          ref={ref}
+        >
+          <SidebarPropsContext.Provider value={headerPropsRef.current}>
+            <SidebarHeaderComponents.Context>
+              <SidebarHeaderComponents.Component __isFallback />
+              {children}
+            </SidebarHeaderComponents.Context>
+          </SidebarPropsContext.Provider>
+        </Island>
+      );
+    },
+  ),
+  {
+    Header: SidebarHeaderComponents.Component,
+  },
+);

src/components/Sidebar/SidebarHeader.tsx

@@ -0,0 +1,95 @@
+import clsx from "clsx";
+import { useContext } from "react";
+import { t } from "../../i18n";
+import { useDevice } from "../App";
+import { SidebarPropsContext } from "./common";
+import { close } from "../icons";
+import { withUpstreamOverride } from "../hoc/withUpstreamOverride";
+import { Tooltip } from "../Tooltip";
+
+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 SidebarDockButton = (props: {
+  checked: boolean;
+  onChange?(): void;
+}) => {
+  return (
+    <div className="layer-ui__sidebar-dock-button" data-testid="sidebar-dock">
+      <Tooltip label={t("labels.sidebarLock")}>
+        <label
+          className={clsx(
+            "ToolIcon ToolIcon__lock ToolIcon_type_floating",
+            `ToolIcon_size_medium`,
+          )}
+        >
+          <input
+            className="ToolIcon_type_checkbox"
+            type="checkbox"
+            onChange={props.onChange}
+            checked={props.checked}
+            aria-label={t("labels.sidebarLock")}
+          />{" "}
+          <div className="ToolIcon__icon" tabIndex={0}>
+            {SIDE_LIBRARY_TOGGLE_ICON}
+          </div>{" "}
+        </label>{" "}
+      </Tooltip>
+    </div>
+  );
+};
+
+const _SidebarHeader: React.FC<{
+  children?: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => {
+  const device = useDevice();
+  const props = useContext(SidebarPropsContext);
+
+  const renderDockButton = !!(device.canDeviceFitSidebar && props.dockable);
+  const renderCloseButton = !!props.onClose;
+
+  return (
+    <div
+      className={clsx("layer-ui__sidebar__header", className)}
+      data-testid="sidebar-header"
+    >
+      {children}
+      {(renderDockButton || renderCloseButton) && (
+        <div className="layer-ui__sidebar__header__buttons">
+          {renderDockButton && (
+            <SidebarDockButton
+              checked={!!props.docked}
+              onChange={() => {
+                document
+                  .querySelector(".layer-ui__wrapper")
+                  ?.classList.add("animate");
+
+                props.onDock?.(!props.docked);
+              }}
+            />
+          )}
+          {renderCloseButton && (
+            <div className="ToolIcon__icon__close" data-testid="sidebar-close">
+              <button
+                className="Modal__close"
+                onClick={props.onClose}
+                aria-label={t("buttons.close")}
+              >
+                {close}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const [Context, Component] = withUpstreamOverride(_SidebarHeader);
+
+/** @private */
+export const SidebarHeaderComponents = { Context, Component };

src/components/Sidebar/common.ts

@@ -0,0 +1,22 @@
+import React from "react";
+
+export type SidebarProps<P = {}> = {
+  children: React.ReactNode;
+  /**
+   * Called on sidebar close (either by user action or by the editor).
+   */
+  onClose?: () => void | boolean;
+  /** if not supplied, sidebar won't be dockable */
+  onDock?: (docked: boolean) => void;
+  docked?: boolean;
+  dockable?: boolean;
+  className?: string;
+} & P;
+
+export type SidebarPropsContextValue = Pick<
+  SidebarProps,
+  "onClose" | "onDock" | "docked" | "dockable"
+>;
+
+export const SidebarPropsContext =
+  React.createContext<SidebarPropsContextValue>({});

src/components/SidebarLockButton.scss

@@ -1,22 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-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/Stats.tsx

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

src/components/ToolButton.tsx

@@ -187,3 +187,5 @@ ToolButton.defaultProps = {
   className: "",
   size: "medium",
 };
+
+ToolButton.displayName = "ToolButton";

src/components/hoc/withUpstreamOverride.tsx

@@ -0,0 +1,63 @@
+import React, {
+  useMemo,
+  useContext,
+  useLayoutEffect,
+  useState,
+  createContext,
+} from "react";
+
+export const withUpstreamOverride = <P,>(Component: React.ComponentType<P>) => {
+  type ContextValue = [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+
+  const DefaultComponentContext = createContext<ContextValue>([
+    false,
+    () => {},
+  ]);
+
+  const ComponentContext: React.FC<{ children: React.ReactNode }> = ({
+    children,
+  }) => {
+    const [isRenderedUpstream, setIsRenderedUpstream] = useState(false);
+    const contextValue: ContextValue = useMemo(
+      () => [isRenderedUpstream, setIsRenderedUpstream],
+      [isRenderedUpstream],
+    );
+
+    return (
+      <DefaultComponentContext.Provider value={contextValue}>
+        {children}
+      </DefaultComponentContext.Provider>
+    );
+  };
+
+  const DefaultComponent = (
+    props: P & {
+      // indicates whether component should render when not rendered upstream
+      /** @private internal */
+      __isFallback?: boolean;
+    },
+  ) => {
+    const [isRenderedUpstream, setIsRenderedUpstream] = useContext(
+      DefaultComponentContext,
+    );
+
+    useLayoutEffect(() => {
+      if (!props.__isFallback) {
+        setIsRenderedUpstream(true);
+        return () => setIsRenderedUpstream(false);
+      }
+    }, [props.__isFallback, setIsRenderedUpstream]);
+
+    if (props.__isFallback && isRenderedUpstream) {
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+  if (Component.name) {
+    DefaultComponent.displayName = `${Component.name}_upstreamOverrideWrapper`;
+    ComponentContext.displayName = `${Component.name}_upstreamOverrideContextWrapper`;
+  }
+
+  return [ComponentContext, DefaultComponent] as const;
+};

src/constants.ts

@@ -99,6 +99,9 @@ export const MIME_TYPES = {
   "excalidraw.png": "image/png",
   jpg: "image/jpeg",
   gif: "image/gif",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
   binary: "application/octet-stream",
 } as const;
 
@@ -149,7 +152,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     export: { saveFileToDisk: true },
     loadScene: true,
     saveToActiveFile: true,
-    theme: true,
+    toggleTheme: null,
     saveAsImage: true,
   },
 };
@@ -180,6 +183,9 @@ export const ALLOWED_IMAGE_MIME_TYPES = [
   MIME_TYPES.jpg,
   MIME_TYPES.svg,
   MIME_TYPES.gif,
+  MIME_TYPES.webp,
+  MIME_TYPES.bmp,
+  MIME_TYPES.ico,
 ] as const;
 
 export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
@@ -201,8 +207,18 @@ export const VERTICAL_ALIGN = {
   BOTTOM: "bottom",
 };
 
+export const TEXT_ALIGN = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right",
+};
+
 export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
 
 export const COOKIES = {
   AUTH_STATE_COOKIE: "excplus-auth",
 } as const;
+
+/** key containt id of precedeing elemnt id we use in reconciliation during
+ * collaboration */
+export const PRECEDING_ELEMENT_KEY = "__precedingElement__";

src/css/app.scss

@@ -1,3 +1,5 @@
+@import "open-color/open-color.scss";
+
 .visually-hidden {
   position: absolute !important;
   height: 1px;
@@ -30,3 +32,8 @@
     font-size: 0.8em;
   }
 }
+
+.LoadingMessage--dark {
+  background-color: #121212;
+  color: #ced4da;
+}

src/data/blob.ts

@@ -356,7 +356,7 @@ export const getFileHandle = async (
 };
 
 /**
- * attemps to detect if a buffer is a valid image by checking its leading bytes
+ * attempts 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 =
@@ -396,7 +396,7 @@ export const createFile = (
   });
 };
 
-/** attemps to detect correct mimeType if none is set, or if an image
+/** attempts 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) => {

src/data/library.ts

@@ -148,7 +148,7 @@ class Library {
     defaultStatus?: "unpublished" | "published";
   }): Promise<LibraryItems> => {
     if (openLibraryMenu) {
-      this.app.setState({ isLibraryOpen: true });
+      this.app.setState({ openSidebar: "library" });
     }
 
     return this.setLibrary(() => {
@@ -365,38 +365,56 @@ export const useHandleLibrary = ({
       return;
     }
 
-    const importLibraryFromURL = ({
+    const importLibraryFromURL = async ({
       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 libraryPromise = 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);
+        }
       });
+
+      const shouldPrompt = idToken !== excalidrawAPI.id;
+
+      // wait for the tab to be focused before continuing in case we'll prompt
+      // for confirmation
+      await (shouldPrompt && document.hidden
+        ? new Promise<void>((resolve) => {
+            window.addEventListener("focus", () => resolve(), {
+              once: true,
+            });
+          })
+        : null);
+
+      try {
+        await excalidrawAPI.updateLibrary({
+          libraryItems: libraryPromise,
+          prompt: shouldPrompt,
+          merge: true,
+          defaultStatus: "published",
+          openLibraryMenu: true,
+        });
+      } catch (error) {
+        throw error;
+      } finally {
+        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()}`);
+        }
+      }
     };
     const onHashChange = (event: HashChangeEvent) => {
       event.preventDefault();

src/data/restore.ts

@@ -9,7 +9,7 @@ import {
   LibraryItem,
   NormalizedZoomValue,
 } from "../types";
-import { ImportedDataState } from "./types";
+import { ImportedDataState, LegacyAppState } from "./types";
 import {
   getNonDeletedElements,
   getNormalizedDimensions,
@@ -21,6 +21,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_VERTICAL_ALIGN,
+  PRECEDING_ELEMENT_KEY,
   FONT_FAMILY,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
@@ -71,6 +72,8 @@ const restoreElementWithProperties = <
     customData?: ExcalidrawElement["customData"];
     /** @deprecated */
     boundElementIds?: readonly ExcalidrawElement["id"][];
+    /** metadata that may be present in elements during collaboration */
+    [PRECEDING_ELEMENT_KEY]?: string;
   },
   K extends Pick<T, keyof Omit<Required<T>, keyof ExcalidrawElement>>,
 >(
@@ -83,7 +86,9 @@ const restoreElementWithProperties = <
   > &
     Partial<Pick<ExcalidrawElement, "type" | "x" | "y">>,
 ): T => {
-  const base: Pick<T, keyof ExcalidrawElement> = {
+  const base: Pick<T, keyof ExcalidrawElement> & {
+    [PRECEDING_ELEMENT_KEY]?: string;
+  } = {
     type: extra.type || element.type,
     // all elements must have version > 0 so getSceneVersion() will pick up
     // newly added elements
@@ -120,6 +125,10 @@ const restoreElementWithProperties = <
     base.customData = element.customData;
   }
 
+  if (PRECEDING_ELEMENT_KEY in element) {
+    base[PRECEDING_ELEMENT_KEY] = element[PRECEDING_ELEMENT_KEY];
+  }
+
   return {
     ...base,
     ...getNormalizedDimensions(base),
@@ -242,6 +251,43 @@ export const restoreElements = (
   }, [] as ExcalidrawElement[]);
 };
 
+const coalesceAppStateValue = <
+  T extends keyof ReturnType<typeof getDefaultAppState>,
+>(
+  key: T,
+  appState: Exclude<ImportedDataState["appState"], null | undefined>,
+  defaultAppState: ReturnType<typeof getDefaultAppState>,
+) => {
+  const value = appState[key];
+  // NOTE the value! assertion is needed in TS 4.5.5 (fixed in newer versions)
+  return value !== undefined ? value! : defaultAppState[key];
+};
+
+const LegacyAppStateMigrations: {
+  [K in keyof LegacyAppState]: (
+    ImportedDataState: Exclude<ImportedDataState["appState"], null | undefined>,
+    defaultAppState: ReturnType<typeof getDefaultAppState>,
+  ) => [LegacyAppState[K][1], AppState[LegacyAppState[K][1]]];
+} = {
+  isLibraryOpen: (appState, defaultAppState) => {
+    return [
+      "openSidebar",
+      "isLibraryOpen" in appState
+        ? appState.isLibraryOpen
+          ? "library"
+          : null
+        : coalesceAppStateValue("openSidebar", appState, defaultAppState),
+    ];
+  },
+  isLibraryMenuDocked: (appState, defaultAppState) => {
+    return [
+      "isSidebarDocked",
+      appState.isLibraryMenuDocked ??
+        coalesceAppStateValue("isSidebarDocked", appState, defaultAppState),
+    ];
+  },
+};
+
 export const restoreAppState = (
   appState: ImportedDataState["appState"],
   localAppState: Partial<AppState> | null | undefined,
@@ -249,11 +295,30 @@ export const restoreAppState = (
   appState = appState || {};
   const defaultAppState = getDefaultAppState();
   const nextAppState = {} as typeof defaultAppState;
+
+  // first, migrate all legacy AppState properties to new ones. We do it
+  // in one go before migrate the rest of the properties in case the new ones
+  // depend on checking any other key (i.e. they are coupled)
+  for (const legacyKey of Object.keys(
+    LegacyAppStateMigrations,
+  ) as (keyof typeof LegacyAppStateMigrations)[]) {
+    if (legacyKey in appState) {
+      const [nextKey, nextValue] = LegacyAppStateMigrations[legacyKey](
+        appState,
+        defaultAppState,
+      );
+      (nextAppState as any)[nextKey] = nextValue;
+    }
+  }
+
   for (const [key, defaultValue] of Object.entries(defaultAppState) as [
     keyof typeof defaultAppState,
     any,
   ][]) {
+    // if AppState contains a legacy key, prefer that one and migrate its
+    // value to the new one
     const suppliedValue = appState[key];
+
     const localValue = localAppState ? localAppState[key] : undefined;
     (nextAppState as any)[key] =
       suppliedValue !== undefined
@@ -290,9 +355,12 @@ export const restoreAppState = (
         : 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,
+    openSidebar:
+      nextAppState.openSidebar === "library"
+        ? nextAppState.isSidebarDocked
+          ? "library"
+          : null
+        : nextAppState.openSidebar,
   };
 };
 

src/data/types.ts

@@ -17,12 +17,32 @@ export interface ExportedDataState {
   files: BinaryFiles | undefined;
 }
 
+/**
+ * Map of legacy AppState keys, with values of:
+ *  [<legacy type>, <new AppState proeprty>]
+ *
+ * This is a helper type used in downstream abstractions.
+ * Don't consume on its own.
+ */
+export type LegacyAppState = {
+  /** @deprecated #5663 TODO remove 22-12-15 */
+  isLibraryOpen: [boolean, "openSidebar"];
+  /** @deprecated #5663 TODO remove 22-12-15 */
+  isLibraryMenuDocked: [boolean, "isSidebarDocked"];
+};
+
 export interface ImportedDataState {
   type?: string;
   version?: number;
   source?: string;
   elements?: readonly ExcalidrawElement[] | null;
-  appState?: Readonly<Partial<AppState>> | null;
+  appState?: Readonly<
+    Partial<
+      AppState & {
+        [T in keyof LegacyAppState]: LegacyAppState[T][0];
+      }
+    >
+  > | null;
   scrollToContent?: boolean;
   libraryItems?: LibraryItems_anyVersion;
   files?: BinaryFiles;

src/element/Hyperlink.tsx

@@ -32,6 +32,7 @@ import { getElementAbsoluteCoords } from "./";
 
 import "./Hyperlink.scss";
 import { trackEvent } from "../analytics";
+import { useExcalidrawAppState } from "../components/App";
 
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -48,15 +49,15 @@ let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
 
 export const Hyperlink = ({
   element,
-  appState,
   setAppState,
   onLinkOpen,
 }: {
   element: NonDeletedExcalidrawElement;
-  appState: AppState;
   setAppState: React.Component<any, AppState>["setState"];
   onLinkOpen: ExcalidrawProps["onLinkOpen"];
 }) => {
+  const appState = useExcalidrawAppState();
+
   const linkVal = element.link || "";
 
   const [inputVal, setInputVal] = useState(linkVal);

src/element/bounds.ts

@@ -107,12 +107,19 @@ const solveQuadratic = (
     return false;
   }
 
-  const t1 = (-b + Math.sqrt(sqrtPart)) / (2 * a);
-  const t2 = (-b - Math.sqrt(sqrtPart)) / (2 * a);
-
   let s1 = null;
   let s2 = null;
 
+  let t1 = Infinity;
+  let t2 = Infinity;
+
+  if (a === 0) {
+    t1 = t2 = -c / b;
+  } else {
+    t1 = (-b + Math.sqrt(sqrtPart)) / (2 * a);
+    t2 = (-b - Math.sqrt(sqrtPart)) / (2 * a);
+  }
+
   if (t1 >= 0 && t1 <= 1) {
     s1 = getBezierValueForT(t1, p0, p1, p2, p3);
   }

src/element/linearElementEditor.ts

@@ -12,6 +12,11 @@ import {
   getGridPoint,
   rotatePoint,
   centerPoint,
+  getControlPointsForBezierCurve,
+  getBezierXY,
+  getBezierCurveLength,
+  mapIntervalToBezierT,
+  arePointsEqual,
 } from "../math";
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import { getElementPointsCoords } from "./bounds";
@@ -29,6 +34,12 @@ import { tupleToCoors } from "../utils";
 import { isBindingElement } from "./typeChecks";
 import { shouldRotateWithDiscreteAngle } from "../keys";
 
+const editorMidPointsCache: {
+  version: number | null;
+  points: (Point | null)[];
+  zoom: number | null;
+} = { version: null, points: [], zoom: null };
+
 export class LinearElementEditor {
   public readonly elementId: ExcalidrawElement["id"] & {
     _brand: "excalidrawLinearElementId";
@@ -52,7 +63,7 @@ export class LinearElementEditor {
     | "keep";
   public readonly endBindingElement: ExcalidrawBindableElement | null | "keep";
   public readonly hoverPointIndex: number;
-  public readonly midPointHovered: boolean;
+  public readonly segmentMidPointHoveredCoords: Point | null;
 
   constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene) {
     this.elementId = element.id as string & {
@@ -72,7 +83,7 @@ export class LinearElementEditor {
       lastClickedPoint: -1,
     };
     this.hoverPointIndex = -1;
-    this.midPointHovered = false;
+    this.segmentMidPointHoveredCoords = null;
   }
 
   // ---------------------------------------------------------------------------
@@ -80,7 +91,6 @@ export class LinearElementEditor {
   // ---------------------------------------------------------------------------
 
   static POINT_HANDLE_SIZE = 10;
-
   /**
    * @param id the `elementId` from the instance of this class (so that we can
    *  statically guarantee this method returns an ExcalidrawLinearElement)
@@ -359,7 +369,60 @@ export class LinearElementEditor {
     };
   }
 
-  static isHittingMidPoint = (
+  static getEditorMidPoints = (
+    element: NonDeleted<ExcalidrawLinearElement>,
+    appState: AppState,
+  ): typeof editorMidPointsCache["points"] => {
+    // Since its not needed outside editor unless 2 pointer lines
+    if (!appState.editingLinearElement && element.points.length > 2) {
+      return [];
+    }
+    if (
+      editorMidPointsCache.version === element.version &&
+      editorMidPointsCache.zoom === appState.zoom.value
+    ) {
+      return editorMidPointsCache.points;
+    }
+    LinearElementEditor.updateEditorMidPointsCache(element, appState);
+    return editorMidPointsCache.points!;
+  };
+
+  static updateEditorMidPointsCache = (
+    element: NonDeleted<ExcalidrawLinearElement>,
+    appState: AppState,
+  ) => {
+    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+
+    let index = 0;
+    const midpoints: (Point | null)[] = [];
+    while (index < points.length - 1) {
+      if (
+        LinearElementEditor.isSegmentTooShort(
+          element,
+          element.points[index],
+          element.points[index + 1],
+          appState.zoom,
+        )
+      ) {
+        midpoints.push(null);
+        index++;
+        continue;
+      }
+      const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
+        element,
+        points[index],
+        points[index + 1],
+        index + 1,
+      );
+      midpoints.push(segmentMidPoint);
+      index++;
+    }
+    editorMidPointsCache.points = midpoints;
+    editorMidPointsCache.version = element.version;
+    editorMidPointsCache.zoom = appState.zoom.value;
+  };
+
+  static getSegmentMidpointHitCoords = (
     linearElementEditor: LinearElementEditor,
     scenePointer: { x: number; y: number },
     appState: AppState,
@@ -367,7 +430,7 @@ export class LinearElementEditor {
     const { elementId } = linearElementEditor;
     const element = LinearElementEditor.getElement(elementId);
     if (!element) {
-      return false;
+      return null;
     }
     const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(
       element,
@@ -376,37 +439,125 @@ export class LinearElementEditor {
       scenePointer.y,
     );
     if (clickedPointIndex >= 0) {
-      return false;
-    }
-    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
-    if (points.length >= 3) {
-      return false;
-    }
-
-    const midPoint = LinearElementEditor.getMidPoint(linearElementEditor);
-    if (midPoint) {
-      const threshold =
-        LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;
-      const distance = distance2d(
-        midPoint[0],
-        midPoint[1],
-        scenePointer.x,
-        scenePointer.y,
-      );
-      return distance <= threshold;
-    }
-    return false;
-  };
-
-  static getMidPoint(linearElementEditor: LinearElementEditor) {
-    const { elementId } = linearElementEditor;
-    const element = LinearElementEditor.getElement(elementId);
-    if (!element) {
       return null;
     }
     const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    if (points.length >= 3 && !appState.editingLinearElement) {
+      return null;
+    }
 
-    return centerPoint(points[0], points.at(-1)!);
+    const threshold =
+      LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;
+
+    const existingSegmentMidpointHitCoords =
+      linearElementEditor.segmentMidPointHoveredCoords;
+    if (existingSegmentMidpointHitCoords) {
+      const distance = distance2d(
+        existingSegmentMidpointHitCoords[0],
+        existingSegmentMidpointHitCoords[1],
+        scenePointer.x,
+        scenePointer.y,
+      );
+      if (distance <= threshold) {
+        return existingSegmentMidpointHitCoords;
+      }
+    }
+    let index = 0;
+    const midPoints: typeof editorMidPointsCache["points"] =
+      LinearElementEditor.getEditorMidPoints(element, appState);
+    while (index < midPoints.length) {
+      if (midPoints[index] !== null) {
+        const distance = distance2d(
+          midPoints[index]![0],
+          midPoints[index]![1],
+          scenePointer.x,
+          scenePointer.y,
+        );
+        if (distance <= threshold) {
+          return midPoints[index];
+        }
+      }
+
+      index++;
+    }
+    return null;
+  };
+
+  static isSegmentTooShort(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    startPoint: Point,
+    endPoint: Point,
+    zoom: AppState["zoom"],
+  ) {
+    let distance = distance2d(
+      startPoint[0],
+      startPoint[1],
+      endPoint[0],
+      endPoint[1],
+    );
+    if (element.points.length > 2 && element.strokeSharpness === "round") {
+      distance = getBezierCurveLength(element, endPoint);
+    }
+
+    return distance * zoom.value < LinearElementEditor.POINT_HANDLE_SIZE * 4;
+  }
+
+  static getSegmentMidPoint(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    startPoint: Point,
+    endPoint: Point,
+    endPointIndex: number,
+  ) {
+    let segmentMidPoint = centerPoint(startPoint, endPoint);
+    if (element.points.length > 2 && element.strokeSharpness === "round") {
+      const controlPoints = getControlPointsForBezierCurve(
+        element,
+        element.points[endPointIndex],
+      );
+      if (controlPoints) {
+        const t = mapIntervalToBezierT(
+          element,
+          element.points[endPointIndex],
+          0.5,
+        );
+
+        const [tx, ty] = getBezierXY(
+          controlPoints[0],
+          controlPoints[1],
+          controlPoints[2],
+          controlPoints[3],
+          t,
+        );
+        segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(
+          element,
+          [tx, ty],
+        );
+      }
+    }
+
+    return segmentMidPoint;
+  }
+
+  static getSegmentMidPointIndex(
+    linearElementEditor: LinearElementEditor,
+    appState: AppState,
+    midPoint: Point,
+  ) {
+    const element = LinearElementEditor.getElement(
+      linearElementEditor.elementId,
+    );
+    if (!element) {
+      return -1;
+    }
+    const midPoints = LinearElementEditor.getEditorMidPoints(element, appState);
+    let index = 0;
+    while (index < midPoints.length - 1) {
+      if (LinearElementEditor.arePointsEqual(midPoint, midPoints[index])) {
+        return index + 1;
+      }
+      index++;
+    }
+    return -1;
   }
 
   static handlePointerDown(
@@ -438,33 +589,32 @@ export class LinearElementEditor {
     if (!element) {
       return ret;
     }
-    const hittingMidPoint = LinearElementEditor.isHittingMidPoint(
+    const segmentMidPoint = LinearElementEditor.getSegmentMidpointHitCoords(
       linearElementEditor,
       scenePointer,
       appState,
     );
-    if (
-      LinearElementEditor.isHittingMidPoint(
+    if (segmentMidPoint) {
+      const index = LinearElementEditor.getSegmentMidPointIndex(
         linearElementEditor,
-        scenePointer,
         appState,
-      )
-    ) {
-      const midPoint = LinearElementEditor.getMidPoint(linearElementEditor);
-      if (midPoint) {
-        mutateElement(element, {
-          points: [
-            element.points[0],
-            LinearElementEditor.createPointAt(
-              element,
-              midPoint[0],
-              midPoint[1],
-              appState.gridSize,
-            ),
-            ...element.points.slice(1),
-          ],
-        });
-      }
+        segmentMidPoint,
+      );
+      const newMidPoint = LinearElementEditor.createPointAt(
+        element,
+        segmentMidPoint[0],
+        segmentMidPoint[1],
+        appState.gridSize,
+      );
+      const points = [
+        ...element.points.slice(0, index),
+        newMidPoint,
+        ...element.points.slice(index),
+      ];
+      mutateElement(element, {
+        points,
+      });
+
       ret.didAddPoint = true;
       ret.isMidPoint = true;
       ret.linearElementEditor = {
@@ -520,7 +670,7 @@ export class LinearElementEditor {
 
     // if we clicked on a point, set the element as hitElement otherwise
     // it would get deselected if the point is outside the hitbox area
-    if (clickedPointIndex >= 0 || hittingMidPoint) {
+    if (clickedPointIndex >= 0 || segmentMidPoint) {
       ret.hitElement = element;
     } else {
       // You might be wandering why we are storing the binding elements on
@@ -579,17 +729,29 @@ export class LinearElementEditor {
     return ret;
   }
 
+  static arePointsEqual(point1: Point | null, point2: Point | null) {
+    if (!point1 && !point2) {
+      return true;
+    }
+    if (!point1 || !point2) {
+      return false;
+    }
+    return arePointsEqual(point1, point2);
+  }
+
   static handlePointerMove(
     event: React.PointerEvent<HTMLCanvasElement>,
     scenePointerX: number,
     scenePointerY: number,
-    linearElementEditor: LinearElementEditor,
-    gridSize: number | null,
-  ): LinearElementEditor {
-    const { elementId, lastUncommittedPoint } = linearElementEditor;
+    appState: AppState,
+  ): LinearElementEditor | null {
+    if (!appState.editingLinearElement) {
+      return null;
+    }
+    const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
     const element = LinearElementEditor.getElement(elementId);
     if (!element) {
-      return linearElementEditor;
+      return appState.editingLinearElement;
     }
 
     const { points } = element;
@@ -599,7 +761,10 @@ export class LinearElementEditor {
       if (lastPoint === lastUncommittedPoint) {
         LinearElementEditor.deletePoints(element, [points.length - 1]);
       }
-      return { ...linearElementEditor, lastUncommittedPoint: null };
+      return {
+        ...appState.editingLinearElement,
+        lastUncommittedPoint: null,
+      };
     }
 
     let newPoint: Point;
@@ -611,7 +776,7 @@ export class LinearElementEditor {
         element,
         lastCommittedPoint,
         [scenePointerX, scenePointerY],
-        gridSize,
+        appState.gridSize,
       );
 
       newPoint = [
@@ -621,9 +786,9 @@ export class LinearElementEditor {
     } else {
       newPoint = LinearElementEditor.createPointAt(
         element,
-        scenePointerX - linearElementEditor.pointerOffset.x,
-        scenePointerY - linearElementEditor.pointerOffset.y,
-        gridSize,
+        scenePointerX - appState.editingLinearElement.pointerOffset.x,
+        scenePointerY - appState.editingLinearElement.pointerOffset.y,
+        appState.gridSize,
       );
     }
 
@@ -635,11 +800,10 @@ export class LinearElementEditor {
         },
       ]);
     } else {
-      LinearElementEditor.addPoints(element, [{ point: newPoint }]);
+      LinearElementEditor.addPoints(element, appState, [{ point: newPoint }]);
     }
-
     return {
-      ...linearElementEditor,
+      ...appState.editingLinearElement,
       lastUncommittedPoint: element.points[element.points.length - 1],
     };
   }
@@ -686,7 +850,9 @@ export class LinearElementEditor {
 
     const point = element.points[index];
     const { x, y } = element;
-    return rotate(x + point[0], y + point[1], cx, cy, element.angle);
+    return point
+      ? rotate(x + point[0], y + point[1], cx, cy, element.angle)
+      : rotate(x, y, cx, cy, element.angle);
   }
 
   static pointFromAbsoluteCoords(
@@ -882,6 +1048,7 @@ export class LinearElementEditor {
 
   static addPoints(
     element: NonDeleted<ExcalidrawLinearElement>,
+    appState: AppState,
     targetPoints: { point: Point }[],
   ) {
     const offsetX = 0;

src/element/newElement.ts

@@ -21,7 +21,12 @@ import { AppState } from "../types";
 import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
-import { getContainerElement, measureText, wrapText } from "./textElement";
+import {
+  getContainerDims,
+  getContainerElement,
+  measureText,
+  wrapText,
+} from "./textElement";
 import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
 
 type ElementConstructorOpts = MarkOptional<
@@ -164,7 +169,8 @@ const getAdjustedDimensions = (
   let maxWidth = null;
   const container = getContainerElement(element);
   if (container) {
-    maxWidth = container.width - BOUND_TEXT_PADDING * 2;
+    const containerDims = getContainerDims(container);
+    maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
   }
   const {
     width: nextWidth,
@@ -224,15 +230,16 @@ const getAdjustedDimensions = (
   // make sure container dimensions are set properly when
   // text editor overflows beyond viewport dimensions
   if (container) {
-    let height = container.height;
-    let width = container.width;
+    const containerDims = getContainerDims(container);
+    let height = containerDims.height;
+    let width = containerDims.width;
     if (nextHeight > height - BOUND_TEXT_PADDING * 2) {
       height = nextHeight + BOUND_TEXT_PADDING * 2;
     }
     if (nextWidth > width - BOUND_TEXT_PADDING * 2) {
       width = nextWidth + BOUND_TEXT_PADDING * 2;
     }
-    if (height !== container.height || width !== container.width) {
+    if (height !== containerDims.height || width !== containerDims.width) {
       mutateElement(container, { height, width });
     }
   }
@@ -245,8 +252,16 @@ const getAdjustedDimensions = (
   };
 };
 
+export const getMaxContainerWidth = (container: ExcalidrawElement) => {
+  return getContainerDims(container).width - BOUND_TEXT_PADDING * 2;
+};
+
+export const getMaxContainerHeight = (container: ExcalidrawElement) => {
+  return getContainerDims(container).height - BOUND_TEXT_PADDING * 2;
+};
+
 export const updateTextElement = (
-  element: ExcalidrawTextElement,
+  textElement: ExcalidrawTextElement,
   {
     text,
     isDeleted,
@@ -257,15 +272,19 @@ export const updateTextElement = (
     originalText: string;
   },
 ): ExcalidrawTextElement => {
-  const container = getContainerElement(element);
+  const container = getContainerElement(textElement);
   if (container) {
-    text = wrapText(text, getFontString(element), container.width);
+    text = wrapText(
+      originalText,
+      getFontString(textElement),
+      getMaxContainerWidth(container),
+    );
   }
-  const dimensions = getAdjustedDimensions(element, text);
-  return newElementWith(element, {
+  const dimensions = getAdjustedDimensions(textElement, text);
+  return newElementWith(textElement, {
     text,
     originalText,
-    isDeleted: isDeleted ?? element.isDeleted,
+    isDeleted: isDeleted ?? textElement.isDeleted,
     ...dimensions,
   });
 };
@@ -308,6 +327,9 @@ export const newLinearElement = (
 export const newImageElement = (
   opts: {
     type: ExcalidrawImageElement["type"];
+    status?: ExcalidrawImageElement["status"];
+    fileId?: ExcalidrawImageElement["fileId"];
+    scale?: ExcalidrawImageElement["scale"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawImageElement> => {
   return {
@@ -315,9 +337,9 @@ export const newImageElement = (
     // in the future we'll support changing stroke color for some SVG elements,
     // and `transparent` will likely mean "use original colors of the image"
     strokeColor: "transparent",
-    status: "pending",
-    fileId: null,
-    scale: [1, 1],
+    status: opts.status ?? "pending",
+    fileId: opts.fileId ?? null,
+    scale: opts.scale ?? [1, 1],
   };
 };
 

src/element/textElement.test.ts

@@ -1,3 +1,4 @@
+import { BOUND_TEXT_PADDING } from "../constants";
 import { wrapText } from "./textElement";
 import { FontString } from "./types";
 
@@ -45,7 +46,7 @@ up`,
       },
     ].forEach((data) => {
       it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
         expect(res).toEqual(data.res);
       });
     });
@@ -93,7 +94,7 @@ whats up`,
       },
     ].forEach((data) => {
       it(`should respect new lines and ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
         expect(res).toEqual(data.res);
       });
     });
@@ -132,7 +133,7 @@ break it now`,
       },
     ].forEach((data) => {
       it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
         expect(res).toEqual(data.res);
       });
     });

src/element/textElement.ts

@@ -7,53 +7,67 @@ import {
   NonDeletedExcalidrawElement,
 } from "./types";
 import { mutateElement } from "./mutateElement";
-import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+import { BOUND_TEXT_PADDING, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
 import { isTextElement } from ".";
+import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
 
 export const redrawTextBoundingBox = (
-  element: ExcalidrawTextElement,
+  textElement: ExcalidrawTextElement,
   container: ExcalidrawElement | null,
 ) => {
-  const maxWidth = container
-    ? container.width - BOUND_TEXT_PADDING * 2
-    : undefined;
-  let text = element.text;
+  let maxWidth = undefined;
+  let text = textElement.text;
 
   if (container) {
+    maxWidth = getMaxContainerWidth(container);
     text = wrapText(
-      element.originalText,
-      getFontString(element),
-      container.width,
+      textElement.originalText,
+      getFontString(textElement),
+      getMaxContainerWidth(container),
     );
   }
   const metrics = measureText(
-    element.originalText,
-    getFontString(element),
+    textElement.originalText,
+    getFontString(textElement),
     maxWidth,
   );
-  let coordY = element.y;
-  let coordX = element.x;
+  let coordY = textElement.y;
+  let coordX = textElement.x;
   // Resize container and vertically center align the text
   if (container) {
-    let nextHeight = container.height;
-    coordX = container.x + BOUND_TEXT_PADDING;
-    if (element.verticalAlign === VERTICAL_ALIGN.TOP) {
+    const containerDims = getContainerDims(container);
+    let nextHeight = containerDims.height;
+    if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
       coordY = container.y + BOUND_TEXT_PADDING;
-    } else if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+    } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
       coordY =
-        container.y + container.height - metrics.height - BOUND_TEXT_PADDING;
+        container.y +
+        containerDims.height -
+        metrics.height -
+        BOUND_TEXT_PADDING;
     } else {
-      coordY = container.y + container.height / 2 - metrics.height / 2;
-      if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
+      coordY = container.y + containerDims.height / 2 - metrics.height / 2;
+      if (metrics.height > getMaxContainerHeight(container)) {
         nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
         coordY = container.y + nextHeight / 2 - metrics.height / 2;
       }
     }
+
+    if (textElement.textAlign === TEXT_ALIGN.LEFT) {
+      coordX = container.x + BOUND_TEXT_PADDING;
+    } else if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
+      coordX =
+        container.x + containerDims.width - metrics.width - BOUND_TEXT_PADDING;
+    } else {
+      coordX = container.x + container.width / 2 - metrics.width / 2;
+    }
+
     mutateElement(container, { height: nextHeight });
   }
-  mutateElement(element, {
+
+  mutateElement(textElement, {
     width: metrics.width,
     height: metrics.height,
     baseline: metrics.baseline,
@@ -114,6 +128,7 @@ export const handleBindTextResize = (
       }
       let text = textElement.text;
       let nextHeight = textElement.height;
+      let nextWidth = textElement.width;
       let containerHeight = element.height;
       let nextBaseLine = textElement.baseline;
       if (transformHandleType !== "n" && transformHandleType !== "s") {
@@ -121,7 +136,7 @@ export const handleBindTextResize = (
           text = wrapText(
             textElement.originalText,
             getFontString(textElement),
-            element.width,
+            getMaxContainerWidth(element),
           );
         }
 
@@ -131,6 +146,7 @@ export const handleBindTextResize = (
           element.width,
         );
         nextHeight = dimensions.height;
+        nextWidth = dimensions.width;
         nextBaseLine = dimensions.baseline;
       }
       // increase height in case text element height exceeds
@@ -158,13 +174,17 @@ export const handleBindTextResize = (
       } else {
         updatedY = element.y + element.height / 2 - nextHeight / 2;
       }
-
+      const updatedX =
+        textElement.textAlign === TEXT_ALIGN.LEFT
+          ? element.x + BOUND_TEXT_PADDING
+          : textElement.textAlign === TEXT_ALIGN.RIGHT
+          ? element.x + element.width - nextWidth - BOUND_TEXT_PADDING
+          : element.x + element.width / 2 - nextWidth / 2;
       mutateElement(textElement, {
         text,
-        // preserve padding and set width correctly
-        width: element.width - BOUND_TEXT_PADDING * 2,
+        width: nextWidth,
         height: nextHeight,
-        x: element.x + BOUND_TEXT_PADDING,
+        x: updatedX,
         y: updatedY,
         baseline: nextBaseLine,
       });
@@ -191,7 +211,6 @@ export const measureText = (
   container.style.minHeight = "1em";
   if (maxWidth) {
     const lineHeight = getApproxLineHeight(font);
-    container.style.width = `${String(maxWidth)}px`;
     container.style.maxWidth = `${String(maxWidth)}px`;
     container.style.overflow = "hidden";
     container.style.wordBreak = "break-word";
@@ -209,7 +228,8 @@ export const measureText = (
   container.appendChild(span);
   // Baseline is important for positioning text on canvas
   const baseline = span.offsetTop + span.offsetHeight;
-  const width = container.offsetWidth;
+  // Since span adds 1px extra width to the container
+  const width = container.offsetWidth + 1;
 
   const height = container.offsetHeight;
   document.body.removeChild(container);
@@ -247,13 +267,7 @@ const getTextWidth = (text: string, font: FontString) => {
   return metrics.width;
 };
 
-export const wrapText = (
-  text: string,
-  font: FontString,
-  containerWidth: number,
-) => {
-  const maxWidth = containerWidth - BOUND_TEXT_PADDING * 2;
-
+export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   const lines: Array<string> = [];
   const originalLines = text.split("\n");
   const spaceWidth = getTextWidth(" ", font);
@@ -474,3 +488,7 @@ export const getContainerElement = (
   }
   return null;
 };
+
+export const getContainerDims = (element: ExcalidrawElement) => {
+  return { width: element.width, height: element.height };
+};

src/element/textWysiwyg.test.tsx

@@ -14,6 +14,7 @@ import {
 import * as textElementUtils from "./textElement";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
+import { resize } from "../tests/utils";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
@@ -492,9 +493,7 @@ describe("textWysiwyg", () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);
 
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
+      Keyboard.keyPress(KEYS.ENTER);
 
       expect(h.elements.length).toBe(2);
 
@@ -695,9 +694,8 @@ describe("textWysiwyg", () => {
       // Edit and text by removing second line and it should
       // still vertically align correctly
       mouse.select(rectangle);
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
+      Keyboard.keyPress(KEYS.ENTER);
+
       editor = document.querySelector(
         ".excalidraw-textEditorContainer > textarea",
       ) as HTMLTextAreaElement;
@@ -734,9 +732,7 @@ describe("textWysiwyg", () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);
 
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
+      Keyboard.keyPress(KEYS.ENTER);
 
       expect(h.elements.length).toBe(2);
 
@@ -771,12 +767,11 @@ describe("textWysiwyg", () => {
         null,
       );
     });
+
     it("shouldn't bind to container if container has bound text", async () => {
       expect(h.elements.length).toBe(1);
 
-      Keyboard.withModifierKeys({}, () => {
-        Keyboard.keyPress(KEYS.ENTER);
-      });
+      Keyboard.keyPress(KEYS.ENTER);
 
       expect(h.elements.length).toBe(2);
 
@@ -813,5 +808,73 @@ describe("textWysiwyg", () => {
       ]);
       expect(text.containerId).toBe(null);
     });
+
+    it("should respect text alignment when resizing", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello" } });
+      editor.blur();
+
+      // should center align horizontally and vertically by default
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
+        Array [
+          109.5,
+          17,
+        ]
+      `);
+
+      mouse.select(rectangle);
+      Keyboard.keyPress(KEYS.ENTER);
+
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      editor.select();
+
+      fireEvent.click(screen.getByTitle("Left"));
+      fireEvent.click(screen.getByTitle("Align bottom"));
+      await new Promise((r) => setTimeout(r, 0));
+
+      editor.blur();
+
+      // should left align horizontally and bottom vertically after resize
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
+        Array [
+          15,
+          90,
+        ]
+      `);
+
+      mouse.select(rectangle);
+      Keyboard.keyPress(KEYS.ENTER);
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      editor.select();
+
+      fireEvent.click(screen.getByTitle("Right"));
+      fireEvent.click(screen.getByTitle("Align top"));
+
+      await new Promise((r) => setTimeout(r, 0));
+
+      editor.blur();
+
+      // should right align horizontally and top vertically after resize
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
+        Array [
+          424,
+          -539,
+        ]
+      `);
+    });
   });
 });

src/element/textWysiwyg.tsx

@@ -18,6 +18,7 @@ import { mutateElement } from "./mutateElement";
 import {
   getApproxLineHeight,
   getBoundTextElementId,
+  getContainerDims,
   getContainerElement,
   wrapText,
 } from "./textElement";
@@ -27,6 +28,7 @@ import {
 } from "../actions/actionProperties";
 import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
+import { getMaxContainerWidth } from "./newElement";
 
 const normalizeText = (text: string) => {
   return (
@@ -83,17 +85,17 @@ export const textWysiwyg = ({
   app: App;
 }) => {
   const textPropertiesUpdated = (
-    updatedElement: ExcalidrawTextElement,
+    updatedTextElement: ExcalidrawTextElement,
     editable: HTMLTextAreaElement,
   ) => {
     const currentFont = editable.style.fontFamily.replace(/"/g, "");
     if (
-      getFontFamilyString({ fontFamily: updatedElement.fontFamily }) !==
+      getFontFamilyString({ fontFamily: updatedTextElement.fontFamily }) !==
       currentFont
     ) {
       return true;
     }
-    if (`${updatedElement.fontSize}px` !== editable.style.fontSize) {
+    if (`${updatedTextElement.fontSize}px` !== editable.style.fontSize) {
       return true;
     }
     return false;
@@ -102,74 +104,73 @@ export const textWysiwyg = ({
 
   const updateWysiwygStyle = () => {
     const appState = app.state;
-    const updatedElement =
+    const updatedTextElement =
       Scene.getScene(element)?.getElement<ExcalidrawTextElement>(id);
-    if (!updatedElement) {
+    if (!updatedTextElement) {
       return;
     }
-    const { textAlign, verticalAlign } = updatedElement;
+    const { textAlign, verticalAlign } = updatedTextElement;
 
-    const approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
-    if (updatedElement && isTextElement(updatedElement)) {
-      let coordX = updatedElement.x;
-      let coordY = updatedElement.y;
-      const container = getContainerElement(updatedElement);
-      let maxWidth = updatedElement.width;
+    const approxLineHeight = getApproxLineHeight(
+      getFontString(updatedTextElement),
+    );
+    if (updatedTextElement && isTextElement(updatedTextElement)) {
+      const coordX = updatedTextElement.x;
+      let coordY = updatedTextElement.y;
+      const container = getContainerElement(updatedTextElement);
+      let maxWidth = updatedTextElement.width;
 
-      let maxHeight = updatedElement.height;
-      let width = updatedElement.width;
+      let maxHeight = updatedTextElement.height;
+      const width = updatedTextElement.width;
       // Set to element height by default since that's
       // what is going to be used for unbounded text
-      let height = updatedElement.height;
-      if (container && updatedElement.containerId) {
+      let height = updatedTextElement.height;
+      if (container && updatedTextElement.containerId) {
         const propertiesUpdated = textPropertiesUpdated(
-          updatedElement,
+          updatedTextElement,
           editable,
         );
+        const containerDims = getContainerDims(container);
         // using editor.style.height to get the accurate height of text editor
         const editorHeight = Number(editable.style.height.slice(0, -2));
         if (editorHeight > 0) {
           height = editorHeight;
         }
         if (propertiesUpdated) {
-          originalContainerHeight = container.height;
+          originalContainerHeight = containerDims.height;
 
           // update height of the editor after properties updated
-          height = updatedElement.height;
+          height = updatedTextElement.height;
         }
         if (!originalContainerHeight) {
-          originalContainerHeight = container.height;
+          originalContainerHeight = containerDims.height;
         }
-        maxWidth = container.width - BOUND_TEXT_PADDING * 2;
-        maxHeight = container.height - BOUND_TEXT_PADDING * 2;
-        width = maxWidth;
-        // The coordinates of text box set a distance of
-        // 5px to preserve padding
-        coordX = container.x + BOUND_TEXT_PADDING;
+        maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
+        maxHeight = containerDims.height - BOUND_TEXT_PADDING * 2;
         // autogrow container height if text exceeds
         if (height > maxHeight) {
           const diff = Math.min(height - maxHeight, approxLineHeight);
-          mutateElement(container, { height: container.height + diff });
+          mutateElement(container, { height: containerDims.height + diff });
           return;
         } else if (
           // autoshrink container height until original container height
           // is reached when text is removed
-          container.height > originalContainerHeight &&
+          containerDims.height > originalContainerHeight &&
           height < maxHeight
         ) {
           const diff = Math.min(maxHeight - height, approxLineHeight);
-          mutateElement(container, { height: container.height - diff });
+          mutateElement(container, { height: containerDims.height - diff });
         }
         // Start pushing text upward until a diff of 30px (padding)
         // is reached
         else {
           // vertically center align the text
           if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
-            coordY = container.y + container.height / 2 - height / 2;
+            coordY = container.y + containerDims.height / 2 - height / 2;
           }
           if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
             coordY =
-              container.y + container.height - height - BOUND_TEXT_PADDING;
+              container.y + containerDims.height - height - BOUND_TEXT_PADDING;
           }
         }
       }
@@ -177,7 +178,7 @@ export const textWysiwyg = ({
       const initialSelectionStart = editable.selectionStart;
       const initialSelectionEnd = editable.selectionEnd;
       const initialLength = editable.value.length;
-      editable.value = updatedElement.originalText;
+      editable.value = updatedTextElement.originalText;
 
       // restore cursor position after value updated so it doesn't
       // go to the end of text when container auto expanded
@@ -192,10 +193,10 @@ export const textWysiwyg = ({
         editable.selectionEnd = editable.value.length - diff;
       }
 
-      const lines = updatedElement.originalText.split("\n");
-      const lineHeight = updatedElement.containerId
+      const lines = updatedTextElement.originalText.split("\n");
+      const lineHeight = updatedTextElement.containerId
         ? approxLineHeight
-        : updatedElement.height / lines.length;
+        : updatedTextElement.height / lines.length;
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
       }
@@ -203,12 +204,12 @@ export const textWysiwyg = ({
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
-      const angle = container ? container.angle : updatedElement.angle;
+      const angle = container ? container.angle : updatedTextElement.angle;
       Object.assign(editable.style, {
-        font: getFontString(updatedElement),
+        font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: `${lineHeight}px`,
-        width: `${width}px`,
+        width: `${Math.min(width, maxWidth)}px`,
         height: `${height}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
@@ -222,18 +223,17 @@ export const textWysiwyg = ({
         ),
         textAlign,
         verticalAlign,
-        color: updatedElement.strokeColor,
-        opacity: updatedElement.opacity / 100,
+        color: updatedTextElement.strokeColor,
+        opacity: updatedTextElement.opacity / 100,
         filter: "var(--theme-filter)",
-        maxWidth: `${maxWidth}px`,
         maxHeight: `${editorMaxHeight}px`,
       });
       // For some reason updating font attribute doesn't set font family
       // hence updating font family explicitly for test environment
       if (isTestEnv()) {
-        editable.style.fontFamily = getFontFamilyString(updatedElement);
+        editable.style.fontFamily = getFontFamilyString(updatedTextElement);
       }
-      mutateElement(updatedElement, { x: coordX, y: coordY });
+      mutateElement(updatedTextElement, { x: coordX, y: coordY });
     }
   };
 
@@ -276,10 +276,10 @@ export const textWysiwyg = ({
 
   if (onChange) {
     editable.oninput = () => {
-      const updatedElement = Scene.getScene(element)?.getElement(
+      const updatedTextElement = Scene.getScene(element)?.getElement(
         id,
       ) as ExcalidrawTextElement;
-      const font = getFontString(updatedElement);
+      const font = getFontString(updatedTextElement);
       // using scrollHeight here since we need to calculate
       // number of lines so cannot use editable.style.height
       // as that gets updated below
@@ -297,13 +297,14 @@ export const textWysiwyg = ({
       // doubles the height as soon as user starts typing
       if (isBoundToContainer(element) && lines > 1) {
         let height = "auto";
-
+        editable.style.height = "0px";
+        let heightSet = false;
         if (lines === 2) {
           const container = getContainerElement(element);
           const actualLineCount = wrapText(
             editable.value,
             font,
-            container!.width,
+            getMaxContainerWidth(container!),
           ).split("\n").length;
           // This is browser behaviour when setting height to "auto"
           // It sets the height needed for 2 lines even if actual
@@ -312,10 +313,13 @@ export const textWysiwyg = ({
           // so single line aligns vertically when deleting
           if (actualLineCount === 1) {
             height = `${editable.scrollHeight / 2}px`;
+            editable.style.height = height;
+            heightSet = true;
           }
         }
-        editable.style.height = height;
-        editable.style.height = `${editable.scrollHeight}px`;
+        if (!heightSet) {
+          editable.style.height = `${editable.scrollHeight}px`;
+        }
       }
       onChange(normalizeText(editable.value));
     };

src/element/types.ts

@@ -1,5 +1,5 @@
 import { Point } from "../types";
-import { FONT_FAMILY, THEME, VERTICAL_ALIGN } from "../constants";
+import { FONT_FAMILY, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid";
@@ -11,7 +11,7 @@ export type GroupId = string;
 export type PointerType = "mouse" | "pen" | "touch";
 export type StrokeSharpness = "round" | "sharp";
 export type StrokeStyle = "solid" | "dashed" | "dotted";
-export type TextAlign = "left" | "center" | "right";
+export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
 
 type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
 export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];

src/excalidraw-app/CustomStats.tsx

@@ -7,6 +7,8 @@ import {
 import { DEFAULT_VERSION } from "../constants";
 import { t } from "../i18n";
 import { copyTextToSystemClipboard } from "../clipboard";
+import { AppState } from "../types";
+import { NonDeletedExcalidrawElement } from "../element/types";
 type StorageSizes = { scene: number; total: number };
 
 const STORAGE_SIZE_TIMEOUT = 500;
@@ -20,6 +22,8 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 
 type Props = {
   setToast: (message: string) => void;
+  elements: readonly NonDeletedExcalidrawElement[];
+  appState: AppState;
 };
 const CustomStats = (props: Props) => {
   const [storageSizes, setStorageSizes] = useState<StorageSizes>({
@@ -31,7 +35,7 @@ const CustomStats = (props: Props) => {
     getStorageSizes((sizes) => {
       setStorageSizes(sizes);
     });
-  });
+  }, [props.elements, props.appState]);
   useEffect(() => () => getStorageSizes.cancel(), []);
 
   const version = getVersion();

src/excalidraw-app/app_constants.ts

@@ -33,8 +33,8 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_ELEMENTS: "excalidraw",
   LOCAL_STORAGE_APP_STATE: "excalidraw-state",
   LOCAL_STORAGE_COLLAB: "excalidraw-collab",
-  LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG: "collabLinkForceLoadFlag",
   LOCAL_STORAGE_LIBRARY: "excalidraw-library",
+  LOCAL_STORAGE_THEME: "excalidraw-theme",
   VERSION_DATA_STATE: "version-dataState",
   VERSION_FILES: "version-files",
 } as const;

src/excalidraw-app/collab/Collab.tsx

@@ -25,7 +25,6 @@ import {
   INITIAL_SCENE_UPDATE_TIMEOUT,
   LOAD_IMAGES_TIMEOUT,
   WS_SCENE_EVENT_TYPES,
-  STORAGE_KEYS,
   SYNC_FULL_SCENE_INTERVAL_MS,
 } from "../app_constants";
 import {
@@ -225,18 +224,6 @@ class Collab extends PureComponent<Props, CollabState> {
 
       preventUnload(event);
     }
-
-    if (this.isCollaborating || this.portal.roomId) {
-      try {
-        localStorage?.setItem(
-          STORAGE_KEYS.LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG,
-          JSON.stringify({
-            timestamp: Date.now(),
-            room: this.portal.roomId,
-          }),
-        );
-      } catch {}
-    }
   });
 
   saveCollabRoomToFirebase = async (

src/excalidraw-app/collab/Portal.tsx

@@ -14,10 +14,11 @@ import {
 } from "../app_constants";
 import { UserIdleState } from "../../types";
 import { trackEvent } from "../../analytics";
-import { throttle } from "lodash";
+import throttle from "lodash.throttle";
 import { newElementWith } from "../../element/mutateElement";
 import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../data/encryption";
+import { PRECEDING_ELEMENT_KEY } from "../../constants";
 
 class Portal {
   collab: TCollabClass;
@@ -152,7 +153,7 @@ class Portal {
           acc.push({
             ...element,
             // z-index info for the reconciler
-            parent: idx === 0 ? "^" : elements[idx - 1]?.id,
+            [PRECEDING_ELEMENT_KEY]: idx === 0 ? "^" : elements[idx - 1]?.id,
           });
         }
         return acc;

src/excalidraw-app/collab/reconciliation.ts

@@ -1,3 +1,4 @@
+import { PRECEDING_ELEMENT_KEY } from "../../constants";
 import { ExcalidrawElement } from "../../element/types";
 import { AppState } from "../../types";
 
@@ -6,7 +7,7 @@ export type ReconciledElements = readonly ExcalidrawElement[] & {
 };
 
 export type BroadcastedExcalidrawElement = ExcalidrawElement & {
-  parent?: string;
+  [PRECEDING_ELEMENT_KEY]?: string;
 };
 
 const shouldDiscardRemoteElement = (
@@ -71,8 +72,8 @@ export const reconcileElements = (
     const local = localElementsData[remoteElement.id];
 
     if (shouldDiscardRemoteElement(localAppState, local?.[0], remoteElement)) {
-      if (remoteElement.parent) {
-        delete remoteElement.parent;
+      if (remoteElement[PRECEDING_ELEMENT_KEY]) {
+        delete remoteElement[PRECEDING_ELEMENT_KEY];
       }
 
       continue;
@@ -92,10 +93,12 @@ export const reconcileElements = (
     // parent may not be defined in case the remote client is running an older
     // excalidraw version
     const parent =
-      remoteElement.parent || remoteElements[remoteElementIdx - 1]?.id || null;
+      remoteElement[PRECEDING_ELEMENT_KEY] ||
+      remoteElements[remoteElementIdx - 1]?.id ||
+      null;
 
     if (parent != null) {
-      delete remoteElement.parent;
+      delete remoteElement[PRECEDING_ELEMENT_KEY];
 
       // ^ indicates the element is the first in elements array
       if (parent === "^") {

src/excalidraw-app/index.tsx

@@ -9,6 +9,7 @@ import {
   APP_NAME,
   COOKIES,
   EVENT,
+  THEME,
   TITLE_TIMEOUT,
   VERSION_TIMEOUT,
 } from "../constants";
@@ -17,6 +18,7 @@ import {
   ExcalidrawElement,
   FileId,
   NonDeletedExcalidrawElement,
+  Theme,
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
@@ -194,7 +196,13 @@ const initializeScene = async (opts: {
       scene: {
         ...scene,
         appState: {
-          ...restoreAppState(scene?.appState, excalidrawAPI.getAppState()),
+          ...restoreAppState(
+            {
+              ...scene?.appState,
+              theme: localDataState?.appState?.theme || scene?.appState?.theme,
+            },
+            excalidrawAPI.getAppState(),
+          ),
           // necessary if we're invoking from a hashchange handler which doesn't
           // go through App.initializeScene() that resets this flag
           isLoading: false,
@@ -506,6 +514,21 @@ const ExcalidrawWrapper = () => {
     languageDetector.cacheUserLanguage(langCode);
   }, [langCode]);
 
+  const [theme, setTheme] = useState<Theme>(
+    () =>
+      localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) ||
+      // FIXME migration from old LS scheme. Can be removed later. #5660
+      importFromLocalStorage().appState?.theme ||
+      THEME.LIGHT,
+  );
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, theme);
+    // currently only used for body styling during init (see public/index.html),
+    // but may change in the future
+    document.documentElement.classList.toggle("dark", theme === THEME.DARK);
+  }, [theme]);
+
   const onChange = (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
@@ -515,6 +538,8 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
+    setTheme(appState.theme);
+
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -666,10 +691,15 @@ const ExcalidrawWrapper = () => {
     [langCode],
   );
 
-  const renderCustomStats = () => {
+  const renderCustomStats = (
+    elements: readonly NonDeletedExcalidrawElement[],
+    appState: AppState,
+  ) => {
     return (
       <CustomStats
         setToast={(message) => excalidrawAPI!.setToast({ message })}
+        appState={appState}
+        elements={elements}
       />
     );
   };
@@ -699,6 +729,7 @@ const ExcalidrawWrapper = () => {
         onPointerUpdate={collabAPI?.onPointerUpdate}
         UIOptions={{
           canvasActions: {
+            toggleTheme: true,
             export: {
               onExportToBackend,
               renderCustomUI: (elements, appState, files) => {
@@ -728,6 +759,7 @@ const ExcalidrawWrapper = () => {
         handleKeyboardGlobally={true}
         onLibraryChange={onLibraryChange}
         autoFocus={true}
+        theme={theme}
       />
       {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/i18n.ts

@@ -24,6 +24,7 @@ const allLanguages: Language[] = [
   { code: "fa-IR", label: "فارسی", rtl: true },
   { code: "fi-FI", label: "Suomi" },
   { code: "fr-FR", label: "Français" },
+  { code: "gl-ES	", label: "Galego" },
   { code: "he-IL", label: "עברית", rtl: true },
   { code: "hi-IN", label: "हिन्दी" },
   { code: "hu-HU", label: "Magyar" },
@@ -33,6 +34,7 @@ const allLanguages: Language[] = [
   { code: "kab-KAB", label: "Taqbaylit" },
   { code: "kk-KZ", label: "Қазақ тілі" },
   { code: "ko-KR", label: "한국어" },
+  { code: "ku-TR", label: "Kurdî" },
   { code: "lt-LT", label: "Lietuvių" },
   { code: "lv-LV", label: "Latviešu" },
   { code: "my-MM", label: "Burmese" },

src/keys.ts

@@ -18,11 +18,8 @@ export const CODES = {
   SLASH: "Slash",
   C: "KeyC",
   D: "KeyD",
-  G: "KeyG",
-  F: "KeyF",
   H: "KeyH",
   V: "KeyV",
-  X: "KeyX",
   Z: "KeyZ",
   R: "KeyR",
 } as const;
@@ -47,9 +44,12 @@ export const KEYS = {
   COMMA: ",",
 
   A: "a",
+  C: "c",
   D: "d",
   E: "e",
+  F: "f",
   G: "g",
+  H: "h",
   I: "i",
   L: "l",
   O: "o",

src/locales/ar-SA.json

@@ -114,6 +114,10 @@
       "create": "إنشاء رابط",
       "label": "رابط"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/bg-BG.json

@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/bn-BD.json

@@ -1,275 +1,279 @@
 {
   "labels": {
-    "paste": "",
-    "pasteCharts": "",
-    "selectAll": "",
-    "multiSelect": "",
-    "moveCanvas": "",
-    "cut": "",
-    "copy": "",
-    "copyAsPng": "",
-    "copyAsSvg": "",
-    "copyText": "",
-    "bringForward": "",
-    "sendToBack": "",
-    "bringToFront": "",
-    "sendBackward": "",
-    "delete": "",
-    "copyStyles": "",
-    "pasteStyles": "",
-    "stroke": "",
-    "background": "",
-    "fill": "",
-    "strokeWidth": "",
-    "strokeStyle": "",
-    "strokeStyle_solid": "",
-    "strokeStyle_dashed": "",
-    "strokeStyle_dotted": "",
-    "sloppiness": "",
-    "opacity": "",
-    "textAlign": "",
-    "edges": "",
-    "sharp": "",
-    "round": "",
-    "arrowheads": "",
-    "arrowhead_none": "",
-    "arrowhead_arrow": "",
-    "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": "",
-    "bold": "",
-    "left": "",
-    "center": "",
-    "right": "",
-    "extraBold": "",
-    "architect": "",
-    "artist": "",
-    "cartoonist": "",
-    "fileTitle": "",
-    "colorPicker": "",
-    "canvasColors": "",
-    "canvasBackground": "",
-    "drawingCanvas": "",
-    "layers": "",
-    "actions": "",
-    "language": "",
-    "liveCollaboration": "",
-    "duplicateSelection": "",
-    "untitled": "",
-    "name": "",
-    "yourName": "",
-    "madeWithExcalidraw": "",
-    "group": "",
-    "ungroup": "",
-    "collaborators": "",
-    "showGrid": "",
-    "addToLibrary": "",
-    "removeFromLibrary": "",
-    "libraryLoadingMessage": "",
-    "libraries": "",
-    "loadingScene": "",
-    "align": "",
-    "alignTop": "",
-    "alignBottom": "",
-    "alignLeft": "",
-    "alignRight": "",
-    "centerVertically": "",
-    "centerHorizontally": "",
-    "distributeHorizontally": "",
-    "distributeVertically": "",
-    "flipHorizontal": "",
-    "flipVertical": "",
-    "viewMode": "",
+    "paste": "পেস্ট করুন",
+    "pasteCharts": "চার্ট পেস্ট করুন",
+    "selectAll": "সবটা সিলেক্ট করুন",
+    "multiSelect": "একাধিক সিলেক্ট করুন",
+    "moveCanvas": "ক্যানভাস সরান",
+    "cut": "কাট করুন",
+    "copy": "কপি করুন",
+    "copyAsPng": "পীএনজী ছবির মতন কপি করুন",
+    "copyAsSvg": "এসভীজী ছবির মতন কপি করুন",
+    "copyText": "লিখিত তথ্যের মতন কপি করুন",
+    "bringForward": "অধিকতর সামনে আনুন",
+    "sendToBack": "অধিকতর পিছনে নিয়ে যান",
+    "bringToFront": "সবার সামনে আনুন",
+    "sendBackward": "সবার পিছনে নিয়ে যান",
+    "delete": "মুছা",
+    "copyStyles": "ডিজাইন কপি করুন",
+    "pasteStyles": "ডিজাইন পেস্ট করুন",
+    "stroke": "রেখাংশ",
+    "background": "পটভূমি",
+    "fill": "রং",
+    "strokeWidth": "রেখাংশের বেধ",
+    "strokeStyle": "রেখাংশের ডিজাইন",
+    "strokeStyle_solid": "পুরু",
+    "strokeStyle_dashed": "পাতলা",
+    "strokeStyle_dotted": "বিন্দুবিন্দু",
+    "sloppiness": "ভ্রান্তি",
+    "opacity": "দৃশ্যমানতা",
+    "textAlign": "লেখ অনুভূমি",
+    "edges": "কোণ",
+    "sharp": "তীক্ষ্ণ",
+    "round": "গোল",
+    "arrowheads": "তীরের শীর্ষভাগ",
+    "arrowhead_none": "কিছু না",
+    "arrowhead_arrow": "তীর",
+    "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": "পাতলা",
+    "bold": "পুরু",
+    "left": "বাম",
+    "center": "কেন্দ্র",
+    "right": "ডান",
+    "extraBold": "অতি পুরু",
+    "architect": "স্থপতি",
+    "artist": "শিল্পী",
+    "cartoonist": "চিত্রকার",
+    "fileTitle": "ফাইলের নাম",
+    "colorPicker": "রং পছন্দ করুন",
+    "canvasColors": "ক্যানভাসের রং",
+    "canvasBackground": "ক্যানভাসের পটভূমি",
+    "drawingCanvas": "ব্যবহৃত ক্যানভাস",
+    "layers": "মাত্রা",
+    "actions": "ক্রিয়া",
+    "language": "ভাষা",
+    "liveCollaboration": "যুগ্ম কার্য",
+    "duplicateSelection": "সদৃশ সিলেক্ট",
+    "untitled": "অনামী",
+    "name": "নাম",
+    "yourName": "আপনার নাম",
+    "madeWithExcalidraw": "এক্সক্যালিড্র দ্বারা তৈরি",
+    "group": "দল গঠন করুন",
+    "ungroup": "দল বিভেদ করুন",
+    "collaborators": "সহযোগী",
+    "showGrid": "গ্রিড দেখান",
+    "addToLibrary": "সংগ্রহে যোগ করুন",
+    "removeFromLibrary": "সংগ্রহ থেকে বের করুন",
+    "libraryLoadingMessage": "সংগ্রহ তৈরি হচ্ছে",
+    "libraries": "সংগ্রহ দেখুন",
+    "loadingScene": "দৃশ্য তৈরি হচ্ছে",
+    "align": "পংক্তিবিন্যাস",
+    "alignTop": "উপর পংক্তি",
+    "alignBottom": "নিম্ন পংক্তি",
+    "alignLeft": "বাম পংক্তি",
+    "alignRight": "ডান পংক্তি",
+    "centerVertically": "উলম্ব কেন্দ্রিত",
+    "centerHorizontally": "অনুভূমিক কেন্দ্রিত",
+    "distributeHorizontally": "অনুভূমিকভাবে বিতরণ করুন",
+    "distributeVertically": "উল্লম্বভাবে বিতরণ করুন",
+    "flipHorizontal": "অনুভূমিক আবর্তন",
+    "flipVertical": "উলম্ব আবর্তন",
+    "viewMode": "দৃশ্য",
     "toggleExportColorScheme": "",
-    "share": "",
+    "share": "ভাগ করুন",
     "showStroke": "",
     "showBackground": "",
     "toggleTheme": "",
     "personalLib": "",
     "excalidrawLib": "",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
+    "decreaseFontSize": "লেখনীর মাত্রা কমান",
+    "increaseFontSize": "লেখনীর মাত্রা বাড়ান",
     "unbindText": "",
     "bindText": "",
     "link": {
+      "edit": "লিঙ্ক সংশোধন",
+      "create": "লিঙ্ক তৈরী",
+      "label": "লিঙ্ক নামকরণ"
+    },
+    "lineEditor": {
       "edit": "",
-      "create": "",
-      "label": ""
+      "exit": ""
     },
     "elementLock": {
-      "lock": "",
-      "unlock": "",
-      "lockAll": "",
-      "unlockAll": ""
+      "lock": "আবদ্ধ করুন",
+      "unlock": "বিচ্ছিন্ন করুন",
+      "lockAll": "সব আবদ্ধ করুন",
+      "unlockAll": "সব বিচ্ছিন্ন করুন"
     },
-    "statusPublished": "",
-    "sidebarLock": ""
+    "statusPublished": "প্রকাশিত",
+    "sidebarLock": "লক"
   },
   "library": {
-    "noItems": "",
-    "hint_emptyLibrary": "",
-    "hint_emptyPrivateLibrary": ""
+    "noItems": "সংগ্রহে কিছু যোগ করা হয়নি",
+    "hint_emptyLibrary": "এখানে যোগ করার জন্য ক্যানভাসে একটি বস্তু নির্বাচন করুন, অথবা নীচে, প্রকাশ্য সংগ্রহশালা থেকে একটি সংগ্রহ ইনস্টল করুন৷",
+    "hint_emptyPrivateLibrary": "এখানে যোগ করার জন্য ক্যানভাসে একটি বস্তু নির্বাচন করুন"
   },
   "buttons": {
-    "clearReset": "",
-    "exportJSON": "",
-    "exportImage": "",
-    "export": "",
-    "exportToPng": "",
-    "exportToSvg": "",
-    "copyToClipboard": "",
-    "copyPngToClipboard": "",
-    "scale": "",
-    "save": "",
-    "saveAs": "",
-    "load": "",
-    "getShareableLink": "",
-    "close": "",
-    "selectLanguage": "",
-    "scrollBackToContent": "",
-    "zoomIn": "",
-    "zoomOut": "",
-    "resetZoom": "",
-    "menu": "",
-    "done": "",
-    "edit": "",
-    "undo": "",
-    "redo": "",
-    "resetLibrary": "",
-    "createNewRoom": "",
-    "fullScreen": "",
-    "darkMode": "",
-    "lightMode": "",
-    "zenMode": "",
-    "exitZenMode": "",
-    "cancel": "",
-    "clear": "",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "clearReset": "ক্যানভাস সাফ করুন",
+    "exportJSON": "জেসন নিবদ্ধ করুন",
+    "exportImage": "চিত্র নিবদ্ধ করুন",
+    "export": "নিবদ্ধ",
+    "exportToPng": "পীএনজী ছবির মতন নিবদ্ধ করুন",
+    "exportToSvg": "এসভীজী ছবির মতন নিবদ্ধ করুন",
+    "copyToClipboard": "ক্লিপবোর্ডে কপি করুন",
+    "copyPngToClipboard": "পীএনজী ছবির মতন ক্লিপবোর্ডে কপি করুন",
+    "scale": "মাপ",
+    "save": "জমা করুন",
+    "saveAs": "অন্যভাবে জমা করুন",
+    "load": "লোড করুন",
+    "getShareableLink": "ভাগযোগ্য লিঙ্ক পান",
+    "close": "বন্ধ করুন",
+    "selectLanguage": "ভাষা চিহ্নিত করুন",
+    "scrollBackToContent": "বিষয়বস্তুতে ফেরত যান",
+    "zoomIn": "বড় করুন",
+    "zoomOut": "ছোট করুন",
+    "resetZoom": "স্বাভাবিক করুন",
+    "menu": "তালিকা",
+    "done": "সম্পন্ন",
+    "edit": "সংশোধন করুন",
+    "undo": "ফেরত যান",
+    "redo": "পুনরায় করুন",
+    "resetLibrary": "সংগ্রহ সাফ করুন",
+    "createNewRoom": "নতুন রুম বানান",
+    "fullScreen": "পূর্ণস্ক্রীন",
+    "darkMode": "ডার্ক মোড",
+    "lightMode": "লাইট মোড",
+    "zenMode": "জেন মোড",
+    "exitZenMode": "জেন মোড বন্ধ করুন",
+    "cancel": "বাতিল",
+    "clear": "সাফ",
+    "remove": "বিয়োগ",
+    "publishLibrary": "সংগ্রহ প্রকাশ করুন",
+    "submit": "জমা করুন",
+    "confirm": "নিশ্চিত করুন"
   },
   "alerts": {
-    "clearReset": "",
-    "couldNotCreateShareableLink": "",
-    "couldNotCreateShareableLinkTooBig": "",
-    "couldNotLoadInvalidFile": "",
-    "importBackendFailed": "",
-    "cannotExportEmptyCanvas": "",
-    "couldNotCopyToClipboard": "",
-    "decryptFailed": "",
-    "uploadedSecurly": "",
-    "loadSceneOverridePrompt": "",
-    "collabStopOverridePrompt": "",
-    "errorAddingToLibrary": "",
-    "errorRemovingFromLibrary": "",
-    "confirmAddLibrary": "",
-    "imageDoesNotContainScene": "",
-    "cannotRestoreFromImage": "",
-    "invalidSceneUrl": "",
-    "resetLibrary": "",
-    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "clearReset": "এটি পুরো ক্যানভাস সাফ করবে। আপনি কি নিশ্চিত?",
+    "couldNotCreateShareableLink": "ভাগ করা যায় এমন লিঙ্ক তৈরি করা যায়নি।",
+    "couldNotCreateShareableLinkTooBig": "ভাগ করা যায় এমন লিঙ্ক তৈরি করা যায়নি: দৃশ্যটি খুব বড়",
+    "couldNotLoadInvalidFile": "অবৈধ ফাইল লোড করা যায়নি",
+    "importBackendFailed": "ব্যাকেন্ড থেকে আপলোড ব্যর্থ হয়েছে।",
+    "cannotExportEmptyCanvas": "খালি ক্যানভাস নিবদ্ধ করা যাবে না।",
+    "couldNotCopyToClipboard": "ক্লিপবোর্ডে কপি করা যায়নি।",
+    "decryptFailed": "তথ্য ডিক্রিপ্ট করা যায়নি।",
+    "uploadedSecurly": "আপলোডটি এন্ড-টু-এন্ড এনক্রিপশনের মাধ্যমে সুরক্ষিত করা হয়েছে, যার অর্থ হল এক্সক্যালিড্র সার্ভার এবং তৃতীয় পক্ষের দ্বারা পড়তে পারা সম্ভব নয়।",
+    "loadSceneOverridePrompt": "বাহ্যিক অঙ্কন লোড করা আপনার বিদ্যমান দৃশ্য প্রতিস্থাপন করবে। আপনি কি অবিরত করতে চান?",
+    "collabStopOverridePrompt": "অধিবেশন বন্ধ করা আপনার পূর্ববর্তী, স্থানীয়ভাবে সঞ্চিত অঙ্কন ওভাররাইট করবে। আপনি কি নিশ্চিত?\n\n(যদি আপনি আপনার স্থানীয় অঙ্কন রাখতে চান, তাহলে শুধু ব্রাউজার ট্যাবটি বন্ধ করুন।)",
+    "errorAddingToLibrary": "বস্তুটি সংগ্রহে যোগ করা যায়নি",
+    "errorRemovingFromLibrary": "বস্তুটি সংগ্রহ থেকে বিয়োগ করা যায়নি",
+    "confirmAddLibrary": "এটি আপনার সংগ্রহে {{numShapes}} আকার(গুলি) যোগ করবে। আপনি কি নিশ্চিত?",
+    "imageDoesNotContainScene": "এই ছবিতে কোনো দৃশ্যের তথ্য আছে বলে মনে হয় না৷ আপনি কি নিবদ্ধ করার সময় দৃশ্য এমবেডিং করতে সক্ষম?",
+    "cannotRestoreFromImage": "এই ফাইল থেকে দৃশ্য পুনরুদ্ধার করা যায়নি",
+    "invalidSceneUrl": "সরবরাহ করা লিঙ্ক থেকে দৃশ্য লোড করা যায়নি৷ এটি হয় বিকৃত, অথবা বৈধ এক্সক্যালিড্র জেসন তথ্য নেই৷",
+    "resetLibrary": "এটি আপনার সংগ্রহ পরিষ্কার করবে। আপনি কি নিশ্চিত?",
+    "removeItemsFromsLibrary": "সংগ্রহ থেকে {{count}} বস্তু বিয়োগ করা হবে। আপনি কি নিশ্চিত?",
+    "invalidEncryptionKey": "অবৈধ এনক্রীপশন কী।"
   },
   "errors": {
-    "unsupportedFileType": "",
-    "imageInsertError": "",
-    "fileTooBig": "",
-    "svgImageInsertError": "",
-    "invalidSVGString": "",
-    "cannotResolveCollabServer": "",
-    "importLibraryError": ""
+    "unsupportedFileType": "অসমর্থিত ফাইল।",
+    "imageInsertError": "ছবি সন্নিবেশ করা যায়নি। পরে আবার চেষ্টা করুন...",
+    "fileTooBig": "ফাইলটি খুব বড়। সর্বাধিক অনুমোদিত আকার হল {{maxSize}}৷",
+    "svgImageInsertError": "এসভীজী ছবি সন্নিবেশ করা যায়নি। এসভীজী মার্কআপটি অবৈধ মনে হচ্ছে৷",
+    "invalidSVGString": "এসভীজী মার্কআপটি অবৈধ মনে হচ্ছে৷",
+    "cannotResolveCollabServer": "কোল্যাব সার্ভারের সাথে সংযোগ করা যায়নি। পৃষ্ঠাটি পুনরায় লোড করে আবার চেষ্টা করুন।",
+    "importLibraryError": "সংগ্রহ লোড করা যায়নি"
   },
   "toolBar": {
-    "selection": "",
-    "image": "",
-    "rectangle": "",
-    "diamond": "",
-    "ellipse": "",
-    "arrow": "",
-    "line": "",
-    "freedraw": "",
-    "text": "",
-    "library": "",
-    "lock": "",
-    "penMode": "",
-    "link": "",
-    "eraser": ""
+    "selection": "বাছাই",
+    "image": "চিত্র সন্নিবেশ",
+    "rectangle": "আয়তক্ষেত্র",
+    "diamond": "রুহিতন",
+    "ellipse": "উপবৃত্ত",
+    "arrow": "তীর",
+    "line": "রেখা",
+    "freedraw": "কলম",
+    "text": "লেখা",
+    "library": "সংগ্রহ",
+    "lock": "আঁকার পরে নির্বাচিত টুল সক্রিয় রাখুন",
+    "penMode": "পিঞ্চ-জুম প্রতিরোধ করুন এবং শুধুমাত্র কলম থেকে ইনপুট গ্রহণ করুন",
+    "link": "একটি নির্বাচিত আকৃতির জন্য লিঙ্ক যোগ বা আপডেট করুন",
+    "eraser": "ঝাড়ন"
   },
   "headings": {
-    "canvasActions": "",
-    "selectedShapeActions": "",
-    "shapes": ""
+    "canvasActions": "ক্যানভাস কার্যকলাপ",
+    "selectedShapeActions": "বাছাই করা আকার(গুলি)র কার্যকলাপ",
+    "shapes": "আকার(গুলি)"
   },
   "hints": {
-    "canvasPanning": "",
-    "linearElement": "",
-    "freeDraw": "",
-    "text": "",
-    "text_selected": "",
-    "text_editing": "",
-    "linearElementMulti": "",
-    "lockAngle": "",
-    "resize": "",
-    "resizeImage": "",
-    "rotate": "",
-    "lineEditor_info": "",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
-    "placeImage": "",
-    "publishLibrary": "",
-    "bindTextToElement": "",
+    "canvasPanning": "ক্যানভাস সরানোর জন্য মাউস হুইল বা স্পেসবার ধরে টানুন",
+    "linearElement": "একাধিক বিন্দু শুরু করতে ক্লিক করুন, একক লাইনের জন্য টেনে আনুন",
+    "freeDraw": "ক্লিক করুন এবং টেনে আনুন, আপনার কাজ শেষ হলে ছেড়ে দিন",
+    "text": "বিশেষ্য: আপনি নির্বাচন টুলের সাথে যে কোনো জায়গায় ডাবল-ক্লিক করে পাঠ্য যোগ করতে পারেন",
+    "text_selected": "লেখা সম্পাদনা করতে ডাবল-ক্লিক করুন বা এন্টার টিপুন",
+    "text_editing": "লেখা সম্পাদনা শেষ করতে এসকেপ বা কন্ট্রোল/কম্যান্ড যোগে এন্টার টিপুন",
+    "linearElementMulti": "শেষ বিন্দুতে ক্লিক করুন অথবা শেষ করতে এসকেপ বা এন্টার টিপুন",
+    "lockAngle": "ঘোরানোর সময় আপনি শিফ্ট ধরে রেখে কোণ সীমাবদ্ধ করতে পারেন",
+    "resize": "আপনি আকার পরিবর্তন করার সময় শিফ্ট ধরে রেখে অনুপাতকে সীমাবদ্ধ করতে পারেন,\nকেন্দ্র থেকে আকার পরিবর্তন করতে অল্ট ধরে রাখুন",
+    "resizeImage": "আপনি শিফ্ট ধরে রেখে অবাধে আকার পরিবর্তন করতে পারেন, কেন্দ্র থেকে আকার পরিবর্তন করতে অল্ট ধরুন",
+    "rotate": "আপনি ঘোরানোর সময় শিফ্ট ধরে রেখে কোণগুলিকে সীমাবদ্ধ করতে পারেন",
+    "lineEditor_info": "পয়েন্ট সম্পাদনা করতে ডাবল-ক্লিক করুন বা এন্টার টিপুন",
+    "lineEditor_pointSelected": "বিন্দু(গুলি) মুছতে ডিলিট টিপুন, কন্ট্রোল/কম্যান্ড যোগে ডি টিপুন নকল করতে অথবা সরানোর জন্য টানুন",
+    "lineEditor_nothingSelected": "সম্পাদনা করার জন্য একটি বিন্দু নির্বাচন করুন (একাধিক নির্বাচন করতে শিফ্ট ধরে রাখুন),\nঅথবা অল্ট ধরে রাখুন এবং নতুন বিন্দু যোগ করতে ক্লিক করুন",
+    "placeImage": "ছবিটি স্থাপন করতে ক্লিক করুন, অথবা নিজে আকার সেট করতে ক্লিক করুন এবং টেনে আনুন",
+    "publishLibrary": "আপনার নিজস্ব সংগ্রহ প্রকাশ করুন",
+    "bindTextToElement": "লেখা যোগ করতে এন্টার টিপুন",
     "deepBoxSelect": "",
-    "eraserRevert": ""
+    "eraserRevert": "মুছে ফেলার জন্য চিহ্নিত উপাদানগুলিকে ফিরিয়ে আনতে অল্ট ধরে রাখুন"
   },
   "canvasError": {
-    "cannotShowPreview": "",
-    "canvasTooBig": "",
-    "canvasTooBigTip": ""
+    "cannotShowPreview": "প্রিভিউ দেখাতে অপারগ",
+    "canvasTooBig": "ক্যানভাস অনেক বড়।",
+    "canvasTooBigTip": "বিশেষ্য: দূরতম উপাদানগুলোকে একটু কাছাকাছি নিয়ে যাওয়ার চেষ্টা করুন।"
   },
   "errorSplash": {
-    "headingMain_pre": "",
-    "headingMain_button": "",
-    "clearCanvasMessage": "",
-    "clearCanvasMessage_button": "",
-    "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
-    "trackedToSentry_post": "",
-    "openIssueMessage_pre": "",
-    "openIssueMessage_button": "",
-    "openIssueMessage_post": "",
-    "sceneContent": ""
+    "headingMain_pre": "একটি ত্রুটির সম্মুখীন হয়েছে৷ চেষ্টা করুন ",
+    "headingMain_button": "পৃষ্ঠাটি পুনরায় লোড করার।",
+    "clearCanvasMessage": "যদি পুনরায় লোড করা কাজ না করে, চেষ্টা করুন ",
+    "clearCanvasMessage_button": "ক্যানভাস পরিষ্কার করার।",
+    "clearCanvasCaveat": " এর ফলে কাজের ক্ষতি হবে ",
+    "trackedToSentry_pre": "ত্রুটি ",
+    "trackedToSentry_post": " আমাদের সিস্টেমে ট্র্যাক করা হয়েছিল।",
+    "openIssueMessage_pre": "আমরা ত্রুটিতে আপনার দৃশ্যের তথ্য অন্তর্ভুক্ত না করার জন্য খুব সতর্ক ছিলাম। আপনার দৃশ্য ব্যক্তিগত না হলে, আমাদের অনুসরণ করার কথা বিবেচনা করুন ",
+    "openIssueMessage_button": "ত্রুটি ইতিবৃত্ত।",
+    "openIssueMessage_post": " অনুগ্রহ করে GitHub ইস্যুতে অনুলিপি এবং পেস্ট করে নীচের তথ্য অন্তর্ভুক্ত করুন।",
+    "sceneContent": "দৃশ্য বিষয়বস্তু:"
   },
   "roomDialog": {
-    "desc_intro": "",
-    "desc_privacy": "",
-    "button_startSession": "",
-    "button_stopSession": "",
-    "desc_inProgressIntro": "",
-    "desc_shareLink": "",
-    "desc_exitSession": "",
-    "shareTitle": ""
+    "desc_intro": "আপনি আপনার সাথে সহযোগিতা করার জন্য আপনার বর্তমান দৃশ্যে লোকেদের আমন্ত্রণ জানাতে পারেন৷",
+    "desc_privacy": "চিন্তা করবেন না, সেশনটি এন্ড-টু-এন্ড এনক্রিপশন ব্যবহার করে, তাই আপনি যা আঁকবেন তা গোপন থাকবে। এমনকি আমাদের সার্ভার আপনি যা নিয়ে এসেছেন তা দেখতে সক্ষম হবে না।",
+    "button_startSession": "সেশন শুরু করুন",
+    "button_stopSession": "সেশন বন্ধ করুন",
+    "desc_inProgressIntro": "লাইভ-সহযোগীতার সেশন এখন চলছে।",
+    "desc_shareLink": "আপনি যার সাথে সহযোগিতা করতে চান তাদের সাথে এই লিঙ্কটি ভাগ করুন: ",
+    "desc_exitSession": "অধিবেশন বন্ধ করা আপনাকে রুম থেকে সংযোগ বিচ্ছিন্ন করবে, কিন্তু আপনি স্থানীয়ভাবে দৃশ্যের সাথে কাজ চালিয়ে যেতে সক্ষম হবেন। মনে রাখবেন যে এটি অন্য লোকেদের প্রভাবিত করবে না এবং তারা এখনও তাদের সংস্করণে সহযোগিতা করতে সক্ষম হবে।",
+    "shareTitle": "এক্সক্যালিড্র লাইভ সহযোগিতা সেশনে যোগ দিন"
   },
   "errorDialog": {
-    "title": ""
+    "title": "ত্রুটি"
   },
   "exportDialog": {
     "disk_title": "",
@@ -279,12 +283,12 @@
     "link_details": "",
     "link_button": "",
     "excalidrawplus_description": "",
-    "excalidrawplus_button": "",
+    "excalidrawplus_button": "নিবদ্ধ",
     "excalidrawplus_exportError": ""
   },
   "helpDialog": {
     "blog": "",
-    "click": "",
+    "click": "ক্লিক",
     "deepSelect": "",
     "deepBoxSelect": "",
     "curvedArrow": "",
@@ -296,7 +300,7 @@
     "editSelectedShape": "",
     "github": "",
     "howto": "",
-    "or": "",
+    "or": "অথবা",
     "preventBinding": "",
     "tools": "",
     "shortcuts": "",
@@ -365,7 +369,7 @@
     "link": ""
   },
   "stats": {
-    "angle": "",
+    "angle": "কোণ",
     "element": "",
     "elements": "",
     "height": "",
@@ -377,20 +381,20 @@
     "version": "",
     "versionCopy": "",
     "versionNotAvailable": "",
-    "width": ""
+    "width": "প্রস্থ"
   },
   "toast": {
-    "addedToLibrary": "",
+    "addedToLibrary": "সংগ্রহশালায় যুক্ত হয়েছে",
     "copyStyles": "",
-    "copyToClipboard": "",
+    "copyToClipboard": "ক্লিপবোর্ডে কপি করা হয়েছে।",
     "copyToClipboardAsPng": "",
     "fileSaved": "",
     "fileSavedToFilename": "",
     "canvas": "",
-    "selection": ""
+    "selection": "বাছাই"
   },
   "colors": {
-    "ffffff": "",
+    "ffffff": "সাদা",
     "f8f9fa": "",
     "f1f3f5": "",
     "fff5f5": "",
@@ -420,7 +424,7 @@
     "82c91e": "",
     "fab005": "",
     "fd7e14": "",
-    "000000": "",
+    "000000": "কালো",
     "343a40": "",
     "495057": "",
     "c92a2a": "",

src/locales/ca-ES.json

@@ -114,6 +114,10 @@
       "create": "Crea un enllaç",
       "label": "Enllaç"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "Bloca",
       "unlock": "Desbloca",

src/locales/cs-CZ.json

@@ -20,7 +20,7 @@
     "stroke": "Obrys",
     "background": "Pozadí",
     "fill": "Výplň",
-    "strokeWidth": "Šířka obrysu",
+    "strokeWidth": "Tloušťka tahu",
     "strokeStyle": "Styl tahu",
     "strokeStyle_solid": "Plný",
     "strokeStyle_dashed": "Čárkovaný",
@@ -55,46 +55,46 @@
     "hachure": "",
     "crossHatch": "",
     "thin": "Tenký",
-    "bold": "",
-    "left": "",
-    "center": "",
-    "right": "",
-    "extraBold": "",
+    "bold": "Tlustý",
+    "left": "Vlevo",
+    "center": "Na střed",
+    "right": "Vpravo",
+    "extraBold": "Extra tlustý",
     "architect": "",
     "artist": "",
     "cartoonist": "",
-    "fileTitle": "",
-    "colorPicker": "",
+    "fileTitle": "Název souboru",
+    "colorPicker": "Výběr barvy",
     "canvasColors": "",
     "canvasBackground": "Pozadí plátna",
     "drawingCanvas": "",
     "layers": "Vrstvy",
-    "actions": "",
-    "language": "",
-    "liveCollaboration": "",
-    "duplicateSelection": "",
-    "untitled": "",
-    "name": "",
-    "yourName": "",
-    "madeWithExcalidraw": "",
-    "group": "",
-    "ungroup": "",
-    "collaborators": "",
-    "showGrid": "",
-    "addToLibrary": "",
-    "removeFromLibrary": "",
-    "libraryLoadingMessage": "",
-    "libraries": "",
-    "loadingScene": "",
-    "align": "",
+    "actions": "Akce",
+    "language": "Jazyk",
+    "liveCollaboration": "Živá spolupráce",
+    "duplicateSelection": "Duplikovat",
+    "untitled": "Bez názvu",
+    "name": "Název",
+    "yourName": "Vaše jméno",
+    "madeWithExcalidraw": "Vytvořeno v Excalidraw",
+    "group": "Sloučit výběr do skupiny",
+    "ungroup": "Zrušit sloučení skupiny",
+    "collaborators": "Spolupracovníci",
+    "showGrid": "Zobrazit mřížku",
+    "addToLibrary": "Přidat do knihovny",
+    "removeFromLibrary": "Odebrat z knihovny",
+    "libraryLoadingMessage": "Načítání knihovny…",
+    "libraries": "Procházet knihovny",
+    "loadingScene": "Načítání scény…",
+    "align": "Zarovnání",
     "alignTop": "Zarovnat nahoru",
     "alignBottom": "Zarovnat dolů",
     "alignLeft": "Zarovnat vlevo",
     "alignRight": "Zarovnejte vpravo",
-    "centerVertically": "",
-    "centerHorizontally": "",
-    "distributeHorizontally": "",
-    "distributeVertically": "",
+    "centerVertically": "Vycentrovat svisle",
+    "centerHorizontally": "Vycentrovat vodorovně",
+    "distributeHorizontally": "Rozložit horizontálně",
+    "distributeVertically": "Rozložit svisle",
     "flipHorizontal": "Převrátit vodorovně",
     "flipVertical": "Převrátit svisle",
     "viewMode": "Náhled",
@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",
@@ -160,18 +164,18 @@
     "lightMode": "Světlý režim",
     "zenMode": "Zen mód",
     "exitZenMode": "Opustit zen mód",
-    "cancel": "",
-    "clear": "",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "cancel": "Zrušit",
+    "clear": "Vyčistit",
+    "remove": "Odstranit",
+    "publishLibrary": "Zveřejnit",
+    "submit": "Odeslat",
+    "confirm": "Potvrdit"
   },
   "alerts": {
-    "clearReset": "",
-    "couldNotCreateShareableLink": "",
-    "couldNotCreateShareableLinkTooBig": "",
-    "couldNotLoadInvalidFile": "",
+    "clearReset": "Toto vymaže celé plátno. Jste si jisti?",
+    "couldNotCreateShareableLink": "Nepodařilo se vytvořit sdílitelný odkaz.",
+    "couldNotCreateShareableLinkTooBig": "Nepodařilo se vytvořit sdílený odkaz: scéna je příliš velká",
+    "couldNotLoadInvalidFile": "Nepodařilo se načíst neplatný soubor",
     "importBackendFailed": "",
     "cannotExportEmptyCanvas": "",
     "couldNotCopyToClipboard": "",
@@ -212,7 +216,7 @@
     "lock": "",
     "penMode": "",
     "link": "",
-    "eraser": ""
+    "eraser": "Guma"
   },
   "headings": {
     "canvasActions": "",
@@ -274,72 +278,72 @@
   "exportDialog": {
     "disk_title": "",
     "disk_details": "",
-    "disk_button": "",
-    "link_title": "",
-    "link_details": "",
-    "link_button": "",
-    "excalidrawplus_description": "",
-    "excalidrawplus_button": "",
-    "excalidrawplus_exportError": ""
+    "disk_button": "Uložit do souboru",
+    "link_title": "Odkaz pro sdílení",
+    "link_details": "Exportovat jako odkaz pouze pro čtení.",
+    "link_button": "Exportovat do odkazu",
+    "excalidrawplus_description": "Uložit scénu do vašeho pracovního prostoru Excalidraw+.",
+    "excalidrawplus_button": "Exportovat",
+    "excalidrawplus_exportError": "Export do Excalidraw+ se v tuto chvíli nezdařil..."
   },
   "helpDialog": {
-    "blog": "",
+    "blog": "Přečtěte si náš blog",
     "click": "kliknutí",
     "deepSelect": "",
     "deepBoxSelect": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "doubleClick": "",
+    "curvedArrow": "Zakřivená šipka",
+    "curvedLine": "Zakřivená čára",
+    "documentation": "Dokumentace",
+    "doubleClick": "dvojklik",
     "drag": "tažení",
-    "editor": "",
+    "editor": "Editor",
     "editSelectedShape": "",
     "github": "",
     "howto": "",
     "or": "nebo",
-    "preventBinding": "",
-    "tools": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": "",
-    "toggleElementLock": ""
+    "preventBinding": "Zabránit vázání šipky",
+    "tools": "Nástroje",
+    "shortcuts": "Klávesové zkratky",
+    "textFinish": "Dokončit úpravy (textový editor)",
+    "textNewLine": "Přidat nový řádek (textový editor)",
+    "title": "Nápověda",
+    "view": "Zobrazení",
+    "zoomToFit": "Přiblížit na zobrazení všech prvků",
+    "zoomToSelection": "Přiblížit na výběr",
+    "toggleElementLock": "Zamknout/odemknout výběr"
   },
   "clearCanvasDialog": {
-    "title": ""
+    "title": "Vymazat plátno"
   },
   "publishDialog": {
-    "title": "",
-    "itemName": "",
-    "authorName": "",
-    "githubUsername": "",
-    "twitterUsername": "",
-    "libraryName": "",
-    "libraryDesc": "",
-    "website": "",
+    "title": "Publikovat knihovnu",
+    "itemName": "Název položky",
+    "authorName": "Jméno autora",
+    "githubUsername": "GitHub uživatelské jméno",
+    "twitterUsername": "Twitter uživatelské jméno",
+    "libraryName": "Název knihovny",
+    "libraryDesc": "Popis knihovny",
+    "website": "Webová stránka",
     "placeholder": {
-      "authorName": "",
-      "libraryName": "",
-      "libraryDesc": "",
-      "githubHandle": "",
-      "twitterHandle": "",
-      "website": ""
+      "authorName": "Jméno nebo uživatelské jméno",
+      "libraryName": "Název vaší knihovny",
+      "libraryDesc": "Popis Vaší knihovny, který pomůže lidem pochopit její využití",
+      "githubHandle": "Github uživatelské jméno (nepovinné), abyste mohli upravovat knihovnu poté co je odeslána ke kontrole",
+      "twitterHandle": "Twitter uživatelské jméno (nepovinné), abychom věděli koho označit při propagaci na Twitteru",
+      "website": "Odkaz na Vaši osobní webovou stránku nebo jinam (nepovinné)"
     },
     "errors": {
-      "required": "",
-      "website": ""
+      "required": "Povinné",
+      "website": "Zadejte platnou URL adresu"
     },
     "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "Odešlete svou knihovnu, pro zařazení do ",
+      "link": "veřejného úložiště knihoven",
+      "post": ", odkud ji budou moci při kreslení využít i ostatní uživatelé."
     },
     "noteGuidelines": {
-      "pre": "",
-      "link": "",
+      "pre": "Knihovna musí být nejdříve ručně schválena. Přečtěte si prosím ",
+      "link": "pokyny",
       "post": ""
     },
     "noteLicense": {
@@ -352,7 +356,7 @@
     "republishWarning": ""
   },
   "publishSuccessDialog": {
-    "title": "",
+    "title": "Knihovna byla odeslána",
     "content": "",
     "link": ""
   },
@@ -365,75 +369,75 @@
     "link": ""
   },
   "stats": {
-    "angle": "",
-    "element": "",
-    "elements": "",
-    "height": "",
-    "scene": "",
-    "selected": "",
-    "storage": "",
-    "title": "",
-    "total": "",
-    "version": "",
-    "versionCopy": "",
-    "versionNotAvailable": "",
-    "width": ""
+    "angle": "Úhel",
+    "element": "Prvek",
+    "elements": "Prvky",
+    "height": "Výška",
+    "scene": "Scéna",
+    "selected": "Vybráno",
+    "storage": "Úložiště",
+    "title": "Statistika pro nerdy",
+    "total": "Celkem",
+    "version": "Verze",
+    "versionCopy": "Kliknutím zkopírujete",
+    "versionNotAvailable": "Verze není k dispozici",
+    "width": "Šířka"
   },
   "toast": {
-    "addedToLibrary": "",
-    "copyStyles": "",
-    "copyToClipboard": "",
+    "addedToLibrary": "Přidáno do knihovny",
+    "copyStyles": "Styly byly zkopírovány.",
+    "copyToClipboard": "Zkopírováno do schránky.",
     "copyToClipboardAsPng": "",
-    "fileSaved": "",
-    "fileSavedToFilename": "",
+    "fileSaved": "Soubor byl uložen.",
+    "fileSavedToFilename": "Uloženo do {filename}",
     "canvas": "plátno",
     "selection": "výběr"
   },
   "colors": {
-    "ffffff": "",
-    "f8f9fa": "",
-    "f1f3f5": "",
-    "fff5f5": "",
-    "fff0f6": "",
-    "f8f0fc": "",
-    "f3f0ff": "",
-    "edf2ff": "",
-    "e7f5ff": "",
-    "e3fafc": "",
-    "e6fcf5": "",
-    "ebfbee": "",
-    "f4fce3": "",
-    "fff9db": "",
-    "fff4e6": "",
-    "transparent": "",
-    "ced4da": "",
-    "868e96": "",
-    "fa5252": "",
-    "e64980": "",
-    "be4bdb": "",
-    "7950f2": "",
-    "4c6ef5": "",
-    "228be6": "",
-    "15aabf": "",
-    "12b886": "",
-    "40c057": "",
-    "82c91e": "",
-    "fab005": "",
-    "fd7e14": "",
-    "000000": "",
-    "343a40": "",
-    "495057": "",
-    "c92a2a": "",
-    "a61e4d": "",
-    "862e9c": "",
-    "5f3dc4": "",
-    "364fc7": "",
-    "1864ab": "",
-    "0b7285": "",
-    "087f5b": "",
-    "2b8a3e": "",
-    "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "ffffff": "Bílá",
+    "f8f9fa": "Šedá 0",
+    "f1f3f5": "Šedá 1",
+    "fff5f5": "Červená 0",
+    "fff0f6": "Růžová 0",
+    "f8f0fc": "Vínová 0",
+    "f3f0ff": "Fialová 0",
+    "edf2ff": "Indigová 0",
+    "e7f5ff": "Modrá 0",
+    "e3fafc": "Azurová 0",
+    "e6fcf5": "Modrozelená 0",
+    "ebfbee": "Zelená 0",
+    "f4fce3": "Limetková 0",
+    "fff9db": "Žlutá 0",
+    "fff4e6": "Oranžová 0",
+    "transparent": "Průhledná",
+    "ced4da": "Šedá 4",
+    "868e96": "Šedá 6",
+    "fa5252": "Červená 6",
+    "e64980": "Růžová 6",
+    "be4bdb": "Vínová 6",
+    "7950f2": "Fialová 6",
+    "4c6ef5": "Indigová 6",
+    "228be6": "Modrá 6",
+    "15aabf": "Azurová 6",
+    "12b886": "Modrozelená 6",
+    "40c057": "Zelená 6",
+    "82c91e": "Limetková 6",
+    "fab005": "Žlutá 6",
+    "fd7e14": "Oranžová 6",
+    "000000": "Černá",
+    "343a40": "Šedá 8",
+    "495057": "Šedá 7",
+    "c92a2a": "Červená 9",
+    "a61e4d": "Růžová 9",
+    "862e9c": "Vínová 9",
+    "5f3dc4": "Fialová 9",
+    "364fc7": "Indigová 9",
+    "1864ab": "Modrá 9",
+    "0b7285": "Azurová 9",
+    "087f5b": "Modrozelená 9",
+    "2b8a3e": "Zelená 9",
+    "5c940d": "Limetková 9",
+    "e67700": "Žlutá 9",
+    "d9480f": "Oranzova"
   }
 }

src/locales/da-DK.json

@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/de-DE.json

@@ -114,6 +114,10 @@
       "create": "Link erstellen",
       "label": "Link"
     },
+    "lineEditor": {
+      "edit": "Linie bearbeiten",
+      "exit": "Linieneditor verlassen"
+    },
     "elementLock": {
       "lock": "Sperren",
       "unlock": "Entsperren",

src/locales/el-GR.json

@@ -114,6 +114,10 @@
       "create": "Δημιουργία συνδέσμου",
       "label": "Σύνδεσμος"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "Κλείδωμα",
       "unlock": "Ξεκλείδωμα",

src/locales/en.json

@@ -114,6 +114,11 @@
       "create": "Create link",
       "label": "Link"
     },
+    "lineEditor": {
+      "edit": "Edit line",
+      "exit": "Exit line editor"
+    },
+
     "elementLock": {
       "lock": "Lock",
       "unlock": "Unlock",

src/locales/es-ES.json

@@ -114,6 +114,10 @@
       "create": "Crear enlace",
       "label": "Enlace"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "Bloquear",
       "unlock": "Desbloquear",

src/locales/eu-ES.json

@@ -114,6 +114,10 @@
       "create": "Sortu esteka",
       "label": "Esteka"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "Blokeatu",
       "unlock": "Desblokeatu",

src/locales/fa-IR.json

@@ -114,6 +114,10 @@
       "create": "ایجاد پیوند",
       "label": "لینک"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "قفل",
       "unlock": "باز کردن",

src/locales/fi-FI.json

@@ -114,6 +114,10 @@
       "create": "Luo linkki",
       "label": "Linkki"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/fr-FR.json

@@ -10,23 +10,23 @@
     "copyAsPng": "Copier dans le presse-papier en PNG",
     "copyAsSvg": "Copier dans le presse-papier en SVG",
     "copyText": "Copier dans le presse-papier en tant que texte",
-    "bringForward": "Avancer d'un plan",
+    "bringForward": "Envoyer vers l'avant",
     "sendToBack": "Déplacer à l'arrière-plan",
-    "bringToFront": "Placer au premier plan",
+    "bringToFront": "Mettre au premier plan",
     "sendBackward": "Reculer d'un plan",
     "delete": "Supprimer",
     "copyStyles": "Copier les styles",
     "pasteStyles": "Coller les styles",
     "stroke": "Trait",
-    "background": "Fond",
-    "fill": "Motif du fond",
-    "strokeWidth": "Épaisseur du trait",
+    "background": "Arrière-plan",
+    "fill": "Remplissage",
+    "strokeWidth": "Largeur du contour",
     "strokeStyle": "Style du trait",
     "strokeStyle_solid": "Continu",
     "strokeStyle_dashed": "Tirets",
     "strokeStyle_dotted": "Pointillés",
     "sloppiness": "Style de tracé",
-    "opacity": "Opacité",
+    "opacity": "Transparence",
     "textAlign": "Alignement du texte",
     "edges": "Angles",
     "sharp": "Pointus",
@@ -106,7 +106,7 @@
     "personalLib": "Bibliothèque personnelle",
     "excalidrawLib": "Bibliothèque Excalidraw",
     "decreaseFontSize": "Diminuer la taille de police",
-    "increaseFontSize": "Augmenter la taille de police",
+    "increaseFontSize": "Augmenter la taille de la police",
     "unbindText": "Dissocier le texte",
     "bindText": "Associer le texte au conteneur",
     "link": {
@@ -114,6 +114,10 @@
       "create": "Ajouter un lien",
       "label": "Lien"
     },
+    "lineEditor": {
+      "edit": "Modifier la ligne",
+      "exit": "Quitter l'éditeur de ligne"
+    },
     "elementLock": {
       "lock": "Verrouiller",
       "unlock": "Déverrouiller",

src/locales/gl-ES.json

@@ -114,6 +114,10 @@
       "create": "Crear ligazón",
       "label": "Ligazón"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "Bloquear",
       "unlock": "Desbloquear",

src/locales/he-IL.json

@@ -114,6 +114,10 @@
       "create": "יצירת קישור",
       "label": "קישור"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "נעילה",
       "unlock": "ביטול נעילה",

src/locales/hi-IN.json

@@ -71,7 +71,7 @@
     "layers": "परतें",
     "actions": "कार्रवाई",
     "language": "भाषा",
-    "liveCollaboration": "",
+    "liveCollaboration": "जीवंत सहयोग",
     "duplicateSelection": "डुप्लिकेट",
     "untitled": "अशीर्षित",
     "name": "नाम",
@@ -101,7 +101,7 @@
     "toggleExportColorScheme": "",
     "share": "शेयर करें",
     "showStroke": "",
-    "showBackground": "",
+    "showBackground": "पृष्ठभूमि रंग वरक़ दिखाये",
     "toggleTheme": "",
     "personalLib": "",
     "excalidrawLib": "",
@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "रेखा संपादित करे",
+      "exit": "रेखा संपादक के बाहर"
+    },
     "elementLock": {
       "lock": "ताले में रखें",
       "unlock": "ताले से बाहर",
@@ -161,11 +165,11 @@
     "zenMode": "ज़ेन मोड",
     "exitZenMode": "जेन मोड से बाहर निकलें",
     "cancel": "",
-    "clear": "",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "clear": "साफ़ करे",
+    "remove": "हटाएं",
+    "publishLibrary": "प्रकाशित करें",
+    "submit": "प्रस्तुत करे",
+    "confirm": "पुष्टि करें"
   },
   "alerts": {
     "clearReset": "इससे पूरा कैनवास साफ हो जाएगा। क्या आपको यकीन है?",
@@ -174,39 +178,39 @@
     "couldNotLoadInvalidFile": "अमान्य फ़ाइल लोड नहीं की जा सकी",
     "importBackendFailed": "बैकएंड से आयात करना विफल रहा।",
     "cannotExportEmptyCanvas": "खाली कैनवास निर्यात नहीं कर सकता।",
-    "couldNotCopyToClipboard": "",
+    "couldNotCopyToClipboard": "क्लिपबोर्ड पर कॉपी नहीं किया जा सका",
     "decryptFailed": "डेटा को डिक्रिप्ट नहीं किया जा सका।",
     "uploadedSecurly": "अपलोड को एंड-टू-एंड एन्क्रिप्शन के साथ सुरक्षित किया गया है, जिसका मतलब है कि एक्सक्लूसिव सर्वर और थर्ड पार्टी कंटेंट नहीं पढ़ सकते हैं।",
     "loadSceneOverridePrompt": "लोड हो रहा है बाहरी ड्राइंग आपके मौजूदा सामग्री को बदल देगा। क्या आप जारी रखना चाहते हैं?",
-    "collabStopOverridePrompt": "",
-    "errorAddingToLibrary": "",
-    "errorRemovingFromLibrary": "",
+    "collabStopOverridePrompt": "चालू सत्र समाप्ति से आपका संग्रहित पूर्व स्थानीय अधिलेखन नष्ट होकर पुनः अधिलेखित होगा, क्या आपको यक़ीन हैं? ( यदी आपको पूर्व स्थापित अधिलेखन सुरक्षित चाहिये तो बस ब्राउज़र टैब बंद करे)",
+    "errorAddingToLibrary": "संग्रह में जोडा न जा सका",
+    "errorRemovingFromLibrary": "संग्रह से हटाया नहीं जा सका",
     "confirmAddLibrary": "लाइब्रेरी जोड़ें पुष्‍टि करें आकार संख्या",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "ऐसा लगता है कि इस छवि में कोई दृश्य डेटा नहीं है। क्या आपने निर्यात के दौरान दृश्य एम्बेडिंग अनुमतित की है?",
     "cannotRestoreFromImage": "छवि फ़ाइल बहाल दृश्य नहीं है",
-    "invalidSceneUrl": "",
-    "resetLibrary": "",
-    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidSceneUrl": "दिये गये युआरेल से दृश्य आयात नहीं किया जा सका. यह या तो अनुचित है, या इसमें उचित Excalidraw JSON डेटा नहीं है।",
+    "resetLibrary": "यह पूरा संग्रह रिक्त करेगा. क्या आपको यक़ीन हैं?",
+    "removeItemsFromsLibrary": "{{count}} वस्तु(यें) संग्रह से हटायें?",
+    "invalidEncryptionKey": "कूटलेखन कुंजी 22 अक्षरों की होनी चाहिये, इसलिये जीवंत सहयोग अक्षम हैं"
   },
   "errors": {
-    "unsupportedFileType": "",
-    "imageInsertError": "",
-    "fileTooBig": "",
-    "svgImageInsertError": "",
-    "invalidSVGString": "",
+    "unsupportedFileType": "असमर्थित फाइल प्रकार",
+    "imageInsertError": "छवि सम्मिलित नहीं की जा सकी. पुनः प्रयत्न करे...",
+    "fileTooBig": "फ़ाइल ज़रूरत से ज़्यादा बड़ी हैं. अधिकतम अनुमित परिमाण {{maxSize}} हैं",
+    "svgImageInsertError": "एसवीजी छवि सम्मिलित नहीं कर सके, एसवीजी रचना अनुचित हैं",
+    "invalidSVGString": "अनुचित SVG",
     "cannotResolveCollabServer": "कॉलेब सर्वर से कनेक्शन नहीं हो पा रहा. कृपया पृष्ठ को पुनः लाने का प्रयास करे.",
     "importLibraryError": "संग्रह प्रतिष्ठापित नहीं किया जा सका"
   },
   "toolBar": {
     "selection": "चयन",
-    "image": "",
+    "image": "छवि सम्मिलित करें",
     "rectangle": "आयात",
     "diamond": "तिर्यग्वर्ग",
     "ellipse": "दीर्घवृत्त",
     "arrow": "तीर",
     "line": "रेखा",
-    "freedraw": "",
+    "freedraw": "चित्रांतित करे",
     "text": "पाठ",
     "library": "लाइब्रेरी",
     "lock": "ड्राइंग के बाद चयनित टूल को सक्रिय रखें",
@@ -330,16 +334,16 @@
     },
     "errors": {
       "required": "",
-      "website": ""
+      "website": "मान्य URL प्रविष्ट करें"
     },
     "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "संग्रह सम्मिलित करने हेतु प्रस्तुत करें ",
+      "link": "सार्वजनिक संग्रहालय",
+      "post": "अन्य वक्तियों को उनके चित्रकारी में उपयोग के लिये"
     },
     "noteGuidelines": {
-      "pre": "",
-      "link": "",
+      "pre": "संग्रह को पहले स्वीकृति आवश्यक कृपया यह पढ़ें ",
+      "link": "दिशा-निर्देश",
       "post": ""
     },
     "noteLicense": {
@@ -349,7 +353,7 @@
     },
     "noteItems": "",
     "atleastOneLibItem": "",
-    "republishWarning": "टिप्पणी: कुछ चुने हुवे आइटम पहले ही प्रकाशित/प्रस्तुत किए जा चुके हैं। किसी प्रकाशित संग्रह को अद्यतन करते समय या प्रस्तुतित आइटम को पुन्हा प्रस्तुत करते समय, आप बस उसे केवल अद्यतन करें ।"
+    "republishWarning": "टिप्पणी: कुछ चुने हुवे आइटम पहले ही प्रकाशित/प्रस्तुत किए जा चुके हैं। किसी प्रकाशित संग्रह को अद्यतन करते समय या पहले से प्रस्तुत आइटम को पुन्हा प्रस्तुत करते समय, आप बस उसे केवल अद्यतन करें ।"
   },
   "publishSuccessDialog": {
     "title": "",

src/locales/hu-HU.json

@@ -114,6 +114,10 @@
       "create": "Hivatkozás létrehozása",
       "label": "Hivatkozás"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/id-ID.json

@@ -114,6 +114,10 @@
       "create": "Buat tautan",
       "label": "Tautan"
     },
+    "lineEditor": {
+      "edit": "Edit tautan",
+      "exit": "Keluar editor garis"
+    },
     "elementLock": {
       "lock": "Kunci",
       "unlock": "Lepas",

src/locales/it-IT.json

@@ -114,6 +114,10 @@
       "create": "Crea link",
       "label": "Link"
     },
+    "lineEditor": {
+      "edit": "Modifica linea",
+      "exit": "Esci dall'editor di linea"
+    },
     "elementLock": {
       "lock": "Blocca",
       "unlock": "Sblocca",
@@ -125,8 +129,8 @@
   },
   "library": {
     "noItems": "Nessun elemento ancora aggiunto...",
-    "hint_emptyLibrary": "Selezionare un elemento su tela per aggiungerlo qui, o installare una libreria dal repository pubblico, sotto.",
-    "hint_emptyPrivateLibrary": "Selezionare un elemento su tela per aggiungerlo qui."
+    "hint_emptyLibrary": "Seleziona un elemento sulla tela per aggiungerlo qui, o installa una libreria dal repository pubblico qui sotto.",
+    "hint_emptyPrivateLibrary": "Seleziona un elemento sulla tela per aggiungerlo qui."
   },
   "buttons": {
     "clearReset": "Svuota la tela",

src/locales/ja-JP.json

@@ -114,6 +114,10 @@
       "create": "リンクを作成",
       "label": "リンク"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "ロック",
       "unlock": "ロック解除",

src/locales/kab-KAB.json

@@ -114,6 +114,10 @@
       "create": "Snulfu-d aseɣwen",
       "label": "Aseɣwen"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "Sekkeṛ",
       "unlock": "Serreḥ",

src/locales/kk-KZ.json

@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/ko-KR.json

@@ -114,6 +114,10 @@
       "create": "링크 만들기",
       "label": "링크"
     },
+    "lineEditor": {
+      "edit": "선 수정하기",
+      "exit": "선 편집기 종료"
+    },
     "elementLock": {
       "lock": "잠금",
       "unlock": "잠금 해제",
@@ -125,8 +129,8 @@
   },
   "library": {
     "noItems": "추가된 아이템 없음",
-    "hint_emptyLibrary": "",
-    "hint_emptyPrivateLibrary": ""
+    "hint_emptyLibrary": "캔버스 위에서 아이템을 선택하여 여기에 추가를 하거나, 아래의 공용 저장소에서 라이브러리를 설치하세요.",
+    "hint_emptyPrivateLibrary": "캔버스 위에서 아이템을 선택하여 여기 추가하세요."
   },
   "buttons": {
     "clearReset": "캔버스 초기화",
@@ -323,9 +327,9 @@
     "placeholder": {
       "authorName": "이름 또는 사용자명",
       "libraryName": "당신의 라이브러리 이름",
-      "libraryDesc": "사람들이 쓰임새를 파악할 수 있도록 라이브러리에 대해 설명",
+      "libraryDesc": "사람들에게 라이브러리의 용도를 알기 쉽게 설명해주세요",
       "githubHandle": "GitHub 사용자명 (선택), 제출한 뒤에도 심사를 위해서 라이브러리를 수정할 때 사용됩니다",
-      "twitterHandle": "Twitter 사용자명 (선택), Twitter를 통한 홍보에서 누가 제작했는지를 알리기 위해 사용됩니다",
+      "twitterHandle": "Twitter 사용자명 (선택), Twitter를 통해서 홍보할 때 제작자를 밝히기 위해 사용됩니다",
       "website": "개인 웹사이트나 다른 어딘가의 링크 (선택)"
     },
     "errors": {

src/locales/ku-TR.json

@@ -0,0 +1,443 @@
+{
+  "labels": {
+    "paste": "دانانەوە",
+    "pasteCharts": "دانانەوەی خشتەکان",
+    "selectAll": "دیاریکردنی هەموو",
+    "multiSelect": "زیادکردنی بۆ دیاریکراوەکان",
+    "moveCanvas": "کانڤای زیاتر",
+    "cut": "بڕین",
+    "copy": "لەبەرگرتنەوە",
+    "copyAsPng": "PNGلەبەرگرتنەوە بۆ تەختەنووس وەک",
+    "copyAsSvg": "SVGلەبەرگرتنەوە بۆ تەختەنووس وەک",
+    "copyText": "لەبەرگرتنەوە بۆ تەختەنووس وەک نوسین",
+    "bringForward": "بیهێنە پێش",
+    "sendToBack": "بنێرە دواوە",
+    "bringToFront": "بهێنە بەردەم",
+    "sendBackward": "بنێرە کۆتای",
+    "delete": "سڕینەوە",
+    "copyStyles": "لەبەرگرتنەوەی ستایل",
+    "pasteStyles": "دانانەوەی ستایل",
+    "stroke": "هێڵکار",
+    "background": "باکگراوند",
+    "fill": "پڕکردنەوە",
+    "strokeWidth": "پانی هێڵکاری",
+    "strokeStyle": "ستایلی هێڵکاری",
+    "strokeStyle_solid": "سادە",
+    "strokeStyle_dashed": "داشاوی",
+    "strokeStyle_dotted": "خاڵدار",
+    "sloppiness": "خواری",
+    "opacity": "ناڕونی",
+    "textAlign": "ڕێکخستنی دەق",
+    "edges": "لێوارەکان",
+    "sharp": "تیژ",
+    "round": "چەماو",
+    "arrowheads": "سەرەتیر",
+    "arrowhead_none": "هیچیان",
+    "arrowhead_arrow": "تیر",
+    "arrowhead_bar": "هێڵ",
+    "arrowhead_dot": "خاڵ",
+    "arrowhead_triangle": "سێگۆشە",
+    "fontSize": "قەبارەی فۆنت",
+    "fontFamily": "خێزانی فۆنت",
+    "onlySelected": "تەنها دیاریکراوەکان",
+    "withBackground": "باکگراوند",
+    "exportEmbedScene": "ئیمبێدکردنی دیمەنەکە",
+    "exportEmbedScene_details": "هەنداردەکراو بۆ ئەوەی دیمەنەکە بتوانرێت بگەڕێنرێتەوە لێی (PNG/SVG) داتای دیمەنەکە هەڵدەگیرێت وەکو فایلی\nقەبارەی فایلە هەناردەکراوەکان زیاد دەکات.",
+    "addWatermark": "زیادبکە \"Made with Excalidraw\"",
+    "handDrawn": "دەست کێشراو",
+    "normal": "ئاسایی",
+    "code": "کۆد",
+    "small": "بچووک",
+    "medium": "ناوەند",
+    "large": "گه‌وره‌",
+    "veryLarge": "زۆر گه‌وره‌",
+    "solid": "سادە",
+    "hachure": "هاچور",
+    "crossHatch": "کرۆس هاتچ",
+    "thin": "تەنک",
+    "bold": "تۆخ",
+    "left": "چەپ",
+    "center": "ناوه‌ند",
+    "right": "ڕاست",
+    "extraBold": "زۆر تۆخ",
+    "architect": "تەلارساز",
+    "artist": "هونەرمەند",
+    "cartoonist": "کارتۆنی",
+    "fileTitle": "ناوی فایل",
+    "colorPicker": "ڕەنگ هەڵگر",
+    "canvasColors": "کانڤای بەکارهاتوو",
+    "canvasBackground": "باکگراوندی کانڤاکان",
+    "drawingCanvas": "کێشانی کانڤا",
+    "layers": "چینەکان",
+    "actions": "کردارەکان",
+    "language": "زمان",
+    "liveCollaboration": "هاوکاری ڕاستەوخۆ",
+    "duplicateSelection": "لەبەرگرتنەوە",
+    "untitled": "Untitled",
+    "name": "ناو",
+    "yourName": "ناوەکەت",
+    "madeWithExcalidraw": "Made with Excalidraw",
+    "group": "دیاریکردنی گروپ",
+    "ungroup": "گروپی دیاریکراوەکان لابەرە",
+    "collaborators": "هاوکارەکان",
+    "showGrid": "گرید نیشانبدە",
+    "addToLibrary": "زیادکردن بۆ کتێبخانە",
+    "removeFromLibrary": "لابردن لە کتێبخانە",
+    "libraryLoadingMessage": "...بارکردنی کتێبخانە",
+    "libraries": "گەڕانی کتێبخانە",
+    "loadingScene": "...بارکردنی دیمەنەکە",
+    "align": "لاچەنکردن",
+    "alignTop": "لاچەنکردن بۆ سەرەوە",
+    "alignBottom": "لاچەنکردن بۆ خوارەوە",
+    "alignLeft": "لاچەنکردن بۆ چەپ",
+    "alignRight": "لاچەنکردن بۆ ڕاست",
+    "centerVertically": "بە ستونی ناوەند بکە",
+    "centerHorizontally": "بە ئاسۆی ناوەند بکە",
+    "distributeHorizontally": "بە ئاسۆی دابەشی بکە",
+    "distributeVertically": "بە ستونی دابەشی بکە",
+    "flipHorizontal": "هەڵگەڕانەوەی ئاسۆیی",
+    "flipVertical": "هەڵگەڕانەوەی ستونی",
+    "viewMode": "دۆخی بینین",
+    "toggleExportColorScheme": "گۆڕینی بارکردنی هێلکاری ڕەنگەکان",
+    "share": "هاوبەشی پێکردن",
+    "showStroke": "ڕەنگهەڵگری هێڵکار نیشانبدە",
+    "showBackground": "ڕەنگهەڵگری باکگراوند نیشانبدە",
+    "toggleTheme": "دۆخی ڕوکار بگۆڕە",
+    "personalLib": "کتێبخانەی کەسی",
+    "excalidrawLib": "کتێبخانەی Excalidraw",
+    "decreaseFontSize": "کەمکردنەوەی قەبارەی فۆنت",
+    "increaseFontSize": "زایدکردنی قەبارەی فۆنت",
+    "unbindText": "دەقەکە جیابکەرەوە",
+    "bindText": "دەقەکە ببەستەوە بە کۆنتەینەرەکەوە",
+    "link": {
+      "edit": "دەستکاریکردنی بەستەر",
+      "create": "دروستکردنی بەستەر",
+      "label": "بەستەر"
+    },
+    "lineEditor": {
+      "edit": "دەستکاری کردنی دێڕ",
+      "exit": "دەرچوون لە دەستکاریکەری دێڕ"
+    },
+    "elementLock": {
+      "lock": "قفڵکردن",
+      "unlock": "کردنەوە",
+      "lockAll": "قفڵکردنی هەموو",
+      "unlockAll": "کردنەوەی قفلی هەمووی"
+    },
+    "statusPublished": "بڵاوکراوەتەوە",
+    "sidebarLock": "هێشتنەوەی شریتی لا بە کراوەیی"
+  },
+  "library": {
+    "noItems": "هێشتا هیچ بڕگەیەک زیاد نەکراوە...",
+    "hint_emptyLibrary": "شتێک لەسەر کانڤاس هەڵبژێرە بۆ ئەوەی لێرە زیاد بکەیت، یان کتێبخانەیەک لە کۆگای گشتیەوە دابمەزرێنە، لە خوارەوە.",
+    "hint_emptyPrivateLibrary": "شتێک لەسەر کانڤاس هەڵبژێرە بۆ ئەوەی لێرە زیاد بکەیت."
+  },
+  "buttons": {
+    "clearReset": "کانڤاسەکە ڕێست بکەرەوە",
+    "exportJSON": "هەناردەکردن بۆ فایل",
+    "exportImage": "پاشەکەوتکرد وەک وێنە",
+    "export": "هەناردەکردن",
+    "exportToPng": "هەناردەکردن بۆ PNG",
+    "exportToSvg": "هەناردەکردن بۆ SVG",
+    "copyToClipboard": "له‌به‌ری بگره‌وه‌ بۆ ته‌خته‌نووس",
+    "copyPngToClipboard": "لەبەرگرتنەوەی PNG بۆ تەختەنوس",
+    "scale": "پێوەر",
+    "save": "پاشەکەوت بکە بۆ فایلی بەردەست",
+    "saveAs": "پاشەکەوتکردن وەک",
+    "load": "بارکردن",
+    "getShareableLink": "بەستەری هاوبەشیپێکردن بەدەستبهێنە",
+    "close": "داخستن",
+    "selectLanguage": "دیاریکردنی زمان",
+    "scrollBackToContent": "گەڕاندنەوە بۆ ناوەڕۆک",
+    "zoomIn": "نزیک خستنەوە",
+    "zoomOut": "دوورخستنەوە",
+    "resetZoom": "ڕێستکردنی زووم",
+    "menu": "پێڕست",
+    "done": "تەواو",
+    "edit": "دەستکاری کردن",
+    "undo": "گه‌ڕانه‌وه‌ بۆ پێشوو",
+    "redo": "گه‌ڕانه‌وه‌ بۆ داهاتوو",
+    "resetLibrary": "ڕێکخستنەوەی کتێبخانە",
+    "createNewRoom": "ژوورێکی نوێ دروست بکە",
+    "fullScreen": "پڕ بە شاشە",
+    "darkMode": "دۆخی تاریک",
+    "lightMode": "دۆخی ڕووناک",
+    "zenMode": "دۆخی زێن",
+    "exitZenMode": "بەجێهێشتنی دۆخی زێن",
+    "cancel": "هەڵوەشاندنەوە",
+    "clear": "خاوێنکردنەوە",
+    "remove": "لابردن",
+    "publishLibrary": "بڵاوکردنەوە",
+    "submit": "پێشکەشکردن",
+    "confirm": "دوپاتکردنەوە"
+  },
+  "alerts": {
+    "clearReset": "ئەمە هەموو کانڤاکە خاوێن دەکاتەوە، دڵنیایت؟",
+    "couldNotCreateShareableLink": "نەتوانرا بەستەری هاوبەشیپێکردن دروستبکرێت",
+    "couldNotCreateShareableLinkTooBig": "نەتوانرا بەستەری هاوبەشیپێکردن دروستبکرێت: دیمەنەکە زۆر گەورەیە",
+    "couldNotLoadInvalidFile": "ناتوانرا باربکرێت، فایلەکە دروستنییە",
+    "importBackendFailed": "هاوردەکردن لە پاشکۆکە سەرکەوتوو نەبوو.",
+    "cannotExportEmptyCanvas": "ناتوانرێت کانڤای بەتاڵ هەناردەبکرێت",
+    "couldNotCopyToClipboard": "ناتوانرا لەبەربگیرێتەوە بۆ تەختەنوس",
+    "decryptFailed": "ناتوانرا داتاکان شیبکرێتەوە",
+    "uploadedSecurly": "بارکردنەکە بە کۆدکردنی کۆتایی بۆ کۆتایی پارێزراوە، ئەمەش واتە سێرڤەری Excalidraw و لایەنی سێیەم ناتوانن ناوەڕۆکەکە بخوێننەوە.",
+    "loadSceneOverridePrompt": "بارکردنی وێنەکێشانی دەرەکی جێگەی ناوەڕۆکی بەردەستت دەگرێتەوە. دەتەوێت بەردەوام بیت؟",
+    "collabStopOverridePrompt": "وەستاندنی دانیشتنەکە وێنەکێشانی پێشووت دەنووسێتەوە کە لە ناوخۆدا هەڵگیراوە. ئایا دڵنیایت?\n\n(ئەگەر دەتەوێت وێنەکێشانی ناوخۆیی خۆت بهێڵیتەوە، لەبری ئەوە تەنها تابی وێبگەڕەکە دابخە).",
+    "errorAddingToLibrary": "نەیتوانی بڕگە زیاد بکات بۆ کتێبخانە",
+    "errorRemovingFromLibrary": "نەیتوانی بڕگە لە کتێبخانە بسڕێتەوە",
+    "confirmAddLibrary": "ئەمە {{numShapes}} شێوە(ەکان) زیاد دەکات بۆ کتێبخانەکەت. ئایا دڵنیایت?",
+    "imageDoesNotContainScene": "وادیارە ئەم وێنەیە هیچ داتایەکی دیمەنی تێدا نییە. ئایا دیمەنی چەسپاندنت لە کاتی هەناردەدا چالاک کردووە؟",
+    "cannotRestoreFromImage": "ناتوانرێت دیمەنەکە بگەڕێندرێتەوە لەم فایلە وێنەیە",
+    "invalidSceneUrl": "ناتوانێت دیمەنەکە هاوردە بکات لە URL ی دابینکراو. یان نادروستە، یان داتای \"ئێکسکالیدراو\" JSON ی دروستی تێدا نییە.",
+    "resetLibrary": "ئەمە کتێبخانەکەت خاوێن دەکاتەوە. ئایا دڵنیایت?",
+    "removeItemsFromsLibrary": "سڕینەوەی {{count}} ئایتم(ەکان) لە کتێبخانە؟",
+    "invalidEncryptionKey": "کلیلی رەمزاندن دەبێت لە 22 پیت بێت. هاوکاری ڕاستەوخۆ لە کارخراوە."
+  },
+  "errors": {
+    "unsupportedFileType": "جۆری فایلی پشتگیری نەکراو.",
+    "imageInsertError": "نەیتوانی وێنە داخڵ بکات. دواتر هەوڵ بدە",
+    "fileTooBig": "فایلەکە زۆر گەورەیە. زۆرترین قەبارەی ڕێگەپێدراو {{maxSize}}}.",
+    "svgImageInsertError": "نەیتوانی وێنەی SVG داخڵ بکات. نیشانەی ئێس ڤی جی نادروست دیارە.",
+    "invalidSVGString": "ئێس ڤی جی نادروستە.",
+    "cannotResolveCollabServer": "ناتوانێت پەیوەندی بکات بە سێرڤەری کۆلاب. تکایە لاپەڕەکە دووبارە باربکەوە و دووبارە هەوڵ بدەوە.",
+    "importLibraryError": "نەیتوانی کتێبخانە بار بکات"
+  },
+  "toolBar": {
+    "selection": "دەستنیشانکردن",
+    "image": "داخڵکردنی وێنە",
+    "rectangle": "لاکێشە",
+    "diamond": "ئەڵماس",
+    "ellipse": "هێلکەیی",
+    "arrow": "تیر",
+    "line": "هێڵ",
+    "freedraw": "کێشان",
+    "text": "دەق",
+    "library": "کتێبخانە",
+    "lock": "ئامێرە دیاریکراوەکان چالاک بهێڵەوە دوای وێنەکێشان",
+    "penMode": "ڕێگری بکە لە گەورەکردنەوەی پینچ و قبولکردنی تێکردنی فریدراو تەنها لە پێنووسەوە",
+    "link": "زیادکردن/ نوێکردنەوەی لینک بۆ شێوەی دیاریکراو",
+    "eraser": "سڕەر"
+  },
+  "headings": {
+    "canvasActions": "کردارەکانی کانڤا",
+    "selectedShapeActions": "کردارەکانی شێوەی دەستنیشانکراو",
+    "shapes": "شێوەکان"
+  },
+  "hints": {
+    "canvasPanning": "بۆ جوڵاندنی کانڤاکە، لە کاتی ڕاکێشاندا ویل ماوس یان سپەیسبار دابگرە",
+    "linearElement": "کرتە بکە بۆ دەستپێکردنی چەند خاڵێک، ڕایبکێشە بۆ یەک هێڵ",
+    "freeDraw": "کرتە بکە و ڕایبکێشە، کاتێک تەواو بوویت دەست هەڵگرە",
+    "text": "زانیاری: هەروەها دەتوانیت دەق زیادبکەیت بە دوو کرتەکردن لە هەر شوێنێک لەگەڵ ئامڕازی دەستنیشانکردن",
+    "text_selected": "دووجار کلیک بکە یان ENTER بکە بۆ دەستکاریکردنی دەق",
+    "text_editing": "بۆ تەواوکردنی دەستکاریکردنەکە Escape یان Ctrl/Cmd+ENTER بکە",
+    "linearElementMulti": "کلیک لەسەر کۆتا خاڵ بکە یان Escape یان Enter بکە بۆ تەواوکردن",
+    "lockAngle": "دەتوانیت گۆشە سنووردار بکەیت بە ڕاگرتنی SHIFT",
+    "resize": "دەتوانیت ڕێژەکان سنووردار بکەیت بە ڕاگرتنی SHIFT لەکاتی گۆڕینی قەبارەدا،\nALT ڕابگرە بۆ گۆڕینی قەبارە لە ناوەندەوە",
+    "resizeImage": "دەتوانیت بە ئازادی قەبارە بگۆڕیت بە ڕاگرتنی SHIFT،\nALT ڕابگرە بۆ گۆڕینی قەبارە لە ناوەندەوە",
+    "rotate": "دەتوانیت گۆشەکان سنووردار بکەیت بە ڕاگرتنی SHIFT لەکاتی سوڕانەوەدا",
+    "lineEditor_info": "دووجار کلیک بکە یان Enter بکە بۆ دەستکاریکردنی خاڵەکان",
+    "lineEditor_pointSelected": "بۆ لابردنی خاڵەکان Delete دابگرە، Ctrl Cmd+D بکە بۆ لەبەرگرتنەوە، یان بۆ جووڵە ڕاکێشان بکە",
+    "lineEditor_nothingSelected": "خاڵێک هەڵبژێرە بۆ دەستکاریکردن (SHIFT ڕابگرە بۆ هەڵبژاردنی چەندین)،\nیان Alt ڕابگرە و کلیک بکە بۆ زیادکردنی خاڵە نوێیەکان",
+    "placeImage": "کلیک بکە بۆ دانانی وێنەکە، یان کلیک بکە و ڕایبکێشە بۆ ئەوەی قەبارەکەی بە دەستی دابنێیت",
+    "publishLibrary": "کتێبخانەی تایبەت بە خۆت بڵاوبکەرەوە",
+    "bindTextToElement": "بۆ زیادکردنی دەق enter بکە",
+    "deepBoxSelect": "CtrlOrCmd ڕابگرە بۆ هەڵبژاردنی قووڵ، و بۆ ڕێگریکردن لە ڕاکێشان",
+    "eraserRevert": "بۆ گەڕاندنەوەی ئەو توخمانەی کە بۆ سڕینەوە نیشانە کراون، Alt ڕابگرە"
+  },
+  "canvasError": {
+    "cannotShowPreview": "ناتوانێت پێشبینین پیشان بدرێت",
+    "canvasTooBig": "کانڤاکە لەوانەیە زۆر گەورەبێت.",
+    "canvasTooBigTip": "زانیاری: هەوڵ بدە دوورترین توخمەکان کەمێک نزیکتر لە یەکتر بجوڵێنن."
+  },
+  "errorSplash": {
+    "headingMain_pre": "تووشی هەڵەیەک بوو. هەوڵ بدە ",
+    "headingMain_button": "دووبارە بارکردنی لاپەڕەکە.",
+    "clearCanvasMessage": "ئەگەر دووبارە بارکردنەوە کار نەکات، هەوڵبدە ",
+    "clearCanvasMessage_button": "کانڤاکە خاوێن بکەیتەوە.",
+    "clearCanvasCaveat": " ئەمە دەبێتە هۆی لەدەستدانی ئەوەی کە کردوتە ",
+    "trackedToSentry_pre": "هەڵەکە لەگەڵ ناسێنەری ",
+    "trackedToSentry_post": " لەسەر سیستەمەکەمان بەدواداچوونی بۆ کرا.",
+    "openIssueMessage_pre": "ئێمە زۆر وریا بووین کە زانیارییەکانی دیمەنەکەت لەسەر هەڵەکە نەخەینەڕوو. ئەگەر دیمەنەکەت تایبەت نییە، تکایە بیر لە بەدواداچوون بکەنەوە بۆ ئێمە ",
+    "openIssueMessage_button": "شوێنپێهەڵگری هەڵە.",
+    "openIssueMessage_post": " تکایە ئەم زانیارییانەی خوارەوە کۆپی بکە و لە بەشی کێشەکانی Github دایبنێ.",
+    "sceneContent": "پێکهاتەی ناو دیمەنەکە:"
+  },
+  "roomDialog": {
+    "desc_intro": "دەتوانیت خەڵک بانگهێشت بکەیت بۆ دیمەنی ئێستات بۆ هاوکاری کردن لەگەڵت.",
+    "desc_privacy": "نیگەران مەبە، دانیشتنەکە کۆدکردنی کۆتایی بە کۆتایی بەکاردەهێنێت، بۆیە هەرچییەک بکێشیت بە تایبەتی دەمێنێتەوە. تەنانەت سێرڤەرەکەمان ناتوانێت بزانێت کە تۆ چیت دروستکردووە.",
+    "button_startSession": "دەستپێکردنی دانیشتن",
+    "button_stopSession": "وەستاندنی دانیشتن",
+    "desc_inProgressIntro": "دانیشتنی هاوکاری ڕاستەوخۆ ئێستا لە ئارادایە.",
+    "desc_shareLink": "هاوبەشکردنی ئەم لینکە لەگەڵ هەر کەسێک کە دەتەوێت هاوکاری بکەیت لەگەڵ:",
+    "desc_exitSession": "وەستاندنی دانیشتنەکە پەیوەندیت لەگەڵ ژوورەکە دەپچڕێنێت، بەڵام تۆ دەتوانیت بەردەوام بیت لە کارکردن لەگەڵ دیمەنەکە، لە ناوخۆدا. تێبینی بکە کە ئەمە کاریگەری لەسەر کەسانی تر نابێت، وە ئەوان هێشتا دەتوانن هاوکاری بکەن لەسەر وەشانەکەیان.",
+    "shareTitle": "بەشداری بکە لە دانیشتنی هاریکاری ڕاستەوخۆ لە ئێکسکالیدراو"
+  },
+  "errorDialog": {
+    "title": "هه‌ڵه‌ ڕوویدا"
+  },
+  "exportDialog": {
+    "disk_title": "پاشەکەوت بکە لە دیسک",
+    "disk_details": "هەناردەکردنی داتای دیمەنەکە بۆ فایلێک کە دواتر دەتوانیت لێی هاوردە بکەیت.",
+    "disk_button": "پاشەکەوت بکە بۆ فایل",
+    "link_title": "بەستەری هاوبەشیپێکردن",
+    "link_details": "ناردن وەک بەستەری تەنها-خوێندنەوە.",
+    "link_button": "هەناردەکردن بۆ بەستەر",
+    "excalidrawplus_description": "دیمەنەکە لە شوێنی کارکردنی Excalidraw+ هەڵبگرە.",
+    "excalidrawplus_button": "هەناردەکردن",
+    "excalidrawplus_exportError": "لەم ساتەدا نەتوانرا هەناردە بکرێت بۆ Excalidrow+..."
+  },
+  "helpDialog": {
+    "blog": "بلۆگەکەمان بخوێنەوە",
+    "click": "گرتە",
+    "deepSelect": "دەستنیشانکردنی قوڵ",
+    "deepBoxSelect": "لەناو بۆکسەکەدا بە قووڵی هەڵبژێرە، و ڕێگری لە ڕاکێشان بکە",
+    "curvedArrow": "تیری نوشتاوە",
+    "curvedLine": "هێڵی نوشتاوە",
+    "documentation": "دۆکیومێنتەیشن",
+    "doubleClick": "دوو گرتە",
+    "drag": "راکێشان",
+    "editor": "دەستکاریکەر",
+    "editSelectedShape": "دەستکاریکردنی شێوەی هەڵبژێردراو (دەق/تیر/هێڵ)",
+    "github": "کێشەیەکت دۆزیەوە؟ پێشکەشکردن",
+    "howto": "شوێن ڕینماییەکانمان بکەوە",
+    "or": "یان",
+    "preventBinding": "ڕێگریبکە لە نوشتاناوەی تیر",
+    "tools": "ئامرازەکان",
+    "shortcuts": "کورتکراوەکانی تەختەکلیل",
+    "textFinish": "تەواوکردنی دەستکاریکردن (دەستکاریکەری دەق)",
+    "textNewLine": "زیادکردنی دێڕی نوێ (دەستکاریکەری دەق)",
+    "title": "یارماتی",
+    "view": "دیمەن",
+    "zoomToFit": "زووم بکە بۆ ئەوەی لەگەڵ هەموو توخمەکاندا بگونجێت",
+    "zoomToSelection": "زووم بکە بۆ دەستنیشانکراوەکان",
+    "toggleElementLock": "قفڵ/کردنەوەی دەستنیشانکراوەکان"
+  },
+  "clearCanvasDialog": {
+    "title": "خاوێنکردنەوەی کانڤا"
+  },
+  "publishDialog": {
+    "title": "پێشکەشکردنی کتێبخانە",
+    "itemName": "ناوی بڕگە",
+    "authorName": "ناوی نوسەر",
+    "githubUsername": "ناوی بەکارهێنەری Github",
+    "twitterUsername": "ناوی بەکارهێنەری Twitter",
+    "libraryName": "ناوی کتێبخانە",
+    "libraryDesc": "وەسفی کتێبخانە",
+    "website": "ماڵپەڕ",
+    "placeholder": {
+      "authorName": "ناوەکات یاخود ناوی بەکارهێنەر",
+      "libraryName": "ناوی کتێبخانەکەت",
+      "libraryDesc": "وەسفی کتێبخانەکەت بۆ یارمەتیدانی خەڵک بۆ تێگەیشتن لە بەکارهێنانی",
+      "githubHandle": "ناوی GitHub (ئارەزوومەندانە)، بۆیە دەتوانیت دەستکاری کتێبخانەکە بکەیت کاتێک پێشکەش دەکرێت بۆ پێداچوونەوە",
+      "twitterHandle": "ناوی بەکارهێنەری تویتەر (ئارەزوومەندانە)، بۆیە بزانین لەکاتی بانگەشەکردن لە ڕێگەی تویتەرەوە کریدت بۆ کێ بکەین",
+      "website": "لینکی ماڵپەڕی تایبەتی خۆت یان شوێنێکی تر (ئارەزومەندانە)"
+    },
+    "errors": {
+      "required": "داواکراوە",
+      "website": "URLێکی دروست تێبنووسە"
+    },
+    "noteDescription": {
+      "pre": "کتێبخانەکەت بنێرە بۆ ئەوەی بخرێتە ناو ",
+      "link": "کۆگای کتێبخانەی گشتی",
+      "post": "بۆ ئەوەی کەسانی تر لە وێنەکێشانەکانیاندا بەکاری بهێنن."
+    },
+    "noteGuidelines": {
+      "pre": "کتێبخانەکە پێویستە سەرەتا بە دەست پەسەند بکرێت. تکایە بفەرمو بە خوێندنەوەی ",
+      "link": "ڕێنماییەکان",
+      "post": " پێش پێشکەشکردن. پێویستت بە ئەژمێری GitHub دەبێت بۆ پەیوەندیکردن و گۆڕانکاری ئەگەر داوای لێکرا، بەڵام بە توندی پێویست نییە."
+    },
+    "noteLicense": {
+      "pre": "بە پێشکەشکردن، تۆ ڕەزامەندیت لەسەر بڵاوکردنەوەی کتێبخانەکە بەپێی ",
+      "link": "مۆڵەتی MIT، ",
+      "post": "کە بە کورتی مانای ئەوەیە کە هەرکەسێک دەتوانێت بە بێ سنوور بەکاری بهێنێت"
+    },
+    "noteItems": "هەر شتێکی کتێبخانە دەبێت ناوی تایبەتی خۆی هەبێت بۆ ئەوەی بتوانرێت فلتەر بکرێت. ئەم بابەتانەی کتێبخانانەی خوارەوە لەخۆدەگرێت:",
+    "atleastOneLibItem": "تکایە بەلایەنی کەمەوە یەک بڕگەی کتێبخانە دیاریبکە بۆ دەستپێکردن",
+    "republishWarning": "تێبینی: هەندێک لە ئایتمە دیاریکراوەکان نیشانکراون وەک ئەوەی پێشتر بڵاوکراونەتەوە/نێردراون. تەنها پێویستە شتەکان دووبارە پێشکەش بکەیتەوە لە کاتی نوێکردنەوەی کتێبخانەیەکی هەبوو یان پێشکەشکردن."
+  },
+  "publishSuccessDialog": {
+    "title": "کتێبخانە پێشکەش کرا",
+    "content": "سوپاس {{authorName}}. کتێبخانەکەت پێشکەش کراوە بۆ پێداچوونەوە. دەتوانیت بەدواداچوون بۆ دۆخەکە بکەیت",
+    "link": "لێرە"
+  },
+  "confirmDialog": {
+    "resetLibrary": "ڕێکخستنەوەی کتێبخانە",
+    "removeItemsFromLib": "لابردنی ئایتمە دیاریکراوەکان لە کتێبخانە"
+  },
+  "encrypted": {
+    "tooltip": "وێنەکێشانەکانت لە کۆتاییەوە بۆ کۆتایی کۆد کراون بۆیە سێرڤەرەکانی ئێکسکالیدرا هەرگیز نایانبینن.",
+    "link": "بلۆگ پۆست لەسەر کۆدکردنی کۆتای بۆ کۆتای لە ئێکسکالیدرەو"
+  },
+  "stats": {
+    "angle": "گۆشە",
+    "element": "توخم",
+    "elements": "توخمەکان",
+    "height": "بەرزی",
+    "scene": "دیمەنەکە",
+    "selected": "دەستنیشانکراوەکان",
+    "storage": "بیرگە",
+    "title": "ئامار بۆ نێردەکان",
+    "total": "گشتی",
+    "version": "وەشان",
+    "versionCopy": "کلیک بۆ لەبەرگرتنەوە",
+    "versionNotAvailable": "وەشان بەردەست نییە",
+    "width": "پانی"
+  },
+  "toast": {
+    "addedToLibrary": "زیادکرا بۆ کتێبخانە",
+    "copyStyles": "ستایلی کۆپیکراو.",
+    "copyToClipboard": "لەبەرگیرایەوە بۆ تەختەنوس.",
+    "copyToClipboardAsPng": "کۆپی کراوە {{exportSelection}} بۆ کلیپبۆرد وەک PNG\n({{exportColorScheme}})",
+    "fileSaved": "فایل هەڵگیرا.",
+    "fileSavedToFilename": "هەڵگیراوە بۆ {filename}",
+    "canvas": "کانڤاکان",
+    "selection": "دەستنیشانکراوەکان"
+  },
+  "colors": {
+    "ffffff": "سپی",
+    "f8f9fa": "خۆڵەمێشی 0",
+    "f1f3f5": "خۆڵەمێشی 1",
+    "fff5f5": "سور 0",
+    "fff0f6": "پەمەی 0",
+    "f8f0fc": "مێوژی 0",
+    "f3f0ff": "مۆر 0",
+    "edf2ff": "نیلی 0",
+    "e7f5ff": "شین 0",
+    "e3fafc": "شینی ئاسمانی 0",
+    "e6fcf5": "سەوزباوی 0",
+    "ebfbee": "سه‌وز 0",
+    "f4fce3": "نارنجی 0",
+    "fff9db": "زەرد 0",
+    "fff4e6": "پرتەقاڵی 0",
+    "transparent": "ڕوون",
+    "ced4da": "خۆڵەمێشی 4",
+    "868e96": "خۆڵەمێشی 6",
+    "fa5252": "سور 6",
+    "e64980": "پەمەی 6",
+    "be4bdb": "مێوژی 6",
+    "7950f2": "مۆر 6",
+    "4c6ef5": "نیلی 6",
+    "228be6": "شین 6",
+    "15aabf": "شینی ئاسمانی 6",
+    "12b886": "سەوزباوی 6",
+    "40c057": "سه‌وز 6",
+    "82c91e": "نارنجی 6",
+    "fab005": "زەرد 6",
+    "fd7e14": "پرتەقاڵی 6",
+    "000000": "ڕەش",
+    "343a40": "خۆڵەمێشی 8",
+    "495057": "خۆڵەمێشی 7",
+    "c92a2a": "سور 9",
+    "a61e4d": "پەمەی 9",
+    "862e9c": "مێوژی 9",
+    "5f3dc4": "مۆر 9",
+    "364fc7": "نیلی 9",
+    "1864ab": "شین 9",
+    "0b7285": "شینی ئاسمانی 9",
+    "087f5b": "سەوزباوی 9",
+    "2b8a3e": "سه‌وز 9",
+    "5c940d": "نارنجی 9",
+    "e67700": "زەرد 9",
+    "d9480f": "پرتەقاڵی 9"
+  }
+}

src/locales/lt-LT.json

@@ -110,13 +110,17 @@
     "unbindText": "",
     "bindText": "",
     "link": {
+      "edit": "Redeguoti nuorodą",
+      "create": "Sukurti nuorodą",
+      "label": "Nuoroda"
+    },
+    "lineEditor": {
       "edit": "",
-      "create": "",
-      "label": ""
+      "exit": ""
     },
     "elementLock": {
-      "lock": "",
-      "unlock": "",
+      "lock": "Užrakinti",
+      "unlock": "Atrakinti",
       "lockAll": "",
       "unlockAll": ""
     },

src/locales/lv-LV.json

@@ -114,6 +114,10 @@
       "create": "Izveidot saiti",
       "label": "Saite"
     },
+    "lineEditor": {
+      "edit": "Rediģēt līniju",
+      "exit": "Aizvērt līnijas redaktoru"
+    },
     "elementLock": {
       "lock": "Fiksēt",
       "unlock": "Atbrīvot",

src/locales/mr-IN.json

@@ -114,6 +114,10 @@
       "create": "दुवा तयार करा",
       "label": "दुवा"
     },
+    "lineEditor": {
+      "edit": "रेघ संपादन",
+      "exit": "रेघ संपादकाबाहेर"
+    },
     "elementLock": {
       "lock": "कुलूपात ठेवा",
       "unlock": "कुलूपातून बाहेर",

src/locales/my-MM.json

@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/nb-NO.json

@@ -114,6 +114,10 @@
       "create": "Opprett lenke",
       "label": "Lenke"
     },
+    "lineEditor": {
+      "edit": "Rediger linje",
+      "exit": "Avslutt linjeredigering"
+    },
     "elementLock": {
       "lock": "Lås",
       "unlock": "Lås opp",

src/locales/nl-NL.json

@@ -114,6 +114,10 @@
       "create": "",
       "label": ""
     },
+    "lineEditor": {
+      "edit": "Bewerk regel",
+      "exit": "Verlaat regel-editor"
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/nn-NO.json

@@ -114,6 +114,10 @@
       "create": "Lag lenke",
       "label": "Lenke"
     },
+    "lineEditor": {
+      "edit": "",
+      "exit": ""
+    },
     "elementLock": {
       "lock": "",
       "unlock": "",

src/locales/oc-FR.json

@@ -114,17 +114,21 @@
       "create": "Crear un ligam",
       "label": "Ligam"
     },
+    "lineEditor": {
+      "edit": "Modificar la linha",
+      "exit": "Sortir de l’editor de linha"
+    },
     "elementLock": {
       "lock": "Verrolhar",
       "unlock": "Desverrolhar",
       "lockAll": "Tot verrolhar",
       "unlockAll": "Tot desverrolhar"
     },
-    "statusPublished": "",
-    "sidebarLock": ""
+    "statusPublished": "Publicat",
+    "sidebarLock": "Gardar la barra laterala dobèrta"
   },
   "library": {
-    "noItems": "",
+    "noItems": "Cap d’element pas encara apondut...",
     "hint_emptyLibrary": "",
     "hint_emptyPrivateLibrary": ""
   },