Update textWysiwyg.tsx

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

.env.development

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

.env.production

@@ -4,7 +4,11 @@ REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
-REACT_APP_SOCKET_SERVER_URL=https://oss-collab-us1.excalidraw.com
+REACT_APP_PORTAL_URL=https://portal.excalidraw.com
+# Fill to set socket server URL used for collaboration.
+# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
+REACT_APP_WS_SERVER_URL=
+
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
 # production-only vars

.github/workflows/build-packages.yml

@@ -1,29 +0,0 @@
-name: Build packages
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-
-jobs:
-  packages:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-      - name: Install dependencies
-        run: |
-          yarn --frozen-lockfile
-          yarn --cwd src/packages/excalidraw
-          yarn --cwd src/packages/utils
-      - name: Build @excalidraw/excalidraw
-        run: |
-          yarn --cwd src/packages/excalidraw run pack
-      - name: Build @excalidraw/utils
-        run: |
-          yarn --cwd src/packages/utils run pack

README.md

@@ -32,6 +32,10 @@ Last but not least, we're thankful to these companies for offering their service
 
 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.com)
 
+## Who's integrating Excalidraw
+
+[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) •
+
 ## Documentation
 
 ### Shortcuts

package.json

@@ -29,7 +29,7 @@
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.23.0",
+    "browser-fs-access": "0.24.1",
     "clsx": "1.1.1",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
@@ -65,7 +65,6 @@
     "dotenv": "10.0.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.23.0",
     "husky": "7.0.4",
     "jest-canvas-mock": "2.3.1",
     "lint-staged": "12.3.3",

public/index.html

@@ -72,12 +72,6 @@
       crossorigin="anonymous"
     />
 
-    <link
-      href="%REACT_APP_SOCKET_SERVER_URL%/socket.io"
-      rel="preconnect"
-      crossorigin="anonymous"
-    />
-
     <link
       rel="manifest"
       href="manifest.json"

src/actions/actionCanvas.tsx

@@ -26,7 +26,7 @@ export const actionChangeViewBackgroundColor = register({
       commitToHistory: !!value.viewBackgroundColor,
     };
   },
-  PanelComponent: ({ appState, updateData }) => {
+  PanelComponent: ({ elements, appState, updateData }) => {
     return (
       <div style={{ position: "relative" }}>
         <ColorPicker
@@ -39,6 +39,8 @@ export const actionChangeViewBackgroundColor = register({
             updateData({ openPopup: active ? "canvasColorPicker" : null })
           }
           data-testid="canvas-background-picker"
+          elements={elements}
+          appState={appState}
         />
       </div>
     );

src/actions/actionDistribute.tsx

@@ -7,7 +7,7 @@ import { distributeElements, Distribution } from "../disitrubte";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { CODES } from "../keys";
+import { CODES, KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
@@ -49,7 +49,8 @@ export const distributeHorizontally = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) => event.altKey && event.code === CODES.H,
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
@@ -77,7 +78,8 @@ export const distributeVertically = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) => event.altKey && event.code === CODES.V,
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}

src/actions/actionFlip.ts

@@ -155,7 +155,7 @@ const flipElement = (
     // calculate new x-coord for transformation
     newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
     resizeSingleElement(
-      element,
+      new Map().set(element.id, element),
       true,
       element,
       usingNWHandle ? "nw" : "ne",

src/actions/actionProperties.tsx

@@ -30,11 +30,15 @@ import {
   TextAlignCenterIcon,
   TextAlignLeftIcon,
   TextAlignRightIcon,
+  TextAlignTopIcon,
+  TextAlignBottomIcon,
+  TextAlignMiddleIcon,
 } from "../components/icons";
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
+  VERTICAL_ALIGN,
 } from "../constants";
 import {
   getNonDeletedElements,
@@ -58,6 +62,7 @@ import {
   ExcalidrawTextElement,
   FontFamilyValues,
   TextAlign,
+  VerticalAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
@@ -233,6 +238,8 @@ export const actionChangeStrokeColor = register({
         setActive={(active) =>
           updateData({ openPopup: active ? "strokeColorPicker" : null })
         }
+        elements={elements}
+        appState={appState}
       />
     </>
   ),
@@ -273,6 +280,8 @@ export const actionChangeBackgroundColor = register({
         setActive={(active) =>
           updateData({ openPopup: active ? "backgroundColorPicker" : null })
         }
+        elements={elements}
+        appState={appState}
       />
     </>
   ),
@@ -709,9 +718,7 @@ export const actionChangeTextAlign = register({
           if (isTextElement(oldElement)) {
             const newElement: ExcalidrawTextElement = newElementWith(
               oldElement,
-              {
-                textAlign: value,
-              },
+              { textAlign: value },
             );
             redrawTextBoundingBox(
               newElement,
@@ -732,47 +739,119 @@ export const actionChangeTextAlign = register({
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
-    <fieldset>
-      <legend>{t("labels.textAlign")}</legend>
-      <ButtonIconSelect<TextAlign | false>
-        group="text-align"
-        options={[
-          {
-            value: "left",
-            text: t("labels.left"),
-            icon: <TextAlignLeftIcon theme={appState.theme} />,
-          },
-          {
-            value: "center",
-            text: t("labels.center"),
-            icon: <TextAlignCenterIcon theme={appState.theme} />,
-          },
-          {
-            value: "right",
-            text: t("labels.right"),
-            icon: <TextAlignRightIcon theme={appState.theme} />,
-          },
-        ]}
-        value={getFormValue(
-          elements,
-          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.textAlign;
+  PanelComponent: ({ elements, appState, updateData }) => {
+    return (
+      <fieldset>
+        <legend>{t("labels.textAlign")}</legend>
+        <ButtonIconSelect<TextAlign | false>
+          group="text-align"
+          options={[
+            {
+              value: "left",
+              text: t("labels.left"),
+              icon: <TextAlignLeftIcon theme={appState.theme} />,
+            },
+            {
+              value: "center",
+              text: t("labels.center"),
+              icon: <TextAlignCenterIcon theme={appState.theme} />,
+            },
+            {
+              value: "right",
+              text: t("labels.right"),
+              icon: <TextAlignRightIcon theme={appState.theme} />,
+            },
+          ]}
+          value={getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.textAlign;
+              }
+              const boundTextElement = getBoundTextElement(element);
+              if (boundTextElement) {
+                return boundTextElement.textAlign;
+              }
+              return null;
+            },
+            appState.currentItemTextAlign,
+          )}
+          onChange={(value) => updateData(value)}
+        />
+      </fieldset>
+    );
+  },
+});
+export const actionChangeVerticalAlign = register({
+  name: "changeVerticalAlign",
+  perform: (elements, appState, value) => {
+    return {
+      elements: changeProperty(
+        elements,
+        appState,
+        (oldElement) => {
+          if (isTextElement(oldElement)) {
+            const newElement: ExcalidrawTextElement = newElementWith(
+              oldElement,
+              { verticalAlign: value },
+            );
+
+            redrawTextBoundingBox(
+              newElement,
+              getContainerElement(oldElement),
+              appState,
+            );
+            return newElement;
+          }
+
+          return oldElement;
+        },
+        true,
+      ),
+      appState: {
+        ...appState,
+      },
+      commitToHistory: true,
+    };
+  },
+  PanelComponent: ({ elements, appState, updateData }) => {
+    return (
+      <fieldset>
+        <ButtonIconSelect<VerticalAlign | false>
+          group="text-align"
+          options={[
+            {
+              value: VERTICAL_ALIGN.TOP,
+              text: t("labels.alignTop"),
+              icon: <TextAlignTopIcon theme={appState.theme} />,
+            },
+            {
+              value: VERTICAL_ALIGN.MIDDLE,
+              text: t("labels.centerVertically"),
+              icon: <TextAlignMiddleIcon theme={appState.theme} />,
+            },
+            {
+              value: VERTICAL_ALIGN.BOTTOM,
+              text: t("labels.alignBottom"),
+              icon: <TextAlignBottomIcon theme={appState.theme} />,
+            },
+          ]}
+          value={getFormValue(elements, appState, (element) => {
+            if (isTextElement(element) && element.containerId) {
+              return element.verticalAlign;
             }
             const boundTextElement = getBoundTextElement(element);
             if (boundTextElement) {
-              return boundTextElement.textAlign;
+              return boundTextElement.verticalAlign;
             }
             return null;
-          },
-          appState.currentItemTextAlign,
-        )}
-        onChange={(value) => updateData(value)}
-      />
-    </fieldset>
-  ),
+          })}
+          onChange={(value) => updateData(value)}
+        />
+      </fieldset>
+    );
+  },
 });
 
 export const actionChangeSharpness = register({

src/actions/actionStyles.test.tsx

@@ -0,0 +1,71 @@
+import ExcalidrawApp from "../excalidraw-app";
+import { t } from "../i18n";
+import { CODES } from "../keys";
+import { API } from "../tests/helpers/api";
+import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
+import { fireEvent, render, screen } from "../tests/test-utils";
+import { copiedStyles } from "./actionStyles";
+
+const { h } = window;
+
+const mouse = new Pointer("mouse");
+
+describe("actionStyles", () => {
+  beforeEach(async () => {
+    await render(<ExcalidrawApp />);
+  });
+  it("should copy & paste styles via keyboard", () => {
+    UI.clickTool("rectangle");
+    mouse.down(10, 10);
+    mouse.up(20, 20);
+
+    UI.clickTool("rectangle");
+    mouse.down(10, 10);
+    mouse.up(20, 20);
+
+    // Change some styles of second rectangle
+    UI.clickLabeledElement("Stroke");
+    UI.clickLabeledElement(t("colors.c92a2a"));
+    UI.clickLabeledElement("Background");
+    UI.clickLabeledElement(t("colors.e64980"));
+    // Fill style
+    fireEvent.click(screen.getByTitle("Cross-hatch"));
+    // Stroke width
+    fireEvent.click(screen.getByTitle("Bold"));
+    // Stroke style
+    fireEvent.click(screen.getByTitle("Dotted"));
+    // Roughness
+    fireEvent.click(screen.getByTitle("Cartoonist"));
+    // Opacity
+    fireEvent.change(screen.getByLabelText("Opacity"), {
+      target: { value: "60" },
+    });
+
+    mouse.reset();
+
+    API.setSelectedElements([h.elements[1]]);
+
+    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
+      Keyboard.codeDown(CODES.C);
+    });
+    const secondRect = JSON.parse(copiedStyles);
+    expect(secondRect.id).toBe(h.elements[1].id);
+
+    mouse.reset();
+    // Paste styles to first rectangle
+    API.setSelectedElements([h.elements[0]]);
+    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
+      Keyboard.codeDown(CODES.V);
+    });
+
+    const firstRect = API.getSelectedElement();
+    expect(firstRect.id).toBe(h.elements[0].id);
+    expect(firstRect.strokeColor).toBe("#c92a2a");
+    expect(firstRect.backgroundColor).toBe("#e64980");
+    expect(firstRect.fillStyle).toBe("cross-hatch");
+    expect(firstRect.strokeWidth).toBe(2); // Bold: 2
+    expect(firstRect.strokeStyle).toBe("dotted");
+    expect(firstRect.roughness).toBe(2); // Cartoonist: 2
+    expect(firstRect.opacity).toBe(60);
+  });
+});

src/actions/actionStyles.ts

@@ -64,8 +64,8 @@ export const actionPasteStyles = register({
             });
 
             redrawTextBoundingBox(
-              element,
-              getContainerElement(element),
+              newElement,
+              getContainerElement(newElement),
               appState,
             );
           }

src/actions/index.ts

@@ -17,6 +17,7 @@ export {
   actionChangeFontSize,
   actionChangeFontFamily,
   actionChangeTextAlign,
+  actionChangeVerticalAlign,
 } from "./actionProperties";
 
 export {

src/actions/manager.tsx

@@ -10,6 +10,31 @@ import {
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { MODES } from "../constants";
+import { trackEvent } from "../analytics";
+
+const trackAction = (
+  action: Action,
+  source: "ui" | "keyboard" | "api",
+  value: any,
+) => {
+  if (action.trackEvent !== false) {
+    try {
+      if (action.trackEvent === true) {
+        trackEvent(
+          action.name,
+          source,
+          typeof value === "number" || typeof value === "string"
+            ? String(value)
+            : undefined,
+        );
+      } else {
+        action.trackEvent?.(action, source, value);
+      }
+    } catch (error) {
+      console.error("error while logging action:", error);
+    }
+  }
+};
 
 export class ActionManager implements ActionsManagerInterface {
   actions = {} as ActionsManagerInterface["actions"];
@@ -65,9 +90,15 @@ export class ActionManager implements ActionsManagerInterface {
           ),
       );
 
-    if (data.length === 0) {
+    if (data.length !== 1) {
+      if (data.length > 1) {
+        console.warn("Canceling as multiple actions match this shortcut", data);
+      }
       return false;
     }
+
+    const action = data[0];
+
     const { viewModeEnabled } = this.getAppState();
     if (viewModeEnabled) {
       if (!Object.values(MODES).includes(data[0].name)) {
@@ -75,6 +106,8 @@ export class ActionManager implements ActionsManagerInterface {
       }
     }
 
+    trackAction(action, "keyboard", null);
+
     event.preventDefault();
     this.updater(
       data[0].perform(
@@ -96,6 +129,7 @@ export class ActionManager implements ActionsManagerInterface {
         this.app,
       ),
     );
+    trackAction(action, "api", null);
   }
 
   /**
@@ -122,6 +156,8 @@ export class ActionManager implements ActionsManagerInterface {
             this.app,
           ),
         );
+
+        trackAction(action, "ui", formState);
       };
 
       return (

src/actions/shortcuts.ts

@@ -1,8 +1,10 @@
 import { t } from "../i18n";
 import { isDarwin } from "../keys";
 import { getShortcutKey } from "../utils";
+import { ActionName } from "./types";
 
-export type ShortcutName =
+export type ShortcutName = SubtypeOf<
+  ActionName,
   | "cut"
   | "copy"
   | "paste"
@@ -26,7 +28,8 @@ export type ShortcutName =
   | "viewMode"
   | "flipHorizontal"
   | "flipVertical"
-  | "link";
+  | "hyperlink"
+>;
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -63,11 +66,11 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   flipHorizontal: [getShortcutKey("Shift+H")],
   flipVertical: [getShortcutKey("Shift+V")],
   viewMode: [getShortcutKey("Alt+R")],
-  link: [getShortcutKey("CtrlOrCmd+K")],
+  hyperlink: [getShortcutKey("CtrlOrCmd+K")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {
   const shortcuts = shortcutMap[name];
-  // if multiple shortcuts availiable, take the first one
+  // if multiple shortcuts available, take the first one
   return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };

src/actions/types.ts

@@ -82,6 +82,7 @@ export type ActionName =
   | "zoomToSelection"
   | "changeFontFamily"
   | "changeTextAlign"
+  | "changeVerticalAlign"
   | "toggleFullScreen"
   | "toggleShortcuts"
   | "group"
@@ -105,7 +106,7 @@ export type ActionName =
   | "increaseFontSize"
   | "decreaseFontSize"
   | "unbindText"
-  | "link";
+  | "hyperlink";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -136,6 +137,9 @@ export interface Action {
     appState: AppState,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
+  trackEvent?:
+    | boolean
+    | ((action: Action, type: "ui" | "keyboard" | "api", value: any) => void);
 }
 
 export interface ActionsManagerInterface {

src/analytics.ts

@@ -3,16 +3,16 @@ export const trackEvent =
   process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
   typeof window !== "undefined" &&
   window.gtag
-    ? (category: string, name: string, label?: string, value?: number) => {
-        window.gtag("event", name, {
+    ? (category: string, action: string, label?: string, value?: number) => {
+        window.gtag("event", action, {
           event_category: category,
           event_label: label,
           value,
         });
       }
     : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
-    ? (category: string, name: string, label?: string, value?: number) => {}
-    : (category: string, name: string, label?: string, value?: number) => {
+    ? (category: string, action: string, label?: string, value?: number) => {}
+    : (category: string, action: string, label?: string, value?: number) => {
         // Uncomment the next line to track locally
-        // console.info("Track Event", category, name, label, value);
+        // console.info("Track Event", category, action, label, value);
       };

src/charts.ts

@@ -1,5 +1,10 @@
 import colors from "./colors";
-import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, ENV } from "./constants";
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  ENV,
+  VERTICAL_ALIGN,
+} from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@@ -103,7 +108,7 @@ const transposeCells = (cells: string[][]) => {
 };
 
 export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
-  // Copy/paste from excel, spreadhseets, tsv, csv.
+  // Copy/paste from excel, spreadsheets, tsv, csv.
   // For now we only accept 2 columns with an optional header
 
   // Check for tab separated values
@@ -161,7 +166,7 @@ const commonProps = {
   strokeSharpness: "sharp",
   strokeStyle: "solid",
   strokeWidth: 1,
-  verticalAlign: "middle",
+  verticalAlign: VERTICAL_ALIGN.MIDDLE,
 } as const;
 
 const getChartDimentions = (spreadsheet: Spreadsheet) => {

src/clipboard.ts

@@ -124,7 +124,7 @@ const getSystemClipboard = async (
 };
 
 /**
- * Attemps to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard. Prefers system clipboard.
  */
 export const parseClipboard = async (
   event: ClipboardEvent | null,

src/components/Actions.tsx

@@ -19,6 +19,7 @@ import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
+import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
 
 export const SelectedShapeActions = ({
   appState,
@@ -35,6 +36,15 @@ export const SelectedShapeActions = ({
     getNonDeletedElements(elements),
     appState,
   );
+
+  let isSingleElementBoundContainer = false;
+  if (
+    targetElements.length === 2 &&
+    (hasBoundTextElement(targetElements[0]) ||
+      hasBoundTextElement(targetElements[1]))
+  ) {
+    isSingleElementBoundContainer = true;
+  }
   const isEditing = Boolean(appState.editingElement);
   const isMobile = useIsMobile();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
@@ -100,6 +110,10 @@ export const SelectedShapeActions = ({
         </>
       )}
 
+      {targetElements.some(
+        (element) =>
+          hasBoundTextElement(element) || isBoundToContainer(element),
+      ) && renderAction("changeVerticalAlign")}
       {(canHaveArrowheads(elementType) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
@@ -117,7 +131,7 @@ export const SelectedShapeActions = ({
         </div>
       </fieldset>
 
-      {targetElements.length > 1 && (
+      {targetElements.length > 1 && !isSingleElementBoundContainer && (
         <fieldset>
           <legend>{t("labels.align")}</legend>
           <div className="buttonList">
@@ -158,7 +172,7 @@ export const SelectedShapeActions = ({
             {!isMobile && renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
-            {targetElements.length === 1 && renderAction("link")}
+            {targetElements.length === 1 && renderAction("hyperlink")}
           </div>
         </fieldset>
       )}

src/components/App.tsx

@@ -69,6 +69,7 @@ import {
   TOUCH_CTX_MENU_TIMEOUT,
   URL_HASH_KEYS,
   URL_QUERY_KEYS,
+  VERTICAL_ALIGN,
   ZOOM_STEP,
 } from "../constants";
 import { loadFromBlob } from "../data";
@@ -126,6 +127,7 @@ import {
   isInitializedImageElement,
   isLinearElement,
   isLinearElementType,
+  isTextBindableContainer,
 } from "../element/typeChecks";
 import {
   ExcalidrawBindableElement,
@@ -139,6 +141,7 @@ import {
   ExcalidrawImageElement,
   FileId,
   NonDeletedExcalidrawElement,
+  ExcalidrawTextContainer,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -166,7 +169,7 @@ import { renderScene } from "../renderer";
 import { invalidateShapeForElement } from "../renderer/renderElement";
 import {
   calculateScrollCenter,
-  getElementContainingPosition,
+  getTextBindableContainerAtPosition,
   getElementsAtPosition,
   getElementsWithinSelection,
   getNormalizedZoom,
@@ -237,7 +240,7 @@ import {
   bindTextToShapeAfterDuplication,
   getApproxMinLineHeight,
   getApproxMinLineWidth,
-  getBoundTextElementId,
+  getBoundTextElement,
 } from "../element/textElement";
 import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
 import {
@@ -2156,28 +2159,40 @@ class App extends React.Component<AppProps, AppState> {
         window.devicePixelRatio,
       );
 
-    // bind to container when shouldBind is true or
-    // clicked on center of container
-    const container =
-      shouldBind || parentCenterPosition
-        ? getElementContainingPosition(
-            this.scene.getElements().filter((ele) => !isTextElement(ele)),
-            sceneX,
-            sceneY,
-          )
-        : null;
+    let existingTextElement: NonDeleted<ExcalidrawTextElement> | null = null;
+    let container: ExcalidrawTextContainer | null = null;
 
-    let existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
+    const selectedElements = getSelectedElements(
+      this.scene.getElements(),
+      this.state,
+    );
 
-    // consider bounded text element if container present
-    if (container) {
-      const boundTextElementId = getBoundTextElementId(container);
-      if (boundTextElementId) {
-        existingTextElement = this.scene.getElement(
-          boundTextElementId,
-        ) as ExcalidrawTextElement;
+    if (selectedElements.length === 1) {
+      if (isTextElement(selectedElements[0])) {
+        existingTextElement = selectedElements[0];
+      } else if (isTextBindableContainer(selectedElements[0])) {
+        container = selectedElements[0];
+        existingTextElement = getBoundTextElement(container);
       }
     }
+
+    existingTextElement =
+      existingTextElement ?? this.getTextElementAtPosition(sceneX, sceneY);
+
+    // bind to container when shouldBind is true or
+    // clicked on center of container
+    if (
+      !container &&
+      !existingTextElement &&
+      (shouldBind || parentCenterPosition)
+    ) {
+      container = getTextBindableContainerAtPosition(
+        this.scene.getElements().filter((ele) => !isTextElement(ele)),
+        sceneX,
+        sceneY,
+      );
+    }
+
     if (!existingTextElement && container) {
       const fontString = {
         fontSize: this.state.currentItemFontSize,
@@ -2225,7 +2240,7 @@ class App extends React.Component<AppProps, AppState> {
             ? "center"
             : this.state.currentItemTextAlign,
           verticalAlign: parentCenterPosition
-            ? "middle"
+            ? VERTICAL_ALIGN.MIDDLE
             : DEFAULT_VERTICAL_ALIGN,
           containerId: container?.id ?? undefined,
           groupIds: container?.groupIds ?? [],
@@ -2233,19 +2248,13 @@ class App extends React.Component<AppProps, AppState> {
 
     this.setState({ editingElement: element });
 
-    if (existingTextElement) {
-      // if text element is no longer centered to a container, reset
-      // verticalAlign to default because it's currently internal-only
-      if (!parentCenterPosition || element.textAlign !== "center") {
-        mutateElement(element, { verticalAlign: DEFAULT_VERTICAL_ALIGN });
-      }
-    } else {
+    if (!existingTextElement) {
       this.scene.replaceAllElements([
         ...this.scene.getElementsIncludingDeleted(),
         element,
       ]);
 
-      // case: creating new text not centered to parent elemenent → offset Y
+      // case: creating new text not centered to parent element → offset Y
       // so that the text is centered to cursor position
       if (!parentCenterPosition) {
         mutateElement(element, {
@@ -3006,7 +3015,7 @@ class App extends React.Component<AppProps, AppState> {
         /*
          * Reenable next paste in case of disabled middle click paste for
          * any reason:
-         * - rigth click paste
+         * - right click paste
          * - empty clipboard
          */
         const enableNextPaste = () => {
@@ -4742,7 +4751,7 @@ class App extends React.Component<AppProps, AppState> {
       const width = height * (image.naturalWidth / image.naturalHeight);
 
       // add current imageElement width/height to account for previous centering
-      // of the placholder image
+      // of the placeholder image
       const x = imageElement.x + imageElement.width / 2 - width / 2;
       const y = imageElement.y + imageElement.height / 2 - height / 2;
 
@@ -4923,7 +4932,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private handleAppOnDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     try {
-      const file = event.dataTransfer.files[0];
+      const file = event.dataTransfer.files.item(0);
 
       if (isSupportedImageFile(file)) {
         // first attempt to decode scene from the image if it's embedded
@@ -4999,7 +5008,7 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    const file = event.dataTransfer?.files[0];
+    const file = event.dataTransfer?.files.item(0);
     if (
       file?.type === MIME_TYPES.excalidrawlib ||
       file?.name?.endsWith(".excalidrawlib")
@@ -5015,7 +5024,7 @@ class App extends React.Component<AppProps, AppState> {
           this.setState({ isLoading: false, errorMessage: error.message }),
         );
       // default: assume an Excalidraw file regardless of extension/MimeType
-    } else {
+    } else if (file) {
       this.setState({ isLoading: true });
       if (nativeFileSystemSupported) {
         try {
@@ -5437,7 +5446,7 @@ class App extends React.Component<AppProps, AppState> {
     canvas: HTMLCanvasElement | null,
     scale: number,
   ) {
-    const elementClickedInside = getElementContainingPosition(
+    const elementClickedInside = getTextBindableContainerAtPosition(
       this.scene
         .getElementsIncludingDeleted()
         .filter((element) => !isTextElement(element)),

src/components/ColorPicker.scss

@@ -46,7 +46,7 @@
     top: -11px;
   }
 
-  .color-picker-content {
+  .color-picker-content--default {
     padding: 0.5rem;
     display: grid;
     grid-template-columns: repeat(5, auto);
@@ -59,6 +59,26 @@
     }
   }
 
+  .color-picker-content--canvas {
+    display: flex;
+    flex-direction: column;
+    padding: 0.25rem;
+
+    &-title {
+      color: $oc-gray-6;
+      font-size: 12px;
+      padding: 0 0.25rem;
+    }
+
+    &-colors {
+      padding: 0.5rem 0;
+
+      .color-picker-swatch {
+        margin: 0 0.25rem;
+      }
+    }
+  }
+
   .color-picker-content .color-input-container {
     grid-column: 1 / span 5;
   }

src/components/ColorPicker.tsx

@@ -7,6 +7,53 @@ import { isArrowKey, KEYS } from "../keys";
 import { t, getLanguage } from "../i18n";
 import { isWritableElement } from "../utils";
 import colors from "../colors";
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+
+const MAX_CUSTOM_COLORS = 5;
+const MAX_DEFAULT_COLORS = 15;
+
+export const getCustomColors = (
+  elements: readonly ExcalidrawElement[],
+  type: "elementBackground" | "elementStroke",
+) => {
+  const customColors: string[] = [];
+  const updatedElements = elements
+    .filter((element) => !element.isDeleted)
+    .sort((ele1, ele2) => ele2.updated - ele1.updated);
+
+  let index = 0;
+  const elementColorTypeMap = {
+    elementBackground: "backgroundColor",
+    elementStroke: "strokeColor",
+  };
+  const colorType = elementColorTypeMap[type] as
+    | "backgroundColor"
+    | "strokeColor";
+  while (
+    index < updatedElements.length &&
+    customColors.length < MAX_CUSTOM_COLORS
+  ) {
+    const element = updatedElements[index];
+
+    if (
+      customColors.length < MAX_CUSTOM_COLORS &&
+      isCustomColor(element[colorType], type) &&
+      !customColors.includes(element[colorType])
+    ) {
+      customColors.push(element[colorType]);
+    }
+    index++;
+  }
+  return customColors;
+};
+
+const isCustomColor = (
+  color: string,
+  type: "elementBackground" | "elementStroke",
+) => {
+  return !colors[type].includes(color);
+};
 
 const isValidColor = (color: string) => {
   const style = new Option().style;
@@ -35,6 +82,7 @@ const keyBindings = [
   ["1", "2", "3", "4", "5"],
   ["q", "w", "e", "r", "t"],
   ["a", "s", "d", "f", "g"],
+  ["z", "x", "c", "v", "b"],
 ].flat();
 
 const Picker = ({
@@ -45,6 +93,7 @@ const Picker = ({
   label,
   showInput = true,
   type,
+  elements,
 }: {
   colors: string[];
   color: string | null;
@@ -53,12 +102,20 @@ const Picker = ({
   label: string;
   showInput: boolean;
   type: "canvasBackground" | "elementBackground" | "elementStroke";
+  elements: readonly ExcalidrawElement[];
 }) => {
   const firstItem = React.useRef<HTMLButtonElement>();
   const activeItem = React.useRef<HTMLButtonElement>();
   const gallery = React.useRef<HTMLDivElement>();
   const colorInput = React.useRef<HTMLInputElement>();
 
+  const [customColors] = React.useState(() => {
+    if (type === "canvasBackground") {
+      return [];
+    }
+    return getCustomColors(elements, type);
+  });
+
   React.useEffect(() => {
     // After the component is first mounted focus on first input
     if (activeItem.current) {
@@ -85,23 +142,42 @@ const Picker = ({
     } else if (isArrowKey(event.key)) {
       const { activeElement } = document;
       const isRTL = getLanguage().rtl;
-      const index = Array.prototype.indexOf.call(
-        gallery!.current!.children,
+      let isCustom = false;
+      let index = Array.prototype.indexOf.call(
+        gallery!.current!.querySelector(".color-picker-content--default")!
+          .children,
         activeElement,
       );
+      if (index === -1) {
+        index = Array.prototype.indexOf.call(
+          gallery!.current!.querySelector(
+            ".color-picker-content--canvas-colors",
+          )!.children,
+          activeElement,
+        );
+        if (index !== -1) {
+          isCustom = true;
+        }
+      }
+      const parentSelector = isCustom
+        ? gallery!.current!.querySelector(
+            ".color-picker-content--canvas-colors",
+          )!
+        : gallery!.current!.querySelector(".color-picker-content--default")!;
+
       if (index !== -1) {
-        const length = gallery!.current!.children.length - (showInput ? 1 : 0);
+        const length = parentSelector!.children.length - (showInput ? 1 : 0);
         const nextIndex =
           event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
             ? (index + 1) % length
             : event.key === (isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT)
             ? (length + index - 1) % length
-            : event.key === KEYS.ARROW_DOWN
+            : !isCustom && event.key === KEYS.ARROW_DOWN
             ? (index + 5) % length
-            : event.key === KEYS.ARROW_UP
+            : !isCustom && event.key === KEYS.ARROW_UP
             ? (length + index - 5) % length
             : index;
-        (gallery!.current!.children![nextIndex] as any).focus();
+        (parentSelector!.children![nextIndex] as HTMLElement)?.focus();
       }
       event.preventDefault();
     } else if (
@@ -109,7 +185,15 @@ const Picker = ({
       !isWritableElement(event.target)
     ) {
       const index = keyBindings.indexOf(event.key.toLowerCase());
-      (gallery!.current!.children![index] as any).focus();
+      const isCustom = index >= MAX_DEFAULT_COLORS;
+      const parentSelector = isCustom
+        ? gallery!.current!.querySelector(
+            ".color-picker-content--canvas-colors",
+          )!
+        : gallery!.current!.querySelector(".color-picker-content--default")!;
+      const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
+      (parentSelector!.children![actualIndex] as HTMLElement)?.focus();
+
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
       event.preventDefault();
@@ -119,6 +203,50 @@ const Picker = ({
     event.stopPropagation();
   };
 
+  const renderColors = (colors: Array<string>, custom: boolean = false) => {
+    return colors.map((_color, i) => {
+      const _colorWithoutHash = _color.replace("#", "");
+      const keyBinding = custom
+        ? keyBindings[i + MAX_DEFAULT_COLORS]
+        : keyBindings[i];
+      const label = custom
+        ? _colorWithoutHash
+        : t(`colors.${_colorWithoutHash}`);
+      return (
+        <button
+          className="color-picker-swatch"
+          onClick={(event) => {
+            (event.currentTarget as HTMLButtonElement).focus();
+            onChange(_color);
+          }}
+          title={`${label}${
+            !isTransparent(_color) ? ` (${_color})` : ""
+          } — ${keyBinding.toUpperCase()}`}
+          aria-label={label}
+          aria-keyshortcuts={keyBindings[i]}
+          style={{ color: _color }}
+          key={_color}
+          ref={(el) => {
+            if (!custom && el && i === 0) {
+              firstItem.current = el;
+            }
+            if (el && _color === color) {
+              activeItem.current = el;
+            }
+          }}
+          onFocus={() => {
+            onChange(_color);
+          }}
+        >
+          {isTransparent(_color) ? (
+            <div className="color-picker-transparent"></div>
+          ) : undefined}
+          <span className="color-picker-keybinding">{keyBinding}</span>
+        </button>
+      );
+    });
+  };
+
   return (
     <div
       className={`color-picker color-picker-type-${type}`}
@@ -138,41 +266,20 @@ const Picker = ({
         }}
         tabIndex={0}
       >
-        {colors.map((_color, i) => {
-          const _colorWithoutHash = _color.replace("#", "");
-          return (
-            <button
-              className="color-picker-swatch"
-              onClick={(event) => {
-                (event.currentTarget as HTMLButtonElement).focus();
-                onChange(_color);
-              }}
-              title={`${t(`colors.${_colorWithoutHash}`)}${
-                !isTransparent(_color) ? ` (${_color})` : ""
-              } — ${keyBindings[i].toUpperCase()}`}
-              aria-label={t(`colors.${_colorWithoutHash}`)}
-              aria-keyshortcuts={keyBindings[i]}
-              style={{ color: _color }}
-              key={_color}
-              ref={(el) => {
-                if (el && i === 0) {
-                  firstItem.current = el;
-                }
-                if (el && _color === color) {
-                  activeItem.current = el;
-                }
-              }}
-              onFocus={() => {
-                onChange(_color);
-              }}
-            >
-              {isTransparent(_color) ? (
-                <div className="color-picker-transparent"></div>
-              ) : undefined}
-              <span className="color-picker-keybinding">{keyBindings[i]}</span>
-            </button>
-          );
-        })}
+        <div className="color-picker-content--default">
+          {renderColors(colors)}
+        </div>
+        {!!customColors.length && (
+          <div className="color-picker-content--canvas">
+            <span className="color-picker-content--canvas-title">
+              {t("labels.canvasColors")}
+            </span>
+            <div className="color-picker-content--canvas-colors">
+              {renderColors(customColors, true)}
+            </div>
+          </div>
+        )}
+
         {showInput && (
           <ColorInput
             color={color}
@@ -246,6 +353,8 @@ export const ColorPicker = ({
   label,
   isActive,
   setActive,
+  elements,
+  appState,
 }: {
   type: "canvasBackground" | "elementBackground" | "elementStroke";
   color: string | null;
@@ -253,6 +362,8 @@ export const ColorPicker = ({
   label: string;
   isActive: boolean;
   setActive: (active: boolean) => void;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState;
 }) => {
   const pickerButton = React.useRef<HTMLButtonElement>(null);
 
@@ -294,6 +405,7 @@ export const ColorPicker = ({
               label={label}
               showInput={false}
               type={type}
+              elements={elements}
             />
           </Popover>
         ) : null}

src/components/LayerUI.tsx

@@ -238,7 +238,7 @@ const LayerUI = ({
         className={CLASSES.SHAPE_ACTIONS_MENU}
         padding={2}
         style={{
-          // we want to make sure this doesn't overflow so substracting 200
+          // we want to make sure this doesn't overflow so subtracting 200
           // which is approximately height of zoom footer and top left menu items with some buffer
           // if active file name is displayed, subtracting 248 to account for its height
           maxHeight: `${appState.height - (appState.fileHandle ? 248 : 200)}px`,

src/components/icons.tsx

@@ -885,6 +885,40 @@ export const TextAlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
   ),
 );
 
+export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
+  createIcon(
+    <path
+      d="m16,132l416,0c8.837,0 16,-7.163 16,-16l0,-40c0,-8.837 -7.163,-16 -16,-16l-416,0c-8.837,0 -16,7.163 -16,16l0,40c0,8.837 7.163,16 16,16zm0,160l416,0c8.837,0 16,-7.163 16,-16l0,-40c0,-8.837 -7.163,-16 -16,-16l-416,0c-8.837,0 -16,7.163 -16,16l0,40c0,8.837 7.163,16 16,16z"
+      fill={iconFillColor(theme)}
+      strokeLinecap="round"
+    />,
+    { width: 448, height: 512 },
+  ),
+);
+
+export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
+  createIcon(
+    <path
+      d="M16,292L432,292C440.837,292 448,284.837 448,276L448,236C448,227.163 440.837,220 432,220L16,220C7.163,220 0,227.163 0,236L0,276C0,284.837 7.163,292 16,292ZM16,452L432,452C440.837,452 448,444.837 448,436L448,396C448,387.163 440.837,380 432,380L16,380C7.163,380 0,387.163 0,396L0,436C0,444.837 7.163,452 16,452Z"
+      fill={iconFillColor(theme)}
+      strokeLinecap="round"
+    />,
+    { width: 448, height: 512 },
+  ),
+);
+
+export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
+  createIcon(
+    <path
+      transform="matrix(1,0,0,1,0,80)"
+      d="M16,132L432,132C440.837,132 448,124.837 448,116L448,76C448,67.163 440.837,60 432,60L16,60C7.163,60 0,67.163 0,76L0,116C0,124.837 7.163,132 16,132ZM16,292L432,292C440.837,292 448,284.837 448,276L448,236C448,227.163 440.837,220 432,220L16,220C7.163,220 0,227.163 0,236L0,276C0,284.837 7.163,292 16,292Z"
+      fill={iconFillColor(theme)}
+      strokeLinecap="round"
+    />,
+    { width: 448, height: 512 },
+  ),
+);
+
 export const publishIcon = createIcon(
   <path
     d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"

src/constants.ts

@@ -63,6 +63,8 @@ export const ENV = {
 
 export const CLASSES = {
   SHAPE_ACTIONS_MENU: "App-menu__left",
+  SHAPE_ACTIONS_MOBILE_MENU: "App-mobile-menu",
+  MOBILE_TOOLBAR: "App-toolbar-content",
 };
 
 // 1-based in case we ever do `if(element.fontFamily)`
@@ -182,3 +184,9 @@ export const VERSIONS = {
 } as const;
 
 export const BOUND_TEXT_PADDING = 5;
+
+export const VERTICAL_ALIGN = {
+  TOP: "top",
+  MIDDLE: "middle",
+  BOTTOM: "bottom",
+};

src/element/Hyperlink.tsx

@@ -31,6 +31,7 @@ import { isPointHittingElementBoundingBox } from "./collision";
 import { getElementAbsoluteCoords } from "./";
 
 import "./Hyperlink.scss";
+import { trackEvent } from "../analytics";
 
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -69,6 +70,10 @@ export const Hyperlink = ({
 
     const link = normalizeLink(inputRef.current.value);
 
+    if (!element.link && link) {
+      trackEvent("hyperlink", "create");
+    }
+
     mutateElement(element, { link });
     setAppState({ showHyperlinkPopup: "info" });
   }, [element, setAppState]);
@@ -108,6 +113,7 @@ export const Hyperlink = ({
   }, [appState, element, isEditing, setAppState]);
 
   const handleRemove = useCallback(() => {
+    trackEvent("hyperlink", "delete");
     mutateElement(element, { link: null });
     if (isEditing) {
       inputRef.current!.value = "";
@@ -116,6 +122,7 @@ export const Hyperlink = ({
   }, [setAppState, element, isEditing]);
 
   const onEdit = () => {
+    trackEvent("hyperlink", "edit", "popup-ui");
     setAppState({ showHyperlinkPopup: "editor" });
   };
   const { x, y } = getCoordsForPopover(element, appState);
@@ -239,11 +246,12 @@ export const isLocalLink = (link: string | null) => {
 };
 
 export const actionLink = register({
-  name: "link",
+  name: "hyperlink",
   perform: (elements, appState) => {
     if (appState.showHyperlinkPopup === "editor") {
       return false;
     }
+
     return {
       elements,
       appState: {
@@ -254,6 +262,9 @@ export const actionLink = register({
       commitToHistory: true,
     };
   },
+  trackEvent: (action, source) => {
+    trackEvent("hyperlink", "edit", source);
+  },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
   contextItemLabel: (elements, appState) =>
     getContextMenuLabel(elements, appState),
@@ -400,6 +411,7 @@ const renderTooltip = (
     },
     "top",
   );
+  trackEvent("hyperlink", "tooltip", "link-icon");
 
   IS_HYPERLINK_TOOLTIP_VISIBLE = true;
 };

src/element/collision.ts

@@ -646,7 +646,7 @@ const getCorners = (
 
 // Returns intersection of `line` with `segment`, with `segment` moved by
 // `gap` in its polar direction.
-// If intersection conincides with second segment point returns empty array.
+// If intersection coincides with second segment point returns empty array.
 const intersectSegment = (
   line: GA.Line,
   segment: [GA.Point, GA.Point],

src/element/dragElements.ts

@@ -3,10 +3,9 @@ import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
-import Scene from "../scene/Scene";
 import { NonDeletedExcalidrawElement } from "./types";
 import { AppState, PointerDownState } from "../types";
-import { getBoundTextElementId } from "./textElement";
+import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
 
 export const dragSelectedElements = (
@@ -39,16 +38,14 @@ export const dragSelectedElements = (
       // container is part of a group, but we're dragging the container directly
       (appState.editingGroupId && !isSelectedViaGroup(appState, element))
     ) {
-      const boundTextElementId = getBoundTextElementId(element);
-      if (boundTextElementId) {
-        const textElement =
-          Scene.getScene(element)!.getElement(boundTextElementId);
+      const textElement = getBoundTextElement(element);
+      if (textElement) {
         updateElementCoords(
           lockDirection,
           distanceX,
           distanceY,
           pointerDownState,
-          textElement!,
+          textElement,
           offset,
         );
       }

src/element/linearElementEditor.ts

@@ -401,7 +401,7 @@ export class LinearElementEditor {
       ret.hitElement = element;
     } else {
       // You might be wandering why we are storing the binding elements on
-      // LinearElementEditor and passing them in, insted of calculating them
+      // LinearElementEditor and passing them in, instead of calculating them
       // from the end points of the `linearElement` - this is to allow disabling
       // binding (which needs to happen at the point the user finishes moving
       // the point).

src/element/newElement.ts

@@ -22,8 +22,7 @@ import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import { getContainerElement, measureText, wrapText } from "./textElement";
-import { isBoundToContainer } from "./typeChecks";
-import { BOUND_TEXT_PADDING } from "../constants";
+import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
 
 type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -175,7 +174,7 @@ const getAdjustedDimensions = (
   let y: number;
   if (
     textAlign === "center" &&
-    verticalAlign === "middle" &&
+    verticalAlign === VERTICAL_ALIGN.MIDDLE &&
     !element.containerId
   ) {
     const prevMetrics = measureText(
@@ -221,8 +220,7 @@ const getAdjustedDimensions = (
 
   // make sure container dimensions are set properly when
   // text editor overflows beyond viewport dimensions
-  if (isBoundToContainer(element)) {
-    const container = getContainerElement(element)!;
+  if (container) {
     let height = container.height;
     let width = container.width;
     if (nextHeight > height - BOUND_TEXT_PADDING * 2) {

src/element/resizeElements.ts

@@ -1,4 +1,4 @@
-import { SHIFT_LOCKING_ANGLE } from "../constants";
+import { BOUND_TEXT_PADDING, SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";
 
 import {
@@ -35,6 +35,7 @@ import {
 import { Point, PointerDownState } from "../types";
 import Scene from "../scene/Scene";
 import {
+  getApproxMinLineHeight,
   getApproxMinLineWidth,
   getBoundTextElement,
   getBoundTextElementId,
@@ -105,7 +106,7 @@ export const transformElements = (
       updateBoundElements(element);
     } else if (transformHandleType) {
       resizeSingleElement(
-        pointerDownState.originalElements.get(element.id) as typeof element,
+        pointerDownState.originalElements,
         shouldMaintainAspectRatio,
         element,
         transformHandleType,
@@ -140,7 +141,6 @@ export const transformElements = (
         pointerX,
         pointerY,
       );
-      handleBindTextResize(selectedElements, transformHandleType);
       return true;
     }
   }
@@ -397,7 +397,7 @@ const resizeSingleTextElement = (
 };
 
 export const resizeSingleElement = (
-  stateAtResizeStart: NonDeletedExcalidrawElement,
+  originalElements: PointerDownState["originalElements"],
   shouldMaintainAspectRatio: boolean,
   element: NonDeletedExcalidrawElement,
   transformHandleDirection: TransformHandleDirection,
@@ -405,6 +405,7 @@ export const resizeSingleElement = (
   pointerX: number,
   pointerY: number,
 ) => {
+  const stateAtResizeStart = originalElements.get(element.id)!;
   // Gets bounds corners
   const [x1, y1, x2, y2] = getResizedElementAbsoluteCoords(
     stateAtResizeStart,
@@ -429,8 +430,6 @@ export const resizeSingleElement = (
     element.height,
   );
 
-  const boundTextElementId = getBoundTextElementId(element);
-
   const boundsCurrentWidth = esx2 - esx1;
   const boundsCurrentHeight = esy2 - esy1;
 
@@ -441,6 +440,9 @@ export const resizeSingleElement = (
   let scaleX = atStartBoundsWidth / boundsCurrentWidth;
   let scaleY = atStartBoundsHeight / boundsCurrentHeight;
 
+  let boundTextFont: { fontSize?: number; baseline?: number } = {};
+  const boundTextElement = getBoundTextElement(element);
+
   if (transformHandleDirection.includes("e")) {
     scaleX = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
   }
@@ -453,6 +455,7 @@ export const resizeSingleElement = (
   if (transformHandleDirection.includes("n")) {
     scaleY = (startBottomRight[1] - rotatedPointer[1]) / boundsCurrentHeight;
   }
+
   // Linear elements dimensions differ from bounds dimensions
   const eleInitialWidth = stateAtResizeStart.width;
   const eleInitialHeight = stateAtResizeStart.height;
@@ -482,6 +485,37 @@ export const resizeSingleElement = (
     }
   }
 
+  if (boundTextElement) {
+    const stateOfBoundTextElementAtResize = originalElements.get(
+      boundTextElement.id,
+    ) as typeof boundTextElement | undefined;
+    if (stateOfBoundTextElementAtResize) {
+      boundTextFont = {
+        fontSize: stateOfBoundTextElementAtResize.fontSize,
+        baseline: stateOfBoundTextElementAtResize.baseline,
+      };
+    }
+    if (shouldMaintainAspectRatio) {
+      const nextFont = measureFontSizeFromWH(
+        boundTextElement,
+        eleNewWidth - BOUND_TEXT_PADDING * 2,
+        eleNewHeight - BOUND_TEXT_PADDING * 2,
+      );
+      if (nextFont === null) {
+        return;
+      }
+      boundTextFont = {
+        fontSize: nextFont.size,
+        baseline: nextFont.baseline,
+      };
+    } else {
+      const minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
+      const minHeight = getApproxMinLineHeight(getFontString(boundTextElement));
+      eleNewWidth = Math.ceil(Math.max(eleNewWidth, minWidth));
+      eleNewHeight = Math.ceil(Math.max(eleNewHeight, minHeight));
+    }
+  }
+
   const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] =
     getResizedElementAbsoluteCoords(
       stateAtResizeStart,
@@ -491,11 +525,6 @@ export const resizeSingleElement = (
   const newBoundsWidth = newBoundsX2 - newBoundsX1;
   const newBoundsHeight = newBoundsY2 - newBoundsY1;
 
-  // don't allow resize to negative dimensions when text is bounded to container
-  if ((newBoundsWidth < 0 || newBoundsHeight < 0) && boundTextElementId) {
-    return;
-  }
-
   // Calculate new topLeft based on fixed corner during resize
   let newTopLeft = [...startTopLeft] as [number, number];
   if (["n", "w", "nw"].includes(transformHandleDirection)) {
@@ -588,13 +617,9 @@ export const resizeSingleElement = (
       ],
     });
   }
-  let minWidth = 0;
-  const boundTextElement = getBoundTextElement(element);
-  if (boundTextElement) {
-    minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
-  }
+
   if (
-    resizedElement.width >= minWidth &&
+    resizedElement.width !== 0 &&
     resizedElement.height !== 0 &&
     Number.isFinite(resizedElement.x) &&
     Number.isFinite(resizedElement.y)
@@ -603,7 +628,10 @@ export const resizeSingleElement = (
       newSize: { width: resizedElement.width, height: resizedElement.height },
     });
     mutateElement(element, resizedElement);
-    handleBindTextResize([element], transformHandleDirection);
+    if (boundTextElement && boundTextFont) {
+      mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
+    }
+    handleBindTextResize(element, transformHandleDirection);
   }
 };
 
@@ -674,7 +702,25 @@ const resizeMultipleElements = (
         }
         const width = element.width * scale;
         const height = element.height * scale;
+        const boundTextElement = getBoundTextElement(element);
         let font: { fontSize?: number; baseline?: number } = {};
+
+        if (boundTextElement) {
+          const nextFont = measureFontSizeFromWH(
+            boundTextElement,
+            width - BOUND_TEXT_PADDING * 2,
+            height - BOUND_TEXT_PADDING * 2,
+          );
+
+          if (nextFont === null) {
+            return null;
+          }
+          font = {
+            fontSize: nextFont.size,
+            baseline: nextFont.baseline,
+          };
+        }
+
         if (isTextElement(element)) {
           const nextFont = measureFontSizeFromWH(element, width, height);
           if (nextFont === null) {
@@ -718,6 +764,15 @@ const resizeMultipleElements = (
     if (updates) {
       elements.forEach((element, index) => {
         mutateElement(element, updates[index]);
+        const boundTextElement = getBoundTextElement(element);
+
+        if (boundTextElement) {
+          mutateElement(boundTextElement, {
+            fontSize: updates[index].fontSize,
+            baseline: updates[index].baseline,
+          });
+          handleBindTextResize(element, transformHandleType);
+        }
       });
     }
   }

src/element/sizeHelpers.test.ts

@@ -32,7 +32,7 @@ describe("getPerfectElementSize", () => {
     expect(width).toEqual(135);
     expect(height).toEqual(135);
   });
-  it("should return height:0 and width:0 when width and heigh are 0", () => {
+  it("should return height:0 and width:0 when width and height are 0", () => {
     const { height, width } = getPerfectElementSize("arrow", 0, 0);
     expect(width).toEqual(0);
     expect(height).toEqual(0);

src/element/textElement.ts

@@ -1,6 +1,5 @@
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
-  ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
@@ -8,10 +7,11 @@ import {
   NonDeletedExcalidrawElement,
 } from "./types";
 import { mutateElement } from "./mutateElement";
-import { BOUND_TEXT_PADDING } from "../constants";
+import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
 import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
 import { AppState } from "../types";
+import { isTextElement } from ".";
 
 export const redrawTextBoundingBox = (
   element: ExcalidrawTextElement,
@@ -39,11 +39,19 @@ export const redrawTextBoundingBox = (
   let coordY = element.y;
   // Resize container and vertically center align the text
   if (container) {
-    coordY = container.y + container.height / 2 - metrics.height / 2;
     let nextHeight = container.height;
-    if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
-      nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
-      coordY = container.y + nextHeight / 2 - metrics.height / 2;
+
+    if (element.verticalAlign === VERTICAL_ALIGN.TOP) {
+      coordY = container.y + BOUND_TEXT_PADDING;
+    } else if (element.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+      coordY =
+        container.y + container.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) {
+        nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
+        coordY = container.y + nextHeight / 2 - metrics.height / 2;
+      }
     }
     mutateElement(container, { height: nextHeight });
   }
@@ -71,91 +79,99 @@ export const bindTextToShapeAfterDuplication = (
     const boundTextElementId = getBoundTextElementId(element);
 
     if (boundTextElementId) {
-      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId)!;
-      mutateElement(
-        sceneElementMap.get(newElementId) as ExcalidrawBindableElement,
-        {
-          boundElements: element.boundElements?.concat({
-            type: "text",
-            id: newTextElementId,
-          }),
-        },
-      );
-      mutateElement(
-        sceneElementMap.get(newTextElementId) as ExcalidrawTextElement,
-        {
-          containerId: newElementId,
-        },
-      );
+      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);
+      if (newTextElementId) {
+        const newContainer = sceneElementMap.get(newElementId);
+        if (newContainer) {
+          mutateElement(newContainer, {
+            boundElements: element.boundElements?.concat({
+              type: "text",
+              id: newTextElementId,
+            }),
+          });
+        }
+        const newTextElement = sceneElementMap.get(newTextElementId);
+        if (newTextElement && isTextElement(newTextElement)) {
+          mutateElement(newTextElement, {
+            containerId: newContainer ? newElementId : null,
+          });
+        }
+      }
     }
   });
 };
 
 export const handleBindTextResize = (
-  elements: readonly NonDeletedExcalidrawElement[],
+  element: NonDeletedExcalidrawElement,
   transformHandleType: MaybeTransformHandleType,
 ) => {
-  elements.forEach((element) => {
-    const boundTextElementId = getBoundTextElementId(element);
-    if (boundTextElementId) {
-      const textElement = Scene.getScene(element)!.getElement(
-        boundTextElementId,
-      ) as ExcalidrawTextElement;
-      if (textElement && textElement.text) {
-        if (!element) {
-          return;
-        }
-        let text = textElement.text;
-        let nextHeight = textElement.height;
-        let containerHeight = element.height;
-        let nextBaseLine = textElement.baseline;
-        if (transformHandleType !== "n" && transformHandleType !== "s") {
-          if (text) {
-            text = wrapText(
-              textElement.originalText,
-              getFontString(textElement),
-              element.width,
-            );
-          }
-
-          const dimensions = measureText(
-            text,
+  const boundTextElementId = getBoundTextElementId(element);
+  if (boundTextElementId) {
+    const textElement = Scene.getScene(element)!.getElement(
+      boundTextElementId,
+    ) as ExcalidrawTextElement;
+    if (textElement && textElement.text) {
+      if (!element) {
+        return;
+      }
+      let text = textElement.text;
+      let nextHeight = textElement.height;
+      let containerHeight = element.height;
+      let nextBaseLine = textElement.baseline;
+      if (transformHandleType !== "n" && transformHandleType !== "s") {
+        if (text) {
+          text = wrapText(
+            textElement.originalText,
             getFontString(textElement),
             element.width,
           );
-          nextHeight = dimensions.height;
-          nextBaseLine = dimensions.baseline;
-        }
-        // increase height in case text element height exceeds
-        if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) {
-          containerHeight = nextHeight + BOUND_TEXT_PADDING * 2;
-          const diff = containerHeight - element.height;
-          // fix the y coord when resizing from ne/nw/n
-          const updatedY =
-            transformHandleType === "ne" ||
-            transformHandleType === "nw" ||
-            transformHandleType === "n"
-              ? element.y - diff
-              : element.y;
-          mutateElement(element, {
-            height: containerHeight,
-            y: updatedY,
-          });
         }
 
-        const updatedY = element.y + containerHeight / 2 - nextHeight / 2;
-        mutateElement(textElement, {
+        const dimensions = measureText(
           text,
-          // preserve padding and set width correctly
-          width: element.width - BOUND_TEXT_PADDING * 2,
-          height: nextHeight,
-          x: element.x + BOUND_TEXT_PADDING,
+          getFontString(textElement),
+          element.width,
+        );
+        nextHeight = dimensions.height;
+        nextBaseLine = dimensions.baseline;
+      }
+      // increase height in case text element height exceeds
+      if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) {
+        containerHeight = nextHeight + BOUND_TEXT_PADDING * 2;
+        const diff = containerHeight - element.height;
+        // fix the y coord when resizing from ne/nw/n
+        const updatedY =
+          transformHandleType === "ne" ||
+          transformHandleType === "nw" ||
+          transformHandleType === "n"
+            ? element.y - diff
+            : element.y;
+        mutateElement(element, {
+          height: containerHeight,
           y: updatedY,
-          baseline: nextBaseLine,
         });
       }
+
+      let updatedY;
+      if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
+        updatedY = element.y + BOUND_TEXT_PADDING;
+      } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+        updatedY = element.y + element.height - nextHeight - BOUND_TEXT_PADDING;
+      } else {
+        updatedY = element.y + element.height / 2 - nextHeight / 2;
+      }
+
+      mutateElement(textElement, {
+        text,
+        // preserve padding and set width correctly
+        width: element.width - BOUND_TEXT_PADDING * 2,
+        height: nextHeight,
+        x: element.x + BOUND_TEXT_PADDING,
+        y: updatedY,
+        baseline: nextBaseLine,
+      });
     }
-  });
+  }
 };
 
 // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
@@ -355,6 +371,7 @@ export const charWidth = (() => {
       const width = getTextWidth(char, font);
       cachedCharWidth[font][ascii] = width;
     }
+
     return cachedCharWidth[font][ascii];
   };
 
@@ -367,14 +384,14 @@ export const charWidth = (() => {
   };
 })();
 export const getApproxMinLineWidth = (font: FontString) => {
-  const minCharWidth = getMinCharWidth(font);
-  if (minCharWidth === 0) {
+  const maxCharWidth = getMaxCharWidth(font);
+  if (maxCharWidth === 0) {
     return (
       measureText(DUMMY_TEXT.split("").join("\n"), font).width +
       BOUND_TEXT_PADDING * 2
     );
   }
-  return minCharWidth + BOUND_TEXT_PADDING * 2;
+  return maxCharWidth + BOUND_TEXT_PADDING * 2;
 };
 
 export const getApproxMinLineHeight = (font: FontString) => {
@@ -391,6 +408,15 @@ export const getMinCharWidth = (font: FontString) => {
   return Math.min(...cacheWithOutEmpty);
 };
 
+export const getMaxCharWidth = (font: FontString) => {
+  const cache = charWidth.getCache(font);
+  if (!cache) {
+    return 0;
+  }
+  const cacheWithOutEmpty = cache.filter((val) => val !== undefined);
+  return Math.max(...cacheWithOutEmpty);
+};
+
 export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
   // Generally lower case is used so converting to lower case
   const dummyText = DUMMY_TEXT.toLocaleLowerCase();
@@ -416,7 +442,10 @@ export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
 };
 
 export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
-  return container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id;
+  return container?.boundElements?.length
+    ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
+        null
+    : null;
 };
 
 export const getBoundTextElement = (element: ExcalidrawElement | null) => {

src/element/textWysiwyg.test.tsx

@@ -12,6 +12,8 @@ import {
   ExcalidrawTextElementWithContainer,
 } from "./types";
 import * as textElementUtils from "./textElement";
+import { API } from "../tests/helpers/api";
+import { mutateElement } from "./mutateElement";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
@@ -19,7 +21,201 @@ const tab = "    ";
 const mouse = new Pointer("mouse");
 
 describe("textWysiwyg", () => {
-  describe("Test unbounded text", () => {
+  describe("start text editing", () => {
+    const { h } = window;
+    beforeEach(async () => {
+      await render(<ExcalidrawApp />);
+      h.elements = [];
+    });
+
+    it("should prefer editing selected text element (non-bindable container present)", async () => {
+      const line = API.createElement({
+        type: "line",
+        width: 100,
+        height: 0,
+        points: [
+          [0, 0],
+          [100, 0],
+        ],
+      });
+      const textSize = 20;
+      const text = API.createElement({
+        type: "text",
+        text: "ola",
+        x: line.width / 2 - textSize / 2,
+        y: -textSize / 2,
+        width: textSize,
+        height: textSize,
+      });
+      h.elements = [text, line];
+
+      API.setSelectedElements([text]);
+
+      Keyboard.keyPress(KEYS.ENTER);
+
+      expect(h.state.editingElement?.id).toBe(text.id);
+      expect(
+        (h.state.editingElement as ExcalidrawTextElement).containerId,
+      ).toBe(null);
+    });
+
+    it("should prefer editing selected text element (bindable container present)", async () => {
+      const container = API.createElement({
+        type: "rectangle",
+        width: 100,
+        boundElements: [],
+      });
+      const textSize = 20;
+
+      const boundText = API.createElement({
+        type: "text",
+        text: "ola",
+        x: container.width / 2 - textSize / 2,
+        y: container.height / 2 - textSize / 2,
+        width: textSize,
+        height: textSize,
+        containerId: container.id,
+      });
+
+      const boundText2 = API.createElement({
+        type: "text",
+        text: "ola",
+        x: container.width / 2 - textSize / 2,
+        y: container.height / 2 - textSize / 2,
+        width: textSize,
+        height: textSize,
+        containerId: container.id,
+      });
+
+      h.elements = [container, boundText, boundText2];
+
+      mutateElement(container, {
+        boundElements: [{ type: "text", id: boundText.id }],
+      });
+
+      API.setSelectedElements([boundText2]);
+
+      Keyboard.keyPress(KEYS.ENTER);
+
+      expect(h.state.editingElement?.id).toBe(boundText2.id);
+    });
+
+    it("should not create bound text on ENTER if text exists at container center", () => {
+      const container = API.createElement({
+        type: "rectangle",
+        width: 100,
+      });
+      const textSize = 20;
+      const text = API.createElement({
+        type: "text",
+        text: "ola",
+        x: container.width / 2 - textSize / 2,
+        y: container.height / 2 - textSize / 2,
+        width: textSize,
+        height: textSize,
+        containerId: container.id,
+      });
+
+      h.elements = [container, text];
+
+      API.setSelectedElements([container]);
+
+      Keyboard.keyPress(KEYS.ENTER);
+
+      expect(h.state.editingElement?.id).toBe(text.id);
+    });
+
+    it("should edit existing bound text on ENTER even if higher z-index unbound text exists at container center", () => {
+      const container = API.createElement({
+        type: "rectangle",
+        width: 100,
+        boundElements: [],
+      });
+      const textSize = 20;
+
+      const boundText = API.createElement({
+        type: "text",
+        text: "ola",
+        x: container.width / 2 - textSize / 2,
+        y: container.height / 2 - textSize / 2,
+        width: textSize,
+        height: textSize,
+        containerId: container.id,
+      });
+
+      const boundText2 = API.createElement({
+        type: "text",
+        text: "ola",
+        x: container.width / 2 - textSize / 2,
+        y: container.height / 2 - textSize / 2,
+        width: textSize,
+        height: textSize,
+        containerId: container.id,
+      });
+
+      h.elements = [container, boundText, boundText2];
+
+      mutateElement(container, {
+        boundElements: [{ type: "text", id: boundText.id }],
+      });
+
+      API.setSelectedElements([container]);
+
+      Keyboard.keyPress(KEYS.ENTER);
+
+      expect(h.state.editingElement?.id).toBe(boundText.id);
+    });
+
+    it("should edit text under cursor when clicked with text tool", () => {
+      const text = API.createElement({
+        type: "text",
+        text: "ola",
+        x: 60,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+
+      h.elements = [text];
+      UI.clickTool("text");
+
+      mouse.clickAt(text.x + 50, text.y + 50);
+
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      expect(editor).not.toBe(null);
+      expect(h.state.editingElement?.id).toBe(text.id);
+      expect(h.elements.length).toBe(1);
+    });
+
+    it("should edit text under cursor when double-clicked with selection tool", () => {
+      const text = API.createElement({
+        type: "text",
+        text: "ola",
+        x: 60,
+        y: 0,
+        width: 100,
+        height: 100,
+      });
+
+      h.elements = [text];
+      UI.clickTool("selection");
+
+      mouse.doubleClickAt(text.x + 50, text.y + 50);
+
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      expect(editor).not.toBe(null);
+      expect(h.state.editingElement?.id).toBe(text.id);
+      expect(h.elements.length).toBe(1);
+    });
+  });
+
+  describe("Test container-unbound text", () => {
     const { h } = window;
 
     let textarea: HTMLTextAreaElement;
@@ -235,7 +431,7 @@ describe("textWysiwyg", () => {
     });
   });
 
-  describe("Test bounded text", () => {
+  describe("Test container-bound text", () => {
     let rectangle: any;
     const { h } = window;
 
@@ -315,6 +511,39 @@ describe("textWysiwyg", () => {
       ]);
     });
 
+    it("shouldn't bind to non-text-bindable containers", async () => {
+      const line = API.createElement({
+        type: "line",
+        width: 100,
+        height: 0,
+        points: [
+          [0, 0],
+          [100, 0],
+        ],
+      });
+      h.elements = [line];
+
+      UI.clickTool("text");
+
+      mouse.clickAt(line.x + line.width / 2, line.y + line.height / 2);
+
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, {
+        target: {
+          value: "Hello World!",
+        },
+      });
+      fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
+      editor.dispatchEvent(new Event("input"));
+
+      expect(line.boundElements).toBe(null);
+      expect(h.elements[1].type).toBe("text");
+      expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null);
+    });
+
     it("should update font family correctly on undo/redo by selecting bounded text when font family was updated", async () => {
       expect(h.elements.length).toBe(1);
 

src/element/textWysiwyg.tsx

@@ -7,7 +7,7 @@ import {
 } from "../utils";
 import Scene from "../scene/Scene";
 import { isBoundToContainer, isTextElement } from "./typeChecks";
-import { CLASSES, BOUND_TEXT_PADDING } from "../constants";
+import { CLASSES, BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
 import {
   ExcalidrawElement,
   ExcalidrawTextElement,
@@ -105,6 +105,8 @@ export const textWysiwyg = ({
     const updatedElement = Scene.getScene(element)?.getElement(
       id,
     ) as ExcalidrawTextElement;
+    const { textAlign, verticalAlign } = updatedElement;
+
     const approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
     if (updatedElement && isTextElement(updatedElement)) {
       let coordX = updatedElement.x;
@@ -114,7 +116,7 @@ export const textWysiwyg = ({
 
       let maxHeight = updatedElement.height;
       let width = updatedElement.width;
-      // Set to element height by default since thats
+      // 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) {
@@ -140,7 +142,7 @@ export const textWysiwyg = ({
         maxHeight = container.height - BOUND_TEXT_PADDING * 2;
         width = maxWidth;
         // The coordinates of text box set a distance of
-        // 30px to preserve padding
+        // 5px to preserve padding
         coordX = container.x + BOUND_TEXT_PADDING;
         // autogrow container height if text exceeds
         if (height > maxHeight) {
@@ -160,12 +162,34 @@ export const textWysiwyg = ({
         // is reached
         else {
           // vertically center align the text
-          coordY = container.y + container.height / 2 - height / 2;
+          if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
+            coordY = container.y + container.height / 2 - height / 2;
+          }
+          if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+            coordY =
+              container.y + container.height - height - BOUND_TEXT_PADDING;
+          }
         }
       }
       const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
-      const { textAlign } = updatedElement;
+      const initialSelectionStart = editable.selectionStart;
+      const initialSelectionEnd = editable.selectionEnd;
+      const initialLength = editable.value.length;
       editable.value = updatedElement.originalText;
+
+      // restore cursor position after value updated so it doesn't
+      // go to the end of text when container auto expanded
+      if (
+        initialSelectionStart === initialSelectionEnd &&
+        initialSelectionEnd !== initialLength
+      ) {
+        // get diff between length and selection end and shift
+        // the cursor by "diff" times to position correctly
+        const diff = initialLength - initialSelectionEnd;
+        editable.selectionStart = editable.value.length - diff;
+        editable.selectionEnd = editable.value.length - diff;
+      }
+
       const lines = updatedElement.originalText.split("\n");
       const lineHeight = updatedElement.containerId
         ? approxLineHeight
@@ -195,6 +219,7 @@ export const textWysiwyg = ({
           editorMaxHeight,
         ),
         textAlign,
+        verticalAlign,
         color: updatedElement.strokeColor,
         opacity: updatedElement.opacity / 100,
         filter: "var(--theme-filter)",
@@ -258,7 +283,7 @@ export const textWysiwyg = ({
       // as that gets updated below
       const lines = editable.scrollHeight / getApproxLineHeight(font);
       // auto increase height only when lines  > 1 so its
-      // measured correctly and vertically alignes for
+      // measured correctly and vertically aligns for
       // first line as well as setting height to "auto"
       // doubles the height as soon as user starts typing
       if (isBoundToContainer(element) && lines > 1) {
@@ -397,7 +422,7 @@ export const textWysiwyg = ({
   };
 
   /**
-   * @returns indeces of start positions of selected lines, in reverse order
+   * @returns indices of start positions of selected lines, in reverse order
    */
   const getSelectedLinesStartIndices = () => {
     let { selectionStart, selectionEnd, value } = editable;
@@ -517,9 +542,29 @@ export const textWysiwyg = ({
       target.closest(".color-picker-input") &&
       isWritableElement(target);
 
+    const isShapeActionsPanel =
+      (target instanceof HTMLElement || target instanceof SVGElement) &&
+      (target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) ||
+        target.closest(`.${CLASSES.SHAPE_ACTIONS_MOBILE_MENU}`) ||
+        target.closest(`.${CLASSES.MOBILE_TOOLBAR}`));
+
     setTimeout(() => {
-      editable.onblur = handleSubmit;
-      if (target && isTargetColorPicker) {
+      editable.onblur = () => {
+        app.setState({
+          toastMessage:
+            target instanceof HTMLElement
+              ? target.tagName ?? "no tagName"
+              : "not an HTMLElement",
+        });
+        if (isShapeActionsPanel) {
+          return;
+        }
+        app.setState({
+          toastMessage: "debug: onblur",
+        });
+        handleSubmit();
+      };
+      if (target && (isTargetColorPicker || isShapeActionsPanel)) {
         target.onblur = () => {
           editable.focus();
         };
@@ -537,13 +582,22 @@ export const textWysiwyg = ({
       event.target instanceof HTMLInputElement &&
       event.target.closest(".color-picker-input") &&
       isWritableElement(event.target);
+    const isShapeActionsPanel =
+      (event.target instanceof HTMLElement ||
+        event.target instanceof SVGElement) &&
+      (event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) ||
+        event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MOBILE_MENU}`) ||
+        event.target.closest(`.${CLASSES.MOBILE_TOOLBAR}`));
     if (
       ((event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
-        event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
+        isShapeActionsPanel &&
         !isWritableElement(event.target)) ||
       isTargetColorPicker
     ) {
+      app.setState({
+        toastMessage: "debug: onPointerDown",
+      });
       editable.onblur = null;
       window.addEventListener("pointerup", bindBlurEvent);
       // handle edge-case where pointerup doesn't fire e.g. due to user

src/element/typeChecks.ts

@@ -8,6 +8,7 @@ import {
   InitializedExcalidrawImageElement,
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
+  ExcalidrawTextContainer,
 } from "./types";
 
 export const isGenericElement = (
@@ -91,7 +92,9 @@ export const isBindableElement = (
   );
 };
 
-export const isTextBindableContainer = (element: ExcalidrawElement | null) => {
+export const isTextBindableContainer = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawTextContainer => {
   return (
     element != null &&
     (element.type === "rectangle" ||

src/element/types.ts

@@ -1,5 +1,5 @@
 import { Point } from "../types";
-import { FONT_FAMILY, THEME } from "../constants";
+import { FONT_FAMILY, THEME, VERTICAL_ALIGN } from "../constants";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid";
@@ -12,7 +12,9 @@ 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 VerticalAlign = "top" | "middle";
+
+type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
+export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
 
 type _ExcalidrawElementBase = Readonly<{
   id: string;
@@ -133,8 +135,14 @@ export type ExcalidrawBindableElement =
   | ExcalidrawTextElement
   | ExcalidrawImageElement;
 
+export type ExcalidrawTextContainer =
+  | ExcalidrawRectangleElement
+  | ExcalidrawDiamondElement
+  | ExcalidrawEllipseElement
+  | ExcalidrawImageElement;
+
 export type ExcalidrawTextElementWithContainer = {
-  containerId: ExcalidrawGenericElement["id"];
+  containerId: ExcalidrawTextContainer["id"];
 } & ExcalidrawTextElement;
 
 export type PointBinding = {

src/excalidraw-app/app_constants.ts

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

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -16,6 +16,7 @@ import {
   withBatchedUpdates,
 } from "../../utils";
 import {
+  CURSOR_SYNC_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
   FIREBASE_STORAGE_PREFIXES,
   INITIAL_SCENE_UPDATE_TIMEOUT,
@@ -27,8 +28,8 @@ import {
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
+  getCollabServer,
   SocketUpdateDataSource,
-  SOCKET_SERVER,
 } from "../data";
 import {
   isSavedToFirebase,
@@ -353,32 +354,29 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
     this.isCollaborating = true;
 
-    const { default: socketIOClient }: any = await import(
+    const { default: socketIOClient } = await import(
       /* webpackChunkName: "socketIoClient" */ "socket.io-client"
     );
 
-    this.portal.open(socketIOClient(SOCKET_SERVER), roomId, roomKey);
+    try {
+      const socketServerData = await getCollabServer();
 
-    if (existingRoomLinkData) {
-      this.excalidrawAPI.resetScene();
+      this.portal.socket = this.portal.open(
+        socketIOClient(socketServerData.url, {
+          transports: socketServerData.polling
+            ? ["websocket", "polling"]
+            : ["websocket"],
+        }),
+        roomId,
+        roomKey,
+      );
+    } catch (error: any) {
+      console.error(error);
+      this.setState({ errorMessage: error.message });
+      return null;
+    }
 
-      try {
-        const elements = await loadFromFirebase(
-          roomId,
-          roomKey,
-          this.portal.socket,
-        );
-        if (elements) {
-          scenePromise.resolve({
-            elements,
-            scrollToContent: true,
-          });
-        }
-      } catch (error: any) {
-        // log the error and move on. other peers will sync us the scene.
-        console.error(error);
-      }
-    } else {
+    if (!existingRoomLinkData) {
       const elements = this.excalidrawAPI.getSceneElements().map((element) => {
         if (isImageElement(element) && element.status === "saved") {
           return newElementWith(element, { status: "pending" });
@@ -402,14 +400,17 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     }
 
     // fallback in case you're not alone in the room but still don't receive
-    // initial SCENE_UPDATE message
+    // initial SCENE_INIT message
     this.socketInitializationTimer = window.setTimeout(() => {
-      this.initializeSocket();
+      this.initializeRoom({
+        roomLinkData: existingRoomLinkData,
+        fetchScene: true,
+      });
       scenePromise.resolve(null);
     }, INITIAL_SCENE_UPDATE_TIMEOUT);
 
     // All socket listeners are moving to Portal
-    this.portal.socket!.on(
+    this.portal.socket.on(
       "client-broadcast",
       async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
         if (!this.portal.roomKey) {
@@ -427,7 +428,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             return;
           case SCENE.INIT: {
             if (!this.portal.socketInitialized) {
-              this.initializeSocket();
+              this.initializeRoom({ fetchScene: false });
               const remoteElements = decryptedData.payload.elements;
               const reconciledElements = this.reconcileElements(remoteElements);
               this.handleRemoteSceneUpdate(reconciledElements, {
@@ -481,12 +482,15 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       },
     );
 
-    this.portal.socket!.on("first-in-room", () => {
+    this.portal.socket.on("first-in-room", async () => {
       if (this.portal.socket) {
         this.portal.socket.off("first-in-room");
       }
-      this.initializeSocket();
-      scenePromise.resolve(null);
+      const sceneData = await this.initializeRoom({
+        fetchScene: true,
+        roomLinkData: existingRoomLinkData,
+      });
+      scenePromise.resolve(sceneData);
     });
 
     this.initializeIdleDetector();
@@ -498,9 +502,45 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     return scenePromise;
   };
 
-  private initializeSocket = () => {
-    this.portal.socketInitialized = true;
+  private initializeRoom = async ({
+    fetchScene,
+    roomLinkData,
+  }:
+    | {
+        fetchScene: true;
+        roomLinkData: { roomId: string; roomKey: string } | null;
+      }
+    | { fetchScene: false; roomLinkData?: null }) => {
     clearTimeout(this.socketInitializationTimer!);
+    if (fetchScene && roomLinkData && this.portal.socket) {
+      this.excalidrawAPI.resetScene();
+
+      try {
+        const elements = await loadFromFirebase(
+          roomLinkData.roomId,
+          roomLinkData.roomKey,
+          this.portal.socket,
+        );
+        if (elements) {
+          this.setLastBroadcastedOrReceivedSceneVersion(
+            getSceneVersion(elements),
+          );
+
+          return {
+            elements,
+            scrollToContent: true,
+          };
+        }
+      } catch (error: any) {
+        // log the error and move on. other peers will sync us the scene.
+        console.error(error);
+      } finally {
+        this.portal.socketInitialized = true;
+      }
+    } else {
+      this.portal.socketInitialized = true;
+    }
+    return null;
   };
 
   private reconcileElements = (
@@ -564,7 +604,9 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       window.clearTimeout(this.idleTimeoutId);
       this.idleTimeoutId = null;
     }
+
     this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
+
     if (!this.activeIntervalId) {
       this.activeIntervalId = window.setInterval(
         this.reportActive,
@@ -639,15 +681,18 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     return this.excalidrawAPI.getSceneElementsIncludingDeleted();
   };
 
-  onPointerUpdate = (payload: {
-    pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
-    button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
-    pointersMap: Gesture["pointers"];
-  }) => {
-    payload.pointersMap.size < 2 &&
-      this.portal.socket &&
-      this.portal.broadcastMouseLocation(payload);
-  };
+  onPointerUpdate = throttle(
+    (payload: {
+      pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
+      button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
+      pointersMap: Gesture["pointers"];
+    }) => {
+      payload.pointersMap.size < 2 &&
+        this.portal.socket &&
+        this.portal.broadcastMouseLocation(payload);
+    },
+    CURSOR_SYNC_TIMEOUT,
+  );
 
   onIdleStateChange = (userState: UserIdleState) => {
     this.setState({ userState });

src/excalidraw-app/collab/Portal.tsx

@@ -45,6 +45,8 @@ class Portal {
     this.socket.on("room-user-change", (clients: string[]) => {
       this.collab.setCollaborators(clients);
     });
+
+    return socket;
   }
 
   close() {

src/excalidraw-app/data/index.ts

@@ -30,7 +30,34 @@ const generateRoomId = async () => {
   return bytesToHexString(buffer);
 };
 
-export const SOCKET_SERVER = process.env.REACT_APP_SOCKET_SERVER_URL;
+/**
+ * Right now the reason why we resolve connection params (url, polling...)
+ * from upstream is to allow changing the params immediately when needed without
+ * having to wait for clients to update the SW.
+ *
+ * If REACT_APP_WS_SERVER_URL env is set, we use that instead (useful for forks)
+ */
+export const getCollabServer = async (): Promise<{
+  url: string;
+  polling: boolean;
+}> => {
+  if (process.env.REACT_APP_WS_SERVER_URL) {
+    return {
+      url: process.env.REACT_APP_WS_SERVER_URL,
+      polling: true,
+    };
+  }
+
+  try {
+    const resp = await fetch(
+      `${process.env.REACT_APP_PORTAL_URL}/collab-server`,
+    );
+    return await resp.json();
+  } catch (error) {
+    console.error(error);
+    throw new Error(t("errors.cannotResolveCollabServer"));
+  }
+};
 
 export type EncryptedData = {
   data: ArrayBuffer;

src/ga.ts

@@ -62,7 +62,7 @@ const NVECTOR_BASE = ["1", "e0", "e1", "e2", "e01", "e20", "e12", "e012"];
 export const nvector = (value: number = 0, index: number = 0): NVector => {
   const result = [0, 0, 0, 0, 0, 0, 0, 0];
   if (index < 0 || index > 7) {
-    throw new Error(`Expected \`index\` betwen 0 and 7, got \`${index}\``);
+    throw new Error(`Expected \`index\` between 0 and 7, got \`${index}\``);
   }
   if (value !== 0) {
     result[index] = value;

src/galines.ts

@@ -7,7 +7,7 @@ import { Line, Point } from "./ga";
  *
  * This maps to a standard formula `a * x + b * y + c`.
  *
- * `(-b, a)` correponds to a 2D vector parallel to the line. The lines
+ * `(-b, a)` corresponds to a 2D vector parallel to the line. The lines
  * have a natural orientation, corresponding to that vector.
  *
  * The magnitude ("norm") of the line is `sqrt(a ^ 2 + b ^ 2)`.

src/global.d.ts

@@ -21,7 +21,7 @@ declare namespace NodeJS {
   interface ProcessEnv {
     readonly REACT_APP_BACKEND_V2_GET_URL: string;
     readonly REACT_APP_BACKEND_V2_POST_URL: string;
-    readonly REACT_APP_SOCKET_SERVER_URL: string;
+    readonly REACT_APP_PORTAL_URL: string;
     readonly REACT_APP_FIREBASE_CONFIG: string;
   }
 }
@@ -34,6 +34,10 @@ type Mutable<T> = {
   -readonly [P in keyof T]: T[P];
 };
 
+/** utility type to assert that the second type is a subtype of the first type.
+ * Returns the subtype. */
+type SubtypeOf<Supertype, Subtype extends Supertype> = Subtype;
+
 type ResolutionType<T extends (...args: any) => any> = T extends (
   ...args: any
 ) => Promise<infer R>

src/groups.ts

@@ -1,13 +1,7 @@
-import {
-  GroupId,
-  ExcalidrawElement,
-  NonDeleted,
-  ExcalidrawTextElementWithContainer,
-} from "./element/types";
+import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
 import { AppState } from "./types";
 import { getSelectedElements } from "./scene";
-import { getBoundTextElementId } from "./element/textElement";
-import Scene from "./scene/Scene";
+import { getBoundTextElement } from "./element/textElement";
 
 export const selectGroup = (
   groupId: GroupId,
@@ -182,13 +176,10 @@ export const getMaximumGroups = (
 
     const currentGroupMembers = groups.get(groupId) || [];
 
-    // Include bounded text if present when grouping
-    const boundTextElementId = getBoundTextElementId(element);
-    if (boundTextElementId) {
-      const textElement = Scene.getScene(element)!.getElement(
-        boundTextElementId,
-      ) as ExcalidrawTextElementWithContainer;
-      currentGroupMembers.push(textElement);
+    // Include bound text if present when grouping
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      currentGroupMembers.push(boundTextElement);
     }
     groups.set(groupId, [...currentGroupMembers, element]);
   });

src/locales/ar-SA.json

@@ -64,6 +64,7 @@
     "cartoonist": "كرتوني",
     "fileTitle": "إسم الملف",
     "colorPicker": "منتقي اللون",
+    "canvasColors": "",
     "canvasBackground": "خلفية اللوحة",
     "drawingCanvas": "لوحة الرسم",
     "layers": "الطبقات",
@@ -107,9 +108,9 @@
     "increaseFontSize": "تكبير حجم الخط",
     "unbindText": "",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "تعديل الرابط",
+      "create": "إنشاء رابط",
+      "label": "رابط"
     }
   },
   "buttons": {
@@ -167,7 +168,7 @@
     "errorAddingToLibrary": "تعذر إضافة العنصر للمكتبة",
     "errorRemovingFromLibrary": "تعذر إزالة العنصر من المكتبة",
     "confirmAddLibrary": "هذا سيضيف {{numShapes}} شكل إلى مكتبتك. هل أنت متأكد؟",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "يبدو أن هذه الصورة لا تحتوي على أي بيانات مشهد. هل قمت بتمكين تضمين المشهد أثناء التصدير؟",
     "cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة",
     "invalidSceneUrl": "تعذر استيراد المشهد من عنوان URL المتوفر. إما أنها مشوهة، أو لا تحتوي على بيانات Excalidraw JSON صالحة.",
     "resetLibrary": "هذا سوف يمسح مكتبتك. هل أنت متأكد؟",
@@ -179,7 +180,8 @@
     "imageInsertError": "تعذر إدراج الصورة. حاول مرة أخرى لاحقاً...",
     "fileTooBig": "الملف كبير جداً. الحد الأقصى المسموح به للحجم هو {{maxSize}}.",
     "svgImageInsertError": "تعذر إدراج صورة SVG. يبدو أن ترميز SVG غير صحيح.",
-    "invalidSVGString": "SVG غير صالح."
+    "invalidSVGString": "SVG غير صالح.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "تحديد",
@@ -217,7 +219,7 @@
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
-    "publishLibrary": "",
+    "publishLibrary": "نشر مكتبتك",
     "bindTextToElement": "",
     "deepBoxSelect": ""
   },
@@ -289,46 +291,46 @@
     "zoomToSelection": "تكبير للعنصر المحدد"
   },
   "clearCanvasDialog": {
-    "title": ""
+    "title": "مسح اللوحة"
   },
   "publishDialog": {
-    "title": "",
-    "itemName": "",
-    "authorName": "",
-    "githubUsername": "",
-    "twitterUsername": "",
-    "libraryName": "",
-    "libraryDesc": "",
-    "website": "",
+    "title": "نشر المكتبة",
+    "itemName": "إسم العنصر",
+    "authorName": "إسم المؤلف",
+    "githubUsername": "اسم المستخدم في جيت هب",
+    "twitterUsername": "اسم المستخدم في تويتر",
+    "libraryName": "اسم المكتبة",
+    "libraryDesc": "وصف المكتبة",
+    "website": "الموقع",
     "placeholder": {
-      "authorName": "",
-      "libraryName": "",
-      "libraryDesc": "",
+      "authorName": "اسمك أو اسم المستخدم",
+      "libraryName": "اسم مكتبتك",
+      "libraryDesc": "وصف مكتبتك لمساعدة الناس على فهم استخدامها",
       "githubHandle": "",
       "twitterHandle": "",
       "website": ""
     },
     "errors": {
       "required": "مطلوب",
-      "website": ""
+      "website": "أدخل عنوان URL صالح"
     },
     "noteDescription": {
       "pre": "",
-      "link": "",
-      "post": ""
+      "link": "مستودع المكتبة العامة",
+      "post": "ليستخدمها الآخرون في رسوماتهم."
     },
     "noteGuidelines": {
-      "pre": "",
-      "link": "",
+      "pre": "يجب الموافقة على المكتبة يدويًا أولاً. يرجى قراءة ",
+      "link": "الإرشادات",
       "post": ""
     },
     "noteLicense": {
       "pre": "",
-      "link": "",
-      "post": ""
+      "link": "رخصة إم أي تي ",
+      "post": "وهو ما يعني باختصار أنه يمكن لأي شخص استخدامها دون قيود."
     },
-    "noteItems": "",
-    "atleastOneLibItem": ""
+    "noteItems": "يجب أن يكون لكل عنصر مكتبة اسمه الخاص حتى يكون قابلاً للتصفية. سيتم تضمين عناصر المكتبة التالية:",
+    "atleastOneLibItem": "يرجى تحديد عنصر مكتبة واحد على الأقل للبدء"
   },
   "publishSuccessDialog": {
     "title": "تم إرسال المكتبة",

src/locales/bg-BG.json

@@ -64,6 +64,7 @@
     "cartoonist": "Карикатурист",
     "fileTitle": "Име на файл",
     "colorPicker": "Избор на цвят",
+    "canvasColors": "",
     "canvasBackground": "Фон на платно",
     "drawingCanvas": "Платно за рисуване",
     "layers": "Слоеве",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Селекция",

src/locales/bn-BD.json

@@ -64,6 +64,7 @@
     "cartoonist": "",
     "fileTitle": "",
     "colorPicker": "",
+    "canvasColors": "",
     "canvasBackground": "",
     "drawingCanvas": "",
     "layers": "",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "",

src/locales/ca-ES.json

@@ -64,6 +64,7 @@
     "cartoonist": "Dibuixant",
     "fileTitle": "Nom del fitxer",
     "colorPicker": "Selector de colors",
+    "canvasColors": "Usat al llenç",
     "canvasBackground": "Fons del llenç",
     "drawingCanvas": "Llenç de dibuix",
     "layers": "Capes",
@@ -103,13 +104,13 @@
     "toggleTheme": "Activa o desactiva el tema",
     "personalLib": "Biblioteca personal",
     "excalidrawLib": "Biblioteca d'Excalidraw",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
-    "unbindText": "",
+    "decreaseFontSize": "Redueix la mida de la lletra",
+    "increaseFontSize": "Augmenta la mida de la lletra",
+    "unbindText": "Desvincular el text",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Edita l'enllaç",
+      "create": "Crea un enllaç",
+      "label": "Enllaç"
     }
   },
   "buttons": {
@@ -167,7 +168,7 @@
     "errorAddingToLibrary": "No s'ha pogut afegir l'element a la biblioteca",
     "errorRemovingFromLibrary": "No s'ha pogut eliminar l'element de la biblioteca",
     "confirmAddLibrary": "Això afegirà {{numShapes}} forma(es) a la vostra biblioteca. Estàs segur?",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "Aquesta imatge no sembla contenir cap dada d'escena. Heu activat l'incrustació de l'escena durant l'exportació?",
     "cannotRestoreFromImage": "L’escena no s’ha pogut restaurar des d’aquest fitxer d’imatge",
     "invalidSceneUrl": "No s'ha pogut importar l'escena des de l'adreça URL proporcionada. Està malformada o no conté dades Excalidraw JSON vàlides.",
     "resetLibrary": "Això buidarà la biblioteca. N'esteu segur?",
@@ -179,7 +180,8 @@
     "imageInsertError": "No s'ha pogut insertar la imatge, torneu-ho a provar més tard...",
     "fileTooBig": "El fitxer és massa gros. La mida màxima permesa és {{maxSize}}.",
     "svgImageInsertError": "No ha estat possible inserir la imatge SVG. Les marques SVG semblen invàlides.",
-    "invalidSVGString": "SVG no vàlid."
+    "invalidSVGString": "SVG no vàlid.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Selecció",
@@ -193,8 +195,8 @@
     "text": "Text",
     "library": "Biblioteca",
     "lock": "Mantenir activa l'eina seleccionada desprès de dibuixar",
-    "penMode": "",
-    "link": ""
+    "penMode": "Evita el zoom i accepta solament el dibuix lliure amb bolígraf",
+    "link": "Afegeix / actualitza l'enllaç per a la forma seleccionada"
   },
   "headings": {
     "canvasActions": "Accions del llenç",
@@ -214,12 +216,12 @@
     "resizeImage": "Podeu redimensionar lliurement prement MAJÚSCULA;\nper a redimensionar des del centre, premeu ALT",
     "rotate": "Per restringir els angles mentre gira, mantenir premut el majúscul (SHIFT)",
     "lineEditor_info": "Fes doble clic o premi Enter per editar punts",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
+    "lineEditor_pointSelected": "Premeu Suprimir per a eliminar el(s) punt(s), CtrlOrCmd+D per a duplicar-lo, o arrossegueu-lo per a moure'l",
+    "lineEditor_nothingSelected": "Seleccioneu un punt per a editar-lo (premeu SHIFT si voleu\nselecció múltiple), o manteniu Alt i feu clic per a afegir més punts",
     "placeImage": "Feu clic per a col·locar la imatge o clic i arrossegar per a establir-ne la mida manualment",
     "publishLibrary": "Publiqueu la vostra pròpia llibreria",
     "bindTextToElement": "Premeu enter per a afegir-hi text",
-    "deepBoxSelect": ""
+    "deepBoxSelect": "Manteniu CtrlOrCmd per a selecció profunda, i per a evitar l'arrossegament"
   },
   "canvasError": {
     "cannotShowPreview": "No es pot mostrar la previsualització",
@@ -266,7 +268,7 @@
   "helpDialog": {
     "blog": "Llegiu el nostre blog",
     "click": "clic",
-    "deepSelect": "",
+    "deepSelect": "Selecció profunda",
     "deepBoxSelect": "",
     "curvedArrow": "Fletxa corba",
     "curvedLine": "Línia corba",
@@ -305,7 +307,7 @@
       "libraryName": "Nom de la vostra biblioteca",
       "libraryDesc": "Descripció de la biblioteca per a ajudar a la gent a entendre'n el funcionament",
       "githubHandle": "",
-      "twitterHandle": "",
+      "twitterHandle": "Usuari de twitter (opcional), per tal que puguem donar-vos crèdit quan fem la promoció a Twitter",
       "website": "Enllaç al vostre lloc web personal o a qualsevol altre (opcional)"
     },
     "errors": {

src/locales/cs-CZ.json

@@ -64,6 +64,7 @@
     "cartoonist": "",
     "fileTitle": "",
     "colorPicker": "",
+    "canvasColors": "",
     "canvasBackground": "Pozadí plátna",
     "drawingCanvas": "",
     "layers": "",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Výběr",

src/locales/da-DK.json

@@ -5,7 +5,7 @@
     "selectAll": "Marker alle",
     "multiSelect": "",
     "moveCanvas": "",
-    "cut": "",
+    "cut": "Klip",
     "copy": "Kopier",
     "copyAsPng": "Kopier til klippebord som PNG",
     "copyAsSvg": "Kopier til klippebord som SVG",
@@ -64,6 +64,7 @@
     "cartoonist": "",
     "fileTitle": "Filnavn",
     "colorPicker": "Farvevælger",
+    "canvasColors": "Brugt på lærred",
     "canvasBackground": "",
     "drawingCanvas": "",
     "layers": "",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "",

src/locales/de-DE.json

@@ -64,6 +64,7 @@
     "cartoonist": "Karikaturist",
     "fileTitle": "Dateiname",
     "colorPicker": "Farbauswähler",
+    "canvasColors": "Auf Leinwand verwendet",
     "canvasBackground": "Zeichenflächenhintergrund",
     "drawingCanvas": "Leinwand",
     "layers": "Ebenen",
@@ -179,7 +180,8 @@
     "imageInsertError": "Das Bild konnte nicht eingefügt werden. Versuche es später erneut...",
     "fileTooBig": "Die Datei ist zu groß. Die maximal zulässige Größe ist {{maxSize}}.",
     "svgImageInsertError": "SVG-Bild konnte nicht eingefügt werden. Das SVG-Markup sieht ungültig aus.",
-    "invalidSVGString": "Ungültige SVG."
+    "invalidSVGString": "Ungültige SVG.",
+    "cannotResolveCollabServer": "Konnte keine Verbindung zum Collab-Server herstellen. Bitte lade die Seite neu und versuche es erneut."
   },
   "toolBar": {
     "selection": "Auswahl",

src/locales/el-GR.json

@@ -64,6 +64,7 @@
     "cartoonist": "Σκιτσογράφος",
     "fileTitle": "Όνομα αρχείου",
     "colorPicker": "Επιλογή Χρώματος",
+    "canvasColors": "",
     "canvasBackground": "Φόντο καμβά",
     "drawingCanvas": "Σχεδίαση καμβά",
     "layers": "Στρώματα",
@@ -179,7 +180,8 @@
     "imageInsertError": "Αδυναμία εισαγωγής εικόνας. Προσπαθήστε ξανά αργότερα...",
     "fileTooBig": "Το αρχείο είναι πολύ μεγάλο. Το μέγιστο επιτρεπόμενο μέγεθος είναι {{maxSize}}.",
     "svgImageInsertError": "",
-    "invalidSVGString": "Μη έγκυρο SVG."
+    "invalidSVGString": "Μη έγκυρο SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Επιλογή",

src/locales/en.json

@@ -64,6 +64,7 @@
     "cartoonist": "Cartoonist",
     "fileTitle": "File name",
     "colorPicker": "Color picker",
+    "canvasColors": "Used on canvas",
     "canvasBackground": "Canvas background",
     "drawingCanvas": "Drawing canvas",
     "layers": "Layers",
@@ -179,7 +180,8 @@
     "imageInsertError": "Couldn't insert image. Try again later...",
     "fileTooBig": "File is too big. Maximum allowed size is {{maxSize}}.",
     "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
-    "invalidSVGString": "Invalid SVG."
+    "invalidSVGString": "Invalid SVG.",
+    "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again."
   },
   "toolBar": {
     "selection": "Selection",

src/locales/es-ES.json

@@ -64,6 +64,7 @@
     "cartoonist": "Caricatura",
     "fileTitle": "Nombre del archivo",
     "colorPicker": "Selector de color",
+    "canvasColors": "Usado en lienzo",
     "canvasBackground": "Fondo del lienzo",
     "drawingCanvas": "Lienzo de dibujo",
     "layers": "Capas",
@@ -101,15 +102,15 @@
     "showStroke": "Mostrar selector de color de trazo",
     "showBackground": "Mostrar el selector de color de fondo",
     "toggleTheme": "Alternar tema",
-    "personalLib": "",
-    "excalidrawLib": "",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
-    "unbindText": "",
+    "personalLib": "Biblioteca personal",
+    "excalidrawLib": "Biblioteca Excalidraw",
+    "decreaseFontSize": "Disminuir tamaño de letra",
+    "increaseFontSize": "Aumentar el tamaño de letra",
+    "unbindText": "Desvincular texto",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Editar enlace",
+      "create": "Crear enlace",
+      "label": "Enlace"
     }
   },
   "buttons": {
@@ -146,10 +147,10 @@
     "exitZenMode": "Salir del modo Zen",
     "cancel": "Cancelar",
     "clear": "Borrar",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "remove": "Eliminar",
+    "publishLibrary": "Publicar",
+    "submit": "Enviar",
+    "confirm": "Confirmar"
   },
   "alerts": {
     "clearReset": "Esto limpiará todo el lienzo. Estás seguro?",
@@ -171,7 +172,7 @@
     "cannotRestoreFromImage": "No se pudo restaurar la escena desde este archivo de imagen",
     "invalidSceneUrl": "No se ha podido importar la escena desde la URL proporcionada. Está mal formada, o no contiene datos de Excalidraw JSON válidos.",
     "resetLibrary": "Esto borrará tu biblioteca. ¿Estás seguro?",
-    "removeItemsFromsLibrary": "",
+    "removeItemsFromsLibrary": "¿Eliminar {{count}} elemento(s) de la biblioteca?",
     "invalidEncryptionKey": "La clave de cifrado debe tener 22 caracteres. La colaboración en vivo está deshabilitada."
   },
   "errors": {
@@ -179,7 +180,8 @@
     "imageInsertError": "No se pudo insertar la imagen. Inténtelo de nuevo más tarde...",
     "fileTooBig": "Archivo demasiado grande. El tamaño máximo permitido es {{maxSize}}.",
     "svgImageInsertError": "No se pudo insertar la imagen SVG. El código SVG parece inválido.",
-    "invalidSVGString": "SVG no válido."
+    "invalidSVGString": "SVG no válido.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Selección",
@@ -193,8 +195,8 @@
     "text": "Texto",
     "library": "Biblioteca",
     "lock": "Mantener la herramienta seleccionada activa después de dibujar",
-    "penMode": "",
-    "link": ""
+    "penMode": "Evitar el zoom de pellizco y aceptar la entrada libre sólo desde el lápiz",
+    "link": "Añadir/Actualizar enlace para una forma seleccionada"
   },
   "headings": {
     "canvasActions": "Acciones del lienzo",
@@ -202,7 +204,7 @@
     "shapes": "Formas"
   },
   "hints": {
-    "canvasPanning": "Para mover lienzo, mantenga la rueda del ratón o la barra espaciadora mientras arrastra",
+    "canvasPanning": "Para mover el lienzo, mantenga la rueda del ratón o la barra de espacio mientras arrastra",
     "linearElement": "Haz clic para dibujar múltiples puntos, arrastrar para solo una línea",
     "freeDraw": "Haz clic y arrastra, suelta al terminar",
     "text": "Consejo: también puedes añadir texto haciendo doble clic en cualquier lugar con la herramienta de selección",
@@ -214,12 +216,12 @@
     "resizeImage": "Puede redimensionar libremente pulsando SHIFT,\npulse ALT para redimensionar desde el centro",
     "rotate": "Puedes restringir los ángulos manteniendo presionado SHIFT mientras giras",
     "lineEditor_info": "Doble clic o pulse Enter para editar puntos",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
+    "lineEditor_pointSelected": "Presione Suprimir para eliminar el/los punto(s), CtrlOrCmd+D para duplicarlo, o arrástrelo para moverlo",
+    "lineEditor_nothingSelected": "Seleccione un punto a editar (mantenga MAYÚSCULAS para seleccionar múltiples),\no mantenga pulsado Alt y haga clic para añadir nuevos puntos",
     "placeImage": "Haga clic para colocar la imagen o haga clic y arrastre para establecer su tamaño manualmente",
-    "publishLibrary": "",
-    "bindTextToElement": "",
-    "deepBoxSelect": ""
+    "publishLibrary": "Publica tu propia biblioteca",
+    "bindTextToElement": "Presione Entrar para agregar",
+    "deepBoxSelect": "Mantén CtrlOrCmd para seleccionar en profundidad, y para evitar arrastrar"
   },
   "canvasError": {
     "cannotShowPreview": "No se puede mostrar la vista previa",
@@ -266,8 +268,8 @@
   "helpDialog": {
     "blog": "Lea nuestro blog",
     "click": "clic",
-    "deepSelect": "",
-    "deepBoxSelect": "",
+    "deepSelect": "Selección profunda",
+    "deepBoxSelect": "Seleccione en profundidad dentro de la caja, y evite arrastrar",
     "curvedArrow": "Flecha curva",
     "curvedLine": "Línea curva",
     "documentation": "Documentación",
@@ -292,52 +294,52 @@
     "title": "Borrar lienzo"
   },
   "publishDialog": {
-    "title": "",
-    "itemName": "",
-    "authorName": "",
-    "githubUsername": "",
-    "twitterUsername": "",
-    "libraryName": "",
-    "libraryDesc": "",
-    "website": "",
+    "title": "Publicar biblioteca",
+    "itemName": "Nombre del artículo",
+    "authorName": "Nombre del autor",
+    "githubUsername": "Nombre de usuario de Github",
+    "twitterUsername": "Nombre de usuario de Twitter",
+    "libraryName": "Nombre de la librería",
+    "libraryDesc": "Descripción de la biblioteca",
+    "website": "Sitio Web",
     "placeholder": {
-      "authorName": "",
-      "libraryName": "",
-      "libraryDesc": "",
-      "githubHandle": "",
-      "twitterHandle": "",
-      "website": ""
+      "authorName": "Nombre o nombre de usuario",
+      "libraryName": "Nombre de tu biblioteca",
+      "libraryDesc": "Descripción de su biblioteca para ayudar a la gente a entender su uso",
+      "githubHandle": "GitHub maneja (opcional), así que puede editar la biblioteca una vez enviada para su revisión",
+      "twitterHandle": "Nombre de usuario de Twitter (opcional), así que sabemos a quién acreditar cuando se promociona en Twitter",
+      "website": "Enlace a su sitio web personal o en cualquier otro lugar (opcional)"
     },
     "errors": {
-      "required": "",
-      "website": ""
+      "required": "Requerido",
+      "website": "Introduce una URL válida"
     },
     "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "Envía tu biblioteca para ser incluida en el ",
+      "link": "repositorio de librería pública",
+      "post": "para que otras personas utilicen en sus dibujos."
     },
     "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "La biblioteca debe ser aprobada manualmente primero. Por favor, lea la ",
+      "link": "pautas",
+      "post": " antes de enviar. Necesitará una cuenta de GitHub para comunicarse y hacer cambios si se solicita, pero no es estrictamente necesario."
     },
     "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "Al enviar, usted acepta que la biblioteca se publicará bajo el ",
+      "link": "Licencia MIT ",
+      "post": "que en breve significa que cualquiera puede utilizarlos sin restricciones."
     },
-    "noteItems": "",
-    "atleastOneLibItem": ""
+    "noteItems": "Cada elemento de la biblioteca debe tener su propio nombre para que sea filtrable. Los siguientes elementos de la biblioteca serán incluidos:",
+    "atleastOneLibItem": "Por favor, seleccione al menos un elemento de la biblioteca para empezar"
   },
   "publishSuccessDialog": {
-    "title": "",
-    "content": "",
-    "link": ""
+    "title": "Biblioteca enviada",
+    "content": "Gracias {{authorName}}. Su biblioteca ha sido enviada para ser revisada. Puede seguir el estado",
+    "link": "aquí"
   },
   "confirmDialog": {
-    "resetLibrary": "",
-    "removeItemsFromLib": ""
+    "resetLibrary": "Reiniciar biblioteca",
+    "removeItemsFromLib": "Eliminar elementos seleccionados de la biblioteca"
   },
   "encrypted": {
     "tooltip": "Tus dibujos están cifrados de punto a punto, por lo que los servidores de Excalidraw nunca los verán.",
@@ -359,7 +361,7 @@
     "width": "Ancho"
   },
   "toast": {
-    "addedToLibrary": "",
+    "addedToLibrary": "Añadido a la biblioteca",
     "copyStyles": "Estilos copiados.",
     "copyToClipboard": "Copiado en el portapapeles.",
     "copyToClipboardAsPng": "Copiado {{exportSelection}} al portapapeles como PNG\n({{exportColorScheme}})",

src/locales/eu-ES.json

@@ -64,6 +64,7 @@
     "cartoonist": "Marrazkilaria",
     "fileTitle": "Fitxategi izena",
     "colorPicker": "Kolore-hautatzailea",
+    "canvasColors": "",
     "canvasBackground": "Oihalaren atzeko planoa",
     "drawingCanvas": "Marrazteko oihala",
     "layers": "Geruzak",
@@ -107,9 +108,9 @@
     "increaseFontSize": "Handitu letra tamaina",
     "unbindText": "Askatu testua",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Editatu esteka",
+      "create": "Sortu esteka",
+      "label": "Esteka"
     }
   },
   "buttons": {
@@ -149,7 +150,7 @@
     "remove": "Kendu",
     "publishLibrary": "Argitaratu",
     "submit": "Bidali",
-    "confirm": "Baieztatu"
+    "confirm": "Bai"
   },
   "alerts": {
     "clearReset": "Honek oihal osoa garbituko du. Ziur zaude?",
@@ -179,7 +180,8 @@
     "imageInsertError": "Ezin izan da irudia txertatu. Saiatu berriro geroago...",
     "fileTooBig": "Fitxategia handiegia da. Onartutako gehienezko tamaina {{maxSize}} da.",
     "svgImageInsertError": "Ezin izan da SVG irudia txertatu. SVG markak baliogabea dirudi.",
-    "invalidSVGString": "SVG baliogabea."
+    "invalidSVGString": "SVG baliogabea.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Hautapena",
@@ -193,8 +195,8 @@
     "text": "Testua",
     "library": "Liburutegia",
     "lock": "Mantendu aktibo hautatutako tresna marraztu ondoren",
-    "penMode": "",
-    "link": ""
+    "penMode": "Saihestu txikiagotzea eta onartu marrazte libreko idazketa solik arkatza bidez",
+    "link": "Gehitu / Eguneratu esteka hautatutako forma baterako"
   },
   "headings": {
     "canvasActions": "Canvas ekintzak",
@@ -219,15 +221,15 @@
     "placeImage": "Egin klik irudia kokatzeko, edo egin klik eta arrastatu bere tamaina eskuz ezartzeko",
     "publishLibrary": "Argitaratu zure liburutegia",
     "bindTextToElement": "Sakatu Sartu testua gehitzeko",
-    "deepBoxSelect": ""
+    "deepBoxSelect": "Eutsi Ctrl edo Cmd sakatuta aukeraketa sakona egiteko eta arrastatzea saihesteko"
   },
   "canvasError": {
-    "cannotShowPreview": "",
-    "canvasTooBig": "",
-    "canvasTooBigTip": ""
+    "cannotShowPreview": "Ezin da oihala aurreikusi",
+    "canvasTooBig": "Agian oihala handiegia da.",
+    "canvasTooBigTip": "Aholkua: saiatu urrunen dauden elementuak pixka bat hurbiltzen."
   },
   "errorSplash": {
-    "headingMain_pre": "",
+    "headingMain_pre": "Errore bat aurkitu da. Saiatu ",
     "headingMain_button": "orria birkargatzen.",
     "clearCanvasMessage": "Birkargatzea ez bada burutzen, saiatu ",
     "clearCanvasMessage_button": "oihala garbitzen.",
@@ -266,8 +268,8 @@
   "helpDialog": {
     "blog": "Irakurri gure bloga",
     "click": "sakatu",
-    "deepSelect": "",
-    "deepBoxSelect": "",
+    "deepSelect": "Hautapen sakona",
+    "deepBoxSelect": "Hautapen sakona egin laukizuzen bidez, eta saihestu arrastatzea",
     "curvedArrow": "Gezi kurbatua",
     "curvedLine": "Lerro kurbatua",
     "documentation": "Dokumentazioa",

src/locales/fa-IR.json

@@ -64,6 +64,7 @@
     "cartoonist": "کارتونیست",
     "fileTitle": "نام فایل",
     "colorPicker": "انتخابگر رنگ",
+    "canvasColors": "",
     "canvasBackground": "بوم",
     "drawingCanvas": "بوم نقاشی",
     "layers": "لایه ها",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "گزینش",

src/locales/fi-FI.json

@@ -64,6 +64,7 @@
     "cartoonist": "Sarjakuva",
     "fileTitle": "Tiedostonimi",
     "colorPicker": "Värin valinta",
+    "canvasColors": "",
     "canvasBackground": "Piirtoalueen tausta",
     "drawingCanvas": "Piirtoalue",
     "layers": "Tasot",
@@ -179,7 +180,8 @@
     "imageInsertError": "Kuvan lisääminen epäonnistui. Yritä myöhemmin uudelleen...",
     "fileTooBig": "Tiedosto on liian suuri. Suurin sallittu koko on {{maxSize}}.",
     "svgImageInsertError": "SVG- kuvaa ei voitu lisätä. Tiedoston SVG-sisältö näyttää virheelliseltä.",
-    "invalidSVGString": "Virheellinen SVG."
+    "invalidSVGString": "Virheellinen SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Valinta",

src/locales/fr-FR.json

@@ -64,6 +64,7 @@
     "cartoonist": "Caricaturiste",
     "fileTitle": "Nom du fichier",
     "colorPicker": "Sélecteur de couleur",
+    "canvasColors": "",
     "canvasBackground": "Arrière-plan du canevas",
     "drawingCanvas": "Zone de dessin",
     "layers": "Calques",
@@ -179,7 +180,8 @@
     "imageInsertError": "Impossible d'insérer l'image. Réessayez plus tard...",
     "fileTooBig": "Le fichier est trop volumineux. La taille maximale autorisée est de {{maxSize}}.",
     "svgImageInsertError": "Impossible d'insérer l'image SVG. Le balisage SVG semble invalide.",
-    "invalidSVGString": "SVG invalide."
+    "invalidSVGString": "SVG invalide.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Sélection",

src/locales/he-IL.json

@@ -64,6 +64,7 @@
     "cartoonist": "קריקטוריסט",
     "fileTitle": "שם קובץ",
     "colorPicker": "בחירת צבע",
+    "canvasColors": "",
     "canvasBackground": "רקע הלוח",
     "drawingCanvas": "לוח ציור",
     "layers": "שכבות",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "בחירה",

src/locales/hi-IN.json

@@ -35,11 +35,11 @@
     "arrowhead_arrow": "तीर",
     "arrowhead_bar": "बार",
     "arrowhead_dot": "बिंदु",
-    "arrowhead_triangle": "",
+    "arrowhead_triangle": "त्रिकोण",
     "fontSize": "फ़ॉन्ट का आकार",
     "fontFamily": "फ़ॉन्ट का परिवार",
     "onlySelected": "केवल चयनित",
-    "withBackground": "",
+    "withBackground": "पृष्ठभूमि",
     "exportEmbedScene": "",
     "exportEmbedScene_details": "निर्यात एम्बेड दृश्य विवरण",
     "addWatermark": "ऐड \"मेड विथ एक्सकैलिडराव\"",
@@ -64,6 +64,7 @@
     "cartoonist": "व्यंग्य चित्रकार",
     "fileTitle": "फ़ाइल का नाम",
     "colorPicker": "रंग चयन",
+    "canvasColors": "",
     "canvasBackground": "कैनवास बैकग्राउंड",
     "drawingCanvas": "कैनवास बना रहे हैं",
     "layers": "परतें",
@@ -93,18 +94,18 @@
     "centerHorizontally": "क्षैतिज केन्द्रित",
     "distributeHorizontally": "क्षैतिज रूप से वितरित करें",
     "distributeVertically": "खड़ी रूप से वितरित करें",
-    "flipHorizontal": "",
-    "flipVertical": "",
-    "viewMode": "",
+    "flipHorizontal": "दायें बायें पलटे",
+    "flipVertical": "ऊपर नीचे पलटे",
+    "viewMode": "अलग अलग देखें",
     "toggleExportColorScheme": "",
-    "share": "",
+    "share": "शेयर करें",
     "showStroke": "",
     "showBackground": "",
     "toggleTheme": "",
     "personalLib": "",
     "excalidrawLib": "",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
+    "decreaseFontSize": "आकार घटाइऐ",
+    "increaseFontSize": "फ़ॉन्ट आकार बढ़ाएँ",
     "unbindText": "",
     "link": {
       "edit": "",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "चयन",
@@ -408,11 +410,11 @@
     "5f3dc4": "",
     "364fc7": "",
     "1864ab": "",
-    "0b7285": "",
+    "0b7285": "आसमानी",
     "087f5b": "",
-    "2b8a3e": "",
+    "2b8a3e": "हरा",
     "5c940d": "",
-    "e67700": "",
-    "d9480f": ""
+    "e67700": "पीला",
+    "d9480f": "नारंगी"
   }
 }

src/locales/hu-HU.json

@@ -35,12 +35,12 @@
     "arrowhead_arrow": "Nyíl",
     "arrowhead_bar": "Oszlop",
     "arrowhead_dot": "Pont",
-    "arrowhead_triangle": "",
+    "arrowhead_triangle": "Háromszög",
     "fontSize": "Betűméret",
     "fontFamily": "Betűkészlet család",
     "onlySelected": "Csak a kijelölt",
-    "withBackground": "",
-    "exportEmbedScene": "",
+    "withBackground": "Háttér",
+    "exportEmbedScene": "Jelenet beágyazása",
     "exportEmbedScene_details": "A jelenetet leíró adatok hozzá lesznek adva a PNG/SVG fájlhoz, így a jelenetet vissza lehet majd tölteni belőle. Ez megnöveli a fájl méretét.",
     "addWatermark": "Add hozzá, hogy \"Excalidraw-val készült\"",
     "handDrawn": "Kézzel rajzolt",
@@ -62,14 +62,15 @@
     "architect": "Tervezői",
     "artist": "Művészi",
     "cartoonist": "Karikatúrás",
-    "fileTitle": "",
+    "fileTitle": "Fájlnév",
     "colorPicker": "Színválasztó",
+    "canvasColors": "Rajzvászonon használt",
     "canvasBackground": "Vászon háttérszíne",
     "drawingCanvas": "Rajzvászon",
     "layers": "Rétegek",
     "actions": "Műveletek",
     "language": "Nyelv",
-    "liveCollaboration": "",
+    "liveCollaboration": "Élő együttműködés",
     "duplicateSelection": "Duplikálás",
     "untitled": "Névtelen",
     "name": "Név",
@@ -78,7 +79,7 @@
     "group": "Csoportosítás",
     "ungroup": "Csoportbontás",
     "collaborators": "Közreműködők",
-    "showGrid": "",
+    "showGrid": "Rács megjelenítése",
     "addToLibrary": "Hozzáadás a könyvtárhoz",
     "removeFromLibrary": "Eltávólítás a könyvtárból",
     "libraryLoadingMessage": "Könyvtár betöltése…",
@@ -93,36 +94,36 @@
     "centerHorizontally": "Vízszintesen középre igazított",
     "distributeHorizontally": "Vízszintes elosztás",
     "distributeVertically": "Függőleges elosztás",
-    "flipHorizontal": "",
-    "flipVertical": "",
-    "viewMode": "",
-    "toggleExportColorScheme": "",
-    "share": "",
-    "showStroke": "",
-    "showBackground": "",
-    "toggleTheme": "",
-    "personalLib": "",
-    "excalidrawLib": "",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
-    "unbindText": "",
+    "flipHorizontal": "Vízszintes tükrözés",
+    "flipVertical": "Függőleges tükrözés",
+    "viewMode": "Nézet",
+    "toggleExportColorScheme": "Exportált színséma váltása",
+    "share": "Megosztás",
+    "showStroke": "Körvonal színválasztó megjelenítése",
+    "showBackground": "Háttérszín-választó megjelenítése",
+    "toggleTheme": "Téma váltása",
+    "personalLib": "Személyes könyvtár",
+    "excalidrawLib": "Excalidraw könyvtár",
+    "decreaseFontSize": "Betűméret csökkentése",
+    "increaseFontSize": "Betűméret növelése",
+    "unbindText": "Szövegkötés feloldása",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Hivatkozás szerkesztése",
+      "create": "Hivatkozás létrehozása",
+      "label": "Hivatkozás"
     }
   },
   "buttons": {
     "clearReset": "Vászon törlése",
-    "exportJSON": "",
-    "exportImage": "",
+    "exportJSON": "Exportálás fájlba",
+    "exportImage": "Mentés képként",
     "export": "Exportálás",
     "exportToPng": "Exportálás PNG-be",
     "exportToSvg": "Exportálás SVG-be",
     "copyToClipboard": "Vágólapra másolás",
     "copyPngToClipboard": "PNG másolása a vágólapra",
     "scale": "Nagyítás",
-    "save": "",
+    "save": "Mentés az aktuális fájlba",
     "saveAs": "Mentés másként",
     "load": "Betöltés",
     "getShareableLink": "Megosztható link létrehozása",
@@ -137,19 +138,19 @@
     "edit": "Szerkesztés",
     "undo": "Vissza",
     "redo": "Újra",
-    "resetLibrary": "",
+    "resetLibrary": "Könyvtár alaphelyzetbe állítása",
     "createNewRoom": "Új szoba létrehozása",
     "fullScreen": "Teljes képernyő",
     "darkMode": "Sötét mód",
     "lightMode": "Világos mód",
     "zenMode": "Letisztult mód",
     "exitZenMode": "Kilépés a letisztult módból",
-    "cancel": "",
-    "clear": "",
-    "remove": "",
-    "publishLibrary": "",
-    "submit": "",
-    "confirm": ""
+    "cancel": "Mégsem",
+    "clear": "Kiűrítés",
+    "remove": "Eltávolítás",
+    "publishLibrary": "Közzététel",
+    "submit": "Elküldés",
+    "confirm": "Megerősítés"
   },
   "alerts": {
     "clearReset": "Ez a művelet törli a vászont. Biztos benne?",
@@ -162,39 +163,40 @@
     "decryptFailed": "Nem sikerült visszafejteni a titkosított adatot.",
     "uploadedSecurly": "A feltöltést végpontok közötti titkosítással biztosítottuk, ami azt jelenti, hogy egy harmadik fél nem tudja megnézni a tartalmát, beleértve az Excalidraw szervereit is.",
     "loadSceneOverridePrompt": "A betöltött külső rajz felül fogja írnia meglévőt. Szeretnéd folytatni?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "A munkamenet leállítása felül fogja írni az előzőleg helyben tárolt rajzot. Biztosan ezt akarod?\n(Ha meg akarod tartani a helyben tárolt rajzot, egyszerűen csak zárd be a böngésző fület)",
     "errorLoadingLibrary": "Hibába ütközött a harmarmadik féltől származó könyvtár betöltése.",
-    "errorAddingToLibrary": "",
-    "errorRemovingFromLibrary": "",
+    "errorAddingToLibrary": "A tétel nem addható hozzá a könyvtárhoz",
+    "errorRemovingFromLibrary": "A tétel nem távolítható el a könyvtárból",
     "confirmAddLibrary": "Ez a művelet {{numShapes}} formát fog hozzáadni a könyvtáradhoz. Biztos vagy benne?",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "Úgy tűnik, hogy ez a kép nem tartalmaz jelenetadatokat. Engedélyezted a jelenetbeágyazást az exportálás során?",
     "cannotRestoreFromImage": "A jelenet visszaállítása nem sikerült ebből a kép fájlból",
-    "invalidSceneUrl": "",
-    "resetLibrary": "",
-    "removeItemsFromsLibrary": "",
-    "invalidEncryptionKey": ""
+    "invalidSceneUrl": "Nem sikerült importálni a jelenetet a megadott URL-ről. Rossz formátumú, vagy nem tartalmaz érvényes Excalidraw JSON-adatokat.",
+    "resetLibrary": "Ezzel törlöd a könyvtárát. biztos vagy ebben?",
+    "removeItemsFromsLibrary": "{{count}} elemet törölsz a könyvtárból?",
+    "invalidEncryptionKey": "A titkosítási kulcsnak 22 karakterből kell állnia. Az élő együttműködés le van tiltva."
   },
   "errors": {
-    "unsupportedFileType": "",
-    "imageInsertError": "",
-    "fileTooBig": "",
-    "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "unsupportedFileType": "Nem támogatott fájltípus.",
+    "imageInsertError": "Nem sikerült beszúrni a képet. Próbáld újra később...",
+    "fileTooBig": "A fájl túl nagy. A megengedett maximális méret {{maxSize}}.",
+    "svgImageInsertError": "Nem sikerült beszúrni az SVG-képet. Az SVG szintaktika érvénytelennek tűnik.",
+    "invalidSVGString": "Érvénytelen SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Kijelölés",
-    "image": "",
+    "image": "Kép beszúrása",
     "rectangle": "Téglalap",
     "diamond": "Rombusz",
     "ellipse": "Ellipszis",
     "arrow": "Nyíl",
     "line": "Vonal",
-    "freedraw": "",
+    "freedraw": "Rajzolás",
     "text": "Szöveg",
     "library": "Könyvtár",
     "lock": "Rajzolás után az aktív eszközt tartsa kijelölve",
-    "penMode": "",
-    "link": ""
+    "penMode": "Akadályozza meg a kicsinyítést, és csak tollról fogadja el a szabadkézi bevitelt",
+    "link": "Hivatkozás hozzáadása/frissítése a kiválasztott alakzathoz"
   },
   "headings": {
     "canvasActions": "Vászon műveletek",
@@ -202,24 +204,24 @@
     "shapes": "Alakzatok"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "A vászon mozgatásához tartsd lenyomva az egér görgőjét vagy a szóköz billentyűt húzás közben",
     "linearElement": "Kattintással görbe, az eger húzásával pedig egyenes nyilat rajzolhatsz",
     "freeDraw": "Kattints és húzd, majd engedd el, amikor végeztél",
     "text": "Tipp: A kijelölés eszközzel a dupla kattintás új szöveget hoz létre",
-    "text_selected": "",
-    "text_editing": "",
+    "text_selected": "Kattints duplán, vagy nyomj entert a szöveg szerkesztéséhez",
+    "text_editing": "Nyomjd meg az Escape vagy a Ctrl/Cmd+ENTER billentyűkombinációt a szerkesztés befejezéséhez",
     "linearElementMulti": "Kattints a következő ív pozíciójára, vagy fejezd be a nyilat az Escape vagy Enter megnyomásával",
     "lockAngle": "A SHIFT billentyű lenyomva tartásával korlátozhatja forgatás szögét",
     "resize": "A SHIFT billentyű lenyomva tartásával az átméretezés megtartja az arányokat,\naz ALT lenyomva tartásával pedig a középpont egy helyben marad",
-    "resizeImage": "",
+    "resizeImage": "A SHIFT billentyű lenyomva tartásával szabadon átméretezheted,\ntartsd lenyomva az ALT billentyűt a középről való átméretezéshez",
     "rotate": "A SHIFT billentyű lenyomva tartásával korlátozhatja a szögek illesztését",
     "lineEditor_info": "Kattints duplán, vagy nyomj entert a pontok szerkesztéséhez",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
-    "placeImage": "",
-    "publishLibrary": "",
-    "bindTextToElement": "",
-    "deepBoxSelect": ""
+    "lineEditor_pointSelected": "Nyomd meg a Törlés gombot a pont(ok) eltávolításához,\nA Ctrl/Cmd+D a többszörözéshez, vagy húzással mozgathatja",
+    "lineEditor_nothingSelected": "Válaszd ki a szerkeszteni kívánt pontot (több kijelöléséhez tartsd lenyomva a SHIFT billentyűt),\nvagy Alt, és kattintson az új pontok hozzáadásához",
+    "placeImage": "Kattints a kép elhelyezéséhez, vagy kattints és méretezd manuálisan",
+    "publishLibrary": "Tedd közzé saját könyvtáradat",
+    "bindTextToElement": "Nyomd meg az Entert szöveg hozzáadáshoz",
+    "deepBoxSelect": "Tartsd lenyomva a Ctrl/Cmd billentyűt a mély kijelöléshez és a húzás megakadályozásához"
   },
   "canvasError": {
     "cannotShowPreview": "Előnézet nem jeleníthető meg",
@@ -247,101 +249,101 @@
     "desc_inProgressIntro": "Az élő együttműködési munkamenet folyamatban van.",
     "desc_shareLink": "Ossza meg ezt a linket bárkivel, akivel együtt szeretne működni:",
     "desc_exitSession": "Az munkamenet leállítása kilépteti önt a szobából, de folytathatja a munkát a saját gépén. Vegye figyelembe, hogy ez nem érinti más emberek munkáját és ők továbbra is együttműködhetnek a saját változatukon.",
-    "shareTitle": ""
+    "shareTitle": "Csatlakozás egy élő együttműködési munkamenethez az Excalidraw-ban"
   },
   "errorDialog": {
     "title": "Hiba"
   },
   "exportDialog": {
-    "disk_title": "",
-    "disk_details": "",
-    "disk_button": "",
-    "link_title": "",
-    "link_details": "",
-    "link_button": "",
-    "excalidrawplus_description": "",
-    "excalidrawplus_button": "",
-    "excalidrawplus_exportError": ""
+    "disk_title": "Mentés lemezre",
+    "disk_details": "Exportálja a jelenetadatokat egy fájlba, amelyből később importálhatja.",
+    "disk_button": "Mentés fájlba",
+    "link_title": "Megosztható hivatkozás",
+    "link_details": "Exportálás csak olvasható hivatkozásként.",
+    "link_button": "Exportálás hivatkozásba",
+    "excalidrawplus_description": "Mentse el a jelenetet az Excalidraw+ munkaterületére.",
+    "excalidrawplus_button": "Exportálás",
+    "excalidrawplus_exportError": "Jelenleg nem lehet exportálni az Excalidraw+-ba..."
   },
   "helpDialog": {
-    "blog": "",
-    "click": "",
-    "deepSelect": "",
-    "deepBoxSelect": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "doubleClick": "",
-    "drag": "",
-    "editor": "",
-    "editSelectedShape": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "Olvasd a blogunkat",
+    "click": "kattintás",
+    "deepSelect": "Mély kijelölés",
+    "deepBoxSelect": "Mély kijelölés a dobozon belül, és a húzás megakadályozása",
+    "curvedArrow": "Ívelt nyíl",
+    "curvedLine": "Ívelt vonal",
+    "documentation": "Dokumentáció",
+    "doubleClick": "dupla kattintás",
+    "drag": "vonszolás",
+    "editor": "Szerkesztő",
+    "editSelectedShape": "Kijelölt alakzat szerkesztése (szöveg/nyíl/vonal)",
+    "github": "Hibát találtál? Küld be",
+    "howto": "Kövesd az útmutatóinkat",
+    "or": "vagy",
+    "preventBinding": "A nyíl ne ragadjon",
+    "shapes": "Alakzatok",
+    "shortcuts": "Gyorsbillentyűk",
+    "textFinish": "Szerkesztés befejezése (szöveg)",
+    "textNewLine": "Új sor hozzáadása (szöveg)",
+    "title": "Segítség",
+    "view": "Nézet",
+    "zoomToFit": "Az összes elem látótérbe hozása",
+    "zoomToSelection": "Kijelölésre nagyítás"
   },
   "clearCanvasDialog": {
-    "title": ""
+    "title": "Rajzvászon alaphelyzetbe"
   },
   "publishDialog": {
-    "title": "",
-    "itemName": "",
-    "authorName": "",
-    "githubUsername": "",
-    "twitterUsername": "",
-    "libraryName": "",
-    "libraryDesc": "",
-    "website": "",
+    "title": "Könyvtár közzététele",
+    "itemName": "Tétel neve",
+    "authorName": "Szerző neve",
+    "githubUsername": "GitHub felhasználónév",
+    "twitterUsername": "Twitter felhasználónév",
+    "libraryName": "Könyvtár neve",
+    "libraryDesc": "Könyvtár leírása",
+    "website": "Weboldal",
     "placeholder": {
-      "authorName": "",
-      "libraryName": "",
-      "libraryDesc": "",
-      "githubHandle": "",
-      "twitterHandle": "",
-      "website": ""
+      "authorName": "Neved vagy felhasználóneved",
+      "libraryName": "A könyvtárad neve",
+      "libraryDesc": "A könyvtárad használatát segítő leírás",
+      "githubHandle": "GitHub-handle(opcionális), így szerkesztheted a könyvtárat, miután elküldted ellenőrzésre",
+      "twitterHandle": "Twitter-felhasználónév (opcionális), így tudjuk, kinek kell jóváírni a Twitteren keresztüli reklámozást",
+      "website": "Hivatkozás személyes webhelyedre vagy máshová (nem kötelező)"
     },
     "errors": {
-      "required": "",
-      "website": ""
+      "required": "Kötelező",
+      "website": "Adj meg egy érvényes URL-t"
     },
     "noteDescription": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "Küld be könyvtáradat, hogy bekerüljön a ",
+      "link": "nyilvános könyvtár tárolóba",
+      "post": "hogy mások is felhasználhassák a rajzaikban."
     },
     "noteGuidelines": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "A könyvtárat először manuálisan kell jóváhagyni. Kérjük, olvassa el a ",
+      "link": "segédletet",
+      "post": " benyújtása előtt. Szüksége lesz egy GitHub-fiókra a kommunikációhoz és a módosításokhoz, ha kérik, de ez nem feltétlenül szükséges."
     },
     "noteLicense": {
-      "pre": "",
-      "link": "",
-      "post": ""
+      "pre": "A beküldéssel elfogadja, hogy a könyvtár a következő alatt kerül közzétételre ",
+      "link": "MIT Licensz ",
+      "post": "ami röviden azt jelenti, hogy bárki korlátozás nélkül használhatja őket."
     },
-    "noteItems": "",
-    "atleastOneLibItem": ""
+    "noteItems": "Minden könyvtárelemnek saját nevével kell rendelkeznie, hogy szűrhető legyen. A következő könyvtári tételek kerülnek bele:",
+    "atleastOneLibItem": "A kezdéshez válassz ki legalább egy könyvtári elemet"
   },
   "publishSuccessDialog": {
-    "title": "",
-    "content": "",
-    "link": ""
+    "title": "A könyvtár beküldve",
+    "content": "Köszönjük {{authorName}}. Könyvtáradat elküldtük felülvizsgálatra. Nyomon követheted az állapotot",
+    "link": "itt"
   },
   "confirmDialog": {
-    "resetLibrary": "",
-    "removeItemsFromLib": ""
+    "resetLibrary": "Könyvtár alaphelyzetbe állítása",
+    "removeItemsFromLib": "A kiválasztott elemek eltávolítása a könyvtárból"
   },
   "encrypted": {
     "tooltip": "A rajzaidat végpontok közötti titkosítással tároljuk, tehát az Excalidraw szervereiről se tud más belenézni.",
-    "link": ""
+    "link": "Blogbejegyzés a végpontok közötti titkosításról az Excalidraw-ban"
   },
   "stats": {
     "angle": "Szög",
@@ -353,66 +355,66 @@
     "storage": "Tárhely",
     "title": "Statisztikák",
     "total": "Összesen",
-    "version": "",
-    "versionCopy": "",
-    "versionNotAvailable": "",
+    "version": "Verzió",
+    "versionCopy": "Kattints a másoláshoz",
+    "versionNotAvailable": "A verzió nem elérhető",
     "width": "Szélesség"
   },
   "toast": {
-    "addedToLibrary": "",
-    "copyStyles": "",
-    "copyToClipboard": "",
-    "copyToClipboardAsPng": "",
-    "fileSaved": "",
-    "fileSavedToFilename": "",
-    "canvas": "",
-    "selection": ""
+    "addedToLibrary": "Könyvtárhoz adva",
+    "copyStyles": "Másolt stílusok.",
+    "copyToClipboard": "Vágólapra másolva.",
+    "copyToClipboardAsPng": "Az {{exportSelection}} PNG formátumban a vágólapra másolva \n({{exportColorScheme}})",
+    "fileSaved": "Fájl elmentve.",
+    "fileSavedToFilename": "Mentve mint {filename}",
+    "canvas": "rajzvászon",
+    "selection": "kijelölés"
   },
   "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": "Fehér",
+    "f8f9fa": "Szürke 0",
+    "f1f3f5": "Szürke 1",
+    "fff5f5": "Piros 0",
+    "fff0f6": "Pink 0",
+    "f8f0fc": "Szőlő 0",
+    "f3f0ff": "Ibolya 0",
+    "edf2ff": "Indigó 0",
+    "e7f5ff": "Kék 0",
+    "e3fafc": "Cián 0",
+    "e6fcf5": "Kékes-zöld 0",
+    "ebfbee": "Zöld 0",
+    "f4fce3": "Lime 0",
+    "fff9db": "Sárga 0",
+    "fff4e6": "Narancs 0",
+    "transparent": "Átlátszó",
+    "ced4da": "Szürke 4",
+    "868e96": "Szürke 6",
+    "fa5252": "Piros 6",
+    "e64980": "Pink 6",
+    "be4bdb": "Szőlő 6",
+    "7950f2": "Ibolya 6",
+    "4c6ef5": "Indigó 6",
+    "228be6": "Kék 6",
+    "15aabf": "Cián 6",
+    "12b886": "Kékes-zöld 6",
+    "40c057": "Zöld 6",
+    "82c91e": "Lime 6",
+    "fab005": "Sárga 6",
+    "fd7e14": "Narancs 6",
+    "000000": "Fekete",
+    "343a40": "Szürke 8",
+    "495057": "Szürke 7",
+    "c92a2a": "Piros 9",
+    "a61e4d": "Pink 9",
+    "862e9c": "Szőlő 9",
+    "5f3dc4": "Ibolya 9",
+    "364fc7": "Indigó 9",
+    "1864ab": "Kék 9",
+    "0b7285": "Cián 9",
+    "087f5b": "Kékes-zöld 9",
+    "2b8a3e": "Zöld 9",
+    "5c940d": "Lime 9",
+    "e67700": "Sárga 9",
+    "d9480f": "Narancs 9"
   }
 }

src/locales/id-ID.json

@@ -64,6 +64,7 @@
     "cartoonist": "Kartunis",
     "fileTitle": "Nama file",
     "colorPicker": "Pilihan Warna",
+    "canvasColors": "Digunakan di kanvas",
     "canvasBackground": "Latar Kanvas",
     "drawingCanvas": "Kanvas",
     "layers": "Lapisan",
@@ -179,7 +180,8 @@
     "imageInsertError": "Tidak dapat menyisipkan gambar. Coba lagi nanti...",
     "fileTooBig": "File terlalu besar. Ukuran maksimum yang dibolehkan {{maxSize}}.",
     "svgImageInsertError": "Tidak dapat menyisipkan gambar SVG. Markup SVG sepertinya tidak valid.",
-    "invalidSVGString": "SVG tidak valid."
+    "invalidSVGString": "SVG tidak valid.",
+    "cannotResolveCollabServer": "Tidak dapat terhubung ke server kolab. Muat ulang laman dan coba lagi."
   },
   "toolBar": {
     "selection": "Pilihan",

src/locales/it-IT.json

@@ -64,6 +64,7 @@
     "cartoonist": "Fumettista",
     "fileTitle": "Nome del file",
     "colorPicker": "Selettore colore",
+    "canvasColors": "Usato su tela",
     "canvasBackground": "Sfondo tela",
     "drawingCanvas": "Area di disegno",
     "layers": "Livelli",
@@ -103,13 +104,13 @@
     "toggleTheme": "Cambia tema",
     "personalLib": "Libreria Personale",
     "excalidrawLib": "Libreria di Excalidraw",
-    "decreaseFontSize": "",
-    "increaseFontSize": "",
-    "unbindText": "",
+    "decreaseFontSize": "Riduci dimensione dei caratteri",
+    "increaseFontSize": "Aumenta la dimensione dei caratteri",
+    "unbindText": "Scollega testo",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Modifica link",
+      "create": "Crea link",
+      "label": "Link"
     }
   },
   "buttons": {
@@ -179,7 +180,8 @@
     "imageInsertError": "Non è stato possibile inserire l'immagine. Riprova più tardi...",
     "fileTooBig": "Il file è troppo grande. La dimensione massima consentita è {{maxSize}}.",
     "svgImageInsertError": "Impossibile inserire l'immagine SVG. Il markup SVG non sembra corretto.",
-    "invalidSVGString": "SVG non valido."
+    "invalidSVGString": "SVG non valido.",
+    "cannotResolveCollabServer": "Impossibile connettersi al server di collab. Ricarica la pagina e riprova."
   },
   "toolBar": {
     "selection": "Selezione",
@@ -193,8 +195,8 @@
     "text": "Testo",
     "library": "Libreria",
     "lock": "Mantieni lo strumento selezionato attivo dopo aver disegnato",
-    "penMode": "",
-    "link": ""
+    "penMode": "Impedisci il pinch-zoom e accetta l'input di disegno libero solo dalla penna",
+    "link": "Aggiungi/ aggiorna il link per una forma selezionata"
   },
   "headings": {
     "canvasActions": "Azioni sulla Tela",
@@ -214,12 +216,12 @@
     "resizeImage": "Puoi ridimensionare liberamente tenendo premuto SHIFT,\ntieni premuto ALT per ridimensionare dal centro",
     "rotate": "Puoi mantenere gli angoli tenendo premuto SHIFT durante la rotazione",
     "lineEditor_info": "Fai doppio click o premi invio per modificare i punti",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
+    "lineEditor_pointSelected": "Premi Elimina per rimuovere il punto(i),\nCtrlOCmd+D per duplicare o trascinare per spostare",
+    "lineEditor_nothingSelected": "Seleziona un punto da modificare (tieni premuto MAIUSC per selezionare più punti),\noppure tieni premuto Alt e fai clic per aggiungere nuovi punti",
     "placeImage": "Fai click per posizionare l'immagine, o click e trascina per impostarne la dimensione manualmente",
     "publishLibrary": "Pubblica la tua libreria",
     "bindTextToElement": "Premi invio per aggiungere il testo",
-    "deepBoxSelect": ""
+    "deepBoxSelect": "Tieni premuto CtrlOCmd per selezionare in profondità e per impedire il trascinamento"
   },
   "canvasError": {
     "cannotShowPreview": "Impossibile visualizzare l'anteprima",
@@ -266,8 +268,8 @@
   "helpDialog": {
     "blog": "Leggi il nostro blog",
     "click": "click",
-    "deepSelect": "",
-    "deepBoxSelect": "",
+    "deepSelect": "Selezione profonda",
+    "deepBoxSelect": "Seleziona in profondità all'interno della casella e previene il trascinamento",
     "curvedArrow": "Freccia curva",
     "curvedLine": "Linea curva",
     "documentation": "Documentazione",

src/locales/ja-JP.json

@@ -64,6 +64,7 @@
     "cartoonist": "漫画風",
     "fileTitle": "ファイル名",
     "colorPicker": "色選択",
+    "canvasColors": "",
     "canvasBackground": "キャンバスの背景",
     "drawingCanvas": "キャンバスの描画",
     "layers": "レイヤー",
@@ -179,7 +180,8 @@
     "imageInsertError": "画像を挿入できませんでした。後でもう一度お試しください...",
     "fileTooBig": "ファイルが大きすぎます。許可される最大サイズは {{maxSize}} です。",
     "svgImageInsertError": "SVGイメージを挿入できませんでした。SVGマークアップは無効に見えます。",
-    "invalidSVGString": "無効なSVGです。"
+    "invalidSVGString": "無効なSVGです。",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "選択",

src/locales/kab-KAB.json

@@ -64,6 +64,7 @@
     "cartoonist": "",
     "fileTitle": "Isem n ufaylu",
     "colorPicker": "Amafran n yini",
+    "canvasColors": "",
     "canvasBackground": "Agilal n teɣzut n usuneɣ",
     "drawingCanvas": "Taɣzut n usuneɣ",
     "layers": "Tissiyin",
@@ -179,7 +180,8 @@
     "imageInsertError": "D awezɣi tugra n tugna. Eɛreḍ tikkelt-nniḍen ardeqqal...",
     "fileTooBig": "Afaylu meqqer aṭas. Tiddi tafellayt yurgen d {{maxSize}}.",
     "svgImageInsertError": "D awezɣi tugra n tugna SVG. Acraḍ SVG yettban-d d armeɣtu.",
-    "invalidSVGString": "SVG armeɣtu."
+    "invalidSVGString": "SVG armeɣtu.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Tafrayt",

src/locales/kk-KZ.json

@@ -64,6 +64,7 @@
     "cartoonist": "",
     "fileTitle": "Файл атауы",
     "colorPicker": "",
+    "canvasColors": "",
     "canvasBackground": "",
     "drawingCanvas": "",
     "layers": "",
@@ -179,7 +180,8 @@
     "imageInsertError": "Суретті жүктеу мүмкін болмады. Кейінірек қайталап көріңіз...",
     "fileTooBig": "Файл өте үлкен. Максималды рұқсат етілген көлем {{maxSize}}.",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "",

src/locales/ko-KR.json

@@ -64,6 +64,7 @@
     "cartoonist": "만화가",
     "fileTitle": "파일 이름",
     "colorPicker": "색상 선택기",
+    "canvasColors": "",
     "canvasBackground": "캔버스 배경",
     "drawingCanvas": "캔버스 그리기",
     "layers": "레이어",
@@ -179,7 +180,8 @@
     "imageInsertError": "이미지를 삽입할 수 없습니다. 나중에 다시 시도 하십시오",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "선택",

src/locales/lt-LT.json

@@ -64,6 +64,7 @@
     "cartoonist": "",
     "fileTitle": "Failo pavadinimas",
     "colorPicker": "",
+    "canvasColors": "",
     "canvasBackground": "",
     "drawingCanvas": "",
     "layers": "",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "",

src/locales/lv-LV.json

@@ -64,6 +64,7 @@
     "cartoonist": "Karikatūrists",
     "fileTitle": "Datnes nosaukums",
     "colorPicker": "Krāsu atlasītājs",
+    "canvasColors": "Izmantots tāfelei",
     "canvasBackground": "Ainas fons",
     "drawingCanvas": "Tāfele",
     "layers": "Slāņi",
@@ -179,7 +180,8 @@
     "imageInsertError": "Nevarēja ievietot attēlu. Mēģiniet vēlāk...",
     "fileTooBig": "Datne ir par lielu. Lielākais atļautais izmērs ir {{maxSize}}.",
     "svgImageInsertError": "Nevarēja ievietot SVG attēlu. Šķiet, ka SVG marķējums nav derīgs.",
-    "invalidSVGString": "Nederīgs SVG."
+    "invalidSVGString": "Nederīgs SVG.",
+    "cannotResolveCollabServer": "Nevarēja savienoties ar sadarbošanās serveri. Lūdzu, pārlādējiet lapu un mēģiniet vēlreiz."
   },
   "toolBar": {
     "selection": "Atlase",

src/locales/mr-IN.json

@@ -0,0 +1,420 @@
+{
+  "labels": {
+    "paste": "चिपकवा",
+    "pasteCharts": "चार्ट चिपकवा",
+    "selectAll": "समस्त निवडा",
+    "multiSelect": "",
+    "moveCanvas": "",
+    "cut": "",
+    "copy": "",
+    "copyAsPng": "",
+    "copyAsSvg": "",
+    "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": "",
+    "showStroke": "",
+    "showBackground": "",
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": "",
+    "decreaseFontSize": "",
+    "increaseFontSize": "",
+    "unbindText": "",
+    "link": {
+      "edit": "",
+      "create": "",
+      "label": ""
+    }
+  },
+  "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": ""
+  },
+  "alerts": {
+    "clearReset": "",
+    "couldNotCreateShareableLink": "",
+    "couldNotCreateShareableLinkTooBig": "",
+    "couldNotLoadInvalidFile": "",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "",
+    "couldNotCopyToClipboard": "",
+    "decryptFailed": "",
+    "uploadedSecurly": "",
+    "loadSceneOverridePrompt": "",
+    "collabStopOverridePrompt": "",
+    "errorLoadingLibrary": "",
+    "errorAddingToLibrary": "",
+    "errorRemovingFromLibrary": "",
+    "confirmAddLibrary": "",
+    "imageDoesNotContainScene": "",
+    "cannotRestoreFromImage": "",
+    "invalidSceneUrl": "",
+    "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
+    "invalidEncryptionKey": ""
+  },
+  "errors": {
+    "unsupportedFileType": "",
+    "imageInsertError": "",
+    "fileTooBig": "",
+    "svgImageInsertError": "",
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
+  },
+  "toolBar": {
+    "selection": "",
+    "image": "",
+    "rectangle": "",
+    "diamond": "",
+    "ellipse": "",
+    "arrow": "",
+    "line": "",
+    "freedraw": "",
+    "text": "",
+    "library": "",
+    "lock": "",
+    "penMode": "",
+    "link": ""
+  },
+  "headings": {
+    "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": "",
+    "deepBoxSelect": ""
+  },
+  "canvasError": {
+    "cannotShowPreview": "",
+    "canvasTooBig": "",
+    "canvasTooBigTip": ""
+  },
+  "errorSplash": {
+    "headingMain_pre": "",
+    "headingMain_button": "",
+    "clearCanvasMessage": "",
+    "clearCanvasMessage_button": "",
+    "clearCanvasCaveat": "",
+    "trackedToSentry_pre": "",
+    "trackedToSentry_post": "",
+    "openIssueMessage_pre": "",
+    "openIssueMessage_button": "",
+    "openIssueMessage_post": "",
+    "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": "",
+    "excalidrawplus_button": "",
+    "excalidrawplus_exportError": ""
+  },
+  "helpDialog": {
+    "blog": "",
+    "click": "",
+    "deepSelect": "",
+    "deepBoxSelect": "",
+    "curvedArrow": "",
+    "curvedLine": "",
+    "documentation": "",
+    "doubleClick": "",
+    "drag": "",
+    "editor": "",
+    "editSelectedShape": "",
+    "github": "",
+    "howto": "",
+    "or": "",
+    "preventBinding": "",
+    "shapes": "",
+    "shortcuts": "",
+    "textFinish": "",
+    "textNewLine": "",
+    "title": "",
+    "view": "",
+    "zoomToFit": "",
+    "zoomToSelection": ""
+  },
+  "clearCanvasDialog": {
+    "title": ""
+  },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "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": "",
+    "fileSaved": "",
+    "fileSavedToFilename": "",
+    "canvas": "",
+    "selection": ""
+  },
+  "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": ""
+  }
+}

src/locales/my-MM.json

@@ -64,6 +64,7 @@
     "cartoonist": "ကာတွန်း",
     "fileTitle": "",
     "colorPicker": "အရောင်ရွေး",
+    "canvasColors": "",
     "canvasBackground": "ကားချပ်နောက်ခံ",
     "drawingCanvas": "ပုံဆွဲကားချပ်",
     "layers": "အလွှာများ",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "ရွေးချယ်",

src/locales/nb-NO.json

@@ -64,6 +64,7 @@
     "cartoonist": "Tegner",
     "fileTitle": "Filnavn",
     "colorPicker": "Fargevelger",
+    "canvasColors": "Brukes på lerretet",
     "canvasBackground": "Lerretsbakgrunn",
     "drawingCanvas": "Lerret",
     "layers": "Lag",
@@ -179,7 +180,8 @@
     "imageInsertError": "Kunne ikke sette inn bildet. Prøv igjen senere...",
     "fileTooBig": "Filen er for stor. Maksimal tillatt størrelse er {{maxSize}}.",
     "svgImageInsertError": "Kunne ikke sette inn SVG-bilde. SVG-koden ser ugyldig ut.",
-    "invalidSVGString": "Ugyldig SVG."
+    "invalidSVGString": "Ugyldig SVG.",
+    "cannotResolveCollabServer": "Kunne ikke koble til samarbeidsserveren. Vennligst oppdater siden og prøv på nytt."
   },
   "toolBar": {
     "selection": "Velg",

src/locales/nl-NL.json

@@ -64,6 +64,7 @@
     "cartoonist": "Cartoonist",
     "fileTitle": "Bestandsnaam",
     "colorPicker": "Kleurenkiezer",
+    "canvasColors": "Gebruikt op canvas",
     "canvasBackground": "Canvas achtergrond",
     "drawingCanvas": "Canvas",
     "layers": "Lagen",
@@ -179,7 +180,8 @@
     "imageInsertError": "Afbeelding invoegen mislukt. Probeer het later opnieuw...",
     "fileTooBig": "Bestand is te groot. Maximale grootte is {{maxSize}}.",
     "svgImageInsertError": "",
-    "invalidSVGString": "Ongeldige SVG."
+    "invalidSVGString": "Ongeldige SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Selectie",

src/locales/nn-NO.json

@@ -64,6 +64,7 @@
     "cartoonist": "Teiknar",
     "fileTitle": "Filnamn",
     "colorPicker": "Fargeveljar",
+    "canvasColors": "",
     "canvasBackground": "Lerretsbakgrunn",
     "drawingCanvas": "Lerret",
     "layers": "Lag",
@@ -179,7 +180,8 @@
     "imageInsertError": "Kunne ikkje sette inn biletet. Prøv igjen seinare...",
     "fileTooBig": "Fila er for stor. Maksimal tillate storleik er {{maxSize}}.",
     "svgImageInsertError": "Kunne ikkje sette inn SVG-biletet. SVG-koden ser ugyldig ut.",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Vel",

src/locales/oc-FR.json

@@ -64,6 +64,7 @@
     "cartoonist": "Dessenhaire",
     "fileTitle": "Nom del fichièr",
     "colorPicker": "Selector de color",
+    "canvasColors": "",
     "canvasBackground": "Rèireplan del canabàs",
     "drawingCanvas": "Zòna de dessenh",
     "layers": "Calques",
@@ -107,9 +108,9 @@
     "increaseFontSize": "Aumentar talha poliça",
     "unbindText": "",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Modificar lo ligam",
+      "create": "Crear un ligam",
+      "label": "Ligam"
     }
   },
   "buttons": {
@@ -179,7 +180,8 @@
     "imageInsertError": "Insercion d’imatge impossibla. Tornatz ensajar mai tard...",
     "fileTooBig": "Fichièr tròp pesuc. La talha maximala autorizada es {{maxSize}}.",
     "svgImageInsertError": "Insercion d’imatge SVG impossibla. Las balisas SVG semblan invalidas.",
-    "invalidSVGString": "SVG invalid."
+    "invalidSVGString": "SVG invalid.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Seleccion",

src/locales/pa-IN.json

@@ -64,6 +64,7 @@
     "cartoonist": "ਕਾਰਟੂਨਿਸਟ",
     "fileTitle": "ਫਾਈਲ ਦਾ ਨਾਂ",
     "colorPicker": "ਰੰਗ ਚੋਣਕਾਰ",
+    "canvasColors": "",
     "canvasBackground": "ਕੈਨਵਸ ਦਾ ਬੈਕਗਰਾਉਂਡ",
     "drawingCanvas": "ਡਰਾਇੰਗ ਕੈਨਵਸ",
     "layers": "ਪਰਤਾਂ",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": "SVG ਨਜਾਇਜ਼ ਹੈ।"
+    "invalidSVGString": "SVG ਨਜਾਇਜ਼ ਹੈ।",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "ਚੋਣਕਾਰ",

src/locales/percentages.json

@@ -1,46 +1,47 @@
 {
-  "ar-SA": 88,
+  "ar-SA": 94,
   "bg-BG": 61,
   "bn-BD": 0,
-  "ca-ES": 95,
+  "ca-ES": 99,
   "cs-CZ": 24,
-  "da-DK": 16,
+  "da-DK": 17,
   "de-DE": 99,
-  "el-GR": 87,
+  "el-GR": 86,
   "en": 100,
-  "es-ES": 84,
-  "eu-ES": 96,
+  "es-ES": 99,
+  "eu-ES": 99,
   "fa-IR": 63,
   "fi-FI": 98,
-  "fr-FR": 100,
+  "fr-FR": 99,
   "he-IL": 80,
-  "hi-IN": 55,
-  "hu-HU": 49,
+  "hi-IN": 58,
+  "hu-HU": 99,
   "id-ID": 100,
-  "it-IT": 96,
-  "ja-JP": 98,
+  "it-IT": 100,
+  "ja-JP": 97,
   "kab-KAB": 95,
   "kk-KZ": 23,
   "ko-KR": 72,
-  "lt-LT": 24,
+  "lt-LT": 23,
   "lv-LV": 100,
+  "mr-IN": 0,
   "my-MM": 46,
   "nb-NO": 100,
   "nl-NL": 90,
   "nn-NO": 83,
   "oc-FR": 97,
-  "pa-IN": 87,
+  "pa-IN": 86,
   "pl-PL": 93,
-  "pt-BR": 98,
+  "pt-BR": 99,
   "pt-PT": 83,
   "ro-RO": 100,
   "ru-RU": 99,
   "si-LK": 9,
-  "sk-SK": 100,
+  "sk-SK": 99,
   "sv-SE": 100,
   "ta-IN": 99,
-  "tr-TR": 85,
-  "uk-UA": 82,
+  "tr-TR": 84,
+  "uk-UA": 81,
   "zh-CN": 100,
   "zh-HK": 28,
   "zh-TW": 100

src/locales/pl-PL.json

@@ -64,6 +64,7 @@
     "cartoonist": "Rysunkowy",
     "fileTitle": "Nazwa pliku",
     "colorPicker": "Paleta kolorów",
+    "canvasColors": "",
     "canvasBackground": "Kolor dokumentu",
     "drawingCanvas": "Obszar roboczy",
     "layers": "Warstwy",
@@ -179,7 +180,8 @@
     "imageInsertError": "Nie udało się wstawić obrazu. Spróbuj ponownie później...",
     "fileTooBig": "Plik jest zbyt duży. Maksymalny dozwolony rozmiar to {{maxSize}}.",
     "svgImageInsertError": "Nie udało się wstawić obrazu SVG. Znacznik SVG wygląda na nieprawidłowy.",
-    "invalidSVGString": "Nieprawidłowy SVG."
+    "invalidSVGString": "Nieprawidłowy SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Zaznaczenie",

src/locales/pt-BR.json

@@ -64,6 +64,7 @@
     "cartoonist": "Cartunista",
     "fileTitle": "Nome do arquivo",
     "colorPicker": "Seletor de cores",
+    "canvasColors": "Usado na tela",
     "canvasBackground": "Fundo da tela",
     "drawingCanvas": "Tela de desenho",
     "layers": "Camadas",
@@ -107,9 +108,9 @@
     "increaseFontSize": "Aumentar o tamanho da fonte",
     "unbindText": "Desvincular texto",
     "link": {
-      "edit": "",
-      "create": "",
-      "label": ""
+      "edit": "Editar link",
+      "create": "Criar link",
+      "label": "Link"
     }
   },
   "buttons": {
@@ -179,7 +180,8 @@
     "imageInsertError": "Não foi possível inserir imagem. Tente novamente mais tarde...",
     "fileTooBig": "O arquivo é muito grande. O tamanho máximo permitido é {{maxSize}}.",
     "svgImageInsertError": "Não foi possível inserir a imagem SVG. A marcação SVG parece inválida.",
-    "invalidSVGString": "SVG Inválido."
+    "invalidSVGString": "SVG Inválido.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Seleção",
@@ -194,7 +196,7 @@
     "library": "Biblioteca",
     "lock": "Manter ativa a ferramenta selecionada após desenhar",
     "penMode": "Prevenir a ação de tocar-ampliar e permitir apenas interações da caneta",
-    "link": ""
+    "link": "Adicionar/Atualizar link para uma forma selecionada"
   },
   "headings": {
     "canvasActions": "Ações da tela",

src/locales/pt-PT.json

@@ -64,6 +64,7 @@
     "cartoonist": "Caricaturista",
     "fileTitle": "Nome do ficheiro",
     "colorPicker": "Seletor de cores",
+    "canvasColors": "",
     "canvasBackground": "Fundo da área de desenho",
     "drawingCanvas": "Área de desenho",
     "layers": "Camadas",
@@ -179,7 +180,8 @@
     "imageInsertError": "Não foi possível inserir a imagem, tente novamente mais tarde...",
     "fileTooBig": "O ficheiro é muito grande. O tamanho máximo permitido é {{maxSize}}.",
     "svgImageInsertError": "Não foi possível inserir a imagem SVG. A marcação SVG parece inválida.",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Seleção",

src/locales/ro-RO.json

@@ -64,6 +64,7 @@
     "cartoonist": "Caricaturist",
     "fileTitle": "Nume de fișier",
     "colorPicker": "Selector de culoare",
+    "canvasColors": "Folosite pe pânză",
     "canvasBackground": "Fundalul pânzei",
     "drawingCanvas": "Pânză pentru desenat",
     "layers": "Straturi",
@@ -179,7 +180,8 @@
     "imageInsertError": "Imaginea nu a putut fi introdusă. Reîncearcă mai târziu...",
     "fileTooBig": "Fișierul este prea mare. Dimensiunea maximă permisă este de {{maxSize}}.",
     "svgImageInsertError": "Imaginea SVG nu a putut fi introdus. Marcajul SVG pare invalid.",
-    "invalidSVGString": "SVG invalid."
+    "invalidSVGString": "SVG invalid.",
+    "cannotResolveCollabServer": "Nu a putut fi realizată conexiunea la serverul de colaborare. Reîncarcă pagina și încearcă din nou."
   },
   "toolBar": {
     "selection": "Selecție",

src/locales/ru-RU.json

@@ -64,6 +64,7 @@
     "cartoonist": "Карикатурист",
     "fileTitle": "Имя файла",
     "colorPicker": "Выбор цвета",
+    "canvasColors": "",
     "canvasBackground": "Фон холста",
     "drawingCanvas": "Полотно",
     "layers": "Слои",
@@ -179,7 +180,8 @@
     "imageInsertError": "Не удалось вставить изображение. Попробуйте позже...",
     "fileTooBig": "Очень большой файл. Максимально разрешенный размер {{maxSize}}.",
     "svgImageInsertError": "Не удалось вставить изображение SVG. Разметка SVG выглядит недействительной.",
-    "invalidSVGString": "Некорректный SVG."
+    "invalidSVGString": "Некорректный SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Выделение области",

src/locales/si-LK.json

@@ -64,6 +64,7 @@
     "cartoonist": "සැකිලිරූකරු",
     "fileTitle": "ගොනු නාමය",
     "colorPicker": "පාට තෝරකය",
+    "canvasColors": "",
     "canvasBackground": "කැන්වස පසුබිම",
     "drawingCanvas": "චිත්‍රක කැන්වසය",
     "layers": "ලේයර",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "",

src/locales/sk-SK.json

@@ -64,6 +64,7 @@
     "cartoonist": "Ilustrátor",
     "fileTitle": "Názov súboru",
     "colorPicker": "Výber farby",
+    "canvasColors": "Použité na plátne",
     "canvasBackground": "Pozadie plátna",
     "drawingCanvas": "Kresliace plátno",
     "layers": "Vrstvy",
@@ -179,7 +180,8 @@
     "imageInsertError": "Nepodarilo sa vložiť obrázok. Skúste to znova neskôr...",
     "fileTooBig": "Súbor je príliš veľký. Maximálna povolená veľkosť je {{maxSize}}.",
     "svgImageInsertError": "Nepodarilo sa vložiť SVG obrázok. SVG formát je pravdepodobne nevalidný.",
-    "invalidSVGString": "Nevalidné SVG."
+    "invalidSVGString": "Nevalidné SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Výber",

src/locales/sv-SE.json

@@ -64,6 +64,7 @@
     "cartoonist": "Serietecknare",
     "fileTitle": "Filnamn",
     "colorPicker": "Färgväljare",
+    "canvasColors": "Används på canvas",
     "canvasBackground": "Canvas-bakgrund",
     "drawingCanvas": "Ritar canvas",
     "layers": "Lager",
@@ -179,7 +180,8 @@
     "imageInsertError": "Kunde inte infoga bild. Försök igen senare...",
     "fileTooBig": "Filen är för stor. Maximal tillåten storlek är {{maxSize}}.",
     "svgImageInsertError": "Kunde inte infoga SVG-bild. SVG-koden ser ogiltig ut.",
-    "invalidSVGString": "Ogiltig SVG."
+    "invalidSVGString": "Ogiltig SVG.",
+    "cannotResolveCollabServer": "Det gick inte att ansluta till samarbets-servern. Ladda om sidan och försök igen."
   },
   "toolBar": {
     "selection": "Markering",

src/locales/ta-IN.json

@@ -64,6 +64,7 @@
     "cartoonist": "கேலிச்சித்திர ஓவியர்",
     "fileTitle": "கோப்புப் பெயர்",
     "colorPicker": "நிறத் தேர்வி",
+    "canvasColors": "கித்தானில் பயன்படுத்தப்பட்டது",
     "canvasBackground": "கித்தான் பின்னணி",
     "drawingCanvas": "கித்தான் வரைகிறது",
     "layers": "அடுக்குகள்",
@@ -179,7 +180,8 @@
     "imageInsertError": "படத்தைப் புகுத்தவியலா. பிறகு மீண்டும் முயலவும்...",
     "fileTooBig": "கோப்பு மிகப்பெரிது. அனுமதிக்கப்பட்ட அதிகபட்ச அளவு {{maxSize}}.",
     "svgImageInsertError": "எஸ்விஜி படத்தைப் புகுத்தவியலா. எஸ்விஜியின் மார்க்அப் செல்லாததாக தெரிகிறது.",
-    "invalidSVGString": "செல்லாத SVG."
+    "invalidSVGString": "செல்லாத SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "தெரிவு",

src/locales/tr-TR.json

@@ -64,6 +64,7 @@
     "cartoonist": "Karikatürist",
     "fileTitle": "Dosya adı",
     "colorPicker": "Renk seçici",
+    "canvasColors": "",
     "canvasBackground": "Tuval arka planı",
     "drawingCanvas": "Çizim tuvali",
     "layers": "Katmanlar",
@@ -179,7 +180,8 @@
     "imageInsertError": "Görsel eklenemedi. Daha sonra tekrar deneyin...",
     "fileTooBig": "Dosya çok büyük. İzin verilen maksimum boyut {{maxSize}}.",
     "svgImageInsertError": "SVG resmi eklenemedi. SVG işaretlemesi geçersiz görünüyor.",
-    "invalidSVGString": "Geçersiz SVG."
+    "invalidSVGString": "Geçersiz SVG.",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Seçme",

src/locales/uk-UA.json

@@ -64,6 +64,7 @@
     "cartoonist": "Карикатурист",
     "fileTitle": "Назва файла",
     "colorPicker": "Палітра кольорів",
+    "canvasColors": "",
     "canvasBackground": "Тло полотна",
     "drawingCanvas": "Полотно",
     "layers": "Шари",
@@ -179,7 +180,8 @@
     "imageInsertError": "Не вдалося вставити зображення. Повторіть спробу пізніше...",
     "fileTooBig": "Занадто великий розмір файлу, максимальний розмір файлу {{maxSize}}.",
     "svgImageInsertError": "Не вдалося вставити SVG-зображення. Помилка розмітки SVG.",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "Виділення",

src/locales/zh-CN.json

@@ -64,6 +64,7 @@
     "cartoonist": "漫画家",
     "fileTitle": "文件名",
     "colorPicker": "调色盘",
+    "canvasColors": "画布上的",
     "canvasBackground": "画布背景",
     "drawingCanvas": "绘制 Canvas",
     "layers": "图层",
@@ -179,7 +180,8 @@
     "imageInsertError": "无法插入图像。请稍后再试……",
     "fileTooBig": "文件过大。最大允许的大小为 {{maxSize}}。",
     "svgImageInsertError": "无法插入 SVG 图像。该 SVG 标记似乎是无效的。",
-    "invalidSVGString": "无效的 SVG。"
+    "invalidSVGString": "无效的 SVG。",
+    "cannotResolveCollabServer": "无法连接到实时协作服务器。请重新加载页面并重试。"
   },
   "toolBar": {
     "selection": "选择",

src/locales/zh-HK.json

@@ -64,6 +64,7 @@
     "cartoonist": "卡通風格",
     "fileTitle": "檔案名稱",
     "colorPicker": "",
+    "canvasColors": "",
     "canvasBackground": "畫布背景顏色",
     "drawingCanvas": "畫布",
     "layers": "圖層",
@@ -179,7 +180,8 @@
     "imageInsertError": "",
     "fileTooBig": "",
     "svgImageInsertError": "",
-    "invalidSVGString": ""
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": ""
   },
   "toolBar": {
     "selection": "",

src/locales/zh-TW.json

@@ -7,19 +7,19 @@
     "moveCanvas": "移動畫布",
     "cut": "剪下",
     "copy": "複製",
-    "copyAsPng": "複製 PNG 至剪貼簿",
-    "copyAsSvg": "複製 SVG 至剪貼簿",
-    "bringForward": "往前移一層",
-    "sendToBack": "移到最後面",
-    "bringToFront": "移到最前面",
+    "copyAsPng": "以PNG格式儲存到剪貼板",
+    "copyAsSvg": "以SVG格式複製到剪貼板",
+    "bringForward": "上移一層",
+    "sendToBack": "移到最底層",
+    "bringToFront": "置於最頂層",
     "sendBackward": "往後移一層",
     "delete": "刪除",
     "copyStyles": "複製樣式",
     "pasteStyles": "貼上樣式",
     "stroke": "筆畫",
     "background": "背景",
-    "fill": "填充",
-    "strokeWidth": "筆劃寬度",
+    "fill": "填滿",
+    "strokeWidth": "筆跡寬度",
     "strokeStyle": "筆畫樣式",
     "strokeStyle_solid": "實線",
     "strokeStyle_dashed": "虛線",
@@ -33,19 +33,19 @@
     "arrowheads": "箭頭",
     "arrowhead_none": "無",
     "arrowhead_arrow": "箭頭",
-    "arrowhead_bar": "塊",
-    "arrowhead_dot": "點",
+    "arrowhead_bar": "條狀箭頭",
+    "arrowhead_dot": "點箭頭",
     "arrowhead_triangle": "三角形",
     "fontSize": "字型大小",
-    "fontFamily": "字體",
+    "fontFamily": "字體集",
     "onlySelected": "僅選取物件",
-    "withBackground": "背景",
+    "withBackground": "含有背景",
     "exportEmbedScene": "嵌入場景",
     "exportEmbedScene_details": "用於回復場景的場景資料會被包含在輸出的 PNG/SVG 檔案中。\n會增加輸出的檔案大小。",
-    "addWatermark": "加上 \"Made with Excalidraw\"",
+    "addWatermark": "加上 \"Made with Excalidraw\" 浮水印",
     "handDrawn": "手寫",
     "normal": "一般",
-    "code": "等寬",
+    "code": "代碼",
     "small": "小",
     "medium": "中",
     "large": "大",
@@ -64,6 +64,7 @@
     "cartoonist": "卡通",
     "fileTitle": "檔案名稱",
     "colorPicker": "色彩選擇工具",
+    "canvasColors": "使用於畫布",
     "canvasBackground": "Canvas 背景",
     "drawingCanvas": "繪圖 canvas",
     "layers": "圖層",
@@ -179,7 +180,8 @@
     "imageInsertError": "無法插入圖片。請稍後再試…",
     "fileTooBig": "檔案過大。可接受的最大尺寸為 {{maxSize}} 。",
     "svgImageInsertError": "無法插入 SVG 圖片。此 SVG 檔案有問題。",
-    "invalidSVGString": "無效的 SVG。"
+    "invalidSVGString": "無效的 SVG。",
+    "cannotResolveCollabServer": "無法連結至 collab 伺服器。請重新整理後再試一次。"
   },
   "toolBar": {
     "selection": "選取",

src/packages/excalidraw/CHANGELOG.md

@@ -20,7 +20,7 @@ Please add the latest change on the top under the correct section.
 - Add `onLinkOpen` prop which will be triggered when clicked on element hyperlink if present [#4694](https://github.com/excalidraw/excalidraw/pull/4694).
 - Support updating library using [`updateScene`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#updateScene) API [#4546](https://github.com/excalidraw/excalidraw/pull/4546).
 
-- Introduced primary colors to the app. The colors can be overriden. Check [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#customizing-styles) on how to do so [#4387](https://github.com/excalidraw/excalidraw/pull/4387).
+- Introduced primary colors to the app. The colors can be overridden. Check [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#customizing-styles) on how to do so [#4387](https://github.com/excalidraw/excalidraw/pull/4387).
 
 - [`exportToBlob`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToBlob) now automatically sets `appState.exportBackground` to `true` if exporting to `image/jpeg` MIME type (to ensure that alpha channel is not compressed to black color) [#4342](https://github.com/excalidraw/excalidraw/pull/4342).
 
@@ -115,7 +115,7 @@ Please add the latest change on the top under the correct section.
 
 - Sync local storage state across tabs when out of sync [#4545](https://github.com/excalidraw/excalidraw/pull/4545)
 
-- Support contextMenuLabel to be of function type to support dynmaic labels [#4654](https://github.com/excalidraw/excalidraw/pull/4654)
+- Support contextMenuLabel to be of function type to support dynamic labels [#4654](https://github.com/excalidraw/excalidraw/pull/4654)
 
 - Support decreasing/increasing `fontSize` via keyboard [#4553](https://github.com/excalidraw/excalidraw/pull/4553)
 
@@ -438,10 +438,10 @@ Please add the latest change on the top under the correct section.
 
 - Added prop [`autoFocus`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#autoFocus) to focus the excalidraw component on page load when enabled, defaults to false [#3691](https://github.com/excalidraw/excalidraw/pull/3691).
 
-  Note: Earlier Excalidraw component was focussed by default on page load, you need to enable `autoFocus` prop to retain the same behaviour.
+  Note: Earlier Excalidraw component was focused by default on page load, you need to enable `autoFocus` prop to retain the same behaviour.
 
 - Added prop `UIOptions.canvasActions.export.renderCustomUI` to support Custom UI rendering inside export dialog [#3666](https://github.com/excalidraw/excalidraw/pull/3666).
-- Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defauls to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
+- Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defaults to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
 
 - Export dialog can be customised with [`UiOptions.canvasActions.export`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportOpts) [#3658](https://github.com/excalidraw/excalidraw/pull/3658).
 
@@ -489,7 +489,7 @@ Please add the latest change on the top under the correct section.
 
 - Exporting redesign [#3613](https://github.com/excalidraw/excalidraw/pull/3613)
 
-- Auto-position tooltip and suport overflowing container [#3631](https://github.com/excalidraw/excalidraw/pull/3631)
+- Auto-position tooltip and support overflowing container [#3631](https://github.com/excalidraw/excalidraw/pull/3631)
 
 - Auto release @excalidraw/excalidraw-next on every change [#3614](https://github.com/excalidraw/excalidraw/pull/3614)
 

src/packages/excalidraw/README.md

@@ -425,7 +425,7 @@ Here you can try saving the data to your backend or local storage for example.
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
 
-| Name | Type | Descrption |
+| Name | Type | Description |
 | --- | --- | --- |
 | `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | The App state with which Excalidraw should be mounted. |
@@ -679,7 +679,7 @@ Enable this if you want Excalidraw to handle keyboard even if the component isn'
 
 #### `onLibraryChange`
 
-Ths callback if supplied will get triggered when the library is updated and has the below signature.
+This callback if supplied will get triggered when the library is updated and has the below signature.
 
 <pre>
 (items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void | Promise<any>

src/packages/excalidraw/README_NEXT.md

@@ -431,7 +431,7 @@ Here you can try saving the data to your backend or local storage for example.
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
 
-| Name | Type | Descrption |
+| Name | Type | Description |
 | --- | --- | --- |
 | `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | The App state with which Excalidraw should be mounted. |
@@ -685,7 +685,7 @@ Enable this if you want Excalidraw to handle keyboard even if the component isn'
 
 #### `onLibraryChange`
 
-Ths callback if supplied will get triggered when the library is updated and has the below signature.
+This callback if supplied will get triggered when the library is updated and has the below signature.
 
 <pre>
 (items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void | Promise<any>

src/packages/excalidraw/example/App.js

@@ -7,7 +7,7 @@ import "./App.scss";
 import initialData from "./initialData";
 import { MIME_TYPES } from "../../../constants";
 
-// This is so that we use the bundled excalidraw.developement.js file instead
+// This is so that we use the bundled excalidraw.development.js file instead
 // of the actual source code
 const { exportToCanvas, exportToSvg, exportToBlob } = window.Excalidraw;
 const Excalidraw = window.Excalidraw.default;

src/packages/excalidraw/example/public/index.html

@@ -20,7 +20,7 @@
     <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
 
-    <!-- This is so that we use the bundled excalidraw.developement.js file instead
+    <!-- This is so that we use the bundled excalidraw.development.js file instead
     of the actual source code -->
     <script src="./excalidraw.development.js"></script>
 

src/packages/utils/README.md

@@ -8,7 +8,7 @@ npm install @excalidraw/utils
 
 If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
 
-```bashs
+```bash
 yarn add @excalidraw/utils
 ```
 

src/packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/utils",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "dist/excalidraw-utils.min.js",
   "files": [
     "dist/*"
@@ -37,8 +37,8 @@
     "@babel/core": "7.17.2",
     "@babel/plugin-transform-arrow-functions": "7.16.0",
     "@babel/plugin-transform-async-to-generator": "7.16.5",
-    "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/plugin-transform-typescript": "7.16.7",
+    "@babel/plugin-transform-runtime": "7.17.0",
+    "@babel/plugin-transform-typescript": "7.16.1",
     "@babel/preset-env": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "babel-loader": "8.2.3",
@@ -50,7 +50,7 @@
     "ts-loader": "9.2.6",
     "webpack": "5.66.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.9.1"
+    "webpack-cli": "4.9.2"
   },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",