Update renderElement.ts

* fix: show error message on collab save failure

* comment

.dockerignore

@@ -1,5 +1,6 @@
 *
-!.env
+!.env.development
+!.env.production
 !.eslintrc.json
 !.npmrc
 !.prettierrc

.env.development

@@ -20,3 +20,5 @@ REACT_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 REACT_APP_DEV_DISABLE_LIVE_RELOAD=
+
+FAST_REFRESH=false

.github/workflows/autorelease-excalidraw.yml

@@ -2,7 +2,7 @@ name: Auto release excalidraw next
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   Auto-release-excalidraw-next:

.github/workflows/build-docker.yml

@@ -3,7 +3,7 @@ name: Build Docker image
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   build-docker:

.github/workflows/cancel.yml

@@ -3,7 +3,7 @@ name: Cancel previous runs
 on:
   push:
     branches:
-      - master
+      - release
   pull_request:
 
 jobs:

.github/workflows/publish-docker.yml

@@ -3,7 +3,7 @@ name: Publish Docker
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   publish-docker:

.github/workflows/sentry-production.yml

@@ -3,7 +3,7 @@ name: New Sentry production release
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   sentry:

dev-docs/yarn.lock

@@ -4755,9 +4755,9 @@ loader-runner@^4.2.0:
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^2.0.0:
-  version "2.0.2"
+  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
-  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"

package.json

@@ -31,6 +31,7 @@
     "@types/socket.io-client": "1.4.36",
     "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
+    "cross-env": "7.0.3",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
@@ -50,11 +51,23 @@
     "pwacompat": "2.0.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
     "socket.io-client": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.9.4",
+    "workbox-background-sync": "^6.5.4",
+    "workbox-broadcast-update": "^6.5.4",
+    "workbox-cacheable-response": "^6.5.4",
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-google-analytics": "^6.5.4",
+    "workbox-navigation-preload": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-range-requests": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.0",
@@ -67,6 +80,7 @@
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "3.3.1",
+    "http-server": "14.1.1",
     "husky": "7.0.4",
     "jest-canvas-mock": "2.4.0",
     "lint-staged": "12.3.7",
@@ -89,11 +103,10 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
+    "build:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true REACT_APP_DISABLE_TRACKING=true react-scripts build",
-    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
+    "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build:prebuild": "node ./scripts/prebuild.js",
+    "build": "yarn build:app && yarn build:version",
-    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
@@ -103,6 +116,7 @@
     "prepare": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
+    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",

public/index.html

@@ -146,7 +146,8 @@
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>
-    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
+    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true' &&
+    process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"

public/service-worker.js

@@ -1,81 +0,0 @@
-// eslint-disable-next-line no-restricted-globals
-// eslint-disable-next-line no-unused-expressions
-
-/* eslint-disable no-restricted-globals */
-/* global importScripts, workbox */
-
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-// in dev, `process` is undefined because this file is not compiled until build
-const IS_DEVELOPMENT =
-  typeof process === "undefined" || process.env.NODE_ENV !== "production";
-
-if (IS_DEVELOPMENT) {
-  importScripts(
-    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js",
-  );
-  workbox.setConfig({
-    debug: true,
-  });
-} else {
-  importScripts("/workbox/workbox-sw.js");
-  workbox.setConfig({
-    modulePathPrefix: "/workbox/",
-  });
-}
-
-self.addEventListener("message", (event) => {
-  if (event.data && event.data.type === "SKIP_WAITING") {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-if (!IS_DEVELOPMENT) {
-  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
-
-  workbox.routing.registerNavigationRoute(
-    workbox.precaching.getCacheKeyForURL("./index.html"),
-    {
-      blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
-    },
-  );
-}
-
-// Cache relevant font files
-workbox.routing.registerRoute(
-  new RegExp("/(fonts.css|.+.(ttf|woff2|otf))"),
-  new workbox.strategies.StaleWhileRevalidate({
-    cacheName: "fonts",
-    plugins: [new workbox.expiration.Plugin({ maxEntries: 10 })],
-  }),
-);
-
-self.addEventListener("fetch", (event) => {
-  if (
-    event.request.method === "POST" &&
-    event.request.url.endsWith("/web-share-target")
-  ) {
-    return event.respondWith(
-      (async () => {
-        const formData = await event.request.formData();
-        const file = formData.get("file");
-        const webShareTargetCache = await caches.open("web-share-target");
-        await webShareTargetCache.put("shared-file", new Response(file));
-        return Response.redirect("/?web-share-target", 303);
-      })(),
-    );
-  }
-});

scripts/locales-coverage-description.js

@@ -50,8 +50,8 @@ const crowdinMap = {
   "lv-LV": "en-lv",
   "cs-CZ": "en-cs",
   "kk-KZ": "en-kk",
-  "vi-vn": "en-vi",
+  "vi-VN": "en-vi",
-  "mr-in": "en-mr",
+  "mr-IN": "en-mr",
 };
 
 const flags = {
@@ -120,6 +120,7 @@ const languages = {
   "fa-IR": "فارسی",
   "fi-FI": "Suomi",
   "fr-FR": "Français",
+  "gl-ES": "Galego",
   "he-IL": "עברית",
   "hi-IN": "हिन्दी",
   "hu-HU": "Magyar",
@@ -129,6 +130,7 @@ const languages = {
   "kab-KAB": "Taqbaylit",
   "kk-KZ": "Қазақ тілі",
   "ko-KR": "한국어",
+  "ku-TR": "Kurdî",
   "lt-LT": "Lietuvių",
   "lv-LV": "Latviešu",
   "my-MM": "Burmese",

scripts/prebuild.js

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

src/actions/actionBoundText.tsx

@@ -6,6 +6,10 @@ import {
   measureText,
   redrawTextBoundingBox,
 } from "../element/textElement";
+import {
+  getOriginalContainerHeightFromCache,
+  resetOriginalContainerCache,
+} from "../element/textWysiwyg";
 import {
   hasBoundTextElement,
   isTextBindableContainer,
@@ -38,6 +42,11 @@ export const actionUnbindText = register({
           boundTextElement.originalText,
           getFontString(boundTextElement),
         );
+        const originalContainerHeight = getOriginalContainerHeightFromCache(
+          element.id,
+        );
+        resetOriginalContainerCache(element.id);
+
         mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
@@ -49,6 +58,9 @@ export const actionUnbindText = register({
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id,
           ),
+          height: originalContainerHeight
+            ? originalContainerHeight
+            : element.height,
         });
       }
     });

src/actions/actionCanvas.tsx

@@ -90,6 +90,7 @@ export const actionClearCanvas = register({
 
 export const actionZoomIn = register({
   name: "zoomIn",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -126,6 +127,7 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -162,6 +164,7 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -271,6 +274,7 @@ export const actionZoomToSelected = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, false),
   keyTest: (event) =>
@@ -282,6 +286,7 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
     return {

src/actions/actionClipboard.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
+  probablySupportsClipboardBlob,
   probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
@@ -23,11 +24,31 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
   contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
+export const actionPaste = register({
+  name: "paste",
+  trackEvent: { category: "element" },
+  perform: (elements: any, appStates: any, data, app) => {
+    app.pasteFromClipboard(null);
+    return {
+      commitToHistory: false,
+    };
+  },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
+  contextItemLabel: "labels.paste",
+  // don't supply a shortcut since we handle this conditionally via onCopy event
+  keyTest: undefined,
+});
+
 export const actionCut = register({
   name: "cut",
   trackEvent: { category: "element" },
@@ -35,6 +56,9 @@ export const actionCut = register({
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
   },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
   contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
@@ -77,6 +101,9 @@ export const actionCopyAsSvg = register({
       };
     }
   },
+  contextItemPredicate: (elements) => {
+    return probablySupportsClipboardWriteText && elements.length > 0;
+  },
   contextItemLabel: "labels.copyAsSvg",
 });
 
@@ -131,6 +158,9 @@ export const actionCopyAsPng = register({
       };
     }
   },
+  contextItemPredicate: (elements) => {
+    return probablySupportsClipboardBlob && elements.length > 0;
+  },
   contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });

src/actions/actionExport.tsx

@@ -179,6 +179,7 @@ export const actionSaveToActiveFile = register({
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
+  viewMode: true,
   trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     try {

src/actions/actionFlip.ts

@@ -14,6 +14,7 @@ import {
 } from "../element/bounds";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { KEYS } from "../keys";
 
 const enableActionFlipHorizontal = (
   elements: readonly ExcalidrawElement[],
@@ -63,7 +64,8 @@ export const actionFlipVertical = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) => event.shiftKey && event.code === "KeyV",
+  keyTest: (event) =>
+    event.shiftKey && event.code === "KeyV" && !event[KEYS.CTRL_OR_CMD],
   contextItemLabel: "labels.flipVertical",
   contextItemPredicate: (elements, appState) =>
     enableActionFlipVertical(elements, appState),
@@ -151,11 +153,7 @@ const flipElement = (
 
   let initialPointsCoords;
   if (isLinearElement(element)) {
-    initialPointsCoords = getElementPointsCoords(
+    initialPointsCoords = getElementPointsCoords(element, element.points);
-      element,
-      element.points,
-      element.strokeSharpness,
-    );
   }
   const initialElementAbsoluteCoords = getElementAbsoluteCoords(element);
 
@@ -213,11 +211,7 @@ const flipElement = (
     // Adjusting origin because when a beizer curve path exceeds min/max points it offsets the origin.
     // There's still room for improvement since when the line roughness is > 1
     // we still have a small offset of the origin when fliipping the element.
-    const finalPointsCoords = getElementPointsCoords(
+    const finalPointsCoords = getElementPointsCoords(element, element.points);
-      element,
-      element.points,
-      element.strokeSharpness,
-    );
 
     const topLeftCoordsDiff = initialPointsCoords[0] - finalPointsCoords[0];
     const topRightCoordDiff = initialPointsCoords[2] - finalPointsCoords[2];

src/actions/actionMenu.tsx

@@ -56,6 +56,7 @@ export const actionToggleEditMenu = register({
 
 export const actionFullScreen = register({
   name: "toggleFullScreen",
+  viewMode: true,
   trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
   perform: () => {
     if (!isFullScreen()) {
@@ -73,6 +74,7 @@ export const actionFullScreen = register({
 
 export const actionShortcuts = register({
   name: "toggleShortcuts",
+  viewMode: true,
   trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {
     if (appState.openDialog === "help") {

src/actions/actionNavigate.tsx

@@ -6,6 +6,7 @@ import { register } from "./register";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
+  viewMode: true,
   trackEvent: { category: "collab" },
   perform: (_elements, appState, value) => {
     const point = value as Collaborator["pointer"];

src/actions/actionProperties.tsx

@@ -42,6 +42,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
+  ROUNDNESS,
   VERTICAL_ALIGN,
 } from "../constants";
 import {
@@ -57,7 +58,7 @@ import {
 import {
   isBoundToContainer,
   isLinearElement,
-  isLinearElementType,
+  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
 import {
   Arrowhead,
@@ -72,7 +73,7 @@ import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
-  canChangeSharpness,
+  canChangeRoundness,
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
   getSelectedElements,
@@ -816,16 +817,19 @@ export const actionChangeVerticalAlign = register({
               value: VERTICAL_ALIGN.TOP,
               text: t("labels.alignTop"),
               icon: <TextAlignTopIcon theme={appState.theme} />,
+              testId: "align-top",
             },
             {
               value: VERTICAL_ALIGN.MIDDLE,
               text: t("labels.centerVertically"),
               icon: <TextAlignMiddleIcon theme={appState.theme} />,
+              testId: "align-middle",
             },
             {
               value: VERTICAL_ALIGN.BOTTOM,
               text: t("labels.alignBottom"),
               icon: <TextAlignBottomIcon theme={appState.theme} />,
+              testId: "align-bottom",
             },
           ]}
           value={getFormValue(elements, appState, (element) => {
@@ -845,69 +849,71 @@ export const actionChangeVerticalAlign = register({
   },
 });
 
-export const actionChangeSharpness = register({
+export const actionChangeRoundness = register({
-  name: "changeSharpness",
+  name: "changeRoundness",
   trackEvent: false,
   perform: (elements, appState, value) => {
-    const targetElements = getTargetElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    const shouldUpdateForNonLinearElements = targetElements.length
-      ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.activeTool.type);
-    const shouldUpdateForLinearElements = targetElements.length
-      ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.activeTool.type);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
-          strokeSharpness: value,
+          roundness:
+            value === "round"
+              ? {
+                  type: isUsingAdaptiveRadius(el.type)
+                    ? ROUNDNESS.ADAPTIVE_RADIUS
+                    : ROUNDNESS.PROPORTIONAL_RADIUS,
+                }
+              : null,
         }),
       ),
       appState: {
         ...appState,
-        currentItemStrokeSharpness: shouldUpdateForNonLinearElements
+        currentItemRoundness: value,
-          ? value
-          : appState.currentItemStrokeSharpness,
-        currentItemLinearStrokeSharpness: shouldUpdateForLinearElements
-          ? value
-          : appState.currentItemLinearStrokeSharpness,
       },
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
+  PanelComponent: ({ elements, appState, updateData }) => {
-    <fieldset>
+    const targetElements = getTargetElements(
-      <legend>{t("labels.edges")}</legend>
+      getNonDeletedElements(elements),
-      <ButtonIconSelect
+      appState,
-        group="edges"
+    );
-        options={[
+
-          {
+    const hasLegacyRoundness = targetElements.some(
-            value: "sharp",
+      (el) => el.roundness?.type === ROUNDNESS.LEGACY,
-            text: t("labels.sharp"),
+    );
-            icon: EdgeSharpIcon,
+
-          },
+    return (
-          {
+      <fieldset>
-            value: "round",
+        <legend>{t("labels.edges")}</legend>
-            text: t("labels.round"),
+        <ButtonIconSelect
-            icon: EdgeRoundIcon,
+          group="edges"
-          },
+          options={[
-        ]}
+            {
-        value={getFormValue(
+              value: "sharp",
-          elements,
+              text: t("labels.sharp"),
-          appState,
+              icon: EdgeSharpIcon,
-          (element) => element.strokeSharpness,
+            },
-          (canChangeSharpness(appState.activeTool.type) &&
+            {
-            (isLinearElementType(appState.activeTool.type)
+              value: "round",
-              ? appState.currentItemLinearStrokeSharpness
+              text: t("labels.round"),
-              : appState.currentItemStrokeSharpness)) ||
+              icon: EdgeRoundIcon,
-            null,
+            },
-        )}
+          ]}
-        onChange={(value) => updateData(value)}
+          value={getFormValue(
-      />
+            elements,
-    </fieldset>
+            appState,
-  ),
+            (element) =>
+              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
+            (canChangeRoundness(appState.activeTool.type) &&
+              appState.currentItemRoundness) ||
+              null,
+          )}
+          onChange={(value) => updateData(value)}
+        />
+      </fieldset>
+    );
+  },
 });
 
 export const actionChangeArrowhead = register({

src/actions/actionStyles.ts

@@ -13,7 +13,11 @@ import {
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
 import { getBoundTextElement } from "../element/textElement";
-import { hasBoundTextElement } from "../element/typeChecks";
+import {
+  hasBoundTextElement,
+  canApplyRoundnessTypeToElement,
+  getDefaultRoundnessTypeForElement,
+} from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 
 // `copiedStyles` is exported only for tests.
@@ -77,6 +81,14 @@ export const actionPasteStyles = register({
             fillStyle: elementStylesToCopyFrom?.fillStyle,
             opacity: elementStylesToCopyFrom?.opacity,
             roughness: elementStylesToCopyFrom?.roughness,
+            roundness: elementStylesToCopyFrom.roundness
+              ? canApplyRoundnessTypeToElement(
+                  elementStylesToCopyFrom.roundness.type,
+                  element,
+                )
+                ? elementStylesToCopyFrom.roundness
+                : getDefaultRoundnessTypeForElement(element)
+              : null,
           });
 
           if (isTextElement(newElement)) {

src/actions/actionToggleGridMode.tsx

@@ -5,6 +5,7 @@ import { AppState } from "../types";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
+  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.gridSize,
@@ -19,6 +20,9 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
+  contextItemPredicate: (element, appState, props) => {
+    return typeof props.gridModeEnabled === "undefined";
+  },
   contextItemLabel: "labels.showGrid",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleLock.ts

@@ -41,15 +41,9 @@ export const actionToggleLock = register({
         : "labels.elementLock.lock";
     }
 
-    if (selected.length > 1) {
+    return getOperation(selected) === "lock"
-      return getOperation(selected) === "lock"
+      ? "labels.elementLock.lockAll"
-        ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
-        : "labels.elementLock.unlockAll";
-    }
-
-    throw new Error(
-      "Unexpected zero elements to lock/unlock. This should never happen.",
-    );
   },
   keyTest: (event, appState, elements) => {
     return (

src/actions/actionToggleStats.tsx

@@ -3,6 +3,7 @@ import { CODES, KEYS } from "../keys";
 
 export const actionToggleStats = register({
   name: "stats",
+  viewMode: true,
   trackEvent: { category: "menu" },
   perform(elements, appState) {
     return {

src/actions/actionToggleViewMode.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 
 export const actionToggleViewMode = register({
   name: "viewMode",
+  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.viewModeEnabled,
@@ -17,6 +18,9 @@ export const actionToggleViewMode = register({
     };
   },
   checked: (appState) => appState.viewModeEnabled,
+  contextItemPredicate: (elements, appState, appProps) => {
+    return typeof appProps.viewModeEnabled === "undefined";
+  },
   contextItemLabel: "labels.viewMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,

src/actions/actionToggleZenMode.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
+  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.zenModeEnabled,
@@ -17,6 +18,9 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
+  contextItemPredicate: (elements, appState, appProps) => {
+    return typeof appProps.zenModeEnabled === "undefined";
+  },
   contextItemLabel: "buttons.zenMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,

src/actions/manager.tsx

@@ -9,7 +9,6 @@ import {
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
-import { MODES } from "../constants";
 import { trackEvent } from "../analytics";
 
 const trackAction = (
@@ -103,11 +102,8 @@ export class ActionManager {
 
     const action = data[0];
 
-    const { viewModeEnabled } = this.getAppState();
+    if (this.getAppState().viewModeEnabled && action.viewMode !== true) {
-    if (viewModeEnabled) {
+      return false;
-      if (!Object.values(MODES).includes(data[0].name)) {
-        return false;
-      }
     }
 
     const elements = this.getElementsIncludingDeleted();

src/actions/shortcuts.ts

@@ -48,7 +48,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   copyStyles: [getShortcutKey("CtrlOrCmd+Alt+C")],
   pasteStyles: [getShortcutKey("CtrlOrCmd+Alt+V")],
   selectAll: [getShortcutKey("CtrlOrCmd+A")],
-  deleteSelectedElements: [getShortcutKey("Del")],
+  deleteSelectedElements: [getShortcutKey("Delete")],
   duplicateSelection: [
     getShortcutKey("CtrlOrCmd+D"),
     getShortcutKey(`Alt+${t("helpDialog.drag")}`),

src/actions/types.ts

@@ -91,7 +91,7 @@ export type ActionName =
   | "ungroup"
   | "goToCollaborator"
   | "addToLibrary"
-  | "changeSharpness"
+  | "changeRoundness"
   | "alignTop"
   | "alignBottom"
   | "alignLeft"
@@ -143,6 +143,8 @@ export interface Action {
   contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
+    appProps: ExcalidrawProps,
+    app: AppClassProperties,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
   trackEvent:
@@ -164,4 +166,7 @@ export interface Action {
           value: any,
         ) => boolean;
       };
+  /** if set to `true`, allow action to be performed in viewMode.
+   *  Defaults to `false` */
+  viewMode?: boolean;
 }

src/appState.ts

@@ -28,12 +28,11 @@ export const getDefaultAppState = (): Omit<
     currentItemFillStyle: "hachure",
     currentItemFontFamily: DEFAULT_FONT_FAMILY,
     currentItemFontSize: DEFAULT_FONT_SIZE,
-    currentItemLinearStrokeSharpness: "round",
     currentItemOpacity: 100,
     currentItemRoughness: 1,
     currentItemStartArrowhead: null,
     currentItemStrokeColor: oc.black,
-    currentItemStrokeSharpness: "sharp",
+    currentItemRoundness: "round",
     currentItemStrokeStyle: "solid",
     currentItemStrokeWidth: 1,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
@@ -65,6 +64,7 @@ export const getDefaultAppState = (): Omit<
     lastPointerDownWith: "mouse",
     multiElement: null,
     name: `${t("labels.untitled")}-${getDateTime()}`,
+    contextMenu: null,
     openMenu: null,
     openPopup: null,
     openSidebar: null,
@@ -120,7 +120,7 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemFillStyle: { browser: true, export: false, server: false },
   currentItemFontFamily: { browser: true, export: false, server: false },
   currentItemFontSize: { browser: true, export: false, server: false },
-  currentItemLinearStrokeSharpness: {
+  currentItemRoundness: {
     browser: true,
     export: false,
     server: false,
@@ -129,7 +129,6 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemRoughness: { browser: true, export: false, server: false },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
   currentItemStrokeColor: { browser: true, export: false, server: false },
-  currentItemStrokeSharpness: { browser: true, export: false, server: false },
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidth: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
@@ -159,6 +158,7 @@ const APP_STATE_STORAGE_CONF = (<
   name: { browser: true, export: false, server: false },
   offsetLeft: { browser: false, export: false, server: false },
   offsetTop: { browser: false, export: false, server: false },
+  contextMenu: { browser: false, export: false, server: false },
   openMenu: { browser: true, export: false, server: false },
   openPopup: { browser: false, export: false, server: false },
   openSidebar: { browser: true, export: false, server: false },

src/charts.ts

@@ -172,7 +172,7 @@ const commonProps = {
   opacity: 100,
   roughness: 1,
   strokeColor: colors.elementStroke[0],
-  strokeSharpness: "sharp",
+  roundness: null,
   strokeStyle: "solid",
   strokeWidth: 1,
   verticalAlign: VERTICAL_ALIGN.MIDDLE,
@@ -322,7 +322,7 @@ const chartBaseElements = (
         text: spreadsheet.title,
         x: x + chartWidth / 2,
         y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
-        strokeSharpness: "sharp",
+        roundness: null,
         strokeStyle: "solid",
         textAlign: "center",
       })

src/clipboard.test.ts

@@ -0,0 +1,27 @@
+import { parseClipboard } from "./clipboard";
+
+describe("Test parseClipboard", () => {
+  it("should parse valid json correctly", async () => {
+    let text = "123";
+
+    let clipboardData = await parseClipboard({
+      //@ts-ignore
+      clipboardData: {
+        getData: () => text,
+      },
+    });
+
+    expect(clipboardData.text).toBe(text);
+
+    text = "[123]";
+
+    clipboardData = await parseClipboard({
+      //@ts-ignore
+      clipboardData: {
+        getData: () => text,
+      },
+    });
+
+    expect(clipboardData.text).toBe(text);
+  });
+});

src/clipboard.ts

@@ -109,16 +109,16 @@ const parsePotentialSpreadsheet = (
  * Retrieves content from system clipboard (either from ClipboardEvent or
  *  via async clipboard API if supported)
  */
-const getSystemClipboard = async (
+export const getSystemClipboard = async (
   event: ClipboardEvent | null,
 ): Promise<string> => {
   try {
     const text = event
-      ? event.clipboardData?.getData("text/plain").trim()
+      ? event.clipboardData?.getData("text/plain")
       : probablySupportsClipboardReadText &&
         (await navigator.clipboard.readText());
 
-    return text || "";
+    return (text || "").trim();
   } catch {
     return "";
   }
@@ -129,19 +129,25 @@ const getSystemClipboard = async (
  */
 export const parseClipboard = async (
   event: ClipboardEvent | null,
+  isPlainPaste = false,
 ): Promise<ClipboardData> => {
   const systemClipboard = await getSystemClipboard(event);
 
   // if system clipboard empty, couldn't be resolved, or contains previously
   // copied excalidraw scene as SVG, fall back to previously copied excalidraw
   // elements
-  if (!systemClipboard || systemClipboard.includes(SVG_EXPORT_TAG)) {
+  if (
+    !systemClipboard ||
+    (!isPlainPaste && systemClipboard.includes(SVG_EXPORT_TAG))
+  ) {
     return getAppClipboard();
   }
 
   // if system clipboard contains spreadsheet, use it even though it's
   // technically possible it's staler than in-app clipboard
-  const spreadsheetResult = parsePotentialSpreadsheet(systemClipboard);
+  const spreadsheetResult =
+    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard);
+
   if (spreadsheetResult) {
     return spreadsheetResult;
   }
@@ -154,17 +160,23 @@ export const parseClipboard = async (
       return {
         elements: systemClipboardData.elements,
         files: systemClipboardData.files,
+        text: isPlainPaste
+          ? JSON.stringify(systemClipboardData.elements, null, 2)
+          : undefined,
       };
     }
-    return appClipboardData;
+  } catch (e) {}
-  } catch {
+  // system clipboard doesn't contain excalidraw elements → return plaintext
-    // system clipboard doesn't contain excalidraw elements → return plaintext
+  // unless we set a flag to prefer in-app clipboard because browser didn't
-    // unless we set a flag to prefer in-app clipboard because browser didn't
+  // support storing to system clipboard on copy
-    // support storing to system clipboard on copy
+  return PREFER_APP_CLIPBOARD && appClipboardData.elements
-    return PREFER_APP_CLIPBOARD && appClipboardData.elements
+    ? {
-      ? appClipboardData
+        ...appClipboardData,
-      : { text: systemClipboard };
+        text: isPlainPaste
-  }
+          ? JSON.stringify(appClipboardData.elements, null, 2)
+          : undefined,
+      }
+    : { text: systemClipboard };
 };
 
 export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {

src/components/Actions.tsx

@@ -5,7 +5,7 @@ import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
-  canChangeSharpness,
+  canChangeRoundness,
   canHaveArrowheads,
   getTargetElements,
   hasBackground,
@@ -25,11 +25,12 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
+import { hasBoundTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import "./Actions.scss";
 import { Tooltip } from "./Tooltip";
+import { shouldAllowVerticalAlign } from "../element/textElement";
 
 export const SelectedShapeActions = ({
   appState,
@@ -109,9 +110,9 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(appState.activeTool.type) ||
+      {(canChangeRoundness(appState.activeTool.type) ||
-        targetElements.some((element) => canChangeSharpness(element.type))) && (
+        targetElements.some((element) => canChangeRoundness(element.type))) && (
-        <>{renderAction("changeSharpness")}</>
+        <>{renderAction("changeRoundness")}</>
       )}
 
       {(hasText(appState.activeTool.type) ||
@@ -125,10 +126,8 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {targetElements.some(
+      {shouldAllowVerticalAlign(targetElements) &&
-        (element) =>
+        renderAction("changeVerticalAlign")}
-          hasBoundTextElement(element) || isBoundToContainer(element),
-      ) && renderAction("changeVerticalAlign")}
       {(canHaveArrowheads(appState.activeTool.type) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
@@ -218,13 +217,12 @@ export const ShapesSwitcher = ({
   appState: AppState;
 }) => (
   <>
-    {SHAPES.map(({ value, icon, key, fillable }, index) => {
+    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-      const numberKey = value === "eraser" ? 0 : index + 1;
       const label = t(`toolBar.${value}`);
       const letter = key && (typeof key === "string" ? key : key[0]);
       const shortcut = letter
-        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numberKey}`
+        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numericKey}`
-        : `${numberKey}`;
+        : `${numericKey}`;
       return (
         <ToolButton
           className={clsx("Shape", { fillable })}
@@ -234,7 +232,7 @@ export const ShapesSwitcher = ({
           checked={activeTool.type === value}
           name="editor-current-shape"
           title={`${capitalizeString(label)} — ${shortcut}`}
-          keyBindingLabel={`${numberKey}`}
+          keyBindingLabel={numericKey}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
           data-testid={`toolbar-${value}`}

src/components/Avatar.scss

@@ -4,8 +4,8 @@
   .Avatar {
     width: 1.25rem;
     height: 1.25rem;
+    position: relative;
     border-radius: 100%;
-    outline: 2px solid var(--avatar-border-color);
     outline-offset: 2px;
     display: flex;
     justify-content: center;
@@ -21,5 +21,16 @@
       height: 100%;
       border-radius: 100%;
     }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -3px;
+      right: -3px;
+      bottom: -3px;
+      left: -3px;
+      border: 1px solid var(--avatar-border-color);
+      border-radius: 100%;
+    }
   }
 }

src/components/ColorPicker.tsx

@@ -66,10 +66,13 @@ const getColor = (color: string): string | null => {
     return color;
   }
 
-  return isValidColor(color)
+  // testing for `#` first fixes a bug on Electron (more specfically, an
-    ? color
+  // Obsidian popout window), where a hex color without `#` is (incorrectly)
-    : isValidColor(`#${color}`)
+  // considered valid
+  return isValidColor(`#${color}`)
     ? `#${color}`
+    : isValidColor(color)
+    ? color
     : null;
 };
 

src/components/ContextMenu.scss

@@ -19,7 +19,7 @@
     color: var(--popup-text-color);
   }
 
-  .context-menu-option {
+  .context-menu-item {
     position: relative;
     width: 100%;
     min-width: 9.5rem;
@@ -43,16 +43,16 @@
     }
 
     &.dangerous {
-      .context-menu-option__label {
+      .context-menu-item__label {
         color: $oc-red-7;
       }
     }
 
-    .context-menu-option__label {
+    .context-menu-item__label {
       justify-self: start;
       margin-inline-end: 20px;
     }
-    .context-menu-option__shortcut {
+    .context-menu-item__shortcut {
       justify-self: end;
       opacity: 0.6;
       font-family: inherit;
@@ -60,37 +60,37 @@
     }
   }
 
-  .context-menu-option:hover {
+  .context-menu-item:hover {
     color: var(--popup-bg-color);
     background-color: var(--select-highlight-color);
 
     &.dangerous {
-      .context-menu-option__label {
+      .context-menu-item__label {
         color: var(--popup-bg-color);
       }
       background-color: $oc-red-6;
     }
   }
 
-  .context-menu-option:focus {
+  .context-menu-item:focus {
     z-index: 1;
   }
 
   @include isMobile {
-    .context-menu-option {
+    .context-menu-item {
       display: block;
 
-      .context-menu-option__label {
+      .context-menu-item__label {
         margin-inline-end: 0;
       }
 
-      .context-menu-option__shortcut {
+      .context-menu-item__shortcut {
         display: none;
       }
     }
   }
 
-  .context-menu-option-separator {
+  .context-menu-item-separator {
     border: none;
     border-top: 1px solid $oc-gray-5;
   }

src/components/ContextMenu.tsx

@@ -1,4 +1,3 @@
-import { render, unmountComponentAtNode } from "react-dom";
 import clsx from "clsx";
 import { Popover } from "./Popover";
 import { t } from "../i18n";
@@ -10,140 +9,116 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
+import {
-import { NonDeletedExcalidrawElement } from "../element/types";
+  useExcalidrawAppState,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
+import React from "react";
 
-export type ContextMenuOption = "separator" | Action;
+export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
+
+export type ContextMenuItems = (ContextMenuItem | false | null | undefined)[];
 
 type ContextMenuProps = {
-  options: ContextMenuOption[];
+  actionManager: ActionManager;
-  onCloseRequest?(): void;
+  items: ContextMenuItems;
   top: number;
   left: number;
-  actionManager: ActionManager;
-  appState: Readonly<AppState>;
-  elements: readonly NonDeletedExcalidrawElement[];
 };
 
-const ContextMenu = ({
+export const CONTEXT_MENU_SEPARATOR = "separator";
-  options,
-  onCloseRequest,
-  top,
-  left,
-  actionManager,
-  appState,
-  elements,
-}: ContextMenuProps) => {
-  return (
-    <Popover
-      onCloseRequest={onCloseRequest}
-      top={top}
-      left={left}
-      fitInViewport={true}
-      offsetLeft={appState.offsetLeft}
-      offsetTop={appState.offsetTop}
-      viewportWidth={appState.width}
-      viewportHeight={appState.height}
-    >
-      <ul
-        className="context-menu"
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        {options.map((option, idx) => {
-          if (option === "separator") {
-            return <hr key={idx} className="context-menu-option-separator" />;
-          }
 
-          const actionName = option.name;
+export const ContextMenu = React.memo(
-          let label = "";
+  ({ actionManager, items, top, left }: ContextMenuProps) => {
-          if (option.contextItemLabel) {
+    const appState = useExcalidrawAppState();
-            if (typeof option.contextItemLabel === "function") {
+    const setAppState = useExcalidrawSetAppState();
-              label = t(option.contextItemLabel(elements, appState));
+    const elements = useExcalidrawElements();
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
-          return (
-            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
-              <button
-                className={clsx("context-menu-option", {
-                  dangerous: actionName === "deleteSelectedElements",
-                  checkmark: option.checked?.(appState),
-                })}
-                onClick={() =>
-                  actionManager.executeAction(option, "contextMenu")
-                }
-              >
-                <div className="context-menu-option__label">{label}</div>
-                <kbd className="context-menu-option__shortcut">
-                  {actionName
-                    ? getShortcutFromShortcutName(actionName as ShortcutName)
-                    : ""}
-                </kbd>
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </Popover>
-  );
-};
 
-const contextMenuNodeByContainer = new WeakMap<HTMLElement, HTMLDivElement>();
+    const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
-
+      if (
-const getContextMenuNode = (container: HTMLElement): HTMLDivElement => {
+        item &&
-  let contextMenuNode = contextMenuNodeByContainer.get(container);
+        (item === CONTEXT_MENU_SEPARATOR ||
-  if (contextMenuNode) {
+          !item.contextItemPredicate ||
-    return contextMenuNode;
+          item.contextItemPredicate(
-  }
+            elements,
-  contextMenuNode = document.createElement("div");
+            appState,
-  container
+            actionManager.app.props,
-    .querySelector(".excalidraw-contextMenuContainer")!
+            actionManager.app,
-    .appendChild(contextMenuNode);
+          ))
-  contextMenuNodeByContainer.set(container, contextMenuNode);
+      ) {
-  return contextMenuNode;
+        acc.push(item);
-};
-
-type ContextMenuParams = {
-  options: (ContextMenuOption | false | null | undefined)[];
-  top: ContextMenuProps["top"];
-  left: ContextMenuProps["left"];
-  actionManager: ContextMenuProps["actionManager"];
-  appState: Readonly<AppState>;
-  container: HTMLElement;
-  elements: readonly NonDeletedExcalidrawElement[];
-};
-
-const handleClose = (container: HTMLElement) => {
-  const contextMenuNode = contextMenuNodeByContainer.get(container);
-  if (contextMenuNode) {
-    unmountComponentAtNode(contextMenuNode);
-    contextMenuNode.remove();
-    contextMenuNodeByContainer.delete(container);
-  }
-};
-
-export default {
-  push(params: ContextMenuParams) {
-    const options = Array.of<ContextMenuOption>();
-    params.options.forEach((option) => {
-      if (option) {
-        options.push(option);
       }
-    });
+      return acc;
-    if (options.length) {
+    }, []);
-      render(
+
-        <ContextMenu
+    return (
-          top={params.top}
+      <Popover
-          left={params.left}
+        onCloseRequest={() => setAppState({ contextMenu: null })}
-          options={options}
+        top={top}
-          onCloseRequest={() => handleClose(params.container)}
+        left={left}
-          actionManager={params.actionManager}
+        fitInViewport={true}
-          appState={params.appState}
+        offsetLeft={appState.offsetLeft}
-          elements={params.elements}
+        offsetTop={appState.offsetTop}
-        />,
+        viewportWidth={appState.width}
-        getContextMenuNode(params.container),
+        viewportHeight={appState.height}
-      );
+      >
-    }
+        <ul
+          className="context-menu"
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          {filteredItems.map((item, idx) => {
+            if (item === CONTEXT_MENU_SEPARATOR) {
+              if (
+                !filteredItems[idx - 1] ||
+                filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR
+              ) {
+                return null;
+              }
+              return <hr key={idx} className="context-menu-item-separator" />;
+            }
+
+            const actionName = item.name;
+            let label = "";
+            if (item.contextItemLabel) {
+              if (typeof item.contextItemLabel === "function") {
+                label = t(item.contextItemLabel(elements, appState));
+              } else {
+                label = t(item.contextItemLabel);
+              }
+            }
+
+            return (
+              <li
+                key={idx}
+                data-testid={actionName}
+                onClick={() => {
+                  // we need update state before executing the action in case
+                  // the action uses the appState it's being passed (that still
+                  // contains a defined contextMenu) to return the next state.
+                  setAppState({ contextMenu: null }, () => {
+                    actionManager.executeAction(item, "contextMenu");
+                  });
+                }}
+              >
+                <button
+                  className={clsx("context-menu-item", {
+                    dangerous: actionName === "deleteSelectedElements",
+                    checkmark: item.checked?.(appState),
+                  })}
+                >
+                  <div className="context-menu-item__label">{label}</div>
+                  <kbd className="context-menu-item__shortcut">
+                    {actionName
+                      ? getShortcutFromShortcutName(actionName as ShortcutName)
+                      : ""}
+                  </kbd>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </Popover>
+    );
   },
-};
+);

src/components/HelpDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18n";
-import { isDarwin, isWindows } from "../keys";
+import { isDarwin, isWindows, KEYS } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
@@ -118,26 +118,49 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             className="HelpDialog__island--tools"
             caption={t("helpDialog.tools")}
           >
-            <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
+            <Shortcut
-            <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
+              label={t("toolBar.selection")}
-            <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
+              shortcuts={[KEYS.V, KEYS["1"]]}
-            <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
+            />
-            <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
+            <Shortcut
-            <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
+              label={t("toolBar.rectangle")}
+              shortcuts={[KEYS.R, KEYS["2"]]}
+            />
+            <Shortcut
+              label={t("toolBar.diamond")}
+              shortcuts={[KEYS.D, KEYS["3"]]}
+            />
+            <Shortcut
+              label={t("toolBar.ellipse")}
+              shortcuts={[KEYS.O, KEYS["4"]]}
+            />
+            <Shortcut
+              label={t("toolBar.arrow")}
+              shortcuts={[KEYS.A, KEYS["5"]]}
+            />
+            <Shortcut
+              label={t("toolBar.line")}
+              shortcuts={[KEYS.P, KEYS["6"]]}
+            />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={["Shift + P", "X", "7"]}
+              shortcuts={["Shift + P", KEYS["7"]]}
             />
-            <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
+            <Shortcut
-            <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
+              label={t("toolBar.text")}
-            <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
+              shortcuts={[KEYS.T, KEYS["8"]]}
+            />
+            <Shortcut label={t("toolBar.image")} shortcuts={[KEYS["9"]]} />
             <Shortcut
               label={t("toolBar.eraser")}
-              shortcuts={[getShortcutKey("E")]}
+              shortcuts={[KEYS.E, KEYS["0"]]}
             />
             <Shortcut
               label={t("helpDialog.editSelectedShape")}
-              shortcuts={[getShortcutKey("Enter"), t("helpDialog.doubleClick")]}
+              shortcuts={[
+                getShortcutKey("CtrlOrCmd+Enter"),
+                getShortcutKey(`CtrlOrCmd + ${t("helpDialog.doubleClick")}`),
+              ]}
             />
             <Shortcut
               label={t("helpDialog.textNewLine")}
@@ -173,7 +196,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               ]}
               isOr={false}
             />
-            <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
+            <Shortcut label={t("toolBar.lock")} shortcuts={[KEYS.Q]} />
             <Shortcut
               label={t("helpDialog.preventBinding")}
               shortcuts={[getShortcutKey("CtrlOrCmd")]}
@@ -207,6 +230,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("helpDialog.zoomToSelection")}
               shortcuts={["Shift+2"]}
             />
+            <Shortcut
+              label={t("helpDialog.movePageUpDown")}
+              shortcuts={["PgUp/PgDn"]}
+            />
+            <Shortcut
+              label={t("helpDialog.movePageLeftRight")}
+              shortcuts={["Shift+PgUp/PgDn"]}
+            />
             <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
             <Shortcut
               label={t("buttons.zenMode")}
@@ -269,6 +300,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("labels.paste")}
               shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
             />
+            <Shortcut
+              label={t("labels.pasteAsPlaintext")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]}
+            />
             <Shortcut
               label={t("labels.copyAsPng")}
               shortcuts={[getShortcutKey("Shift+Alt+C")]}
@@ -283,7 +318,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("labels.delete")}
-              shortcuts={[getShortcutKey("Del")]}
+              shortcuts={[getShortcutKey("Delete")]}
             />
             <Shortcut
               label={t("labels.sendToBack")}

src/components/ImageExportDialog.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
-import { render, unmountComponentAtNode } from "react-dom";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
@@ -33,19 +31,6 @@ export const ErrorCanvasPreview = () => {
   );
 };
 
-const renderPreview = (
-  content: HTMLCanvasElement | Error,
-  previewNode: HTMLDivElement,
-) => {
-  unmountComponentAtNode(previewNode);
-  previewNode.innerHTML = "";
-  if (content instanceof HTMLCanvasElement) {
-    previewNode.appendChild(content);
-  } else {
-    render(<ErrorCanvasPreview />, previewNode);
-  }
-};
-
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
   scale?: number,
@@ -99,6 +84,7 @@ const ImageExportModal = ({
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
   const { exportBackground, viewBackgroundColor } = appState;
+  const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
     ? getSelectedElements(elements, appState, true)
@@ -119,15 +105,16 @@ const ImageExportModal = ({
       exportPadding,
     })
       .then((canvas) => {
+        setRenderError(null);
         // if converting to blob fails, there's some problem that will
         // likely prevent preview and export (e.g. canvas too big)
         return canvasToBlob(canvas).then(() => {
-          renderPreview(canvas, previewNode);
+          previewNode.replaceChildren(canvas);
         });
       })
       .catch((error) => {
         console.error(error);
-        renderPreview(new CanvasError(), previewNode);
+        setRenderError(error);
       });
   }, [
     appState,
@@ -140,7 +127,9 @@ const ImageExportModal = ({
 
   return (
     <div className="ExportDialog">
-      <div className="ExportDialog__preview" ref={previewRef} />
+      <div className="ExportDialog__preview" ref={previewRef}>
+        {renderError && <ErrorCanvasPreview />}
+      </div>
       {supportsContextFilters &&
         actionManager.renderAction("exportWithDarkMode")}
       <div style={{ display: "grid", gridTemplateColumns: "1fr" }}>

src/components/LayerUI.scss

@@ -85,6 +85,10 @@
       & > * {
         pointer-events: all;
       }
+
+      display: flex;
+      width: 100%;
+      justify-content: flex-start;
     }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,

src/components/LayerUI.tsx

@@ -8,8 +8,14 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
+import {
-import { muteFSAbortError } from "../utils";
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+  UIChildrenComponents,
+} from "../types";
+import { muteFSAbortError, ReactChildrenToObject } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
@@ -38,7 +44,7 @@ import { trackEvent } from "../analytics";
 import { isMenuOpenAtom, useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
-import Footer from "./Footer";
+import Footer from "./footer/Footer";
 import {
   ExportImageIcon,
   HamburgerMenuIcon,
@@ -71,7 +77,6 @@ interface LayerUIProps {
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -81,7 +86,9 @@ interface LayerUIProps {
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderWelcomeScreen: boolean;
+  children?: React.ReactNode;
 }
+
 const LayerUI = ({
   actionManager,
   appState,
@@ -96,7 +103,7 @@ const LayerUI = ({
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
-  renderCustomFooter,
+
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -106,9 +113,13 @@ const LayerUI = ({
   id,
   onImageAction,
   renderWelcomeScreen,
+  children,
 }: LayerUIProps) => {
   const device = useDevice();
 
+  const childrenComponents =
+    ReactChildrenToObject<UIChildrenComponents>(children);
+
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
       return null;
@@ -196,6 +207,7 @@ const LayerUI = ({
         })}
         onClick={() => setIsMenuOpen(!isMenuOpen)}
         type="button"
+        data-testid="menu-button"
       >
         {HamburgerMenuIcon}
       </button>
@@ -220,13 +232,15 @@ const LayerUI = ({
               {appState.fileHandle &&
                 actionManager.renderAction("saveToActiveFile")}
               {renderJSONExportDialog()}
-              <MenuItem
+              {UIOptions.canvasActions.saveAsImage && (
-                label={t("buttons.exportImage")}
+                <MenuItem
-                icon={ExportImageIcon}
+                  label={t("buttons.exportImage")}
-                dataTestId="image-export-button"
+                  icon={ExportImageIcon}
-                onClick={() => setAppState({ openDialog: "imageExport" })}
+                  dataTestId="image-export-button"
-                shortcut={getShortcutFromShortcutName("imageExport")}
+                  onClick={() => setAppState({ openDialog: "imageExport" })}
-              />
+                  shortcut={getShortcutFromShortcutName("imageExport")}
+                />
+              )}
               {onCollabButtonClick && (
                 <CollabButton
                   isCollaborating={isCollaborating}
@@ -478,7 +492,6 @@ const LayerUI = ({
           onPenModeToggle={onPenModeToggle}
           canvas={canvas}
           isCollaborating={isCollaborating}
-          renderCustomFooter={renderCustomFooter}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
@@ -511,9 +524,11 @@ const LayerUI = ({
               renderWelcomeScreen={renderWelcomeScreen}
               appState={appState}
               actionManager={actionManager}
-              renderCustomFooter={renderCustomFooter}
               showExitZenModeBtn={showExitZenModeBtn}
-            />
+            >
+              {childrenComponents.FooterCenter}
+            </Footer>
+
             {appState.showStats && (
               <Stats
                 appState={appState}
@@ -560,7 +575,6 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
 
   return (
-    prev.renderCustomFooter === next.renderCustomFooter &&
     prev.renderTopRightUI === next.renderTopRightUI &&
     prev.renderCustomStats === next.renderCustomStats &&
     prev.renderCustomSidebar === next.renderCustomSidebar &&

src/components/LibraryButton.tsx

@@ -22,7 +22,7 @@ export const LibraryButton: React.FC<{
   }
 
   return (
-    <label title={`${capitalizeString(t("toolBar.library"))} — 0`}>
+    <label title={`${capitalizeString(t("toolBar.library"))}`}>
       <input
         className="ToolIcon_type_checkbox"
         type="checkbox"

src/components/LibraryUnit.tsx

@@ -44,6 +44,7 @@ export const LibraryUnit = ({
         },
         null,
       );
+      svg.querySelector(".style-fonts")?.remove();
       node.innerHTML = svg.outerHTML;
     })();
 

src/components/MobileMenu.tsx

@@ -36,10 +36,7 @@ type MobileMenuProps = {
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
-  renderCustomFooter?: (
+
-    isMobile: boolean,
-    appState: AppState,
-  ) => JSX.Element | null;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
@@ -63,7 +60,6 @@ export const MobileMenu = ({
   onPenModeToggle,
   canvas,
   isCollaborating,
-  renderCustomFooter,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
@@ -253,7 +249,6 @@ export const MobileMenu = ({
               <div className="panelColumn">
                 <Stack.Col gap={2}>
                   {renderCanvasActions()}
-                  {renderCustomFooter?.(true, appState)}
                   {appState.collaborators.size > 0 && (
                     <fieldset>
                       <legend>{t("labels.collaborators")}</legend>

src/components/PasteChartDialog.tsx

@@ -46,6 +46,7 @@ const ChartPreviewBtn = (props: {
         },
         null, // files
       );
+      svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);
 

src/components/Sidebar/Sidebar.test.tsx

@@ -90,10 +90,10 @@ describe("Sidebar", () => {
 
     const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
     expect(sidebar).not.toBe(null);
-    const closeButton = queryByTestId(sidebar!, "sidebar-close");
+    const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
     expect(closeButton).not.toBe(null);
 
-    fireEvent.click(closeButton!.querySelector("button")!);
+    fireEvent.click(closeButton);
     await waitFor(() => {
       expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(null);
       expect(onClose).toHaveBeenCalled();

src/components/UserList.scss

@@ -7,6 +7,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
+    align-items: center;
     gap: 0.625rem;
 
     &:empty {

src/components/WelcomeScreen.tsx

@@ -2,7 +2,7 @@ import { useAtom } from "jotai";
 import { actionLoadScene, actionShortcuts } from "../actions";
 import { ActionManager } from "../actions/manager";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { COOKIES } from "../constants";
+import { isExcalidrawPlusSignedUser } from "../constants";
 import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
 import { t } from "../i18n";
 import { AppState } from "../types";
@@ -15,10 +15,6 @@ import {
 } from "./icons";
 import "./WelcomeScreen.scss";
 
-const isExcalidrawPlusSignedUser = document.cookie.includes(
-  COOKIES.AUTH_STATE_COOKIE,
-);
-
 const WelcomeScreenItem = ({
   label,
   shortcut,

src/components/footer/Footer.tsx

@@ -1,35 +1,37 @@
 import clsx from "clsx";
-import { ActionManager } from "../actions/manager";
+import { ActionManager } from "../../actions/manager";
-import { t } from "../i18n";
+import { t } from "../../i18n";
-import { AppState, ExcalidrawProps } from "../types";
+import { AppState } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
   UndoRedoActions,
   ZoomActions,
-} from "./Actions";
+} from "../Actions";
-import { useDevice } from "./App";
+import { useDevice } from "../App";
-import { WelcomeScreenHelpArrow } from "./icons";
+import { WelcomeScreenHelpArrow } from "../icons";
-import { Section } from "./Section";
+import { Section } from "../Section";
-import Stack from "./Stack";
+import Stack from "../Stack";
-import WelcomeScreenDecor from "./WelcomeScreenDecor";
+import WelcomeScreenDecor from "../WelcomeScreenDecor";
+import FooterCenter from "./FooterCenter";
 
 const Footer = ({
   appState,
   actionManager,
-  renderCustomFooter,
   showExitZenModeBtn,
   renderWelcomeScreen,
+  children,
 }: {
   appState: AppState;
   actionManager: ActionManager;
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   showExitZenModeBtn: boolean;
   renderWelcomeScreen: boolean;
+  children?: React.ReactNode;
 }) => {
   const device = useDevice();
   const showFinalize =
     !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
+
   return (
     <footer
       role="contentinfo"
@@ -69,17 +71,7 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <div
+      <FooterCenter>{children}</FooterCenter>
-        className={clsx(
-          "layer-ui__wrapper__footer-center zen-mode-transition",
-          {
-            "layer-ui__wrapper__footer-left--transition-bottom":
-              appState.zenModeEnabled,
-          },
-        )}
-      >
-        {renderCustomFooter?.(false, appState)}
-      </div>
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
@@ -107,3 +99,4 @@ const Footer = ({
 };
 
 export default Footer;
+Footer.displayName = "Footer";

src/components/footer/FooterCenter.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import { useExcalidrawAppState } from "../App";
+
+const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
+  const appState = useExcalidrawAppState();
+  return (
+    <div
+      className={clsx("layer-ui__wrapper__footer-center zen-mode-transition", {
+        "layer-ui__wrapper__footer-left--transition-bottom":
+          appState.zenModeEnabled,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FooterCenter;
+FooterCenter.displayName = "FooterCenter";

src/components/icons.tsx

@@ -1470,11 +1470,11 @@ export const TextAlignRightIcon = createIcon(
 export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <g
-      stroke-width="1.5"
+      strokeWidth="1.5"
       stroke="currentColor"
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="4" y1="4" x2="20" y2="4" />
@@ -1488,11 +1488,11 @@ export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
 export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <g
-      stroke-width="2"
+      strokeWidth="2"
       stroke="currentColor"
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="4" y1="20" x2="20" y2="20" />
@@ -1506,11 +1506,11 @@ export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
 export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <g
-      stroke-width="1.5"
+      strokeWidth="1.5"
       stroke="currentColor"
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="4" y1="12" x2="9" y2="12" />

src/constants.ts

@@ -130,12 +130,6 @@ export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
 
-export const MODES = {
-  VIEW: "viewMode",
-  ZEN: "zenMode",
-  GRID: "gridMode",
-};
-
 export const THEME_FILTER = cssVariables.themeFilter;
 
 export const URL_QUERY_KEYS = {
@@ -216,6 +210,32 @@ export const TEXT_ALIGN = {
 
 export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
 
+// Radius represented as 25% of element's largest side (width/height).
+// Used for LEGACY and PROPORTIONAL_RADIUS algorithms, or when the element is
+// below the cutoff size.
+export const DEFAULT_PROPORTIONAL_RADIUS = 0.25;
+// Fixed radius for the ADAPTIVE_RADIUS algorithm. In pixels.
+export const DEFAULT_ADAPTIVE_RADIUS = 32;
+// roundness type (algorithm)
+export const ROUNDNESS = {
+  // Used for legacy rounding (rectangles), which currently works the same
+  // as PROPORTIONAL_RADIUS, but we need to differentiate for UI purposes and
+  // forwards-compat.
+  LEGACY: 1,
+
+  // Used for linear elements & diamonds
+  PROPORTIONAL_RADIUS: 2,
+
+  // Current default algorithm for rectangles, using fixed pixel radius.
+  // It's working similarly to a regular border-radius, but attemps to make
+  // radius visually similar across differnt element sizes, especially
+  // very large and very small elements.
+  //
+  // NOTE right now we don't allow configuration and use a constant radius
+  // (see DEFAULT_ADAPTIVE_RADIUS constant)
+  ADAPTIVE_RADIUS: 3,
+} as const;
+
 export const COOKIES = {
   AUTH_STATE_COOKIE: "excplus-auth",
 } as const;
@@ -223,3 +243,7 @@ export const COOKIES = {
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
+
+export const isExcalidrawPlusSignedUser = document.cookie.includes(
+  COOKIES.AUTH_STATE_COOKIE,
+);

src/data/library.ts

@@ -154,7 +154,8 @@ class Library {
     return this.setLibrary(() => {
       return new Promise<LibraryItems>(async (resolve, reject) => {
         try {
-          const source = await (typeof libraryItems === "function"
+          const source = await (typeof libraryItems === "function" &&
+          !(libraryItems instanceof Blob)
             ? libraryItems(this.lastLibraryItems)
             : libraryItems);
 

src/data/restore.ts

@@ -1,7 +1,9 @@
 import {
   ExcalidrawElement,
   ExcalidrawSelectionElement,
+  ExcalidrawTextElement,
   FontFamilyValues,
+  StrokeRoundness,
 } from "../element/types";
 import {
   AppState,
@@ -16,7 +18,7 @@ import {
   isInvisiblySmallElement,
   refreshTextDimensions,
 } from "../element";
-import { isLinearElementType } from "../element/typeChecks";
+import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
   DEFAULT_FONT_FAMILY,
@@ -24,12 +26,14 @@ import {
   DEFAULT_VERTICAL_ALIGN,
   PRECEDING_ELEMENT_KEY,
   FONT_FAMILY,
+  ROUNDNESS,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
 import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
+import oc from "open-color";
 
 type RestoredAppState = Omit<
   AppState,
@@ -73,6 +77,8 @@ const restoreElementWithProperties = <
     customData?: ExcalidrawElement["customData"];
     /** @deprecated */
     boundElementIds?: readonly ExcalidrawElement["id"][];
+    /** @deprecated */
+    strokeSharpness?: StrokeRoundness;
     /** metadata that may be present in elements during collaboration */
     [PRECEDING_ELEMENT_KEY]?: string;
   },
@@ -105,15 +111,23 @@ const restoreElementWithProperties = <
     angle: element.angle || 0,
     x: extra.x ?? element.x ?? 0,
     y: extra.y ?? element.y ?? 0,
-    strokeColor: element.strokeColor,
+    strokeColor: element.strokeColor || oc.black,
-    backgroundColor: element.backgroundColor,
+    backgroundColor: element.backgroundColor || "transparent",
     width: element.width || 0,
     height: element.height || 0,
     seed: element.seed ?? 1,
     groupIds: element.groupIds ?? [],
-    strokeSharpness:
+    roundness: element.roundness
-      element.strokeSharpness ??
+      ? element.roundness
-      (isLinearElementType(element.type) ? "round" : "sharp"),
+      : element.strokeSharpness === "round"
+      ? {
+          // for old elements that would now use adaptive radius algo,
+          // use legacy algo instead
+          type: isUsingAdaptiveRadius(element.type)
+            ? ROUNDNESS.LEGACY
+            : ROUNDNESS.PROPORTIONAL_RADIUS,
+        }
+      : null,
     boundElements: element.boundElementIds
       ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
       : element.boundElements ?? [],
@@ -139,7 +153,7 @@ const restoreElementWithProperties = <
 
 const restoreElement = (
   element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-  refreshDimensions = true,
+  refreshDimensions = false,
 ): typeof element | null => {
   switch (element.type) {
     case "text":
@@ -235,14 +249,99 @@ const restoreElement = (
   }
 };
 
+/**
+ * Repairs contaienr element's boundElements array by removing duplicates and
+ * fixing containerId of bound elements if not present. Also removes any
+ * bound elements that do not exist in the elements array.
+ *
+ * NOTE mutates elements.
+ */
+const repairContainerElement = (
+  container: Mutable<ExcalidrawElement>,
+  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
+) => {
+  if (container.boundElements) {
+    // copy because we're not cloning on restore, and we don't want to mutate upstream
+    const boundElements = container.boundElements.slice();
+
+    // dedupe bindings & fix boundElement.containerId if not set already
+    const boundIds = new Set<ExcalidrawElement["id"]>();
+    container.boundElements = boundElements.reduce(
+      (
+        acc: Mutable<NonNullable<ExcalidrawElement["boundElements"]>>,
+        binding,
+      ) => {
+        const boundElement = elementsMap.get(binding.id);
+        if (boundElement && !boundIds.has(binding.id)) {
+          boundIds.add(binding.id);
+
+          if (boundElement.isDeleted) {
+            return acc;
+          }
+
+          acc.push(binding);
+
+          if (
+            isTextElement(boundElement) &&
+            // being slightly conservative here, preserving existing containerId
+            // if defined, lest boundElements is stale
+            !boundElement.containerId
+          ) {
+            (boundElement as Mutable<ExcalidrawTextElement>).containerId =
+              container.id;
+          }
+        }
+        return acc;
+      },
+      [],
+    );
+  }
+};
+
+/**
+ * Repairs target bound element's container's boundElements array,
+ * or removes contaienrId if container does not exist.
+ *
+ * NOTE mutates elements.
+ */
+const repairBoundElement = (
+  boundElement: Mutable<ExcalidrawTextElement>,
+  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
+) => {
+  const container = boundElement.containerId
+    ? elementsMap.get(boundElement.containerId)
+    : null;
+
+  if (!container) {
+    boundElement.containerId = null;
+    return;
+  }
+
+  if (boundElement.isDeleted) {
+    return;
+  }
+
+  if (
+    container.boundElements &&
+    !container.boundElements.find((binding) => binding.id === boundElement.id)
+  ) {
+    // copy because we're not cloning on restore, and we don't want to mutate upstream
+    const boundElements = (
+      container.boundElements || (container.boundElements = [])
+    ).slice();
+    boundElements.push({ type: "text", id: boundElement.id });
+    container.boundElements = boundElements;
+  }
+};
+
 export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  refreshDimensions = true,
+  refreshDimensions = false,
 ): ExcalidrawElement[] => {
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
-  return (elements || []).reduce((elements, element) => {
+  const restoredElements = (elements || []).reduce((elements, element) => {
     // filtering out selection, which is legacy, no longer kept in elements,
     // and causing issues if retained
     if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
@@ -260,6 +359,18 @@ export const restoreElements = (
     }
     return elements;
   }, [] as ExcalidrawElement[]);
+
+  // repair binding. Mutates elements.
+  const restoredElementsMap = arrayToMap(restoredElements);
+  for (const element of restoredElements) {
+    if (isTextElement(element) && element.containerId) {
+      repairBoundElement(element, restoredElementsMap);
+    } else if (element.boundElements) {
+      repairContainerElement(element, restoredElementsMap);
+    }
+  }
+
+  return restoredElements;
 };
 
 const coalesceAppStateValue = <
@@ -387,7 +498,7 @@ export const restore = (
   localElements: readonly ExcalidrawElement[] | null | undefined,
 ): RestoredDataState => {
   return {
-    elements: restoreElements(data?.elements, localElements, true),
+    elements: restoreElements(data?.elements, localElements),
     appState: restoreAppState(data?.appState, localAppState || null),
     files: data?.files || {},
   };

src/element/binding.ts

@@ -26,6 +26,7 @@ import Scene from "../scene/Scene";
 import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
+import { getBoundTextElement, handleBindTextResize } from "./textElement";
 
 export type SuggestedBinding =
   | NonDeleted<ExcalidrawBindableElement>
@@ -361,6 +362,10 @@ export const updateBoundElements = (
       endBinding,
       changedElement as ExcalidrawBindableElement,
     );
+    const boundText = getBoundTextElement(element);
+    if (boundText) {
+      handleBindTextResize(element, false);
+    }
   });
 };
 

src/element/bounds.test.ts

@@ -1,3 +1,4 @@
+import { ROUNDNESS } from "../constants";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
 import { ExcalidrawElement, ExcalidrawLinearElement } from "./types";
 
@@ -22,6 +23,7 @@ const _ce = ({
     backgroundColor: "#000",
     fillStyle: "solid",
     strokeWidth: 1,
+    roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
     roughness: 0,
     opacity: 1,
     x,

src/element/bounds.ts

@@ -4,6 +4,7 @@ import {
   Arrowhead,
   ExcalidrawFreeDrawElement,
   NonDeleted,
+  ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
 import rough from "roughjs/bin/rough";
@@ -13,8 +14,15 @@ import {
   getShapeForElement,
   generateRoughOptions,
 } from "../renderer/renderElement";
-import { isFreeDrawElement, isLinearElement } from "./typeChecks";
+import {
+  isArrowElement,
+  isFreeDrawElement,
+  isLinearElement,
+  isTextElement,
+} from "./typeChecks";
 import { rescalePoints } from "../points";
+import { getBoundTextElement, getContainerElement } from "./textElement";
+import { LinearElementEditor } from "./linearElementEditor";
 
 // x and y position of top left corner, x and y position of bottom right corner
 export type Bounds = readonly [number, number, number, number];
@@ -24,17 +32,39 @@ type MaybeQuadraticSolution = [number | null, number | null] | false;
 // This set of functions retrieves the absolute position of the 4 points.
 export const getElementAbsoluteCoords = (
   element: ExcalidrawElement,
-): Bounds => {
+  includeBoundText: boolean = false,
+): [number, number, number, number, number, number] => {
   if (isFreeDrawElement(element)) {
     return getFreeDrawElementAbsoluteCoords(element);
   } else if (isLinearElement(element)) {
-    return getLinearElementAbsoluteCoords(element);
+    return LinearElementEditor.getElementAbsoluteCoords(
+      element,
+      includeBoundText,
+    );
+  } else if (isTextElement(element)) {
+    const container = getContainerElement(element);
+    if (isArrowElement(container)) {
+      const coords = LinearElementEditor.getBoundTextElementPosition(
+        container,
+        element as ExcalidrawTextElementWithContainer,
+      );
+      return [
+        coords.x,
+        coords.y,
+        coords.x + element.width,
+        coords.y + element.height,
+        coords.x + element.width / 2,
+        coords.y + element.height / 2,
+      ];
+    }
   }
   return [
     element.x,
     element.y,
     element.x + element.width,
     element.y + element.height,
+    element.x + element.width / 2,
+    element.y + element.height / 2,
   ];
 };
 
@@ -159,7 +189,7 @@ const getCubicBezierCurveBound = (
   return [minX, minY, maxX, maxY];
 };
 
-const getMinMaxXYFromCurvePathOps = (
+export const getMinMaxXYFromCurvePathOps = (
   ops: Op[],
   transformXY?: (x: number, y: number) => [number, number],
 ): [number, number, number, number] => {
@@ -230,59 +260,13 @@ const getBoundsFromPoints = (
 
 const getFreeDrawElementAbsoluteCoords = (
   element: ExcalidrawFreeDrawElement,
-): [number, number, number, number] => {
+): [number, number, number, number, number, number] => {
   const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
-
+  const x1 = minX + element.x;
-  return [
+  const y1 = minY + element.y;
-    minX + element.x,
+  const x2 = maxX + element.x;
-    minY + element.y,
+  const y2 = maxY + element.y;
-    maxX + element.x,
+  return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
-    maxY + element.y,
-  ];
-};
-
-const getLinearElementAbsoluteCoords = (
-  element: ExcalidrawLinearElement,
-): [number, number, number, number] => {
-  let coords: [number, number, number, number];
-
-  if (element.points.length < 2 || !getShapeForElement(element)) {
-    // XXX this is just a poor estimate and not very useful
-    const { minX, minY, maxX, maxY } = element.points.reduce(
-      (limits, [x, y]) => {
-        limits.minY = Math.min(limits.minY, y);
-        limits.minX = Math.min(limits.minX, x);
-
-        limits.maxX = Math.max(limits.maxX, x);
-        limits.maxY = Math.max(limits.maxY, y);
-
-        return limits;
-      },
-      { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
-    );
-    coords = [
-      minX + element.x,
-      minY + element.y,
-      maxX + element.x,
-      maxY + element.y,
-    ];
-  } else {
-    const shape = getShapeForElement(element)!;
-
-    // first element is always the curve
-    const ops = getCurvePathOps(shape[0]);
-
-    const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
-
-    coords = [
-      minX + element.x,
-      minY + element.y,
-      maxX + element.x,
-      maxY + element.y,
-    ];
-  }
-
-  return coords;
 };
 
 export const getArrowheadPoints = (
@@ -394,7 +378,7 @@ const generateLinearElementShape = (
   const options = generateRoughOptions(element);
 
   const method = (() => {
-    if (element.strokeSharpness !== "sharp") {
+    if (element.roundness) {
       return "curve";
     }
     if (options.fill) {
@@ -420,7 +404,23 @@ const getLinearElementRotatedBounds = (
       cy,
       element.angle,
     );
-    return [x, y, x, y];
+
+    let coords: [number, number, number, number] = [x, y, x, y];
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
+        element,
+        [x, y, x, y],
+        boundTextElement,
+      );
+      coords = [
+        coordsWithBoundText[0],
+        coordsWithBoundText[1],
+        coordsWithBoundText[2],
+        coordsWithBoundText[3],
+      ];
+    }
+    return coords;
   }
 
   // first element is always the curve
@@ -429,8 +429,28 @@ const getLinearElementRotatedBounds = (
   const ops = getCurvePathOps(shape);
   const transformXY = (x: number, y: number) =>
     rotate(element.x + x, element.y + y, cx, cy, element.angle);
-
+  const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
-  return getMinMaxXYFromCurvePathOps(ops, transformXY);
+  let coords: [number, number, number, number] = [
+    res[0],
+    res[1],
+    res[2],
+    res[3],
+  ];
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement) {
+    const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
+      element,
+      coords,
+      boundTextElement,
+    );
+    coords = [
+      coordsWithBoundText[0],
+      coordsWithBoundText[1],
+      coordsWithBoundText[2],
+      coordsWithBoundText[3],
+    ];
+  }
+  return coords;
 };
 
 // We could cache this stuff
@@ -439,9 +459,7 @@ export const getElementBounds = (
 ): [number, number, number, number] => {
   let bounds: [number, number, number, number];
 
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
-  const cx = (x1 + x2) / 2;
-  const cy = (y1 + y2) / 2;
   if (isFreeDrawElement(element)) {
     const [minX, minY, maxX, maxY] = getBoundsFromPoints(
       element.points.map(([x, y]) =>
@@ -543,16 +561,12 @@ export const getResizedElementAbsoluteCoords = (
   } else {
     // Line
     const gen = rough.generator();
-    const curve =
+    const curve = !element.roundness
-      element.strokeSharpness === "sharp"
+      ? gen.linearPath(
-        ? gen.linearPath(
+          points as [number, number][],
-            points as [number, number][],
+          generateRoughOptions(element),
-            generateRoughOptions(element),
+        )
-          )
+      : gen.curve(points as [number, number][], generateRoughOptions(element));
-        : gen.curve(
-            points as [number, number][],
-            generateRoughOptions(element),
-          );
 
     const ops = getCurvePathOps(curve);
     bounds = getMinMaxXYFromCurvePathOps(ops);
@@ -570,12 +584,11 @@ export const getResizedElementAbsoluteCoords = (
 export const getElementPointsCoords = (
   element: ExcalidrawLinearElement,
   points: readonly (readonly [number, number])[],
-  sharpness: ExcalidrawElement["strokeSharpness"],
 ): [number, number, number, number] => {
   // This might be computationally heavey
   const gen = rough.generator();
   const curve =
-    sharpness === "sharp"
+    element.roundness == null
       ? gen.linearPath(
           points as [number, number][],
           generateRoughOptions(element),

src/element/collision.ts

@@ -25,6 +25,7 @@ import {
   ExcalidrawFreeDrawElement,
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  StrokeRoundness,
 } from "./types";
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@@ -36,6 +37,7 @@ import { hasBoundTextElement, isImageElement } from "./typeChecks";
 import { isTextElement } from ".";
 import { isTransparent } from "../utils";
 import { shouldShowBoundingBox } from "./transformHandles";
+import { getBoundTextElement } from "./textElement";
 
 const isElementDraggableFromInside = (
   element: NonDeletedExcalidrawElement,
@@ -72,6 +74,13 @@ export const hitTest = (
     return isPointHittingElementBoundingBox(element, point, threshold);
   }
 
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement) {
+    const isHittingBoundTextElement = hitTest(boundTextElement, appState, x, y);
+    if (isHittingBoundTextElement) {
+      return true;
+    }
+  }
   return isHittingElementNotConsideringBoundingBox(element, appState, point);
 };
 
@@ -83,6 +92,13 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
 
+  // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
+  // eg for linear elements text can be outside the element bounding box
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement && hitTest(boundTextElement, appState, x, y)) {
+    return false;
+  }
+
   return (
     !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
     isPointHittingElementBoundingBox(element, [x, y], threshold)
@@ -95,7 +111,6 @@ export const isHittingElementNotConsideringBoundingBox = (
   point: Point,
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
-
   const check = isTextElement(element)
     ? isStrictlyInside
     : isElementDraggableFromInside(element)
@@ -382,6 +397,7 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
   if (!getShapeForElement(element)) {
     return false;
   }
+
   const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(
     args.element,
     args.point,
@@ -404,7 +420,12 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
 
   if (args.check === isInsideCheck) {
     const hit = shape.some((subshape) =>
-      hitTestCurveInside(subshape, relX, relY, element.strokeSharpness),
+      hitTestCurveInside(
+        subshape,
+        relX,
+        relY,
+        element.roundness ? "round" : "sharp",
+      ),
     );
     if (hit) {
       return true;
@@ -434,8 +455,9 @@ const pointRelativeToElement = (
   pointTuple: Point,
 ): [GA.Point, GA.Point, number, number] => {
   const point = GAPoint.from(pointTuple);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const elementCoords = getElementAbsoluteCoords(element);
-  const center = coordsCenter(elementCoords);
+  const center = coordsCenter([x1, y1, x2, y2]);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const pointRotated = GATransform.apply(rotate, point);
@@ -466,8 +488,8 @@ export const pointInAbsoluteCoords = (
 const relativizationToElementCenter = (
   element: ExcalidrawElement,
 ): GA.Transform => {
-  const elementCoords = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const center = coordsCenter(elementCoords);
+  const center = coordsCenter([x1, y1, x2, y2]);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const translate = GA.reverse(
@@ -524,8 +546,8 @@ export const determineFocusPoint = (
   adjecentPoint: Point,
 ): Point => {
   if (focus === 0) {
-    const elementCoords = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const center = coordsCenter(elementCoords);
+    const center = coordsCenter([x1, y1, x2, y2]);
     return GAPoint.toTuple(center);
   }
   const relateToCenter = relativizationToElementCenter(element);
@@ -835,7 +857,7 @@ const hitTestCurveInside = (
   drawable: Drawable,
   x: number,
   y: number,
-  sharpness: ExcalidrawElement["strokeSharpness"],
+  roundness: StrokeRoundness,
 ) => {
   const ops = getCurvePathOps(drawable);
   const points: Mutable<Point>[] = [];
@@ -859,7 +881,7 @@ const hitTestCurveInside = (
     }
   }
   if (points.length >= 4) {
-    if (sharpness === "sharp") {
+    if (roundness === "sharp") {
       return isPointInPolygon(points, x, y);
     }
     const polygonPoints = pointsOnBezierCurves(points, 10, 5);

src/element/linearElementEditor.ts

@@ -4,6 +4,7 @@ import {
   ExcalidrawElement,
   PointBinding,
   ExcalidrawBindableElement,
+  ExcalidrawTextElementWithContainer,
 } from "./types";
 import {
   distance2d,
@@ -19,8 +20,12 @@ import {
   arePointsEqual,
 } from "../math";
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
-import { getElementPointsCoords } from "./bounds";
+import {
-import { Point, AppState } from "../types";
+  getCurvePathOps,
+  getElementPointsCoords,
+  getMinMaxXYFromCurvePathOps,
+} from "./bounds";
+import { Point, AppState, PointerCoords } from "../types";
 import { mutateElement } from "./mutateElement";
 import History from "../history";
 
@@ -33,13 +38,15 @@ import {
 import { tupleToCoors } from "../utils";
 import { isBindingElement } from "./typeChecks";
 import { shouldRotateWithDiscreteAngle } from "../keys";
+import { getBoundTextElement, handleBindTextResize } from "./textElement";
+import { getShapeForElement } from "../renderer/renderElement";
+import { DRAGGING_THRESHOLD } from "../constants";
 
 const editorMidPointsCache: {
   version: number | null;
   points: (Point | null)[];
   zoom: number | null;
 } = { version: null, points: [], zoom: null };
-
 export class LinearElementEditor {
   public readonly elementId: ExcalidrawElement["id"] & {
     _brand: "excalidrawLinearElementId";
@@ -51,6 +58,12 @@ export class LinearElementEditor {
     prevSelectedPointsIndices: readonly number[] | null;
     /** index */
     lastClickedPoint: number;
+    origin: Readonly<{ x: number; y: number }> | null;
+    segmentMidpoint: {
+      value: Point | null;
+      index: number | null;
+      added: boolean;
+    };
   }>;
 
   /** whether you're dragging a point */
@@ -81,6 +94,13 @@ export class LinearElementEditor {
     this.pointerDownState = {
       prevSelectedPointsIndices: null,
       lastClickedPoint: -1,
+      origin: null,
+
+      segmentMidpoint: {
+        value: null,
+        index: null,
+        added: false,
+      },
     };
     this.hoverPointIndex = -1;
     this.segmentMidPointHoveredCoords = null;
@@ -180,6 +200,7 @@ export class LinearElementEditor {
     const draggingPoint = element.points[
       linearElementEditor.pointerDownState.lastClickedPoint
     ] as [number, number] | undefined;
+
     if (selectedPointsIndices && draggingPoint) {
       if (
         shouldRotateWithDiscreteAngle(event) &&
@@ -242,6 +263,11 @@ export class LinearElementEditor {
             };
           }),
         );
+
+        const boundTextElement = getBoundTextElement(element);
+        if (boundTextElement) {
+          handleBindTextResize(element, false);
+        }
       }
 
       // suggest bindings for first and last point if selected
@@ -373,8 +399,14 @@ export class LinearElementEditor {
     element: NonDeleted<ExcalidrawLinearElement>,
     appState: AppState,
   ): typeof editorMidPointsCache["points"] => {
-    // Since its not needed outside editor unless 2 pointer lines
+    const boundText = getBoundTextElement(element);
-    if (!appState.editingLinearElement && element.points.length > 2) {
+
+    // Since its not needed outside editor unless 2 pointer lines or bound text
+    if (
+      !appState.editingLinearElement &&
+      element.points.length > 2 &&
+      !boundText
+    ) {
       return [];
     }
     if (
@@ -495,7 +527,7 @@ export class LinearElementEditor {
       endPoint[0],
       endPoint[1],
     );
-    if (element.points.length > 2 && element.strokeSharpness === "round") {
+    if (element.points.length > 2 && element.roundness) {
       distance = getBezierCurveLength(element, endPoint);
     }
 
@@ -509,7 +541,7 @@ export class LinearElementEditor {
     endPointIndex: number,
   ) {
     let segmentMidPoint = centerPoint(startPoint, endPoint);
-    if (element.points.length > 2 && element.strokeSharpness === "round") {
+    if (element.points.length > 2 && element.roundness) {
       const controlPoints = getControlPointsForBezierCurve(
         element,
         element.points[endPointIndex],
@@ -551,7 +583,7 @@ export class LinearElementEditor {
     }
     const midPoints = LinearElementEditor.getEditorMidPoints(element, appState);
     let index = 0;
-    while (index < midPoints.length - 1) {
+    while (index < midPoints.length) {
       if (LinearElementEditor.arePointsEqual(midPoint, midPoints[index])) {
         return index + 1;
       }
@@ -570,13 +602,11 @@ export class LinearElementEditor {
     didAddPoint: boolean;
     hitElement: NonDeleted<ExcalidrawElement> | null;
     linearElementEditor: LinearElementEditor | null;
-    isMidPoint: boolean;
   } {
     const ret: ReturnType<typeof LinearElementEditor["handlePointerDown"]> = {
       didAddPoint: false,
       hitElement: null,
       linearElementEditor: null,
-      isMidPoint: false,
     };
 
     if (!linearElementEditor) {
@@ -589,43 +619,18 @@ export class LinearElementEditor {
     if (!element) {
       return ret;
     }
-    const segmentMidPoint = LinearElementEditor.getSegmentMidpointHitCoords(
+    const segmentMidpoint = LinearElementEditor.getSegmentMidpointHitCoords(
       linearElementEditor,
       scenePointer,
       appState,
     );
-    if (segmentMidPoint) {
+    let segmentMidpointIndex = null;
-      const index = LinearElementEditor.getSegmentMidPointIndex(
+    if (segmentMidpoint) {
+      segmentMidpointIndex = LinearElementEditor.getSegmentMidPointIndex(
         linearElementEditor,
         appState,
-        segmentMidPoint,
+        segmentMidpoint,
       );
-      const newMidPoint = LinearElementEditor.createPointAt(
-        element,
-        segmentMidPoint[0],
-        segmentMidPoint[1],
-        appState.gridSize,
-      );
-      const points = [
-        ...element.points.slice(0, index),
-        newMidPoint,
-        ...element.points.slice(index),
-      ];
-      mutateElement(element, {
-        points,
-      });
-
-      ret.didAddPoint = true;
-      ret.isMidPoint = true;
-      ret.linearElementEditor = {
-        ...linearElementEditor,
-        selectedPointsIndices: element.points[1],
-        pointerDownState: {
-          prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
-          lastClickedPoint: -1,
-        },
-        lastUncommittedPoint: null,
-      };
     }
     if (event.altKey && appState.editingLinearElement) {
       if (linearElementEditor.lastUncommittedPoint == null) {
@@ -648,6 +653,12 @@ export class LinearElementEditor {
         pointerDownState: {
           prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
           lastClickedPoint: -1,
+          origin: { x: scenePointer.x, y: scenePointer.y },
+          segmentMidpoint: {
+            value: segmentMidpoint,
+            index: segmentMidpointIndex,
+            added: false,
+          },
         },
         selectedPointsIndices: [element.points.length - 1],
         lastUncommittedPoint: null,
@@ -667,10 +678,9 @@ export class LinearElementEditor {
       scenePointer.x,
       scenePointer.y,
     );
-
     // if we clicked on a point, set the element as hitElement otherwise
     // it would get deselected if the point is outside the hitbox area
-    if (clickedPointIndex >= 0 || segmentMidPoint) {
+    if (clickedPointIndex >= 0 || segmentMidpoint) {
       ret.hitElement = element;
     } else {
       // You might be wandering why we are storing the binding elements on
@@ -716,6 +726,12 @@ export class LinearElementEditor {
       pointerDownState: {
         prevSelectedPointsIndices: linearElementEditor.selectedPointsIndices,
         lastClickedPoint: clickedPointIndex,
+        origin: { x: scenePointer.x, y: scenePointer.y },
+        segmentMidpoint: {
+          value: segmentMidpoint,
+          index: segmentMidpointIndex,
+          added: false,
+        },
       },
       selectedPointsIndices: nextSelectedPointsIndices,
       pointerOffset: targetPoint
@@ -1055,7 +1071,6 @@ export class LinearElementEditor {
     const offsetY = 0;
 
     const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-
     LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
   }
 
@@ -1111,6 +1126,94 @@ export class LinearElementEditor {
     );
   }
 
+  static shouldAddMidpoint(
+    linearElementEditor: LinearElementEditor,
+    pointerCoords: PointerCoords,
+    appState: AppState,
+  ) {
+    const element = LinearElementEditor.getElement(
+      linearElementEditor.elementId,
+    );
+
+    if (!element) {
+      return false;
+    }
+
+    const { segmentMidpoint } = linearElementEditor.pointerDownState;
+
+    if (
+      segmentMidpoint.added ||
+      segmentMidpoint.value === null ||
+      segmentMidpoint.index === null ||
+      linearElementEditor.pointerDownState.origin === null
+    ) {
+      return false;
+    }
+
+    const origin = linearElementEditor.pointerDownState.origin!;
+    const dist = distance2d(
+      origin.x,
+      origin.y,
+      pointerCoords.x,
+      pointerCoords.y,
+    );
+    if (
+      !appState.editingLinearElement &&
+      dist < DRAGGING_THRESHOLD / appState.zoom.value
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  static addMidpoint(
+    linearElementEditor: LinearElementEditor,
+    pointerCoords: PointerCoords,
+    appState: AppState,
+  ) {
+    const element = LinearElementEditor.getElement(
+      linearElementEditor.elementId,
+    );
+    if (!element) {
+      return;
+    }
+    const { segmentMidpoint } = linearElementEditor.pointerDownState;
+    const ret: {
+      pointerDownState: LinearElementEditor["pointerDownState"];
+      selectedPointsIndices: LinearElementEditor["selectedPointsIndices"];
+    } = {
+      pointerDownState: linearElementEditor.pointerDownState,
+      selectedPointsIndices: linearElementEditor.selectedPointsIndices,
+    };
+
+    const midpoint = LinearElementEditor.createPointAt(
+      element,
+      pointerCoords.x,
+      pointerCoords.y,
+      appState.gridSize,
+    );
+    const points = [
+      ...element.points.slice(0, segmentMidpoint.index!),
+      midpoint,
+      ...element.points.slice(segmentMidpoint.index!),
+    ];
+
+    mutateElement(element, {
+      points,
+    });
+
+    ret.pointerDownState = {
+      ...linearElementEditor.pointerDownState,
+      segmentMidpoint: {
+        ...linearElementEditor.pointerDownState.segmentMidpoint,
+        added: true,
+      },
+      lastClickedPoint: segmentMidpoint.index!,
+    };
+    ret.selectedPointsIndices = [segmentMidpoint.index!];
+    return ret;
+  }
+
   private static _updatePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
     nextPoints: readonly Point[],
@@ -1118,16 +1221,8 @@ export class LinearElementEditor {
     offsetY: number,
     otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
   ) {
-    const nextCoords = getElementPointsCoords(
+    const nextCoords = getElementPointsCoords(element, nextPoints);
-      element,
+    const prevCoords = getElementPointsCoords(element, element.points);
-      nextPoints,
-      element.strokeSharpness || "round",
-    );
-    const prevCoords = getElementPointsCoords(
-      element,
-      element.points,
-      element.strokeSharpness || "round",
-    );
     const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
     const nextCenterY = (nextCoords[1] + nextCoords[3]) / 2;
     const prevCenterX = (prevCoords[0] + prevCoords[2]) / 2;
@@ -1135,7 +1230,6 @@ export class LinearElementEditor {
     const dX = prevCenterX - nextCenterX;
     const dY = prevCenterY - nextCenterY;
     const rotated = rotate(offsetX, offsetY, dX, dY, element.angle);
-
     mutateElement(element, {
       ...otherUpdates,
       points: nextPoints,
@@ -1170,6 +1264,207 @@ export class LinearElementEditor {
 
     return rotatePoint([width, height], [0, 0], -element.angle);
   }
+
+  static getBoundTextElementPosition = (
+    element: ExcalidrawLinearElement,
+    boundTextElement: ExcalidrawTextElementWithContainer,
+  ): { x: number; y: number } => {
+    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    if (points.length < 2) {
+      mutateElement(boundTextElement, { isDeleted: true });
+    }
+    let x = 0;
+    let y = 0;
+    if (element.points.length % 2 === 1) {
+      const index = Math.floor(element.points.length / 2);
+      const midPoint = LinearElementEditor.getPointGlobalCoordinates(
+        element,
+        element.points[index],
+      );
+      x = midPoint[0] - boundTextElement.width / 2;
+      y = midPoint[1] - boundTextElement.height / 2;
+    } else {
+      const index = element.points.length / 2 - 1;
+
+      let midSegmentMidpoint = editorMidPointsCache.points[index];
+      if (element.points.length === 2) {
+        midSegmentMidpoint = centerPoint(points[0], points[1]);
+      }
+      if (
+        !midSegmentMidpoint ||
+        editorMidPointsCache.version !== element.version
+      ) {
+        midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
+          element,
+          points[index],
+          points[index + 1],
+          index + 1,
+        );
+      }
+      x = midSegmentMidpoint[0] - boundTextElement.width / 2;
+      y = midSegmentMidpoint[1] - boundTextElement.height / 2;
+    }
+    return { x, y };
+  };
+
+  static getMinMaxXYWithBoundText = (
+    element: ExcalidrawLinearElement,
+    elementBounds: [number, number, number, number],
+    boundTextElement: ExcalidrawTextElementWithContainer,
+  ): [number, number, number, number, number, number] => {
+    let [x1, y1, x2, y2] = elementBounds;
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    const { x: boundTextX1, y: boundTextY1 } =
+      LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
+      );
+    const boundTextX2 = boundTextX1 + boundTextElement.width;
+    const boundTextY2 = boundTextY1 + boundTextElement.height;
+
+    const topLeftRotatedPoint = rotatePoint([x1, y1], [cx, cy], element.angle);
+    const topRightRotatedPoint = rotatePoint([x2, y1], [cx, cy], element.angle);
+
+    const counterRotateBoundTextTopLeft = rotatePoint(
+      [boundTextX1, boundTextY1],
+
+      [cx, cy],
+
+      -element.angle,
+    );
+    const counterRotateBoundTextTopRight = rotatePoint(
+      [boundTextX2, boundTextY1],
+
+      [cx, cy],
+
+      -element.angle,
+    );
+    const counterRotateBoundTextBottomLeft = rotatePoint(
+      [boundTextX1, boundTextY2],
+
+      [cx, cy],
+
+      -element.angle,
+    );
+    const counterRotateBoundTextBottomRight = rotatePoint(
+      [boundTextX2, boundTextY2],
+
+      [cx, cy],
+
+      -element.angle,
+    );
+
+    if (
+      topLeftRotatedPoint[0] < topRightRotatedPoint[0] &&
+      topLeftRotatedPoint[1] >= topRightRotatedPoint[1]
+    ) {
+      x1 = Math.min(x1, counterRotateBoundTextBottomLeft[0]);
+      x2 = Math.max(
+        x2,
+        Math.max(
+          counterRotateBoundTextTopRight[0],
+          counterRotateBoundTextBottomRight[0],
+        ),
+      );
+      y1 = Math.min(y1, counterRotateBoundTextTopLeft[1]);
+
+      y2 = Math.max(y2, counterRotateBoundTextBottomRight[1]);
+    } else if (
+      topLeftRotatedPoint[0] >= topRightRotatedPoint[0] &&
+      topLeftRotatedPoint[1] > topRightRotatedPoint[1]
+    ) {
+      x1 = Math.min(x1, counterRotateBoundTextBottomRight[0]);
+      x2 = Math.max(
+        x2,
+        Math.max(
+          counterRotateBoundTextTopLeft[0],
+          counterRotateBoundTextTopRight[0],
+        ),
+      );
+      y1 = Math.min(y1, counterRotateBoundTextBottomLeft[1]);
+
+      y2 = Math.max(y2, counterRotateBoundTextTopRight[1]);
+    } else if (topLeftRotatedPoint[0] >= topRightRotatedPoint[0]) {
+      x1 = Math.min(x1, counterRotateBoundTextTopRight[0]);
+      x2 = Math.max(x2, counterRotateBoundTextBottomLeft[0]);
+      y1 = Math.min(y1, counterRotateBoundTextBottomRight[1]);
+
+      y2 = Math.max(y2, counterRotateBoundTextTopLeft[1]);
+    } else if (topLeftRotatedPoint[1] <= topRightRotatedPoint[1]) {
+      x1 = Math.min(
+        x1,
+        Math.min(
+          counterRotateBoundTextTopRight[0],
+          counterRotateBoundTextTopLeft[0],
+        ),
+      );
+
+      x2 = Math.max(x2, counterRotateBoundTextBottomRight[0]);
+      y1 = Math.min(y1, counterRotateBoundTextTopRight[1]);
+      y2 = Math.max(y2, counterRotateBoundTextBottomLeft[1]);
+    }
+
+    return [x1, y1, x2, y2, cx, cy];
+  };
+
+  static getElementAbsoluteCoords = (
+    element: ExcalidrawLinearElement,
+    includeBoundText: boolean = false,
+  ): [number, number, number, number, number, number] => {
+    let coords: [number, number, number, number, number, number];
+    let x1;
+    let y1;
+    let x2;
+    let y2;
+    if (element.points.length < 2 || !getShapeForElement(element)) {
+      // XXX this is just a poor estimate and not very useful
+      const { minX, minY, maxX, maxY } = element.points.reduce(
+        (limits, [x, y]) => {
+          limits.minY = Math.min(limits.minY, y);
+          limits.minX = Math.min(limits.minX, x);
+
+          limits.maxX = Math.max(limits.maxX, x);
+          limits.maxY = Math.max(limits.maxY, y);
+
+          return limits;
+        },
+        { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
+      );
+      x1 = minX + element.x;
+      y1 = minY + element.y;
+      x2 = maxX + element.x;
+      y2 = maxY + element.y;
+    } else {
+      const shape = getShapeForElement(element)!;
+
+      // first element is always the curve
+      const ops = getCurvePathOps(shape[0]);
+
+      const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
+      x1 = minX + element.x;
+      y1 = minY + element.y;
+      x2 = maxX + element.x;
+      y2 = maxY + element.y;
+    }
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    coords = [x1, y1, x2, y2, cx, cy];
+
+    if (!includeBoundText) {
+      return coords;
+    }
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      coords = LinearElementEditor.getMinMaxXYWithBoundText(
+        element,
+        [x1, y1, x2, y2],
+        boundTextElement,
+      );
+    }
+
+    return coords;
+  };
 }
 
 const normalizeSelectedPoints = (

src/element/newElement.test.ts

@@ -1,7 +1,7 @@
 import { duplicateElement } from "./newElement";
 import { mutateElement } from "./mutateElement";
 import { API } from "../tests/helpers/api";
-import { FONT_FAMILY } from "../constants";
+import { FONT_FAMILY, ROUNDNESS } from "../constants";
 import { isPrimitive } from "../utils";
 
 const assertCloneObjects = (source: any, clone: any) => {
@@ -25,7 +25,7 @@ it("clones arrow element", () => {
     fillStyle: "hachure",
     strokeWidth: 1,
     strokeStyle: "solid",
-    strokeSharpness: "round",
+    roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
     roughness: 1,
     opacity: 100,
   });
@@ -71,7 +71,7 @@ it("clones text element", () => {
     fillStyle: "hachure",
     strokeWidth: 1,
     strokeStyle: "solid",
-    strokeSharpness: "round",
+    roundness: null,
     roughness: 1,
     opacity: 100,
     text: "hello",

src/element/newElement.ts

@@ -11,7 +11,7 @@ import {
   Arrowhead,
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
-  ExcalidrawRectangleElement,
+  ExcalidrawTextContainer,
 } from "../element/types";
 import { getFontString, getUpdatedTimestamp, isTestEnv } from "../utils";
 import { randomInteger, randomId } from "../random";
@@ -22,12 +22,16 @@ import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
+  getBoundTextElement,
+  getBoundTextElementOffset,
   getContainerDims,
   getContainerElement,
   measureText,
+  normalizeText,
   wrapText,
 } from "./textElement";
 import { BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+import { isArrowElement } from "./typeChecks";
 
 type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -58,14 +62,15 @@ const _newElementBase = <T extends ExcalidrawElement>(
     height = 0,
     angle = 0,
     groupIds = [],
-    strokeSharpness,
+    roundness = null,
     boundElements = null,
     link = null,
     locked,
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
 ) => {
-  const element = {
+  // assign type to guard against excess properties
+  const element: Merge<ExcalidrawGenericElement, { type: T["type"] }> = {
     id: rest.id || randomId(),
     type,
     x,
@@ -81,7 +86,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
     roughness,
     opacity,
     groupIds,
-    strokeSharpness,
+    roundness,
     seed: rest.seed ?? randomInteger(),
     version: rest.version || 1,
     versionNonce: rest.versionNonce ?? 0,
@@ -130,15 +135,16 @@ export const newTextElement = (
     fontFamily: FontFamilyValues;
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
-    containerId?: ExcalidrawRectangleElement["id"];
+    containerId?: ExcalidrawTextContainer["id"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
-  const metrics = measureText(opts.text, getFontString(opts));
+  const text = normalizeText(opts.text);
+  const metrics = measureText(text, getFontString(opts));
   const offsets = getTextElementPositionOffsets(opts, metrics);
   const textElement = newElementWith(
     {
       ..._newElementBase<ExcalidrawTextElement>("text", opts),
-      text: opts.text,
+      text,
       fontSize: opts.fontSize,
       fontFamily: opts.fontFamily,
       textAlign: opts.textAlign,
@@ -149,7 +155,7 @@ export const newTextElement = (
       height: metrics.height,
       baseline: metrics.baseline,
       containerId: opts.containerId || null,
-      originalText: opts.text,
+      originalText: text,
     },
     {},
   );
@@ -169,8 +175,7 @@ const getAdjustedDimensions = (
   let maxWidth = null;
   const container = getContainerElement(element);
   if (container) {
-    const containerDims = getContainerDims(container);
+    maxWidth = getMaxContainerWidth(container);
-    maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
   }
   const {
     width: nextWidth,
@@ -230,16 +235,21 @@ const getAdjustedDimensions = (
   // make sure container dimensions are set properly when
   // text editor overflows beyond viewport dimensions
   if (container) {
+    const boundTextElementPadding = getBoundTextElementOffset(element);
+
     const containerDims = getContainerDims(container);
     let height = containerDims.height;
     let width = containerDims.width;
-    if (nextHeight > height - BOUND_TEXT_PADDING * 2) {
+    if (nextHeight > height - boundTextElementPadding * 2) {
-      height = nextHeight + BOUND_TEXT_PADDING * 2;
+      height = nextHeight + boundTextElementPadding * 2;
     }
-    if (nextWidth > width - BOUND_TEXT_PADDING * 2) {
+    if (nextWidth > width - boundTextElementPadding * 2) {
-      width = nextWidth + BOUND_TEXT_PADDING * 2;
+      width = nextWidth + boundTextElementPadding * 2;
     }
-    if (height !== containerDims.height || width !== containerDims.width) {
+    if (
+      !isArrowElement(container) &&
+      (height !== containerDims.height || width !== containerDims.width)
+    ) {
       mutateElement(container, { height, width });
     }
   }
@@ -258,7 +268,6 @@ export const refreshTextDimensions = (
 ) => {
   const container = getContainerElement(textElement);
   if (container) {
-    // text = wrapText(text, getFontString(textElement), container.width);
     text = wrapText(
       text,
       getFontString(textElement),
@@ -270,11 +279,35 @@ export const refreshTextDimensions = (
 };
 
 export const getMaxContainerWidth = (container: ExcalidrawElement) => {
-  return getContainerDims(container).width - BOUND_TEXT_PADDING * 2;
+  const width = getContainerDims(container).width;
+  if (isArrowElement(container)) {
+    const containerWidth = width - BOUND_TEXT_PADDING * 8 * 2;
+    if (containerWidth <= 0) {
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.width;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
+    }
+    return containerWidth;
+  }
+  return width - BOUND_TEXT_PADDING * 2;
 };
 
 export const getMaxContainerHeight = (container: ExcalidrawElement) => {
-  return getContainerDims(container).height - BOUND_TEXT_PADDING * 2;
+  const height = getContainerDims(container).height;
+  if (isArrowElement(container)) {
+    const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
+    if (containerHeight <= 0) {
+      const boundText = getBoundTextElement(container);
+      if (boundText) {
+        return boundText.height;
+      }
+      return BOUND_TEXT_PADDING * 8 * 2;
+    }
+    return height;
+  }
+  return height - BOUND_TEXT_PADDING * 2;
 };
 
 export const updateTextElement = (
@@ -366,7 +399,8 @@ export const deepCopyElement = (val: any, depth: number = 0) => {
         : {};
     for (const key in val) {
       if (val.hasOwnProperty(key)) {
-        // don't copy top-level shape property, which we want to regenerate
+        // don't copy non-serializable objects like these caches. They'll be
+        // populated when the element is rendered.
         if (depth === 0 && (key === "shape" || key === "canvas")) {
           continue;
         }
@@ -409,6 +443,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
   overrides?: Partial<TElement>,
 ): TElement => {
   let copy: TElement = deepCopyElement(element);
+
   if (isTestEnv()) {
     copy.id = `${copy.id}_copy`;
     // `window.h` may not be defined in some unit tests
@@ -422,6 +457,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
   } else {
     copy.id = randomId();
   }
+  copy.boundElements = null;
   copy.updated = getUpdatedTimestamp();
   copy.seed = randomInteger();
   copy.groupIds = getNewGroupIdsForDuplication(

src/element/resizeElements.ts

@@ -1,4 +1,4 @@
-import { BOUND_TEXT_PADDING, SHIFT_LOCKING_ANGLE } from "../constants";
+import { SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";
 
 import {
@@ -13,6 +13,7 @@ import {
   NonDeletedExcalidrawElement,
   NonDeleted,
   ExcalidrawElement,
+  ExcalidrawTextElementWithContainer,
 } from "./types";
 import {
   getElementAbsoluteCoords,
@@ -21,12 +22,13 @@ import {
   getCommonBoundingBox,
 } from "./bounds";
 import {
+  isArrowElement,
+  isBoundToContainer,
   isFreeDrawElement,
   isLinearElement,
   isTextElement,
 } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
-import { getPerfectElementSize } from "./sizeHelpers";
 import { getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import {
@@ -41,9 +43,12 @@ import {
   getApproxMinLineWidth,
   getBoundTextElement,
   getBoundTextElementId,
+  getBoundTextElementOffset,
+  getContainerElement,
   handleBindTextResize,
   measureText,
 } from "./textElement";
+import { getMaxContainerWidth } from "./newElement";
 
 export const normalizeAngle = (angle: number): number => {
   if (angle >= 2 * Math.PI) {
@@ -74,23 +79,9 @@ export const transformElements = (
         pointerX,
         pointerY,
         shouldRotateWithDiscreteAngle,
+        pointerDownState.originalElements,
       );
       updateBoundElements(element);
-    } else if (
-      isLinearElement(element) &&
-      element.points.length === 2 &&
-      (transformHandleType === "nw" ||
-        transformHandleType === "ne" ||
-        transformHandleType === "sw" ||
-        transformHandleType === "se")
-    ) {
-      reshapeSingleTwoPointElement(
-        element,
-        resizeArrowDirection,
-        shouldRotateWithDiscreteAngle,
-        pointerX,
-        pointerY,
-      );
     } else if (
       isTextElement(element) &&
       (transformHandleType === "nw" ||
@@ -156,6 +147,7 @@ const rotateSingleElement = (
   pointerX: number,
   pointerY: number,
   shouldRotateWithDiscreteAngle: boolean,
+  originalElements: Map<string, NonDeleted<ExcalidrawElement>>,
 ) => {
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const cx = (x1 + x2) / 2;
@@ -166,100 +158,21 @@ const rotateSingleElement = (
     angle -= angle % SHIFT_LOCKING_ANGLE;
   }
   angle = normalizeAngle(angle);
-  mutateElement(element, { angle });
   const boundTextElementId = getBoundTextElementId(element);
+
+  mutateElement(element, { angle });
   if (boundTextElementId) {
-    const textElement = Scene.getScene(element)!.getElement(boundTextElementId);
+    const textElement =
-    mutateElement(textElement!, { angle });
+      Scene.getScene(element)?.getElement<ExcalidrawTextElementWithContainer>(
-  }
+        boundTextElementId,
-};
+      );
 
-// used in DEV only
+    if (textElement && !isArrowElement(element)) {
-const validateTwoPointElementNormalized = (
+      mutateElement(textElement, { angle });
-  element: NonDeleted<ExcalidrawLinearElement>,
+    }
-) => {
-  if (
-    element.points.length !== 2 ||
-    element.points[0][0] !== 0 ||
-    element.points[0][1] !== 0 ||
-    Math.abs(element.points[1][0]) !== element.width ||
-    Math.abs(element.points[1][1]) !== element.height
-  ) {
-    throw new Error("Two-point element is not normalized");
   }
 };
 
-const getPerfectElementSizeWithRotation = (
-  elementType: ExcalidrawElement["type"],
-  width: number,
-  height: number,
-  angle: number,
-): [number, number] => {
-  const size = getPerfectElementSize(
-    elementType,
-    ...rotate(width, height, 0, 0, angle),
-  );
-  return rotate(size.width, size.height, 0, 0, -angle);
-};
-
-export const reshapeSingleTwoPointElement = (
-  element: NonDeleted<ExcalidrawLinearElement>,
-  resizeArrowDirection: "origin" | "end",
-  shouldRotateWithDiscreteAngle: boolean,
-  pointerX: number,
-  pointerY: number,
-) => {
-  if (process.env.NODE_ENV !== "production") {
-    validateTwoPointElementNormalized(element);
-  }
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const cx = (x1 + x2) / 2;
-  const cy = (y1 + y2) / 2;
-  // rotation pointer with reverse angle
-  const [rotatedX, rotatedY] = rotate(
-    pointerX,
-    pointerY,
-    cx,
-    cy,
-    -element.angle,
-  );
-  let [width, height] =
-    resizeArrowDirection === "end"
-      ? [rotatedX - element.x, rotatedY - element.y]
-      : [
-          element.x + element.points[1][0] - rotatedX,
-          element.y + element.points[1][1] - rotatedY,
-        ];
-  if (shouldRotateWithDiscreteAngle) {
-    [width, height] = getPerfectElementSizeWithRotation(
-      element.type,
-      width,
-      height,
-      element.angle,
-    );
-  }
-  const [nextElementX, nextElementY] = adjustXYWithRotation(
-    resizeArrowDirection === "end"
-      ? { s: true, e: true }
-      : { n: true, w: true },
-    element.x,
-    element.y,
-    element.angle,
-    0,
-    0,
-    (element.points[1][0] - width) / 2,
-    (element.points[1][1] - height) / 2,
-  );
-  mutateElement(element, {
-    x: nextElementX,
-    y: nextElementY,
-    points: [
-      [0, 0],
-      [width, height],
-    ],
-  });
-};
-
 const rescalePointsInElement = (
   element: NonDeletedExcalidrawElement,
   width: number,
@@ -285,14 +198,23 @@ const measureFontSizeFromWH = (
   nextHeight: number,
 ): { size: number; baseline: number } | null => {
   // We only use width to scale font on resize
-  const nextFontSize = element.fontSize * (nextWidth / element.width);
+  let width = element.width;
+
+  const hasContainer = isBoundToContainer(element);
+  if (hasContainer) {
+    const container = getContainerElement(element);
+    if (container) {
+      width = getMaxContainerWidth(container);
+    }
+  }
+  const nextFontSize = element.fontSize * (nextWidth / width);
   if (nextFontSize < MIN_FONT_SIZE) {
     return null;
   }
   const metrics = measureText(
     element.text,
     getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.containerId ? element.width : null,
+    element.containerId ? width : null,
   );
   return {
     size: nextFontSize,
@@ -505,10 +427,12 @@ export const resizeSingleElement = (
       };
     }
     if (shouldMaintainAspectRatio) {
+      const boundTextElementPadding =
+        getBoundTextElementOffset(boundTextElement);
       const nextFont = measureFontSizeFromWH(
         boundTextElement,
-        eleNewWidth - BOUND_TEXT_PADDING * 2,
+        eleNewWidth - boundTextElementPadding * 2,
-        eleNewHeight - BOUND_TEXT_PADDING * 2,
+        eleNewHeight - boundTextElementPadding * 2,
       );
       if (nextFont === null) {
         return;
@@ -597,24 +521,36 @@ export const resizeSingleElement = (
   newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);
 
   // Readjust points for linear elements
-  const rescaledPoints = rescalePointsInElement(
+  let rescaledElementPointsY;
-    stateAtResizeStart,
+  let rescaledPoints;
-    eleNewWidth,
+
-    eleNewHeight,
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    true,
+    rescaledElementPointsY = rescalePoints(
-  );
+      1,
+      eleNewHeight,
+      (stateAtResizeStart as ExcalidrawLinearElement).points,
+      true,
+    );
+
+    rescaledPoints = rescalePoints(
+      0,
+      eleNewWidth,
+      rescaledElementPointsY,
+      true,
+    );
+  }
+
   // For linear elements (x,y) are the coordinates of the first drawn point not the top-left corner
   // So we need to readjust (x,y) to be where the first point should be
   const newOrigin = [...newTopLeft];
   newOrigin[0] += stateAtResizeStart.x - newBoundsX1;
   newOrigin[1] += stateAtResizeStart.y - newBoundsY1;
-
   const resizedElement = {
     width: Math.abs(eleNewWidth),
     height: Math.abs(eleNewHeight),
     x: newOrigin[0],
     y: newOrigin[1],
-    ...rescaledPoints,
+    points: rescaledPoints,
   };
 
   if ("scale" in element && "scale" in stateAtResizeStart) {
@@ -638,6 +574,7 @@ export const resizeSingleElement = (
     updateBoundElements(element, {
       newSize: { width: resizedElement.width, height: resizedElement.height },
     });
+
     mutateElement(element, resizedElement);
     if (boundTextElement && boundTextFont) {
       mutateElement(boundTextElement, { fontSize: boundTextFont.fontSize });
@@ -760,7 +697,7 @@ const resizeMultipleElements = (
     const boundTextElement = getBoundTextElement(element.latest);
 
     if (boundTextElement || isTextElement(element.orig)) {
-      const optionalPadding = boundTextElement ? BOUND_TEXT_PADDING * 2 : 0;
+      const optionalPadding = getBoundTextElementOffset(boundTextElement) * 2;
       const textMeasurements = measureFontSizeFromWH(
         boundTextElement ?? (element.orig as ExcalidrawTextElement),
         width - optionalPadding,
@@ -790,6 +727,7 @@ const resizeMultipleElements = (
 
     if (boundTextElement && boundTextUpdates) {
       mutateElement(boundTextElement, boundTextUpdates);
+
       handleBindTextResize(element.latest, transformHandleType);
     }
   });
@@ -810,7 +748,7 @@ const rotateMultipleElements = (
     centerAngle += SHIFT_LOCKING_ANGLE / 2;
     centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
   }
-  elements.forEach((element, index) => {
+  elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
@@ -831,12 +769,16 @@ const rotateMultipleElements = (
     const boundTextElementId = getBoundTextElementId(element);
     if (boundTextElementId) {
       const textElement =
-        Scene.getScene(element)!.getElement(boundTextElementId)!;
+        Scene.getScene(element)?.getElement<ExcalidrawTextElementWithContainer>(
-      mutateElement(textElement, {
+          boundTextElementId,
-        x: textElement.x + (rotatedCX - cx),
+        );
-        y: textElement.y + (rotatedCY - cy),
+      if (textElement && !isArrowElement(element)) {
-        angle: normalizeAngle(centerAngle + origAngle),
+        mutateElement(textElement, {
-      });
+          x: textElement.x + (rotatedCX - cx),
+          y: textElement.y + (rotatedCY - cy),
+          angle: normalizeAngle(centerAngle + origAngle),
+        });
+      }
     }
   });
 };

src/element/resizeTest.ts

@@ -94,7 +94,7 @@ export const getTransformHandleTypeFromCoords = (
   pointerType: PointerType,
 ): MaybeTransformHandleType => {
   const transformHandles = getTransformHandlesFromCoords(
-    [x1, y1, x2, y2],
+    [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
     0,
     zoom,
     pointerType,

src/element/textElement.test.ts

@@ -1,10 +1,17 @@
 import { BOUND_TEXT_PADDING } from "../constants";
-import { wrapText } from "./textElement";
+import { measureText, wrapText } from "./textElement";
 import { FontString } from "./types";
 
 describe("Test wrapText", () => {
   const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
 
+  it("shouldn't add new lines for trailing spaces", () => {
+    const text = "Hello whats up     ";
+    const maxWidth = 200 - BOUND_TEXT_PADDING * 2;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("Hello whats up    ");
+  });
+
   describe("When text doesn't contain new lines", () => {
     const text = "Hello whats up";
     [
@@ -139,3 +146,37 @@ break it now`,
     });
   });
 });
+
+describe("Test measureText", () => {
+  const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
+  const text = "Hello World";
+
+  it("should add correct attributes when maxWidth is passed", () => {
+    const maxWidth = 200 - BOUND_TEXT_PADDING * 2;
+    const res = measureText(text, font, maxWidth);
+
+    expect(res.container).toMatchInlineSnapshot(`
+      <div
+        style="position: absolute; white-space: pre-wrap; font: Emoji 20px 20px; min-height: 1em; width: 111px; overflow: hidden; word-break: break-word; line-height: 0px;"
+      >
+        <span
+          style="display: inline-block; overflow: hidden; width: 1px; height: 1px;"
+        />
+      </div>
+    `);
+  });
+
+  it("should add correct attributes when maxWidth is not passed", () => {
+    const res = measureText(text, font);
+
+    expect(res.container).toMatchInlineSnapshot(`
+      <div
+        style="position: absolute; white-space: pre; font: Emoji 20px 20px; min-height: 1em;"
+      >
+        <span
+          style="display: inline-block; overflow: hidden; width: 1px; height: 1px;"
+        />
+      </div>
+    `);
+  });
+});

src/element/textElement.ts

@@ -1,6 +1,7 @@
 import { getFontString, arrayToMap, isTestEnv } from "../utils";
 import {
   ExcalidrawElement,
+  ExcalidrawTextContainer,
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
   FontString,
@@ -12,6 +13,31 @@ import { MaybeTransformHandleType } from "./transformHandles";
 import Scene from "../scene/Scene";
 import { isTextElement } from ".";
 import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
+import {
+  isBoundToContainer,
+  isImageElement,
+  isArrowElement,
+} from "./typeChecks";
+import { LinearElementEditor } from "./linearElementEditor";
+import { AppState } from "../types";
+import { isTextBindableContainer } from "./typeChecks";
+import { getElementAbsoluteCoords } from "../element";
+import { getSelectedElements } from "../scene";
+import { isHittingElementNotConsideringBoundingBox } from "./collision";
+import {
+  resetOriginalContainerCache,
+  updateOriginalContainerCache,
+} from "./textWysiwyg";
+
+export const normalizeText = (text: string) => {
+  return (
+    text
+      // replace tabs with spaces so they render and measure correctly
+      .replace(/\t/g, "        ")
+      // normalize newlines
+      .replace(/\r?\n|\r/g, "\n")
+  );
+};
 
 export const redrawTextBoundingBox = (
   textElement: ExcalidrawTextElement,
@@ -19,54 +45,60 @@ export const redrawTextBoundingBox = (
 ) => {
   let maxWidth = undefined;
   let text = textElement.text;
-
   if (container) {
     maxWidth = getMaxContainerWidth(container);
     text = wrapText(
       textElement.originalText,
       getFontString(textElement),
-      getMaxContainerWidth(container),
+      maxWidth,
     );
   }
-  const metrics = measureText(
+  const metrics = measureText(text, getFontString(textElement), maxWidth);
-    textElement.originalText,
-    getFontString(textElement),
-    maxWidth,
-  );
   let coordY = textElement.y;
   let coordX = textElement.x;
   // Resize container and vertically center align the text
   if (container) {
-    const containerDims = getContainerDims(container);
+    if (!isArrowElement(container)) {
-    let nextHeight = containerDims.height;
+      const containerDims = getContainerDims(container);
-    if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
+      let nextHeight = containerDims.height;
-      coordY = container.y + BOUND_TEXT_PADDING;
+      const boundTextElementPadding = getBoundTextElementOffset(textElement);
-    } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+      if (textElement.verticalAlign === VERTICAL_ALIGN.TOP) {
-      coordY =
+        coordY = container.y + boundTextElementPadding;
-        container.y +
+      } else if (textElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
-        containerDims.height -
+        coordY =
-        metrics.height -
+          container.y +
-        BOUND_TEXT_PADDING;
+          containerDims.height -
-    } else {
+          metrics.height -
-      coordY = container.y + containerDims.height / 2 - metrics.height / 2;
+          boundTextElementPadding;
-      if (metrics.height > getMaxContainerHeight(container)) {
+      } else {
-        nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
+        coordY = container.y + containerDims.height / 2 - metrics.height / 2;
-        coordY = container.y + nextHeight / 2 - metrics.height / 2;
+        if (metrics.height > getMaxContainerHeight(container)) {
+          nextHeight = metrics.height + boundTextElementPadding * 2;
+          coordY = container.y + nextHeight / 2 - metrics.height / 2;
+        }
       }
-    }
+      if (textElement.textAlign === TEXT_ALIGN.LEFT) {
-
+        coordX = container.x + boundTextElementPadding;
-    if (textElement.textAlign === TEXT_ALIGN.LEFT) {
+      } else if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
-      coordX = container.x + BOUND_TEXT_PADDING;
+        coordX =
-    } else if (textElement.textAlign === TEXT_ALIGN.RIGHT) {
+          container.x +
-      coordX =
+          containerDims.width -
-        container.x + containerDims.width - metrics.width - BOUND_TEXT_PADDING;
+          metrics.width -
+          boundTextElementPadding;
+      } else {
+        coordX = container.x + containerDims.width / 2 - metrics.width / 2;
+      }
+      updateOriginalContainerCache(container.id, nextHeight);
+      mutateElement(container, { height: nextHeight });
     } else {
-      coordX = container.x + container.width / 2 - metrics.width / 2;
+      const centerX = textElement.x + textElement.width / 2;
+      const centerY = textElement.y + textElement.height / 2;
+      const diffWidth = metrics.width - textElement.width;
+      const diffHeight = metrics.height - textElement.height;
+      coordY = centerY - (textElement.height + diffHeight) / 2;
+      coordX = centerX - (textElement.width + diffWidth) / 2;
     }
-
-    mutateElement(container, { height: nextHeight });
   }
-
   mutateElement(textElement, {
     width: metrics.width,
     height: metrics.height,
@@ -96,7 +128,7 @@ export const bindTextToShapeAfterDuplication = (
         const newContainer = sceneElementMap.get(newElementId);
         if (newContainer) {
           mutateElement(newContainer, {
-            boundElements: element.boundElements?.concat({
+            boundElements: (newContainer.boundElements || []).concat({
               type: "text",
               id: newTextElementId,
             }),
@@ -114,84 +146,114 @@ export const bindTextToShapeAfterDuplication = (
 };
 
 export const handleBindTextResize = (
-  element: NonDeletedExcalidrawElement,
+  container: NonDeletedExcalidrawElement,
   transformHandleType: MaybeTransformHandleType,
 ) => {
-  const boundTextElementId = getBoundTextElementId(element);
+  const boundTextElementId = getBoundTextElementId(container);
-  if (boundTextElementId) {
+  if (!boundTextElementId) {
-    const textElement = Scene.getScene(element)!.getElement(
+    return;
+  }
+  resetOriginalContainerCache(container.id);
+  let textElement = Scene.getScene(container)!.getElement(
+    boundTextElementId,
+  ) as ExcalidrawTextElement;
+  if (textElement && textElement.text) {
+    if (!container) {
+      return;
+    }
+
+    textElement = Scene.getScene(container)!.getElement(
       boundTextElementId,
     ) as ExcalidrawTextElement;
-    if (textElement && textElement.text) {
+    let text = textElement.text;
-      if (!element) {
+    let nextHeight = textElement.height;
-        return;
+    let nextWidth = textElement.width;
-      }
+    const containerDims = getContainerDims(container);
-      let text = textElement.text;
+    const maxWidth = getMaxContainerWidth(container);
-      let nextHeight = textElement.height;
+    const maxHeight = getMaxContainerHeight(container);
-      let nextWidth = textElement.width;
+    let containerHeight = containerDims.height;
-      let containerHeight = element.height;
+    let nextBaseLine = textElement.baseline;
-      let nextBaseLine = textElement.baseline;
+    if (transformHandleType !== "n" && transformHandleType !== "s") {
-      if (transformHandleType !== "n" && transformHandleType !== "s") {
+      if (text) {
-        if (text) {
+        text = wrapText(
-          text = wrapText(
+          textElement.originalText,
-            textElement.originalText,
-            getFontString(textElement),
-            getMaxContainerWidth(element),
-          );
-        }
-
-        const dimensions = measureText(
-          text,
           getFontString(textElement),
-          element.width,
+          maxWidth,
         );
-        nextHeight = dimensions.height;
-        nextWidth = dimensions.width;
-        nextBaseLine = dimensions.baseline;
       }
-      // increase height in case text element height exceeds
+      const dimensions = measureText(
-      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,
-        });
-      }
-
-      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;
-      }
-      const updatedX =
-        textElement.textAlign === TEXT_ALIGN.LEFT
-          ? element.x + BOUND_TEXT_PADDING
-          : textElement.textAlign === TEXT_ALIGN.RIGHT
-          ? element.x + element.width - nextWidth - BOUND_TEXT_PADDING
-          : element.x + element.width / 2 - nextWidth / 2;
-      mutateElement(textElement, {
         text,
-        width: nextWidth,
+        getFontString(textElement),
-        height: nextHeight,
+        maxWidth,
-        x: updatedX,
+      );
+      nextHeight = dimensions.height;
+      nextWidth = dimensions.width;
+      nextBaseLine = dimensions.baseline;
+    }
+    // increase height in case text element height exceeds
+    if (nextHeight > maxHeight) {
+      containerHeight = nextHeight + getBoundTextElementOffset(textElement) * 2;
+      const diff = containerHeight - containerDims.height;
+      // fix the y coord when resizing from ne/nw/n
+      const updatedY =
+        !isArrowElement(container) &&
+        (transformHandleType === "ne" ||
+          transformHandleType === "nw" ||
+          transformHandleType === "n")
+          ? container.y - diff
+          : container.y;
+      mutateElement(container, {
+        height: containerHeight,
         y: updatedY,
-        baseline: nextBaseLine,
       });
     }
+
+    mutateElement(textElement, {
+      text,
+      width: nextWidth,
+      height: nextHeight,
+
+      baseline: nextBaseLine,
+    });
+    if (!isArrowElement(container)) {
+      updateBoundTextPosition(
+        container,
+        textElement as ExcalidrawTextElementWithContainer,
+      );
+    }
   }
 };
 
+const updateBoundTextPosition = (
+  container: ExcalidrawElement,
+  boundTextElement: ExcalidrawTextElementWithContainer,
+) => {
+  const containerDims = getContainerDims(container);
+  const boundTextElementPadding = getBoundTextElementOffset(boundTextElement);
+  let y;
+  if (boundTextElement.verticalAlign === VERTICAL_ALIGN.TOP) {
+    y = container.y + boundTextElementPadding;
+  } else if (boundTextElement.verticalAlign === VERTICAL_ALIGN.BOTTOM) {
+    y =
+      container.y +
+      containerDims.height -
+      boundTextElement.height -
+      boundTextElementPadding;
+  } else {
+    y = container.y + containerDims.height / 2 - boundTextElement.height / 2;
+  }
+  const x =
+    boundTextElement.textAlign === TEXT_ALIGN.LEFT
+      ? container.x + boundTextElementPadding
+      : boundTextElement.textAlign === TEXT_ALIGN.RIGHT
+      ? container.x +
+        containerDims.width -
+        boundTextElement.width -
+        boundTextElementPadding
+      : container.x + containerDims.width / 2 - boundTextElement.width / 2;
+
+  mutateElement(boundTextElement, { x, y });
+};
 // https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
 export const measureText = (
   text: string,
@@ -209,9 +271,12 @@ export const measureText = (
   container.style.whiteSpace = "pre";
   container.style.font = font;
   container.style.minHeight = "1em";
+  const textWidth = getTextWidth(text, font);
+
   if (maxWidth) {
     const lineHeight = getApproxLineHeight(font);
-    container.style.maxWidth = `${String(maxWidth)}px`;
+    container.style.width = `${String(Math.min(textWidth, maxWidth) + 1)}px`;
+
     container.style.overflow = "hidden";
     container.style.wordBreak = "break-word";
     container.style.lineHeight = `${String(lineHeight)}px`;
@@ -229,11 +294,15 @@ export const measureText = (
   // Baseline is important for positioning text on canvas
   const baseline = span.offsetTop + span.offsetHeight;
   // Since span adds 1px extra width to the container
-  const width = container.offsetWidth + 1;
+  let width = container.offsetWidth;
-
+  if (maxWidth && textWidth > maxWidth) {
+    width = width - 1;
+  }
   const height = container.offsetHeight;
   document.body.removeChild(container);
-
+  if (isTestEnv()) {
+    return { width, height, baseline, container };
+  }
   return { width, height, baseline };
 };
 
@@ -249,7 +318,7 @@ export const getApproxLineHeight = (font: FontString) => {
 };
 
 let canvas: HTMLCanvasElement | undefined;
-const getTextWidth = (text: string, font: FontString) => {
+const getLineWidth = (text: string, font: FontString) => {
   if (!canvas) {
     canvas = document.createElement("canvas");
   }
@@ -267,10 +336,24 @@ const getTextWidth = (text: string, font: FontString) => {
   return metrics.width;
 };
 
+export const getTextWidth = (text: string, font: FontString) => {
+  const lines = text.split("\n");
+  let width = 0;
+  lines.forEach((line) => {
+    width = Math.max(width, getLineWidth(line, font));
+  });
+  return width;
+};
 export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   const lines: Array<string> = [];
   const originalLines = text.split("\n");
-  const spaceWidth = getTextWidth(" ", font);
+  const spaceWidth = getLineWidth(" ", font);
+
+  const push = (str: string) => {
+    if (str.trim()) {
+      lines.push(str);
+    }
+  };
   originalLines.forEach((originalLine) => {
     const words = originalLine.split(" ");
     // This means its newline so push it
@@ -282,15 +365,13 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
 
       let index = 0;
       while (index < words.length) {
-        const currentWordWidth = getTextWidth(words[index], font);
+        const currentWordWidth = getLineWidth(words[index], font);
 
         // Start breaking longer words exceeding max width
         if (currentWordWidth >= maxWidth) {
           // push current line since the current word exceeds the max width
           // so will be appended in next line
-          if (currentLine) {
+          push(currentLine);
-            lines.push(currentLine);
-          }
           currentLine = "";
           currentLineWidthTillNow = 0;
           while (words[index].length > 0) {
@@ -304,7 +385,7 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
               if (currentLine.slice(-1) === " ") {
                 currentLine = currentLine.slice(0, -1);
               }
-              lines.push(currentLine);
+              push(currentLine);
               currentLine = currentChar;
               currentLineWidthTillNow = width;
               if (currentLineWidthTillNow === maxWidth) {
@@ -317,7 +398,7 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
           }
           // push current line if appending space exceeds max width
           if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-            lines.push(currentLine);
+            push(currentLine);
             currentLine = "";
             currentLineWidthTillNow = 0;
           } else {
@@ -333,10 +414,10 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
           // Start appending words in a line till max width reached
           while (currentLineWidthTillNow < maxWidth && index < words.length) {
             const word = words[index];
-            currentLineWidthTillNow = getTextWidth(currentLine + word, font);
+            currentLineWidthTillNow = getLineWidth(currentLine + word, font);
 
             if (currentLineWidthTillNow >= maxWidth) {
-              lines.push(currentLine);
+              push(currentLine);
               currentLineWidthTillNow = 0;
               currentLine = "";
 
@@ -347,7 +428,8 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
 
             // Push the word if appending space exceeds max width
             if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
-              lines.push(currentLine.slice(0, -1));
+              const word = currentLine.slice(0, -1);
+              push(word);
               currentLine = "";
               currentLineWidthTillNow = 0;
               break;
@@ -364,7 +446,7 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
         if (currentLine.slice(-1) === " ") {
           currentLine = currentLine.slice(0, -1);
         }
-        lines.push(currentLine);
+        push(currentLine);
       }
     }
   });
@@ -380,7 +462,7 @@ export const charWidth = (() => {
       cachedCharWidth[font] = [];
     }
     if (!cachedCharWidth[font][ascii]) {
-      const width = getTextWidth(char, font);
+      const width = getLineWidth(char, font);
       cachedCharWidth[font][ascii] = width;
     }
 
@@ -397,6 +479,7 @@ export const charWidth = (() => {
 })();
 export const getApproxMinLineWidth = (font: FontString) => {
   const maxCharWidth = getMaxCharWidth(font);
+
   if (maxCharWidth === 0) {
     return (
       measureText(DUMMY_TEXT.split("").join("\n"), font).width +
@@ -439,7 +522,7 @@ export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
   while (widthTillNow <= width) {
     const batch = dummyText.substr(index, index + batchLength);
     str += batch;
-    widthTillNow += getTextWidth(str, font);
+    widthTillNow += getLineWidth(str, font);
     if (index === dummyText.length - 1) {
       index = 0;
     }
@@ -448,7 +531,7 @@ export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
 
   while (widthTillNow > width) {
     str = str.substr(0, str.length - 1);
-    widthTillNow = getTextWidth(str, font);
+    widthTillNow = getLineWidth(str, font);
   }
   return str.length;
 };
@@ -477,7 +560,9 @@ export const getBoundTextElement = (element: ExcalidrawElement | null) => {
 
 export const getContainerElement = (
   element:
-    | (ExcalidrawElement & { containerId: ExcalidrawElement["id"] | null })
+    | (ExcalidrawElement & {
+        containerId: ExcalidrawElement["id"] | null;
+      })
     | null,
 ) => {
   if (!element) {
@@ -490,5 +575,149 @@ export const getContainerElement = (
 };
 
 export const getContainerDims = (element: ExcalidrawElement) => {
+  const MIN_WIDTH = 300;
+  if (isArrowElement(element)) {
+    const width = Math.max(element.width, MIN_WIDTH);
+    const height = element.height;
+    return { width, height };
+  }
   return { width: element.width, height: element.height };
 };
+
+export const getContainerCenter = (
+  container: ExcalidrawElement,
+  appState: AppState,
+) => {
+  if (!isArrowElement(container)) {
+    return {
+      x: container.x + container.width / 2,
+      y: container.y + container.height / 2,
+    };
+  }
+  const points = LinearElementEditor.getPointsGlobalCoordinates(container);
+  if (points.length % 2 === 1) {
+    const index = Math.floor(container.points.length / 2);
+    const midPoint = LinearElementEditor.getPointGlobalCoordinates(
+      container,
+      container.points[index],
+    );
+    return { x: midPoint[0], y: midPoint[1] };
+  }
+  const index = container.points.length / 2 - 1;
+  let midSegmentMidpoint = LinearElementEditor.getEditorMidPoints(
+    container,
+    appState,
+  )[index];
+  if (!midSegmentMidpoint) {
+    midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
+      container,
+      points[index],
+      points[index + 1],
+      index + 1,
+    );
+  }
+  return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
+};
+
+export const getTextElementAngle = (textElement: ExcalidrawTextElement) => {
+  const container = getContainerElement(textElement);
+  if (!container || isArrowElement(container)) {
+    return textElement.angle;
+  }
+  return container.angle;
+};
+
+export const getBoundTextElementOffset = (
+  boundTextElement: ExcalidrawTextElement | null,
+) => {
+  const container = getContainerElement(boundTextElement);
+  if (!container) {
+    return 0;
+  }
+  if (isArrowElement(container)) {
+    return BOUND_TEXT_PADDING * 8;
+  }
+  return BOUND_TEXT_PADDING;
+};
+
+export const getBoundTextElementPosition = (
+  container: ExcalidrawElement,
+  boundTextElement: ExcalidrawTextElementWithContainer,
+) => {
+  if (isArrowElement(container)) {
+    return LinearElementEditor.getBoundTextElementPosition(
+      container,
+      boundTextElement,
+    );
+  }
+};
+
+export const shouldAllowVerticalAlign = (
+  selectedElements: NonDeletedExcalidrawElement[],
+) => {
+  return selectedElements.some((element) => {
+    const hasBoundContainer = isBoundToContainer(element);
+    if (hasBoundContainer) {
+      const container = getContainerElement(element);
+      if (isTextElement(element) && isArrowElement(container)) {
+        return false;
+      }
+      return true;
+    }
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      if (isArrowElement(element)) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  });
+};
+
+export const getTextBindableContainerAtPosition = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  x: number,
+  y: number,
+): ExcalidrawTextContainer | null => {
+  const selectedElements = getSelectedElements(elements, appState);
+  if (selectedElements.length === 1) {
+    return isTextBindableContainer(selectedElements[0], false)
+      ? selectedElements[0]
+      : null;
+  }
+  let hitElement = null;
+  // We need to to hit testing from front (end of the array) to back (beginning of the array)
+  for (let index = elements.length - 1; index >= 0; --index) {
+    if (elements[index].isDeleted) {
+      continue;
+    }
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index]);
+    if (
+      isArrowElement(elements[index]) &&
+      isHittingElementNotConsideringBoundingBox(elements[index], appState, [
+        x,
+        y,
+      ])
+    ) {
+      hitElement = elements[index];
+      break;
+    } else if (x1 < x && x < x2 && y1 < y && y < y2) {
+      hitElement = elements[index];
+      break;
+    }
+  }
+
+  return isTextBindableContainer(hitElement, false) ? hitElement : null;
+};
+
+export const isValidTextContainer = (element: ExcalidrawElement) => {
+  return (
+    element.type === "rectangle" ||
+    element.type === "ellipse" ||
+    element.type === "diamond" ||
+    isImageElement(element) ||
+    isArrowElement(element)
+  );
+};

src/element/textWysiwyg.test.tsx

@@ -15,6 +15,7 @@ import * as textElementUtils from "./textElement";
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
 import { resize } from "../tests/utils";
+import { getOriginalContainerHeightFromCache } from "./textWysiwyg";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
@@ -462,7 +463,7 @@ describe("textWysiwyg", () => {
       });
     });
 
-    it("should bind text to container when double clicked on center", async () => {
+    it("should bind text to container when double clicked on center of filled container", async () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);
 
@@ -472,6 +473,43 @@ describe("textWysiwyg", () => {
       );
       expect(h.elements.length).toBe(2);
 
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(rectangle.id);
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+      mouse.down();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+    });
+
+    it("should bind text to container when double clicked on center of transparent container", async () => {
+      const rectangle = API.createElement({
+        type: "rectangle",
+        x: 10,
+        y: 20,
+        width: 90,
+        height: 75,
+        backgroundColor: "transparent",
+      });
+      h.elements = [rectangle];
+
+      mouse.doubleClickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+      expect(h.elements.length).toBe(2);
+
       const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.type).toBe("text");
       expect(text.containerId).toBe(rectangle.id);
@@ -514,20 +552,19 @@ describe("textWysiwyg", () => {
     });
 
     it("shouldn't bind to non-text-bindable containers", async () => {
-      const line = API.createElement({
+      const freedraw = API.createElement({
-        type: "line",
+        type: "freedraw",
         width: 100,
         height: 0,
-        points: [
-          [0, 0],
-          [100, 0],
-        ],
       });
-      h.elements = [line];
+      h.elements = [freedraw];
 
       UI.clickTool("text");
 
-      mouse.clickAt(line.x + line.width / 2, line.y + line.height / 2);
+      mouse.clickAt(
+        freedraw.x + freedraw.width / 2,
+        freedraw.y + freedraw.height / 2,
+      );
 
       const editor = document.querySelector(
         ".excalidraw-textEditorContainer > textarea",
@@ -541,11 +578,24 @@ describe("textWysiwyg", () => {
       fireEvent.keyDown(editor, { key: KEYS.ESCAPE });
       editor.dispatchEvent(new Event("input"));
 
-      expect(line.boundElements).toBe(null);
+      expect(freedraw.boundElements).toBe(null);
       expect(h.elements[1].type).toBe("text");
       expect((h.elements[1] as ExcalidrawTextElement).containerId).toBe(null);
     });
 
+    ["freedraw", "line"].forEach((type: any) => {
+      it(`shouldn't create text element when pressing 'Enter' key on ${type} `, async () => {
+        h.elements = [];
+        const elemnet = UI.createElement(type, {
+          width: 100,
+          height: 50,
+        });
+        API.setSelectedElements([elemnet]);
+        Keyboard.keyPress(KEYS.ENTER);
+        expect(h.elements.length).toBe(1);
+      });
+    });
+
     it("should'nt bind text to container when not double clicked on center", async () => {
       expect(h.elements.length).toBe(1);
       expect(h.elements[0].id).toBe(rectangle.id);
@@ -776,9 +826,9 @@ describe("textWysiwyg", () => {
       expect(h.elements.length).toBe(2);
 
       // Bind first text
-      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
       expect(text.containerId).toBe(rectangle.id);
-      let editor = document.querySelector(
+      const editor = document.querySelector(
         ".excalidraw-textEditorContainer > textarea",
       ) as HTMLTextAreaElement;
       await new Promise((r) => setTimeout(r, 0));
@@ -788,25 +838,14 @@ describe("textWysiwyg", () => {
         { id: text.id, type: "text" },
       ]);
 
-      // Attempt to bind another text
+      mouse.select(rectangle);
-      UI.clickTool("text");
+      Keyboard.keyPress(KEYS.ENTER);
-      mouse.clickAt(
+      expect(h.elements.length).toBe(2);
-        rectangle.x + rectangle.width / 2,
+
-        rectangle.y + rectangle.height / 2,
-      );
-      mouse.down();
-      expect(h.elements.length).toBe(3);
-      text = h.elements[2] as ExcalidrawTextElementWithContainer;
-      editor = document.querySelector(
-        ".excalidraw-textEditorContainer > textarea",
-      ) as HTMLTextAreaElement;
-      await new Promise((r) => setTimeout(r, 0));
-      fireEvent.change(editor, { target: { value: "Whats up?" } });
-      editor.blur();
       expect(rectangle.boundElements).toStrictEqual([
         { id: h.elements[1].id, type: "text" },
       ]);
-      expect(text.containerId).toBe(null);
+      expect(text.containerId).toBe(rectangle.id);
     });
 
     it("should respect text alignment when resizing", async () => {
@@ -823,7 +862,7 @@ describe("textWysiwyg", () => {
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
       expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
         Array [
-          109.5,
+          110,
           17,
         ]
       `);
@@ -871,10 +910,260 @@ describe("textWysiwyg", () => {
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
       expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
         Array [
-          424,
+          425,
           -539,
         ]
       `);
     });
+
+    it("should always bind to selected container and insert it in correct position", async () => {
+      const rectangle2 = UI.createElement("rectangle", {
+        x: 5,
+        y: 10,
+        width: 120,
+        height: 100,
+      });
+
+      API.setSelectedElements([rectangle]);
+      Keyboard.keyPress(KEYS.ENTER);
+
+      expect(h.elements.length).toBe(3);
+      expect(h.elements[1].type).toBe("text");
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(rectangle.id);
+      mouse.down();
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(rectangle2.boundElements).toBeNull();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+    });
+
+    it("should scale font size correctly when resizing using shift", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello" } });
+      editor.blur();
+      const textElement = h.elements[1] as ExcalidrawTextElement;
+      expect(rectangle.width).toBe(90);
+      expect(rectangle.height).toBe(75);
+      expect(textElement.fontSize).toBe(20);
+
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 50], {
+        shift: true,
+      });
+      expect(rectangle.width).toBe(200);
+      expect(rectangle.height).toBe(166.66666666666669);
+      expect(textElement.fontSize).toBe(47.5);
+    });
+
+    it("should bind text correctly when container duplicated with alt-drag", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello" } });
+      editor.blur();
+      expect(h.elements.length).toBe(2);
+
+      mouse.select(rectangle);
+      Keyboard.withModifierKeys({ alt: true }, () => {
+        mouse.down(rectangle.x + 10, rectangle.y + 10);
+        mouse.up(rectangle.x + 10, rectangle.y + 10);
+      });
+      expect(h.elements.length).toBe(4);
+      const duplicatedRectangle = h.elements[0];
+      const duplicatedText = h
+        .elements[1] as ExcalidrawTextElementWithContainer;
+      const originalRect = h.elements[2];
+      const originalText = h.elements[3] as ExcalidrawTextElementWithContainer;
+      expect(originalRect.boundElements).toStrictEqual([
+        { id: originalText.id, type: "text" },
+      ]);
+
+      expect(originalText.containerId).toBe(originalRect.id);
+
+      expect(duplicatedRectangle.boundElements).toStrictEqual([
+        { id: duplicatedText.id, type: "text" },
+      ]);
+
+      expect(duplicatedText.containerId).toBe(duplicatedRectangle.id);
+    });
+
+    it("undo should work", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello" } });
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: h.elements[1].id, type: "text" },
+      ]);
+      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      const originalRectX = rectangle.x;
+      const originalRectY = rectangle.y;
+      const originalTextX = text.x;
+      const originalTextY = text.y;
+      mouse.select(rectangle);
+      mouse.downAt(rectangle.x, rectangle.y);
+      mouse.moveTo(rectangle.x + 100, rectangle.y + 50);
+      mouse.up(rectangle.x + 100, rectangle.y + 50);
+      expect(rectangle.x).toBe(80);
+      expect(rectangle.y).toBe(85);
+      expect(text.x).toBe(90);
+      expect(text.y).toBe(90);
+
+      Keyboard.withModifierKeys({ ctrl: true }, () => {
+        Keyboard.keyPress(KEYS.Z);
+      });
+      expect(rectangle.x).toBe(originalRectX);
+      expect(rectangle.y).toBe(originalRectY);
+      text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.x).toBe(originalTextX);
+      expect(text.y).toBe(originalTextY);
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+      expect(text.containerId).toBe(rectangle.id);
+    });
+
+    it("should not allow bound text with only whitespaces", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+
+      fireEvent.change(editor, { target: { value: "   " } });
+      editor.blur();
+      expect(rectangle.boundElements).toStrictEqual([]);
+      expect(h.elements[1].isDeleted).toBe(true);
+    });
+
+    it("should restore original container height and clear cache once text is unbind", async () => {
+      jest
+        .spyOn(textElementUtils, "measureText")
+        .mockImplementation((text, font, maxWidth) => {
+          let width = INITIAL_WIDTH;
+          let height = APPROX_LINE_HEIGHT;
+          let baseline = 10;
+          if (!text) {
+            return {
+              width,
+              height,
+              baseline,
+            };
+          }
+          baseline = 30;
+          width = DUMMY_WIDTH;
+          height = APPROX_LINE_HEIGHT * 5;
+
+          return {
+            width,
+            height,
+            baseline,
+          };
+        });
+      const originalRectHeight = rectangle.height;
+      expect(rectangle.height).toBe(originalRectHeight);
+
+      Keyboard.keyPress(KEYS.ENTER);
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+
+      fireEvent.change(editor, {
+        target: { value: "Online whiteboard collaboration made easy" },
+      });
+      editor.blur();
+      expect(rectangle.height).toBe(135);
+      mouse.select(rectangle);
+      fireEvent.contextMenu(GlobalTestState.canvas, {
+        button: 2,
+        clientX: 20,
+        clientY: 30,
+      });
+      const contextMenu = document.querySelector(".context-menu");
+      fireEvent.click(queryByText(contextMenu as HTMLElement, "Unbind text")!);
+      expect(h.elements[0].boundElements).toEqual([]);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(null);
+
+      expect(rectangle.height).toBe(originalRectHeight);
+    });
+
+    it("should reset the container height cache when resizing", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello" } });
+      editor.blur();
+
+      resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
+      expect(rectangle.height).toBe(215);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(null);
+
+      mouse.select(rectangle);
+      Keyboard.keyPress(KEYS.ENTER);
+
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(rectangle.height).toBe(215);
+      // cache updated again
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(215);
+    });
+
+    //@todo fix this test later once measureText is mocked correctly
+    it.skip("should reset the container height cache when font properties updated", async () => {
+      Keyboard.keyPress(KEYS.ENTER);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
+
+      const editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      editor.blur();
+
+      mouse.select(rectangle);
+      Keyboard.keyPress(KEYS.ENTER);
+
+      fireEvent.click(screen.getByTitle(/code/i));
+
+      expect(
+        (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
+      ).toEqual(FONT_FAMILY.Cascadia);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
+
+      fireEvent.click(screen.getByTitle(/Very large/i));
+      expect(
+        (h.elements[1] as ExcalidrawTextElementWithContainer).fontSize,
+      ).toEqual(36);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
+    });
   });
 });

src/element/textWysiwyg.tsx

@@ -6,20 +6,30 @@ import {
   isTestEnv,
 } from "../utils";
 import Scene from "../scene/Scene";
-import { isBoundToContainer, isTextElement } from "./typeChecks";
+import {
-import { CLASSES, BOUND_TEXT_PADDING, VERTICAL_ALIGN } from "../constants";
+  isArrowElement,
+  isBoundToContainer,
+  isTextElement,
+} from "./typeChecks";
+import { CLASSES, VERTICAL_ALIGN } from "../constants";
 import {
   ExcalidrawElement,
-  ExcalidrawTextElement,
   ExcalidrawLinearElement,
+  ExcalidrawTextElementWithContainer,
+  ExcalidrawTextElement,
+  ExcalidrawTextContainer,
 } from "./types";
 import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
   getApproxLineHeight,
   getBoundTextElementId,
+  getBoundTextElementOffset,
   getContainerDims,
   getContainerElement,
+  getTextElementAngle,
+  getTextWidth,
+  normalizeText,
   wrapText,
 } from "./textElement";
 import {
@@ -28,17 +38,9 @@ import {
 } from "../actions/actionProperties";
 import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
-import { getMaxContainerWidth } from "./newElement";
+import { getMaxContainerHeight, getMaxContainerWidth } from "./newElement";
-
+import { LinearElementEditor } from "./linearElementEditor";
-const normalizeText = (text: string) => {
+import { parseClipboard } from "../clipboard";
-  return (
-    text
-      // replace tabs with spaces so they render and measure correctly
-      .replace(/\t/g, "        ")
-      // normalize newlines
-      .replace(/\r?\n|\r/g, "\n")
-  );
-};
 
 const getTransform = (
   width: number,
@@ -61,6 +63,38 @@ const getTransform = (
   return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
+const originalContainerCache: {
+  [id: ExcalidrawTextContainer["id"]]:
+    | {
+        height: ExcalidrawTextContainer["height"];
+      }
+    | undefined;
+} = {};
+
+export const updateOriginalContainerCache = (
+  id: ExcalidrawTextContainer["id"],
+  height: ExcalidrawTextContainer["height"],
+) => {
+  const data =
+    originalContainerCache[id] || (originalContainerCache[id] = { height });
+  data.height = height;
+  return data;
+};
+
+export const resetOriginalContainerCache = (
+  id: ExcalidrawTextContainer["id"],
+) => {
+  if (originalContainerCache[id]) {
+    delete originalContainerCache[id];
+  }
+};
+
+export const getOriginalContainerHeightFromCache = (
+  id: ExcalidrawTextContainer["id"],
+) => {
+  return originalContainerCache[id]?.height ?? null;
+};
+
 export const textWysiwyg = ({
   id,
   onChange,
@@ -88,6 +122,9 @@ export const textWysiwyg = ({
     updatedTextElement: ExcalidrawTextElement,
     editable: HTMLTextAreaElement,
   ) => {
+    if (!editable.style.fontFamily || !editable.style.fontSize) {
+      return false;
+    }
     const currentFont = editable.style.fontFamily.replace(/"/g, "");
     if (
       getFontFamilyString({ fontFamily: updatedTextElement.fontFamily }) !==
@@ -100,7 +137,6 @@ export const textWysiwyg = ({
     }
     return false;
   };
-  let originalContainerHeight: number;
 
   const updateWysiwygStyle = () => {
     const appState = app.state;
@@ -115,7 +151,7 @@ export const textWysiwyg = ({
       getFontString(updatedTextElement),
     );
     if (updatedTextElement && isTextElement(updatedTextElement)) {
-      const coordX = updatedTextElement.x;
+      let coordX = updatedTextElement.x;
       let coordY = updatedTextElement.y;
       const container = getContainerElement(updatedTextElement);
       let maxWidth = updatedTextElement.width;
@@ -124,8 +160,17 @@ export const textWysiwyg = ({
       const width = updatedTextElement.width;
       // Set to element height by default since that's
       // what is going to be used for unbounded text
-      let height = updatedTextElement.height;
+      let textElementHeight = updatedTextElement.height;
       if (container && updatedTextElement.containerId) {
+        if (isArrowElement(container)) {
+          const boundTextCoords =
+            LinearElementEditor.getBoundTextElementPosition(
+              container,
+              updatedTextElement as ExcalidrawTextElementWithContainer,
+            );
+          coordX = boundTextCoords.x;
+          coordY = boundTextCoords.y;
+        }
         const propertiesUpdated = textPropertiesUpdated(
           updatedTextElement,
           editable,
@@ -134,31 +179,52 @@ export const textWysiwyg = ({
         // using editor.style.height to get the accurate height of text editor
         const editorHeight = Number(editable.style.height.slice(0, -2));
         if (editorHeight > 0) {
-          height = editorHeight;
+          textElementHeight = editorHeight;
         }
         if (propertiesUpdated) {
-          originalContainerHeight = containerDims.height;
-
           // update height of the editor after properties updated
-          height = updatedTextElement.height;
+          textElementHeight = updatedTextElement.height;
         }
-        if (!originalContainerHeight) {
+
-          originalContainerHeight = containerDims.height;
+        let originalContainerData;
+        if (propertiesUpdated) {
+          originalContainerData = updateOriginalContainerCache(
+            container.id,
+            containerDims.height,
+          );
+        } else {
+          originalContainerData = originalContainerCache[container.id];
+          if (!originalContainerData) {
+            originalContainerData = updateOriginalContainerCache(
+              container.id,
+              containerDims.height,
+            );
+          }
         }
-        maxWidth = containerDims.width - BOUND_TEXT_PADDING * 2;
+
-        maxHeight = containerDims.height - BOUND_TEXT_PADDING * 2;
+        maxWidth = getMaxContainerWidth(container);
+        maxHeight = getMaxContainerHeight(container);
+
         // autogrow container height if text exceeds
-        if (height > maxHeight) {
+
-          const diff = Math.min(height - maxHeight, approxLineHeight);
+        if (!isArrowElement(container) && textElementHeight > maxHeight) {
+          const diff = Math.min(
+            textElementHeight - maxHeight,
+            approxLineHeight,
+          );
           mutateElement(container, { height: containerDims.height + diff });
           return;
         } else if (
           // autoshrink container height until original container height
           // is reached when text is removed
-          containerDims.height > originalContainerHeight &&
+          !isArrowElement(container) &&
-          height < maxHeight
+          containerDims.height > originalContainerData.height &&
+          textElementHeight < maxHeight
         ) {
-          const diff = Math.min(maxHeight - height, approxLineHeight);
+          const diff = Math.min(
+            maxHeight - textElementHeight,
+            approxLineHeight,
+          );
           mutateElement(container, { height: containerDims.height - diff });
         }
         // Start pushing text upward until a diff of 30px (padding)
@@ -166,11 +232,17 @@ export const textWysiwyg = ({
         else {
           // vertically center align the text
           if (verticalAlign === VERTICAL_ALIGN.MIDDLE) {
-            coordY = container.y + containerDims.height / 2 - height / 2;
+            if (!isArrowElement(container)) {
+              coordY =
+                container.y + containerDims.height / 2 - textElementHeight / 2;
+            }
           }
           if (verticalAlign === VERTICAL_ALIGN.BOTTOM) {
             coordY =
-              container.y + containerDims.height - height - BOUND_TEXT_PADDING;
+              container.y +
+              containerDims.height -
+              textElementHeight -
+              getBoundTextElementOffset(updatedTextElement);
           }
         }
       }
@@ -204,19 +276,19 @@ export const textWysiwyg = ({
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
-      const angle = container ? container.angle : updatedTextElement.angle;
+
       Object.assign(editable.style, {
         font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: `${lineHeight}px`,
         width: `${Math.min(width, maxWidth)}px`,
-        height: `${height}px`,
+        height: `${textElementHeight}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
         transform: getTransform(
           width,
-          height,
+          textElementHeight,
-          angle,
+          getTextElementAngle(updatedTextElement),
           appState,
           maxWidth,
           editorMaxHeight,
@@ -271,10 +343,37 @@ export const textWysiwyg = ({
     // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
     whiteSpace,
     overflowWrap: "break-word",
+    boxSizing: "content-box",
   });
   updateWysiwygStyle();
 
   if (onChange) {
+    editable.onpaste = async (event) => {
+      const clipboardData = await parseClipboard(event, true);
+      if (!clipboardData.text) {
+        return;
+      }
+      const data = normalizeText(clipboardData.text);
+      if (!data) {
+        return;
+      }
+      const container = getContainerElement(element);
+
+      const font = getFontString({
+        fontSize: app.state.currentItemFontSize,
+        fontFamily: app.state.currentItemFontFamily,
+      });
+      if (container) {
+        const wrappedText = wrapText(
+          `${editable.value}${data}`,
+          font,
+          getMaxContainerWidth(container),
+        );
+        const width = getTextWidth(wrappedText, font);
+        editable.style.width = `${width}px`;
+      }
+    };
+
     editable.oninput = () => {
       const updatedTextElement = Scene.getScene(element)?.getElement(
         id,
@@ -485,7 +584,7 @@ export const textWysiwyg = ({
 
     if (container) {
       text = updateElement.text;
-      if (editable.value) {
+      if (editable.value.trim()) {
         const boundTextElementId = getBoundTextElementId(container);
         if (!boundTextElementId || boundTextElementId !== element.id) {
           mutateElement(container, {

src/element/transformHandles.ts

@@ -4,7 +4,7 @@ import {
   PointerType,
 } from "./types";
 
-import { getElementAbsoluteCoords, Bounds } from "./bounds";
+import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { AppState, Zoom } from "../types";
 import { isTextElement } from ".";
@@ -81,7 +81,7 @@ const generateTransformHandle = (
 };
 
 export const getTransformHandlesFromCoords = (
-  [x1, y1, x2, y2]: Bounds,
+  [x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number],
   angle: number,
   zoom: Zoom,
   pointerType: PointerType,
@@ -97,8 +97,6 @@ export const getTransformHandlesFromCoords = (
 
   const width = x2 - x1;
   const height = y2 - y1;
-  const cx = (x1 + x2) / 2;
-  const cy = (y1 + y2) / 2;
   const dashedLineMargin = margin / zoom.value;
   const centeringOffset = (size - DEFAULT_SPACING * 2) / (2 * zoom.value);
 
@@ -256,7 +254,7 @@ export const getTransformHandles = (
     ? DEFAULT_SPACING + 8
     : DEFAULT_SPACING;
   return getTransformHandlesFromCoords(
-    getElementAbsoluteCoords(element),
+    getElementAbsoluteCoords(element, true),
     element.angle,
     zoom,
     pointerType,

src/element/typeChecks.ts

@@ -1,3 +1,4 @@
+import { ROUNDNESS } from "../constants";
 import { AppState } from "../types";
 import {
   ExcalidrawElement,
@@ -10,6 +11,7 @@ import {
   ExcalidrawImageElement,
   ExcalidrawTextElementWithContainer,
   ExcalidrawTextContainer,
+  RoundnessType,
 } from "./types";
 
 export const isGenericElement = (
@@ -60,6 +62,12 @@ export const isLinearElement = (
   return element != null && isLinearElementType(element.type);
 };
 
+export const isArrowElement = (
+  element?: ExcalidrawElement | null,
+): element is ExcalidrawLinearElement => {
+  return element != null && element.type === "arrow";
+};
+
 export const isLinearElementType = (
   elementType: AppState["activeTool"]["type"],
 ): boolean => {
@@ -110,7 +118,8 @@ export const isTextBindableContainer = (
     (element.type === "rectangle" ||
       element.type === "diamond" ||
       element.type === "ellipse" ||
-      element.type === "image")
+      element.type === "image" ||
+      isArrowElement(element))
   );
 };
 
@@ -139,6 +148,59 @@ export const isBoundToContainer = (
   element: ExcalidrawElement | null,
 ): element is ExcalidrawTextElementWithContainer => {
   return (
-    element !== null && isTextElement(element) && element.containerId !== null
+    element !== null &&
+    "containerId" in element &&
+    element.containerId !== null &&
+    isTextElement(element)
   );
 };
+
+export const isUsingAdaptiveRadius = (type: string) => type === "rectangle";
+
+export const isUsingProportionalRadius = (type: string) =>
+  type === "line" || type === "arrow" || type === "diamond";
+
+export const canApplyRoundnessTypeToElement = (
+  roundnessType: RoundnessType,
+  element: ExcalidrawElement,
+) => {
+  if (
+    (roundnessType === ROUNDNESS.ADAPTIVE_RADIUS ||
+      // if legacy roundness, it can be applied to elements that currently
+      // use adaptive radius
+      roundnessType === ROUNDNESS.LEGACY) &&
+    isUsingAdaptiveRadius(element.type)
+  ) {
+    return true;
+  }
+  if (
+    roundnessType === ROUNDNESS.PROPORTIONAL_RADIUS &&
+    isUsingProportionalRadius(element.type)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+export const getDefaultRoundnessTypeForElement = (
+  element: ExcalidrawElement,
+) => {
+  if (
+    element.type === "arrow" ||
+    element.type === "line" ||
+    element.type === "diamond"
+  ) {
+    return {
+      type: ROUNDNESS.PROPORTIONAL_RADIUS,
+    };
+  }
+
+  if (element.type === "rectangle") {
+    return {
+      type: ROUNDNESS.ADAPTIVE_RADIUS,
+    };
+  }
+
+  return null;
+};

src/element/types.ts

@@ -1,5 +1,11 @@
 import { Point } from "../types";
-import { FONT_FAMILY, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
+import {
+  FONT_FAMILY,
+  ROUNDNESS,
+  TEXT_ALIGN,
+  THEME,
+  VERTICAL_ALIGN,
+} from "../constants";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid";
@@ -9,7 +15,8 @@ export type Theme = typeof THEME[keyof typeof THEME];
 export type FontString = string & { _brand: "fontString" };
 export type GroupId = string;
 export type PointerType = "mouse" | "pen" | "touch";
-export type StrokeSharpness = "round" | "sharp";
+export type StrokeRoundness = "round" | "sharp";
+export type RoundnessType = ValueOf<typeof ROUNDNESS>;
 export type StrokeStyle = "solid" | "dashed" | "dotted";
 export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
 
@@ -25,7 +32,7 @@ type _ExcalidrawElementBase = Readonly<{
   fillStyle: FillStyle;
   strokeWidth: number;
   strokeStyle: StrokeStyle;
-  strokeSharpness: StrokeSharpness;
+  roundness: null | { type: RoundnessType; value?: number };
   roughness: number;
   opacity: number;
   width: number;
@@ -141,7 +148,8 @@ export type ExcalidrawTextContainer =
   | ExcalidrawRectangleElement
   | ExcalidrawDiamondElement
   | ExcalidrawEllipseElement
-  | ExcalidrawImageElement;
+  | ExcalidrawImageElement
+  | ExcalidrawArrowElement;
 
 export type ExcalidrawTextElementWithContainer = {
   containerId: ExcalidrawTextContainer["id"];
@@ -166,6 +174,11 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
     endArrowhead: Arrowhead | null;
   }>;
 
+export type ExcalidrawArrowElement = ExcalidrawLinearElement &
+  Readonly<{
+    type: "arrow";
+  }>;
+
 export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
   Readonly<{
     type: "freedraw";

src/excalidraw-app/collab/Collab.tsx

@@ -242,6 +242,12 @@ class Collab extends PureComponent<Props, CollabState> {
         );
       }
     } catch (error: any) {
+      this.setState({
+        // firestore doesn't return a specific error code when size exceeded
+        errorMessage: /is longer than.*?bytes/.test(error.message)
+          ? t("errors.collabSaveFailed_sizeExceeded")
+          : t("errors.collabSaveFailed"),
+      });
       console.error(error);
     }
   };
@@ -310,16 +316,27 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
-  private fetchImageFilesFromFirebase = async (scene: {
+  private fetchImageFilesFromFirebase = async (opts: {
     elements: readonly ExcalidrawElement[];
+    /**
+     * Indicates whether to fetch files that are errored or pending and older
+     * than 10 seconds.
+     *
+     * Use this as a machanism to fetch files which may be ok but for some
+     * reason their status was not updated correctly.
+     */
+    forceFetchFiles?: boolean;
   }) => {
-    const unfetchedImages = scene.elements
+    const unfetchedImages = opts.elements
       .filter((element) => {
         return (
           isInitializedImageElement(element) &&
           !this.fileManager.isFileHandled(element.fileId) &&
           !element.isDeleted &&
-          element.status === "saved"
+          (opts.forceFetchFiles
+            ? element.status !== "pending" ||
+              Date.now() - element.updated > 10000
+            : element.status === "saved")
         );
       })
       .map((element) => (element as InitializedExcalidrawImageElement).fileId);

src/excalidraw-app/components/EncryptedIcon.tsx

@@ -1,8 +1,8 @@
-import { t } from "../i18n";
+import { shield } from "../../components/icons";
-import { shield } from "./icons";
+import { Tooltip } from "../../components/Tooltip";
-import { Tooltip } from "./Tooltip";
+import { t } from "../../i18n";
 
-const EncryptedIcon = () => (
+export const EncryptedIcon = () => (
   <a
     className="encrypted-icon tooltip"
     href="https://blog.excalidraw.com/end-to-end-encryption/"
@@ -15,5 +15,3 @@ const EncryptedIcon = () => (
     </Tooltip>
   </a>
 );
-
-export default EncryptedIcon;

src/excalidraw-app/components/ExcalidrawPlusAppLink.tsx

@@ -0,0 +1,17 @@
+import { isExcalidrawPlusSignedUser } from "../../constants";
+
+export const ExcalidrawPlusAppLink = () => {
+  if (!isExcalidrawPlusSignedUser) {
+    return null;
+  }
+  return (
+    <a
+      href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`}
+      target="_blank"
+      rel="noreferrer"
+      className="plus-button"
+    >
+      Go to Excalidraw+
+    </a>
+  );
+};

src/excalidraw-app/data/FileManager.ts

@@ -195,6 +195,7 @@ export const encodeFilesForUpload = async ({
         id,
         mimeType: fileData.mimeType,
         created: Date.now(),
+        lastRetrieved: Date.now(),
       },
     });
 

src/excalidraw-app/data/LocalData.ts

@@ -10,7 +10,7 @@
  *   (localStorage, indexedDB).
  */
 
-import { createStore, keys, del, getMany, set } from "idb-keyval";
+import { createStore, entries, del, getMany, set, setMany } from "idb-keyval";
 import { clearAppStateForLocalStorage } from "../../appState";
 import { clearElementsForLocalStorage } from "../../element";
 import { ExcalidrawElement, FileId } from "../../element/types";
@@ -25,12 +25,21 @@ const filesStore = createStore("files-db", "files-store");
 
 class LocalFileManager extends FileManager {
   clearObsoleteFiles = async (opts: { currentFileIds: FileId[] }) => {
-    const allIds = await keys(filesStore);
+    await entries(filesStore).then((entries) => {
-    for (const id of allIds) {
+      for (const [id, imageData] of entries as [FileId, BinaryFileData][]) {
-      if (!opts.currentFileIds.includes(id as FileId)) {
+        // if image is unused (not on canvas) & is older than 1 day, delete it
-        del(id, filesStore);
+        // from storage. We check `lastRetrieved` we care about the last time
+        // the image was used (loaded on canvas), not when it was initially
+        // created.
+        if (
+          (!imageData.lastRetrieved ||
+            Date.now() - imageData.lastRetrieved > 24 * 3600 * 1000) &&
+          !opts.currentFileIds.includes(id as FileId)
+        ) {
+          del(id, filesStore);
+        }
       }
-    }
+    });
   };
 }
 
@@ -111,18 +120,33 @@ export class LocalData {
   static fileStorage = new LocalFileManager({
     getFiles(ids) {
       return getMany(ids, filesStore).then(
-        (filesData: (BinaryFileData | undefined)[]) => {
+        async (filesData: (BinaryFileData | undefined)[]) => {
           const loadedFiles: BinaryFileData[] = [];
           const erroredFiles = new Map<FileId, true>();
+
+          const filesToSave: [FileId, BinaryFileData][] = [];
+
           filesData.forEach((data, index) => {
             const id = ids[index];
             if (data) {
-              loadedFiles.push(data);
+              const _data: BinaryFileData = {
+                ...data,
+                lastRetrieved: Date.now(),
+              };
+              filesToSave.push([id, _data]);
+              loadedFiles.push(_data);
             } else {
               erroredFiles.set(id, true);
             }
           });
 
+          try {
+            // save loaded files back to storage with updated `lastRetrieved`
+            setMany(filesToSave, filesStore);
+          } catch (error) {
+            console.warn(error);
+          }
+
           return { loadedFiles, erroredFiles };
         },
       );

src/excalidraw-app/data/firebase.ts

@@ -330,6 +330,7 @@ export const loadFilesFromFirebase = async (
             id,
             dataURL,
             created: metadata?.created || Date.now(),
+            lastRetrieved: metadata?.created || Date.now(),
           });
         } else {
           erroredFiles.set(id, true);

src/excalidraw-app/index.scss

@@ -4,9 +4,8 @@
   &.theme--dark {
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
-  .layer-ui__wrapper__footer-center {
+  .layer-ui__wrapper .layer-ui__wrapper__footer-center {
-    display: flex;
+    justify-content: flex-end;
-    justify-content: space-between;
     margin-top: auto;
     margin-bottom: auto;
     margin-inline-start: auto;

src/excalidraw-app/index.tsx

@@ -7,7 +7,6 @@ import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import {
   APP_NAME,
-  COOKIES,
   EVENT,
   THEME,
   TITLE_TIMEOUT,
@@ -22,7 +21,7 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { Excalidraw, defaultLang } from "../packages/excalidraw/index";
+import { Excalidraw, defaultLang, Footer } from "../packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -50,7 +49,6 @@ import Collab, {
   collabDialogShownAtom,
   isCollaboratingAtom,
 } from "./collab/Collab";
-import { LanguageList } from "./components/LanguageList";
 import {
   exportToBackend,
   getCollaborationLinkData,
@@ -79,15 +77,12 @@ import { atom, Provider, useAtom } from "jotai";
 import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
-import EncryptedIcon from "../components/EncryptedIcon";
+import { EncryptedIcon } from "./components/EncryptedIcon";
+import { ExcalidrawPlusAppLink } from "./components/ExcalidrawPlusAppLink";
 
 polyfill();
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 
-const isExcalidrawPlusSignedUser = document.cookie.includes(
-  COOKIES.AUTH_STATE_COOKIE,
-);
-
 const languageDetector = new LanguageDetector();
 languageDetector.init({
   languageUtils: {},
@@ -285,6 +280,7 @@ const ExcalidrawWrapper = () => {
           collabAPI
             .fetchImageFilesFromFirebase({
               elements: data.scene.elements,
+              forceFetchFiles: true,
             })
             .then(({ loadedFiles, erroredFiles }) => {
               excalidrawAPI.addFiles(loadedFiles);
@@ -576,41 +572,6 @@ const ExcalidrawWrapper = () => {
     }
   };
 
-  const renderFooter = (isMobile: boolean) => {
-    const renderLanguageList = () => <LanguageList />;
-    if (isMobile) {
-      return (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-          }}
-        >
-          <div style={{ marginBottom: ".5rem", fontSize: "0.75rem" }}>
-            {t("labels.language")}
-          </div>
-          <div style={{ padding: "0 0.625rem" }}>{renderLanguageList()}</div>
-        </div>
-      );
-    }
-
-    return (
-      <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
-        {isExcalidrawPlusSignedUser && (
-          <a
-            href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`}
-            target="_blank"
-            rel="noreferrer"
-            className="plus-button"
-          >
-            Go to Excalidraw+
-          </a>
-        )}
-        <EncryptedIcon />
-      </div>
-    );
-  };
-
   const renderCustomStats = (
     elements: readonly NonDeletedExcalidrawElement[],
     appState: AppState,
@@ -671,7 +632,6 @@ const ExcalidrawWrapper = () => {
             },
           },
         }}
-        renderFooter={renderFooter}
         langCode={langCode}
         renderCustomStats={renderCustomStats}
         detectScroll={false}
@@ -679,7 +639,14 @@ const ExcalidrawWrapper = () => {
         onLibraryChange={onLibraryChange}
         autoFocus={true}
         theme={theme}
-      />
+      >
+        <Footer>
+          <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
+            <ExcalidrawPlusAppLink />
+            <EncryptedIcon />
+          </div>
+        </Footer>
+      </Excalidraw>
       {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (
         <ErrorDialog

src/excalidraw-app/pwa.ts

@@ -1,4 +1,4 @@
-import { register as registerServiceWorker } from "../serviceWorker";
+import { register as registerServiceWorker } from "../serviceWorkerRegistration";
 import { EVENT } from "../constants";
 
 // On Apple mobile devices add the proprietary app icon and splashscreen markup.

src/global.d.ts

@@ -2,6 +2,8 @@
 interface Document {
   fonts?: {
     ready?: Promise<void>;
+    check?: (font: string, text?: string) => boolean;
+    load?: (font: string, text?: string) => Promise<FontFace[]>;
     addEventListener?(
       type: "loading" | "loadingdone" | "loadingerror",
       listener: (this: Document, ev: Event) => any,

src/i18n.ts

@@ -24,7 +24,7 @@ const allLanguages: Language[] = [
   { code: "fa-IR", label: "فارسی", rtl: true },
   { code: "fi-FI", label: "Suomi" },
   { code: "fr-FR", label: "Français" },
-  { code: "gl-ES	", label: "Galego" },
+  { code: "gl-ES", label: "Galego" },
   { code: "he-IL", label: "עברית", rtl: true },
   { code: "hi-IN", label: "हिन्दी" },
   { code: "hu-HU", label: "Magyar" },
@@ -90,9 +90,14 @@ export const setLanguage = async (lang: Language) => {
   if (lang.code.startsWith(TEST_LANG_CODE)) {
     currentLangData = {};
   } else {
-    currentLangData = await import(
+    try {
-      /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
+      currentLangData = await import(
-    );
+        /* webpackChunkName: "locales/[request]" */ `./locales/${currentLang.code}.json`
+      );
+    } catch (error: any) {
+      console.error(`Failed to load language ${lang.code}:`, error.message);
+      currentLangData = fallbackLangData;
+    }
   }
 };
 

src/keys.ts

@@ -29,6 +29,8 @@ export const KEYS = {
   ARROW_LEFT: "ArrowLeft",
   ARROW_RIGHT: "ArrowRight",
   ARROW_UP: "ArrowUp",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
   BACKSPACE: "Backspace",
   ALT: "Alt",
   CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",
@@ -63,6 +65,17 @@ export const KEYS = {
   Y: "y",
   Z: "z",
   K: "k",
+
+  0: "0",
+  1: "1",
+  2: "2",
+  3: "3",
+  4: "4",
+  5: "5",
+  6: "6",
+  7: "7",
+  8: "8",
+  9: "9",
 } as const;
 
 export type Key = keyof typeof KEYS;

src/locales/ar-SA.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "لصق",
+    "pasteAsPlaintext": "",
     "pasteCharts": "لصق الرسوم البيانية",
     "selectAll": "تحديد الكل",
     "multiSelect": "إضافة عنصر للتحديد",
@@ -71,7 +72,7 @@
     "layers": "الطبقات",
     "actions": "الإجراءات",
     "language": "اللغة",
-    "liveCollaboration": "بدء المشاركة الحية",
+    "liveCollaboration": "",
     "duplicateSelection": "تكرار",
     "untitled": "غير معنون",
     "name": "الاسم",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "إعادة تعيين اللوحة",
     "exportJSON": "صدر الملف",
-    "exportImage": "إحفظ كصورة",
+    "exportImage": "",
-    "export": "تصدير",
+    "export": "",
     "exportToPng": "تصدير بصيغة PNG",
     "exportToSvg": "تصدير بصيغة SVG",
     "copyToClipboard": "نسخ إلى الحافظة",
@@ -144,7 +145,7 @@
     "scale": "مقاس",
     "save": "احفظ للملف الحالي",
     "saveAs": "حفظ كـ",
-    "load": "تحميل",
+    "load": "",
     "getShareableLink": "احصل على رابط المشاركة",
     "close": "غلق",
     "selectLanguage": "اختر اللغة",
@@ -235,7 +236,7 @@
     "resize": "يمكنك تقييد النسب بالضغط على SHIFT أثناء تغيير الحجم،\nاضغط على ALT لتغيير الحجم من المركز",
     "resizeImage": "يمكنك تغيير الحجم بحرية بالضغط بأستمرار على SHIFT،\nاضغط بأستمرار على ALT أيضا لتغيير الحجم من المركز",
     "rotate": "يمكنك تقييد الزوايا من خلال الضغط على SHIFT أثناء الدوران",
-    "lineEditor_info": "انقر نقراً مزدوجاً أو اضغط Enter لتعديل النقاط",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -310,7 +311,9 @@
     "view": "عرض",
     "zoomToFit": "تكبير للملائمة",
     "zoomToSelection": "تكبير للعنصر المحدد",
-    "toggleElementLock": ""
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "مسح اللوحة"
@@ -391,7 +394,8 @@
     "fileSaved": "تم حفظ الملف.",
     "fileSavedToFilename": "حفظ باسم {filename}",
     "canvas": "لوحة الرسم",
-    "selection": "العنصر المحدد"
+    "selection": "العنصر المحدد",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "أبيض",
@@ -439,5 +443,12 @@
     "5c940d": "ليموني 9",
     "e67700": "أصفر 9",
     "d9480f": "برتقالي 9"
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/bg-BG.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Постави",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Постави графики",
     "selectAll": "Маркирай всичко",
     "multiSelect": "Добави елемент към селекция",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Нулиране на платно",
     "exportJSON": "",
-    "exportImage": "Запиши като изображение",
+    "exportImage": "",
-    "export": "Експортиране",
+    "export": "",
     "exportToPng": "Изнасяне в PNG",
     "exportToSvg": "Изнасяне в SVG",
     "copyToClipboard": "Копиране в клипборда",
@@ -144,7 +145,7 @@
     "scale": "Мащаб",
     "save": "",
     "saveAs": "Запиши като",
-    "load": "Зареждане",
+    "load": "",
     "getShareableLink": "Получаване на връзка за споделяне",
     "close": "Затвори",
     "selectLanguage": "Избор на език",
@@ -235,7 +236,7 @@
     "resize": "Може да ограничите при преоразмеряване като задържите SHIFT,\nзадръжте ALT за преоразмерите през центъра",
     "resizeImage": "",
     "rotate": "Можете да ограничите ъглите, като държите SHIFT, докато се въртите",
-    "lineEditor_info": "Кликнете два пъти или натиснете Enter за да промените точките",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "Натиснете Delete за да изтриете точка(и), CtrlOrCmd+D за дуплициране, или извлачете за да преместите",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -310,7 +311,9 @@
     "view": "Преглед",
     "zoomToFit": "Приближи докато се виждат всички елементи",
     "zoomToSelection": "Приближи селекцията",
-    "toggleElementLock": ""
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": ""
@@ -391,7 +394,8 @@
     "fileSaved": "",
     "fileSavedToFilename": "",
     "canvas": "",
-    "selection": ""
+    "selection": "",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "",
@@ -439,5 +443,12 @@
     "5c940d": "",
     "e67700": "",
     "d9480f": ""
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/bn-BD.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "পেস্ট করুন",
+    "pasteAsPlaintext": "",
     "pasteCharts": "চার্ট পেস্ট করুন",
     "selectAll": "সবটা সিলেক্ট করুন",
     "multiSelect": "একাধিক সিলেক্ট করুন",
@@ -71,7 +72,7 @@
     "layers": "মাত্রা",
     "actions": "ক্রিয়া",
     "language": "ভাষা",
-    "liveCollaboration": "যুগ্ম কার্য",
+    "liveCollaboration": "",
     "duplicateSelection": "সদৃশ সিলেক্ট",
     "untitled": "অনামী",
     "name": "নাম",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "ক্যানভাস সাফ করুন",
     "exportJSON": "জেসন নিবদ্ধ করুন",
-    "exportImage": "চিত্র নিবদ্ধ করুন",
+    "exportImage": "",
-    "export": "নিবদ্ধ",
+    "export": "",
     "exportToPng": "পীএনজী ছবির মতন নিবদ্ধ করুন",
     "exportToSvg": "এসভীজী ছবির মতন নিবদ্ধ করুন",
     "copyToClipboard": "ক্লিপবোর্ডে কপি করুন",
@@ -144,7 +145,7 @@
     "scale": "মাপ",
     "save": "জমা করুন",
     "saveAs": "অন্যভাবে জমা করুন",
-    "load": "লোড করুন",
+    "load": "",
     "getShareableLink": "ভাগযোগ্য লিঙ্ক পান",
     "close": "বন্ধ করুন",
     "selectLanguage": "ভাষা চিহ্নিত করুন",
@@ -214,7 +215,7 @@
     "text": "লেখা",
     "library": "সংগ্রহ",
     "lock": "আঁকার পরে নির্বাচিত টুল সক্রিয় রাখুন",
-    "penMode": "পিঞ্চ-জুম প্রতিরোধ করুন এবং শুধুমাত্র কলম থেকে ইনপুট গ্রহণ করুন",
+    "penMode": "",
     "link": "একটি নির্বাচিত আকৃতির জন্য লিঙ্ক যোগ বা আপডেট করুন",
     "eraser": "ঝাড়ন"
   },
@@ -235,7 +236,7 @@
     "resize": "আপনি আকার পরিবর্তন করার সময় শিফ্ট ধরে রেখে অনুপাতকে সীমাবদ্ধ করতে পারেন,\nকেন্দ্র থেকে আকার পরিবর্তন করতে অল্ট ধরে রাখুন",
     "resizeImage": "আপনি শিফ্ট ধরে রেখে অবাধে আকার পরিবর্তন করতে পারেন, কেন্দ্র থেকে আকার পরিবর্তন করতে অল্ট ধরুন",
     "rotate": "আপনি ঘোরানোর সময় শিফ্ট ধরে রেখে কোণগুলিকে সীমাবদ্ধ করতে পারেন",
-    "lineEditor_info": "পয়েন্ট সম্পাদনা করতে ডাবল-ক্লিক করুন বা এন্টার টিপুন",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "বিন্দু(গুলি) মুছতে ডিলিট টিপুন, কন্ট্রোল/কম্যান্ড যোগে ডি টিপুন নকল করতে অথবা সরানোর জন্য টানুন",
     "lineEditor_nothingSelected": "সম্পাদনা করার জন্য একটি বিন্দু নির্বাচন করুন (একাধিক নির্বাচন করতে শিফ্ট ধরে রাখুন),\nঅথবা অল্ট ধরে রাখুন এবং নতুন বিন্দু যোগ করতে ক্লিক করুন",
     "placeImage": "ছবিটি স্থাপন করতে ক্লিক করুন, অথবা নিজে আকার সেট করতে ক্লিক করুন এবং টেনে আনুন",
@@ -310,7 +311,9 @@
     "view": "",
     "zoomToFit": "",
     "zoomToSelection": "",
-    "toggleElementLock": ""
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": ""
@@ -391,7 +394,8 @@
     "fileSaved": "",
     "fileSavedToFilename": "",
     "canvas": "",
-    "selection": "বাছাই"
+    "selection": "বাছাই",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "সাদা",
@@ -439,5 +443,12 @@
     "5c940d": "",
     "e67700": "",
     "d9480f": ""
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/ca-ES.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Enganxa",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Enganxa els diagrames",
     "selectAll": "Selecciona-ho tot",
     "multiSelect": "Afegeix un element a la selecció",
@@ -71,7 +72,7 @@
     "layers": "Capes",
     "actions": "Accions",
     "language": "Llengua",
-    "liveCollaboration": "Col·laboració en directe",
+    "liveCollaboration": "",
     "duplicateSelection": "Duplica",
     "untitled": "Sense títol",
     "name": "Nom",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Neteja el llenç",
     "exportJSON": "Exporta a un fitxer",
-    "exportImage": "Desa com a imatge",
+    "exportImage": "",
-    "export": "Exporta",
+    "export": "",
     "exportToPng": "Exporta a PNG",
     "exportToSvg": "Exporta a SNG",
     "copyToClipboard": "Copia al porta-retalls",
@@ -144,7 +145,7 @@
     "scale": "Escala",
     "save": "Desa al fitxer actual",
     "saveAs": "Anomena i desa",
-    "load": "Carrega",
+    "load": "",
     "getShareableLink": "Obté l'enllaç per a compartir",
     "close": "Tanca",
     "selectLanguage": "Trieu la llengua",
@@ -214,7 +215,7 @@
     "text": "Text",
     "library": "Biblioteca",
     "lock": "Mantenir activa l'eina seleccionada desprès de dibuixar",
-    "penMode": "Evita el zoom i accepta solament el dibuix lliure amb bolígraf",
+    "penMode": "",
     "link": "Afegeix / actualitza l'enllaç per a la forma seleccionada",
     "eraser": "Esborrador"
   },
@@ -235,7 +236,7 @@
     "resize": "Per restringir les proporcions mentres es canvia la mida, mantenir premut el majúscul (SHIFT); per canviar la mida des del centre, mantenir premut ALT",
     "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_info": "",
     "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",
@@ -310,7 +311,9 @@
     "view": "Visualització",
     "zoomToFit": "Zoom per veure tots els elements",
     "zoomToSelection": "Zoom per veure la selecció",
-    "toggleElementLock": "Blocar/desblocar la selecció"
+    "toggleElementLock": "Blocar/desblocar la selecció",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Neteja el llenç"
@@ -391,7 +394,8 @@
     "fileSaved": "S'ha desat el fitxer.",
     "fileSavedToFilename": "S'ha desat a {filename}",
     "canvas": "el llenç",
-    "selection": "la selecció"
+    "selection": "la selecció",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "Blanc",
@@ -439,5 +443,12 @@
     "5c940d": "Llima 9",
     "e67700": "Groc 9",
     "d9480f": "Taronja 9"
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/cs-CZ.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Vložit",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Vložit grafy",
     "selectAll": "Vybrat vše",
     "multiSelect": "Přidat prvek do výběru",
@@ -60,18 +61,18 @@
     "center": "Na střed",
     "right": "Vpravo",
     "extraBold": "Extra tlustý",
-    "architect": "",
+    "architect": "Architekt",
-    "artist": "",
+    "artist": "Umělec",
     "cartoonist": "",
     "fileTitle": "Název souboru",
     "colorPicker": "Výběr barvy",
-    "canvasColors": "",
+    "canvasColors": "Použito na plátně",
     "canvasBackground": "Pozadí plátna",
-    "drawingCanvas": "",
+    "drawingCanvas": "Kreslicí plátno",
     "layers": "Vrstvy",
     "actions": "Akce",
     "language": "Jazyk",
-    "liveCollaboration": "Živá spolupráce",
+    "liveCollaboration": "Živá spolupráce...",
     "duplicateSelection": "Duplikovat",
     "untitled": "Bez názvu",
     "name": "Název",
@@ -98,57 +99,57 @@
     "flipHorizontal": "Převrátit vodorovně",
     "flipVertical": "Převrátit svisle",
     "viewMode": "Náhled",
-    "toggleExportColorScheme": "",
+    "toggleExportColorScheme": "Přepnout exportování barevného schématu",
     "share": "Sdílet",
-    "showStroke": "",
+    "showStroke": "Zobrazit výběr barvy",
-    "showBackground": "",
+    "showBackground": "Zobrazit výběr barev pozadí",
     "toggleTheme": "Přepnout tmavý řežim",
-    "personalLib": "",
+    "personalLib": "Osobní knihovna",
-    "excalidrawLib": "",
+    "excalidrawLib": "Exkalidraw knihovna",
-    "decreaseFontSize": "",
+    "decreaseFontSize": "Zmenšit písmo",
-    "increaseFontSize": "",
+    "increaseFontSize": "Zvětšit písmo",
-    "unbindText": "",
+    "unbindText": "Zrušit vazbu textu",
-    "bindText": "",
+    "bindText": "Vázat text s kontejnerem",
     "link": {
-      "edit": "",
+      "edit": "Upravit odkaz",
-      "create": "",
+      "create": "Vytvořit odkaz",
-      "label": ""
+      "label": "Odkaz"
     },
     "lineEditor": {
-      "edit": "",
+      "edit": "Upravit čáru",
-      "exit": ""
+      "exit": "Ukončit editor řádků"
     },
     "elementLock": {
-      "lock": "",
+      "lock": "Uzamknout",
-      "unlock": "",
+      "unlock": "Odemknout",
-      "lockAll": "",
+      "lockAll": "Uzamknout vše",
-      "unlockAll": ""
+      "unlockAll": "Odemknout vše"
     },
-    "statusPublished": "",
+    "statusPublished": "Zveřejněno",
-    "sidebarLock": ""
+    "sidebarLock": "Ponechat postranní panel otevřený"
   },
   "library": {
-    "noItems": "",
+    "noItems": "Dosud neexistují žádné položky...",
-    "hint_emptyLibrary": "",
+    "hint_emptyLibrary": "Vyberte položku na plátně a přidejte ji sem nebo nainstalujte knihovnu z veřejného úložiště níže.",
-    "hint_emptyPrivateLibrary": ""
+    "hint_emptyPrivateLibrary": "Vyberte položku na plátně a přidejte ji sem."
   },
   "buttons": {
-    "clearReset": "",
+    "clearReset": "Resetovat plátno",
-    "exportJSON": "",
+    "exportJSON": "Exportovat do souboru",
-    "exportImage": "",
+    "exportImage": "Exportovat obrázek...",
-    "export": "Exportovat",
+    "export": "Uložit jako...",
     "exportToPng": "Exportovat do PNG",
     "exportToSvg": "Exportovat do SVG",
     "copyToClipboard": "Kopírovat do schránky",
     "copyPngToClipboard": "Kopírovat PNG do schránky",
     "scale": "Měřítko",
-    "save": "",
+    "save": "Uložit do aktuálního souboru",
     "saveAs": "Uložit jako",
-    "load": "Nahrát",
+    "load": "Otevřít",
     "getShareableLink": "Získat odkaz pro sdílení",
     "close": "Zavřít",
     "selectLanguage": "Zvolit jazyk",
-    "scrollBackToContent": "",
+    "scrollBackToContent": "Přejít zpět na obsah",
     "zoomIn": "Přiblížit",
     "zoomOut": "Oddálit",
     "resetZoom": "Resetovat přiblížení",
@@ -157,7 +158,7 @@
     "edit": "Upravit",
     "undo": "Zpět",
     "redo": "Znovu",
-    "resetLibrary": "",
+    "resetLibrary": "Obnovit knihovnu",
     "createNewRoom": "Vytvořit novou místnost",
     "fullScreen": "Celá obrazovka",
     "darkMode": "Tmavý režim",
@@ -176,17 +177,17 @@
     "couldNotCreateShareableLink": "Nepodařilo se vytvořit sdílitelný odkaz.",
     "couldNotCreateShareableLinkTooBig": "Nepodařilo se vytvořit sdílený odkaz: scéna je příliš velká",
     "couldNotLoadInvalidFile": "Nepodařilo se načíst neplatný soubor",
-    "importBackendFailed": "",
+    "importBackendFailed": "Import z backendu se nezdařil.",
-    "cannotExportEmptyCanvas": "",
+    "cannotExportEmptyCanvas": "Nelze exportovat prázdné plátno.",
-    "couldNotCopyToClipboard": "",
+    "couldNotCopyToClipboard": "Nelze zkopírovat do schránky.",
-    "decryptFailed": "",
+    "decryptFailed": "Nelze dešifrovat data.",
-    "uploadedSecurly": "",
+    "uploadedSecurly": "Nahrávání je zabezpečeno koncovým šifrováním, což znamená, že server Excalidraw ani třetí strany nemohou obsah přečíst.",
-    "loadSceneOverridePrompt": "",
+    "loadSceneOverridePrompt": "Načítání externího výkresu nahradí váš existující obsah. Přejete si pokračovat?",
     "collabStopOverridePrompt": "",
-    "errorAddingToLibrary": "",
+    "errorAddingToLibrary": "Položku nelze přidat do knihovny",
-    "errorRemovingFromLibrary": "",
+    "errorRemovingFromLibrary": "Položku nelze odstranit z knihovny",
-    "confirmAddLibrary": "",
+    "confirmAddLibrary": "Tímto přidáte {{numShapes}} tvarů do tvé knihovny. Jste si jisti?",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "Zdá se, že tento obrázek neobsahuje žádná data o scéně. Zapnuli jste při exportu vkládání scény?",
     "cannotRestoreFromImage": "",
     "invalidSceneUrl": "",
     "resetLibrary": "",
@@ -255,8 +256,8 @@
     "clearCanvasMessage": "",
     "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "",
+    "trackedToSentry_pre": "Chyba identifikátoru ",
-    "trackedToSentry_post": "",
+    "trackedToSentry_post": " byl zaznamenán v našem systému.",
     "openIssueMessage_pre": "",
     "openIssueMessage_button": "",
     "openIssueMessage_post": "",
@@ -310,7 +311,9 @@
     "view": "Zobrazení",
     "zoomToFit": "Přiblížit na zobrazení všech prvků",
     "zoomToSelection": "Přiblížit na výběr",
-    "toggleElementLock": "Zamknout/odemknout výběr"
+    "toggleElementLock": "Zamknout/odemknout výběr",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Vymazat plátno"
@@ -391,7 +394,8 @@
     "fileSaved": "Soubor byl uložen.",
     "fileSavedToFilename": "Uloženo do {filename}",
     "canvas": "plátno",
-    "selection": "výběr"
+    "selection": "výběr",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "Bílá",
@@ -439,5 +443,12 @@
     "5c940d": "Limetková 9",
     "e67700": "Žlutá 9",
     "d9480f": "Oranzova"
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/da-DK.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Indsæt",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Indsæt diagrammer",
     "selectAll": "Marker alle",
     "multiSelect": "Tilføj element til markering",
@@ -69,12 +70,12 @@
     "canvasBackground": "Lærredsbaggrund",
     "drawingCanvas": "Tegnelærred",
     "layers": "Lag",
-    "actions": "",
+    "actions": "Handlinger",
     "language": "Sprog",
-    "liveCollaboration": "Direkte samarbejde",
+    "liveCollaboration": "",
     "duplicateSelection": "",
-    "untitled": "",
+    "untitled": "Unavngivet",
-    "name": "",
+    "name": "Navn",
     "yourName": "Dit navn",
     "madeWithExcalidraw": "Fremstillet med Excalidraw",
     "group": "",
@@ -144,7 +145,7 @@
     "scale": "",
     "save": "",
     "saveAs": "Gem som",
-    "load": "Indlæs",
+    "load": "",
     "getShareableLink": "Lav et delbart link",
     "close": "Luk",
     "selectLanguage": "Vælg sprog",
@@ -310,7 +311,9 @@
     "view": "",
     "zoomToFit": "",
     "zoomToSelection": "",
-    "toggleElementLock": ""
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": ""
@@ -391,7 +394,8 @@
     "fileSaved": "Fil gemt.",
     "fileSavedToFilename": "Gemt som {filename}",
     "canvas": "canvas",
-    "selection": "markering"
+    "selection": "markering",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "",
@@ -439,5 +443,12 @@
     "5c940d": "",
     "e67700": "",
     "d9480f": ""
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/de-DE.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Einfügen",
+    "pasteAsPlaintext": "Als reinen Text einfügen",
     "pasteCharts": "Diagramme einfügen",
     "selectAll": "Alle auswählen",
     "multiSelect": "Element zur Auswahl hinzufügen",
@@ -71,7 +72,7 @@
     "layers": "Ebenen",
     "actions": "Aktionen",
     "language": "Sprache",
-    "liveCollaboration": "Live-Zusammenarbeit",
+    "liveCollaboration": "Live-Zusammenarbeit...",
     "duplicateSelection": "Duplizieren",
     "untitled": "Unbenannt",
     "name": "Name",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",
     "exportJSON": "In Datei exportieren",
-    "exportImage": "Als Bild speichern",
+    "exportImage": "Exportiere Bild...",
-    "export": "Exportieren",
+    "export": "Speichern als...",
     "exportToPng": "Als PNG exportieren",
     "exportToSvg": "Als SVG exportieren",
     "copyToClipboard": "In Zwischenablage kopieren",
@@ -144,7 +145,7 @@
     "scale": "Skalierung",
     "save": "In aktueller Datei speichern",
     "saveAs": "Speichern unter",
-    "load": "Laden",
+    "load": "Öffnen",
     "getShareableLink": "Teilbaren Link erhalten",
     "close": "Schließen",
     "selectLanguage": "Sprache auswählen",
@@ -214,7 +215,7 @@
     "text": "Text",
     "library": "Bibliothek",
     "lock": "Ausgewähltes Werkzeug nach Zeichnen aktiv lassen",
-    "penMode": "Verhindere Pinch-Zoom und akzeptiere Eingabe nur vom Stift",
+    "penMode": "Stift-Modus - Berührung verhindern",
     "link": "Link für ausgewählte Form hinzufügen / aktualisieren",
     "eraser": "Radierer"
   },
@@ -235,7 +236,7 @@
     "resize": "Du kannst die Proportionen einschränken, indem du SHIFT während der Größenänderung gedrückt hältst. Halte ALT gedrückt, um die Größe vom Zentrum aus zu ändern",
     "resizeImage": "Du kannst die Größe frei ändern, indem du SHIFT gedrückt hältst; halte ALT, um die Größe vom Zentrum aus zu ändern",
     "rotate": "Du kannst Winkel einschränken, indem du SHIFT während der Drehung gedrückt hältst",
-    "lineEditor_info": "Doppelklicken oder Eingabetaste drücken, um Punkte zu bearbeiten",
+    "lineEditor_info": "CtrlOrCmd halten und Doppelklick oder CtrlOrCmd + Eingabe drücken, um Punkte zu bearbeiten",
     "lineEditor_pointSelected": "Drücke Löschen, um Punkt(e) zu entfernen, CtrlOrCmd+D zum Duplizieren oder ziehe zum Verschieben",
     "lineEditor_nothingSelected": "Wähle einen zu bearbeitenden Punkt (halte SHIFT gedrückt um mehrere Punkte auszuwählen),\noder halte Alt gedrückt und klicke um neue Punkte hinzuzufügen",
     "placeImage": "Klicken, um das Bild zu platzieren oder klicken und ziehen um seine Größe manuell zu setzen",
@@ -310,7 +311,9 @@
     "view": "Ansicht",
     "zoomToFit": "Zoomen um alle Elemente einzupassen",
     "zoomToSelection": "Auf Auswahl zoomen",
-    "toggleElementLock": "Auswahl sperren/entsperren"
+    "toggleElementLock": "Auswahl sperren/entsperren",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Zeichenfläche löschen"
@@ -391,7 +394,8 @@
     "fileSaved": "Datei gespeichert.",
     "fileSavedToFilename": "Als {filename} gespeichert",
     "canvas": "Zeichenfläche",
-    "selection": "Auswahl"
+    "selection": "Auswahl",
+    "pasteAsSingleElement": "Verwende {{shortcut}} , um als einzelnes Element\neinzufügen oder in einen existierenden Texteditor einzufügen"
   },
   "colors": {
     "ffffff": "Weiß",
@@ -439,5 +443,12 @@
     "5c940d": "Hellgrün 9",
     "e67700": "Gelb 9",
     "d9480f": "Orange 9"
+  },
+  "welcomeScreen": {
+    "data": "Alle Daten werden lokal in Deinem Browser gespeichert.",
+    "switchToPlusApp": "Möchtest du stattdessen zu Excalidraw+ gehen?",
+    "menuHints": "Exportieren, Einstellungen, Sprachen, ...",
+    "toolbarHints": "Wähle ein Werkzeug & beginne zu zeichnen!",
+    "helpHints": "Kurzbefehle & Hilfe"
   }
 }

src/locales/el-GR.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Επικόλληση",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Επικόλληση γραφημάτων",
     "selectAll": "Επιλογή όλων",
     "multiSelect": "Προσθέστε το στοιχείο στην επιλογή",
@@ -71,7 +72,7 @@
     "layers": "Στρώματα",
     "actions": "Ενέργειες",
     "language": "Γλώσσα",
-    "liveCollaboration": "Ζωντανή συνεργασία",
+    "liveCollaboration": "",
     "duplicateSelection": "Δημιουργία αντιγράφου",
     "untitled": "Χωρίς τίτλο",
     "name": "Όνομα",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Επαναφορά του καμβά",
     "exportJSON": "Εξαγωγή σε αρχείο",
-    "exportImage": "Αποθήκευση ως εικόνα",
+    "exportImage": "",
-    "export": "Εξαγωγή",
+    "export": "",
     "exportToPng": "Εξαγωγή σε PNG",
     "exportToSvg": "Εξαγωγή σε SVG",
     "copyToClipboard": "Αντιγραφή στο πρόχειρο",
@@ -144,7 +145,7 @@
     "scale": "Κλίμακα",
     "save": "Αποθήκευση στο τρέχον αρχείο",
     "saveAs": "Αποθήκευση ως",
-    "load": "Άνοιγμα",
+    "load": "",
     "getShareableLink": "Δημόσιος σύνδεσμος",
     "close": "Κλείσιμο",
     "selectLanguage": "Επιλογή γλώσσας",
@@ -235,7 +236,7 @@
     "resize": "Μπορείς να περιορίσεις τις αναλογίες κρατώντας το SHIFT ενώ αλλάζεις μέγεθος,\nκράτησε πατημένο το ALT για αλλαγή μεγέθους από το κέντρο",
     "resizeImage": "Μπορείτε να αλλάξετε το μέγεθος ελεύθερα κρατώντας πατημένο το SHIFT,\nκρατήστε πατημένο το ALT για να αλλάξετε το μέγεθος από το κέντρο",
     "rotate": "Μπορείς να περιορίσεις τις γωνίες κρατώντας πατημένο το πλήκτρο SHIFT κατά την περιστροφή",
-    "lineEditor_info": "Διπλό-κλικ ή πιέστε Enter για να επεξεργαστείτε τα σημεία",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "Πατήστε Διαγραφή για αφαίρεση σημείου(ων),\nCtrlOrCmd+D για αντιγραφή, ή σύρετε για μετακίνηση",
     "lineEditor_nothingSelected": "Επιλέξτε ένα σημείο για να επεξεργαστείτε (κρατήστε πατημένο το SHIFT για να επιλέξετε πολλαπλά),\nή κρατήστε πατημένο το Alt και κάντε κλικ για να προσθέσετε νέα σημεία",
     "placeImage": "Κάντε κλικ για να τοποθετήσετε την εικόνα ή κάντε κλικ και σύρετε για να ορίσετε το μέγεθός της χειροκίνητα",
@@ -310,7 +311,9 @@
     "view": "Προβολή",
     "zoomToFit": "Zoom ώστε να χωρέσουν όλα τα στοιχεία",
     "zoomToSelection": "Ζουμ στην επιλογή",
-    "toggleElementLock": "Κλείδωμα/Ξεκλείδωμα επιλογής"
+    "toggleElementLock": "Κλείδωμα/Ξεκλείδωμα επιλογής",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Καθαρισμός καμβά"
@@ -391,7 +394,8 @@
     "fileSaved": "Το αρχείο αποθηκεύτηκε.",
     "fileSavedToFilename": "Αποθηκεύτηκε στο {filename}",
     "canvas": "καμβάς",
-    "selection": "επιλογή"
+    "selection": "επιλογή",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "Λευκό",
@@ -439,5 +443,12 @@
     "5c940d": "Πρασινοκίτρινο 9",
     "e67700": "Κίτρινο 9",
     "d9480f": "Πορτοκαλί 9"
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Paste",
+    "pasteAsPlaintext": "Paste as plaintext",
     "pasteCharts": "Paste charts",
     "selectAll": "Select all",
     "multiSelect": "Add element to selection",
@@ -201,7 +202,9 @@
     "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
     "invalidSVGString": "Invalid SVG.",
     "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
-    "importLibraryError": "Couldn't load library"
+    "importLibraryError": "Couldn't load library",
+    "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
+    "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work."
   },
   "toolBar": {
     "selection": "Selection",
@@ -236,7 +239,7 @@
     "resize": "You can constrain proportions by holding SHIFT while resizing,\nhold ALT to resize from the center",
     "resizeImage": "You can resize freely by holding SHIFT,\nhold ALT to resize from the center",
     "rotate": "You can constrain angles by holding SHIFT while rotating",
-    "lineEditor_info": "Double-click or press Enter to edit points",
+    "lineEditor_info": "Hold CtrlOrCmd and Double-click or press CtrlOrCmd + Enter to edit points",
     "lineEditor_pointSelected": "Press Delete to remove point(s),\nCtrlOrCmd+D to duplicate, or drag to move",
     "lineEditor_nothingSelected": "Select a point to edit (hold SHIFT to select multiple),\nor hold Alt and click to add new points",
     "placeImage": "Click to place the image, or click and drag to set its size manually",
@@ -311,7 +314,9 @@
     "view": "View",
     "zoomToFit": "Zoom to fit all elements",
     "zoomToSelection": "Zoom to selection",
-    "toggleElementLock": "Lock/unlock selection"
+    "toggleElementLock": "Lock/unlock selection",
+    "movePageUpDown": "Move page up/down",
+    "movePageLeftRight": "Move page left/right"
   },
   "clearCanvasDialog": {
     "title": "Clear canvas"
@@ -392,7 +397,8 @@
     "fileSaved": "File saved.",
     "fileSavedToFilename": "Saved to {filename}",
     "canvas": "canvas",
-    "selection": "selection"
+    "selection": "selection",
+    "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor"
   },
   "colors": {
     "ffffff": "White",

src/locales/es-ES.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Pegar",
+    "pasteAsPlaintext": "Pegar como texto sin formato",
     "pasteCharts": "Pegar gráficos",
     "selectAll": "Seleccionar todo",
     "multiSelect": "Añadir elemento a la selección",
@@ -71,7 +72,7 @@
     "layers": "Capas",
     "actions": "Acciones",
     "language": "Idioma",
-    "liveCollaboration": "Colaboración en directo",
+    "liveCollaboration": "Colaboración en directo...",
     "duplicateSelection": "Duplicar",
     "untitled": "Sin título",
     "name": "Nombre",
@@ -115,8 +116,8 @@
       "label": "Enlace"
     },
     "lineEditor": {
-      "edit": "",
+      "edit": "Editar línea",
-      "exit": ""
+      "exit": "Salir del editor en línea"
     },
     "elementLock": {
       "lock": "Bloquear",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
     "exportJSON": "Exportar a archivo",
-    "exportImage": "Guardar como imagen",
+    "exportImage": "Exportar imagen...",
-    "export": "Exportar",
+    "export": "Guardar en...",
     "exportToPng": "Exportar a PNG",
     "exportToSvg": "Exportar a SVG",
     "copyToClipboard": "Copiar al portapapeles",
@@ -144,7 +145,7 @@
     "scale": "Escalar",
     "save": "Guardar en archivo actual",
     "saveAs": "Guardar como",
-    "load": "Cargar",
+    "load": "Abrir",
     "getShareableLink": "Obtener enlace para compartir",
     "close": "Cerrar",
     "selectLanguage": "Elegir idioma",
@@ -214,7 +215,7 @@
     "text": "Texto",
     "library": "Biblioteca",
     "lock": "Mantener la herramienta seleccionada activa después de dibujar",
-    "penMode": "Evitar el zoom de pellizco y aceptar la entrada libre sólo desde el lápiz",
+    "penMode": "Modo Lápiz - previene toque",
     "link": "Añadir/Actualizar enlace para una forma seleccionada",
     "eraser": "Borrar"
   },
@@ -235,10 +236,10 @@
     "resize": "Para mantener las proporciones mantén SHIFT presionado mientras modificas el tamaño, \nmantén presionado ALT para modificar el tamaño desde el centro",
     "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_info": "Mantenga pulsado CtrlOrCmd y haga doble click o presione CtrlOrCmd + Enter para editar puntos",
     "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",
+    "lineEditor_nothingSelected": "Seleccione un punto a editar (mantenga MAYÚSCULAS para seleccionar múltiples),\no mantenga pulsado Alt y haga click para añadir nuevos puntos",
-    "placeImage": "Haga clic para colocar la imagen o haga clic y arrastre para establecer su tamaño manualmente",
+    "placeImage": "Haga clic para colocar la imagen o haga click y arrastre para establecer su tamaño manualmente",
     "publishLibrary": "Publica tu propia biblioteca",
     "bindTextToElement": "Presione Entrar para agregar",
     "deepBoxSelect": "Mantén CtrlOrCmd para seleccionar en profundidad, y para evitar arrastrar",
@@ -288,7 +289,7 @@
   },
   "helpDialog": {
     "blog": "Lea nuestro blog",
-    "click": "clic",
+    "click": "click",
     "deepSelect": "Selección profunda",
     "deepBoxSelect": "Seleccione en profundidad dentro de la caja, y evite arrastrar",
     "curvedArrow": "Flecha curva",
@@ -301,7 +302,7 @@
     "github": "¿Ha encontrado un problema? Envíelo",
     "howto": "Siga nuestras guías",
     "or": "o",
-    "preventBinding": "Evitar yuxtaposición de flechas",
+    "preventBinding": "Evitar enlace de flechas",
     "tools": "Herramientas",
     "shortcuts": "Atajos del teclado",
     "textFinish": "Finalizar edición (editor de texto)",
@@ -310,7 +311,9 @@
     "view": "Vista",
     "zoomToFit": "Ajustar la vista para mostrar todos los elementos",
     "zoomToSelection": "Zoom a la selección",
-    "toggleElementLock": "Bloquear/desbloquear selección"
+    "toggleElementLock": "Bloquear/desbloquear selección",
+    "movePageUpDown": "Mover página hacia arriba/abajo",
+    "movePageLeftRight": "Mover página hacia la izquierda/derecha"
   },
   "clearCanvasDialog": {
     "title": "Borrar lienzo"
@@ -328,7 +331,7 @@
       "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",
+      "githubHandle": "Nombre de usuario de GitHub (opcional), así podrá 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)"
     },
@@ -379,7 +382,7 @@
     "title": "Estadísticas para nerds",
     "total": "Total",
     "version": "Versión",
-    "versionCopy": "Clic para copiar",
+    "versionCopy": "Click para copiar",
     "versionNotAvailable": "Versión no disponible",
     "width": "Ancho"
   },
@@ -391,7 +394,8 @@
     "fileSaved": "Archivo guardado.",
     "fileSavedToFilename": "Guardado en {filename}",
     "canvas": "lienzo",
-    "selection": "selección"
+    "selection": "selección",
+    "pasteAsSingleElement": "Usa {{shortcut}} para pegar como un solo elemento,\no pegar en un editor de texto existente"
   },
   "colors": {
     "ffffff": "Blanco",
@@ -439,5 +443,12 @@
     "5c940d": "Lima 9",
     "e67700": "Amarillo 9",
     "d9480f": "Naranja 9"
+  },
+  "welcomeScreen": {
+    "data": "Toda su información es guardada localmente en su navegador.",
+    "switchToPlusApp": "¿Quieres ir a Excalidraw+ en su lugar?",
+    "menuHints": "Exportar, preferencias, idiomas, ...",
+    "toolbarHints": "¡Escoge una herramienta & Empiece a dibujar!",
+    "helpHints": "Atajos & ayuda"
   }
 }

src/locales/eu-ES.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Itsatsi",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Itsatsi grafikoak",
     "selectAll": "Hautatu dena",
     "multiSelect": "Gehitu elementua hautapenera",
@@ -71,7 +72,7 @@
     "layers": "Geruzak",
     "actions": "Ekintzak",
     "language": "Hizkuntza",
-    "liveCollaboration": "Zuzeneko elkarlana",
+    "liveCollaboration": "Zuzeneko elkarlana...",
     "duplicateSelection": "Bikoiztu",
     "untitled": "Izengabea",
     "name": "Izena",
@@ -115,8 +116,8 @@
       "label": "Esteka"
     },
     "lineEditor": {
-      "edit": "",
+      "edit": "Editatu lerroa",
-      "exit": ""
+      "exit": "Irten lerro-editoretik"
     },
     "elementLock": {
       "lock": "Blokeatu",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Garbitu oihala",
     "exportJSON": "Esportatu fitxategira",
-    "exportImage": "Gorde irudi gisa",
+    "exportImage": "Esportatu irudia...",
-    "export": "Esportatu",
+    "export": "Gorde hemen...",
     "exportToPng": "Esportatu PNG gisa",
     "exportToSvg": "Esportatu SVG gisa",
     "copyToClipboard": "Kopiatu arbelera",
@@ -144,7 +145,7 @@
     "scale": "Eskala",
     "save": "Gorde uneko fitxategian",
     "saveAs": "Gorde honela",
-    "load": "Kargatu",
+    "load": "Ireki",
     "getShareableLink": "Lortu partekatzeko esteka",
     "close": "Itxi",
     "selectLanguage": "Hautatu hizkuntza",
@@ -214,7 +215,7 @@
     "text": "Testua",
     "library": "Liburutegia",
     "lock": "Mantendu aktibo hautatutako tresna marraztu ondoren",
-    "penMode": "Saihestu txikiagotzea eta onartu marrazte libreko idazketa solik arkatza bidez",
+    "penMode": "Luma modua - ukipena saihestu",
     "link": "Gehitu / Eguneratu esteka hautatutako forma baterako",
     "eraser": "Borragoma"
   },
@@ -235,7 +236,7 @@
     "resize": "Proportzioak mantendu ditzakezu SHIFT sakatuta tamaina aldatzen duzun bitartean.\nsakatu ALT erditik tamaina aldatzeko",
     "resizeImage": "Tamaina libreki alda dezakezu SHIFT sakatuta,\nsakatu ALT erditik tamaina aldatzeko",
     "rotate": "Angeluak mantendu ditzakezu SHIFT sakatuta biratzen duzun bitartean",
-    "lineEditor_info": "Egin klik bikoitza edo sakatu Sartu puntuak editatzeko",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "Sakatu Ezabatu puntuak kentzeko,\nKtrl+D bikoizteko, edo arrastatu mugitzeko",
     "lineEditor_nothingSelected": "Hautatu editatzeko puntu bat (SHIFT sakatuta anitz hautatzeko),\nedo eduki Alt sakatuta eta egin klik puntu berriak gehitzeko",
     "placeImage": "Egin klik irudia kokatzeko, edo egin klik eta arrastatu bere tamaina eskuz ezartzeko",
@@ -310,7 +311,9 @@
     "view": "Bistaratu",
     "zoomToFit": "Egin zoom elementu guztiak ikusteko",
     "zoomToSelection": "Zooma hautapenera",
-    "toggleElementLock": "Blokeatu/desbloketatu hautapena"
+    "toggleElementLock": "Blokeatu/desbloketatu hautapena",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Garbitu oihala"
@@ -391,7 +394,8 @@
     "fileSaved": "Fitxategia gorde da.",
     "fileSavedToFilename": "{filename}-n gorde da",
     "canvas": "oihala",
-    "selection": "hautapena"
+    "selection": "hautapena",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "Zuria",
@@ -439,5 +443,12 @@
     "5c940d": "Lima 9",
     "e67700": "Horia 9",
     "d9480f": "Laranja 9"
+  },
+  "welcomeScreen": {
+    "data": "Zure datu guztiak modu lokalean gordetzen dira zure nabigatzailean.",
+    "switchToPlusApp": "Horren ordez Excalidraw+-ra joan nahi al zenuen?",
+    "menuHints": "Esportatu, hobespenak, hizkuntzak,...",
+    "toolbarHints": "Aukeratu tresna bat eta hasi marrazten!",
+    "helpHints": "Lasterbideak eta laguntza"
   }
 }

src/locales/fa-IR.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "جای گذاری",
+    "pasteAsPlaintext": "",
     "pasteCharts": "قراردادن نمودارها",
     "selectAll": "انتخاب همه",
     "multiSelect": "یک ایتم به انتخاب شده ها اضافه کنید.",
@@ -71,7 +72,7 @@
     "layers": "لایه ها",
     "actions": "عملیات",
     "language": "زبان",
-    "liveCollaboration": "همکاری زنده",
+    "liveCollaboration": "همکاری آنلاین...",
     "duplicateSelection": "تکرار",
     "untitled": "بدون عنوان",
     "name": "نام",
@@ -115,8 +116,8 @@
       "label": "لینک"
     },
     "lineEditor": {
-      "edit": "",
+      "edit": "ویرایش لینک",
-      "exit": ""
+      "exit": "خروج از ویرایشگر"
     },
     "elementLock": {
       "lock": "قفل",
@@ -125,18 +126,18 @@
       "unlockAll": "باز کردن قفل همه"
     },
     "statusPublished": "منتشر شده",
-    "sidebarLock": ""
+    "sidebarLock": "باز نگه داشتن سایدبار"
   },
   "library": {
-    "noItems": "",
+    "noItems": "آیتمی به اینجا اضافه نشده...",
-    "hint_emptyLibrary": "",
+    "hint_emptyLibrary": "یک آیتم روی بوم را برای اضافه شده به اینجا انتخاب کنید، یا یک کتابخانه از مخزن عمومی در بخش پایین را نصب کنید.",
-    "hint_emptyPrivateLibrary": ""
+    "hint_emptyPrivateLibrary": "یک آیتم روی بوم را برای اضافه شدن به اینجا انتخاب کنید."
   },
   "buttons": {
     "clearReset": "پاکسازی بوم نقاشی",
     "exportJSON": "خروجی در فایل",
-    "exportImage": "ذخیره به عنوان عکس",
+    "exportImage": "خروجی گرفتن از تصویر...",
-    "export": "تبدیل",
+    "export": "ذخیره در...",
     "exportToPng": "تبدیل به PNG",
     "exportToSvg": "تبدیل به SVG",
     "copyToClipboard": "کپی در حافظه موقت",
@@ -144,7 +145,7 @@
     "scale": "مقیاس",
     "save": "ذخیره در همین فایل",
     "saveAs": "ذخیره با نام",
-    "load": "بارگذاری",
+    "load": "باز کردن",
     "getShareableLink": "دریافت لینک قابل اشتراک",
     "close": "بستن",
     "selectLanguage": "انتخاب زبان",
@@ -214,7 +215,7 @@
     "text": "متن",
     "library": "کتابخانه",
     "lock": "ابزار انتخاب شده را بعد از کشیدن نگه دار",
-    "penMode": "از زوم کوچک کردن جلوگیری کنید و ورودی آزاد را فقط از قلم بپذیرید",
+    "penMode": "حالت قلم - جلوگیری از تماس",
     "link": "افزودن/به‌روزرسانی پیوند برای شکل انتخابی",
     "eraser": "پاک کن"
   },
@@ -235,7 +236,7 @@
     "resize": "می توانید با نگه داشتن SHIFT در هنگام تغییر اندازه، نسبت ها را محدود کنید،ALT را برای تغییر اندازه از مرکز نگه دارید",
     "resizeImage": "با نگه داشتن SHIFT می توانید آزادانه اندازه را تغییر دهید،\nبرای تغییر اندازه از مرکز، ALT را نگه دارید",
     "rotate": "با نگه داشتن SHIFT هنگام چرخش می توانید زاویه ها را محدود کنید",
-    "lineEditor_info": "دوبار کلیک کنید یا Enter را فشار دهید تا نقاط را ویرایش کنید",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "برای حذف نقطه Delete برای کپی زدن Ctrl یا Cmd+D را بزنید و یا برای جابجایی بکشید",
     "lineEditor_nothingSelected": "یک نقطه را برای ویرایش انتخاب کنید (SHIFT را برای انتخاب چندگانه نگه دارید)،\nیا Alt را نگه دارید و برای افزودن نقاط جدید کلیک کنید",
     "placeImage": "برای قرار دادن تصویر کلیک کنید، یا کلیک کنید و بکشید تا اندازه آن به صورت دستی تنظیم شود",
@@ -310,7 +311,9 @@
     "view": "مشاهده",
     "zoomToFit": "بزرگنمایی برای دیدن تمام آیتم ها",
     "zoomToSelection": "بزرگنمایی قسمت انتخاب شده",
-    "toggleElementLock": "قفل/بازکردن انتخاب شده ها"
+    "toggleElementLock": "قفل/بازکردن انتخاب شده ها",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "پاک کردن بوم"
@@ -391,7 +394,8 @@
     "fileSaved": "فایل ذخیره شد.",
     "fileSavedToFilename": "ذخیره در {filename}",
     "canvas": "بوم",
-    "selection": "انتخاب"
+    "selection": "انتخاب",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "سفید",
@@ -439,5 +443,12 @@
     "5c940d": "لیمویی 9",
     "e67700": "زرد 9",
     "d9480f": "نارنجی 9"
+  },
+  "welcomeScreen": {
+    "data": "همه ی داده های شما به صورت محلی در مرورگر ذخیره میشود.",
+    "switchToPlusApp": "آیا ترجیح میدهید به Excalidraw+ بروید؟",
+    "menuHints": "خروجی گرفتن، تنظیمات، زبانها، ...",
+    "toolbarHints": "یک ابزار را انتخاب کنید و ترسیم را شروع کنید!",
+    "helpHints": "میانبرها و کمک"
   }
 }

src/locales/fi-FI.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Liitä",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Liitä kaaviot",
     "selectAll": "Valitse kaikki",
     "multiSelect": "Lisää kohde valintaan",
@@ -71,7 +72,7 @@
     "layers": "Tasot",
     "actions": "Toiminnot",
     "language": "Kieli",
-    "liveCollaboration": "Live-yhteistyö",
+    "liveCollaboration": "",
     "duplicateSelection": "Monista",
     "untitled": "Nimetön",
     "name": "Nimi",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Tyhjennä piirtoalue",
     "exportJSON": "Vie tiedostoon",
-    "exportImage": "Tallenna kuvana",
+    "exportImage": "",
-    "export": "Vie",
+    "export": "",
     "exportToPng": "Vie PNG-tiedostona",
     "exportToSvg": "Vie SVG-tiedostona",
     "copyToClipboard": "Kopioi leikepöydälle",
@@ -144,7 +145,7 @@
     "scale": "Koko",
     "save": "Tallenna nykyiseen tiedostoon",
     "saveAs": "Tallenna nimellä",
-    "load": "Avaa",
+    "load": "",
     "getShareableLink": "Hae jaettava linkki",
     "close": "Sulje",
     "selectLanguage": "Valitse kieli",
@@ -214,7 +215,7 @@
     "text": "Teksti",
     "library": "Kirjasto",
     "lock": "Pidä valittu työkalu aktiivisena piirron jälkeen",
-    "penMode": "Estä nipistyszoomaus ja vastaanota ainoastaan kynällä piirretty",
+    "penMode": "",
     "link": "Lisää/päivitä linkki valitulle muodolle",
     "eraser": "Poistotyökalu"
   },
@@ -235,7 +236,7 @@
     "resize": "Voit rajoittaa mittasuhteet pitämällä SHIFT-näppäintä alaspainettuna kun muutat kokoa, pidä ALT-näppäintä alaspainettuna muuttaaksesi kokoa keskipisteen suhteen",
     "resizeImage": "Voit muuttaa kokoa vapaasti pitämällä SHIFTiä pohjassa, pidä ALT pohjassa muuttaaksesi kokoa keskipisteen ympäri",
     "rotate": "Voit rajoittaa kulman pitämällä SHIFT pohjassa pyörittäessäsi",
-    "lineEditor_info": "Kaksoisnapauta tai paina Enter muokataksesi pisteitä",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "Poista piste(et) painamalla delete, monista painamalla CtrlOrCmd+D, tai liikuta raahaamalla",
     "lineEditor_nothingSelected": "Valitse muokattava piste (monivalinta pitämällä SHIFT pohjassa), tai paina Alt ja klikkaa lisätäksesi uusia pisteitä",
     "placeImage": "Klikkaa asettaaksesi kuvan, tai klikkaa ja raahaa asettaaksesi sen koon manuaalisesti",
@@ -310,7 +311,9 @@
     "view": "Näkymä",
     "zoomToFit": "Näytä kaikki elementit",
     "zoomToSelection": "Näytä valinta",
-    "toggleElementLock": ""
+    "toggleElementLock": "",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Pyyhi piirtoalue"
@@ -391,7 +394,8 @@
     "fileSaved": "Tiedosto tallennettu.",
     "fileSavedToFilename": "Tallennettiin kohteeseen {filename}",
     "canvas": "piirtoalue",
-    "selection": "valinta"
+    "selection": "valinta",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "Valkoinen",
@@ -439,5 +443,12 @@
     "5c940d": "Limenvihreä 9",
     "e67700": "Keltainen 9",
     "d9480f": "Oranssi 9"
+  },
+  "welcomeScreen": {
+    "data": "",
+    "switchToPlusApp": "",
+    "menuHints": "",
+    "toolbarHints": "",
+    "helpHints": ""
   }
 }

src/locales/fr-FR.json

@@ -1,6 +1,7 @@
 {
   "labels": {
     "paste": "Coller",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Coller les graphiques",
     "selectAll": "Tout sélectionner",
     "multiSelect": "Ajouter l'élément à la sélection",
@@ -44,7 +45,7 @@
     "exportEmbedScene": "Intégrer la scène",
     "exportEmbedScene_details": "Les données de scène seront enregistrées dans le fichier PNG/SVG exporté, afin que la scène puisse être restaurée à partir de celui-ci.\nCela augmentera la taille du fichier exporté.",
     "addWatermark": "Ajouter \"Réalisé avec Excalidraw\"",
-    "handDrawn": "À la main",
+    "handDrawn": "Manuscrit",
     "normal": "Normale",
     "code": "Code",
     "small": "Petite",
@@ -71,7 +72,7 @@
     "layers": "Disposition",
     "actions": "Actions",
     "language": "Langue",
-    "liveCollaboration": "Collaboration en direct",
+    "liveCollaboration": "Collaboration en direct...",
     "duplicateSelection": "Dupliquer",
     "untitled": "Sans-titre",
     "name": "Nom",
@@ -135,8 +136,8 @@
   "buttons": {
     "clearReset": "Réinitialiser le canevas",
     "exportJSON": "Exporter comme fichier",
-    "exportImage": "Enregistrer comme image",
+    "exportImage": "Exporter l'image...",
-    "export": "Exporter",
+    "export": "Enregistrer sous...",
     "exportToPng": "Enregistrer en PNG",
     "exportToSvg": "Enregistrer en SVG",
     "copyToClipboard": "Copier dans le presse-papier",
@@ -214,7 +215,7 @@
     "text": "Texte",
     "library": "Bibliothèque",
     "lock": "Garder l'outil sélectionné actif après le dessin",
-    "penMode": "Empêcher le zoom tactile et accepter la saisie libre uniquement à partir du stylet",
+    "penMode": "Mode stylo - évite le toucher",
     "link": "Ajouter/mettre à jour le lien pour une forme sélectionnée",
     "eraser": "Gomme"
   },
@@ -235,7 +236,7 @@
     "resize": "Vous pouvez conserver les proportions en maintenant la touche MAJ pendant le redimensionnement, maintenez la touche ALT pour redimensionner par rapport au centre",
     "resizeImage": "Vous pouvez redimensionner librement en maintenant SHIFT,\nmaintenez ALT pour redimensionner depuis le centre",
     "rotate": "Vous pouvez restreindre les angles en maintenant MAJ pendant la rotation",
-    "lineEditor_info": "Double-cliquez ou appuyez sur Entrée pour éditer les points",
+    "lineEditor_info": "",
     "lineEditor_pointSelected": "Appuyer sur Suppr. pour supprimer des points, Ctrl ou Cmd+D pour dupliquer, ou faire glisser pour déplacer",
     "lineEditor_nothingSelected": "Sélectionner un point pour éditer (maintenir la touche MAJ pour en sélectionner plusieurs),\nou maintenir la touche Alt enfoncée et cliquer pour ajouter de nouveaux points",
     "placeImage": "Cliquez pour placer l'image, ou cliquez et faites glisser pour définir sa taille manuellement",
@@ -310,7 +311,9 @@
     "view": "Affichage",
     "zoomToFit": "Zoomer pour voir tous les éléments",
     "zoomToSelection": "Zoomer sur la sélection",
-    "toggleElementLock": "Verrouiller/déverrouiller la sélection"
+    "toggleElementLock": "Verrouiller/déverrouiller la sélection",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
     "title": "Effacer la zone de dessin"
@@ -391,7 +394,8 @@
     "fileSaved": "Fichier enregistré.",
     "fileSavedToFilename": "Enregistré sous {filename}",
     "canvas": "canevas",
-    "selection": "sélection"
+    "selection": "sélection",
+    "pasteAsSingleElement": ""
   },
   "colors": {
     "ffffff": "Blanc",
@@ -439,5 +443,12 @@
     "5c940d": "Citron vert 9",
     "e67700": "Jaune 9",
     "d9480f": "Orange 9"
+  },
+  "welcomeScreen": {
+    "data": "Toutes vos données sont sauvegardées en local dans votre navigateur.",
+    "switchToPlusApp": "Vous vouliez plutôt aller à Excalidraw+ ?",
+    "menuHints": "Exportation, préférences, langues, ...",
+    "toolbarHints": "Choisissez un outil et commencez à dessiner !",
+    "helpHints": "Raccourcis et aide"
   }
 }

src/locales/gl-ES.json

@@ -1,6 +1,7 @@
 {
   "labels": {
-    "paste": "Paste",
+    "paste": "Pegar",
+    "pasteAsPlaintext": "",
     "pasteCharts": "Pegar gráficos",
     "selectAll": "Seleccionar todo",
     "multiSelect": "Engadir elemento á selección",
@@ -42,9 +43,9 @@
     "onlySelected": "Só seleccionados",
     "withBackground": "Fondo",
     "exportEmbedScene": "Inserir escena",
-    "exportEmbedScene_details": "",
+    "exportEmbedScene_details": "Os datos da escena serán gardados no ficheiro PNG/SVG exportado polo que a escena poderá ser restaurada dende el. Isto aumentará o tamaño do ficheiro exportado.",
     "addWatermark": "Engadir \"Feito con Excalidraw\"",
-    "handDrawn": "Debuzado á man",
+    "handDrawn": "Debuxado a man",
     "normal": "Normal",
     "code": "Código",
     "small": "Pequeno",
@@ -71,7 +72,7 @@
     "layers": "Capas",
     "actions": "Accións",
     "language": "Idioma",
-    "liveCollaboration": "Colaboración en directo",
+    "liveCollaboration": "Colaboración en directo...",
     "duplicateSelection": "Duplicar",
     "untitled": "Sen título",
     "name": "Nome",
@@ -95,8 +96,8 @@
     "centerHorizontally": "Centrar horizontalmente",
     "distributeHorizontally": "Distribuír horizontalmente",
     "distributeVertically": "Distribuír verticalmente",
-    "flipHorizontal": "",
+    "flipHorizontal": "Virar horizontalmente",
-    "flipVertical": "",
+    "flipVertical": "Virar verticalmente",
     "viewMode": "Modo de visualización",
     "toggleExportColorScheme": "Alternar esquema de cores de exportación",
     "share": "Compartir",
@@ -115,8 +116,8 @@
       "label": "Ligazón"
     },
     "lineEditor": {
-      "edit": "",
+      "edit": "Editar liña",
-      "exit": ""
+      "exit": "Saír do editor de liñas"
     },
     "elementLock": {
       "lock": "Bloquear",
@@ -129,14 +130,14 @@
   },
   "library": {
     "noItems": "Aínda non hai elementos engadidos...",
-    "hint_emptyLibrary": "",
+    "hint_emptyLibrary": "Seleccione un elemento no lenzo para engadilo aquí, ou instale unha biblioteca dende o repositorio público, como se detalla a continuación.",
-    "hint_emptyPrivateLibrary": ""
+    "hint_emptyPrivateLibrary": "Seleccione un elemento do lenzo para engadilo aquí."
   },
   "buttons": {
     "clearReset": "Limpar o lenzo",
     "exportJSON": "Exportar a arquivo",
-    "exportImage": "Gardar como imaxe",
+    "exportImage": "Exportar imaxe...",
-    "export": "Exportar",
+    "export": "Gardar en...",
     "exportToPng": "Exportar a PNG",
     "exportToSvg": "Exportar a SVG",
     "copyToClipboard": "Copiar ao portapapeis",
@@ -144,7 +145,7 @@
     "scale": "Escala",
     "save": "Gardar no ficheiro actual",
     "saveAs": "Gardar como",
-    "load": "Cargar",
+    "load": "Abrir",
     "getShareableLink": "Obter unha ligazón que se poida compartir",
     "close": "Pechar",
     "selectLanguage": "Seleccionar idioma",
@@ -176,35 +177,35 @@
     "couldNotCreateShareableLink": "Non se puido crear unha ligazón para compartir.",
     "couldNotCreateShareableLinkTooBig": "Non se puido crear a ligazón para compartir: a escena é demasiado grande",
     "couldNotLoadInvalidFile": "Non se puido cargar o ficheiro non válido",
-    "importBackendFailed": "",
+    "importBackendFailed": "A importación dende o backend fallou.",
-    "cannotExportEmptyCanvas": "",
+    "cannotExportEmptyCanvas": "Non se pode exportar un lenzo baleiro.",
-    "couldNotCopyToClipboard": "",
+    "couldNotCopyToClipboard": "Non se puido copiar ao portapapeis.",
     "decryptFailed": "Non se poideron descifrar os datos.",
-    "uploadedSecurly": "A carga foi asegurada con cifrado de extremo a extremo, o que significa que o servidor de Excalidraw e terceiros non poder ler o contenido.",
+    "uploadedSecurly": "A carga foi asegurada con cifrado de extremo a extremo, o que significa que o servidor de Excalidraw e terceiros non poden ler o contido.",
-    "loadSceneOverridePrompt": "Si carga este debuxo externo, reemprazará o que ten. ¿Desexa continuar?",
+    "loadSceneOverridePrompt": "A carga dun debuxo externo substituirá o contido existente. Desexa continuar?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Deter a sesión, sobrescribirá o seu debuxo local previamente almacenado. Está seguro?\n\n(Se quere manter o seu debuxo local, simplemente peche a lapela do navegador.)",
-    "errorAddingToLibrary": "",
+    "errorAddingToLibrary": "Non se puido engadir o elemento á biblioteca",
-    "errorRemovingFromLibrary": "",
+    "errorRemovingFromLibrary": "Non se puido eliminar o elemento da biblioteca",
-    "confirmAddLibrary": "",
+    "confirmAddLibrary": "Isto engadirá {{numShapes}} forma(s) a túa biblioteca. Estás seguro?",
-    "imageDoesNotContainScene": "",
+    "imageDoesNotContainScene": "Esta imaxe non parece conter ningún dato da escena. Activou a inserción de escenas durante a exportación?",
-    "cannotRestoreFromImage": "",
+    "cannotRestoreFromImage": "Non se puido restaurar a escena dende este arquivo de imaxe",
-    "invalidSceneUrl": "",
+    "invalidSceneUrl": "Non se puido importar a escena dende a URL proporcionada. Ou ben está malformada ou non contén un JSON con información válida para Excalidraw.",
-    "resetLibrary": "",
+    "resetLibrary": "Isto limpará a súa biblioteca. Está seguro?",
-    "removeItemsFromsLibrary": "",
+    "removeItemsFromsLibrary": "Eliminar {{count}} elemento(s) da biblioteca?",
-    "invalidEncryptionKey": ""
+    "invalidEncryptionKey": "A clave de cifrado debe ter 22 caracteres. A colaboración en directo está desactivada."
   },
   "errors": {
-    "unsupportedFileType": "",
+    "unsupportedFileType": "Tipo de ficheiro non soportado.",
-    "imageInsertError": "",
+    "imageInsertError": "Non se puido inserir a imaxe. Probe de novo máis tarde...",
-    "fileTooBig": "",
+    "fileTooBig": "O ficheiro é demasiado grande. O tamaño máximo permitido é {{maxSize}}.",
-    "svgImageInsertError": "",
+    "svgImageInsertError": "Non se puido inserir como imaxe SVG. O marcado SVG semella inválido.",
-    "invalidSVGString": "",
+    "invalidSVGString": "SVG inválido.",
-    "cannotResolveCollabServer": "",
+    "cannotResolveCollabServer": "Non se puido conectar ao servidor de colaboración. Por favor recargue a páxina e probe de novo.",
-    "importLibraryError": ""
+    "importLibraryError": "Non se puido cargar a biblioteca"
   },
   "toolBar": {
     "selection": "Selección",
-    "image": "",
+    "image": "Inserir imaxe",
     "rectangle": "Rectángulo",
     "diamond": "Diamante",
     "ellipse": "Elipse",
@@ -214,230 +215,240 @@
     "text": "Texto",
     "library": "Biblioteca",
     "lock": "Manter a ferramenta seleccionada activa despois de debuxar",
-    "penMode": "",
+    "penMode": "Modo lapis - evitar o contacto",
-    "link": "",
+    "link": "Engadir/ Actualizar ligazón para a forma seleccionada",
-    "eraser": ""
+    "eraser": "Goma de borrar"
   },
   "headings": {
     "canvasActions": "Accións do lenzo",
-    "selectedShapeActions": "",
+    "selectedShapeActions": "Accións da forma seleccionada",
-    "shapes": ""
+    "shapes": "Formas"
   },
   "hints": {
-    "canvasPanning": "",
+    "canvasPanning": "Para mover o lenzo, manteña a roda do rato ou a barra de espazo mentres arrastra",
-    "linearElement": "",
+    "linearElement": "Faga clic para iniciar varios puntos, arrastre para unha sola liña",
-    "freeDraw": "",
+    "freeDraw": "Fai clic e arrastra, solta cando acabes",
-    "text": "",
+    "text": "Consello: tamén podes engadir texto facendo dobre-clic en calquera lugar coa ferramenta de selección",
-    "text_selected": "",
+    "text_selected": "Dobre-clic ou prema ENTER para editar o texto",
-    "text_editing": "",
+    "text_editing": "Prema Escape ou CtrlOrCmd+ENTER para finalizar a edición",
-    "linearElementMulti": "",
+    "linearElementMulti": "Faga clic no último punto ou prema Escape ou Enter para rematar",
-    "lockAngle": "",
+    "lockAngle": "Pode reducir o ángulo mantendo SHIFT",
-    "resize": "",
+    "resize": "Pode reducir as proporcións mantendo SHIFT mentres axusta o tamaño,\nmanteña ALT para axustalo dende o centro",
-    "resizeImage": "",
+    "resizeImage": "Pode axustar o tamaño libremente mantendo SHIFT,\nmanteña ALT para axustalo dende o centro",
-    "rotate": "",
+    "rotate": "Podes reducir os ángulos mantendo SHIFT mentres os rotas",
     "lineEditor_info": "",
-    "lineEditor_pointSelected": "",
+    "lineEditor_pointSelected": "Prema Suprimir para eliminar o(s) punto(s)\nCtrlOrCmd+D para duplicalos, ou arrastre para movelos",
-    "lineEditor_nothingSelected": "",
+    "lineEditor_nothingSelected": "Seleccione un punto para editar (manteña pulsado SHIFT para selección múltiple),\nou manteña pulsado Alt e faga clic para engadir novos puntos",
-    "placeImage": "",
+    "placeImage": "Faga clic para colocar a imaxe, ou faga clic e arrastre para establecer o seu tamaño manualmente",
-    "publishLibrary": "",
+    "publishLibrary": "Publica a túa propia biblioteca",
-    "bindTextToElement": "",
+    "bindTextToElement": "Prema a tecla enter para engadir texto",
-    "deepBoxSelect": "",
+    "deepBoxSelect": "Manteña pulsado CtrlOrCmd para seleccionar en profundidade e evitar o arrastre",
-    "eraserRevert": ""
+    "eraserRevert": "Manteña pulsado Alt para reverter os elementos marcados para a súa eliminación"
   },
   "canvasError": {
-    "cannotShowPreview": "",
+    "cannotShowPreview": "Non se pode mostrar a vista previa",
-    "canvasTooBig": "",
+    "canvasTooBig": "Pode que o lenzo sexa demasiado grande.",
-    "canvasTooBigTip": ""
+    "canvasTooBigTip": "Consello: Probe a acercar un pouco os elementos máis afastados."
   },
   "errorSplash": {
-    "headingMain_pre": "",
+    "headingMain_pre": "Atopouse un erro. Probe ",
-    "headingMain_button": "",
+    "headingMain_button": "recargando a páxina.",
-    "clearCanvasMessage": "",
+    "clearCanvasMessage": "Se recargar non funcionou, probe ",
-    "clearCanvasMessage_button": "",
+    "clearCanvasMessage_button": "limpando o lenzo.",
-    "clearCanvasCaveat": "",
+    "clearCanvasCaveat": " Isto resultará nunha perda do seu traballo ",
-    "trackedToSentry_pre": "",
+    "trackedToSentry_pre": "O erro con identificador ",
-    "trackedToSentry_post": "",
+    "trackedToSentry_post": " foi rastrexado no noso sistema.",
-    "openIssueMessage_pre": "",
+    "openIssueMessage_pre": "Fomos moi cautelosos de non incluír a información da súa escena no erro. Se a súa escena non é privada, por favor, considere o seguimento do noso ",
-    "openIssueMessage_button": "",
+    "openIssueMessage_button": "rastrexador de erros.",
-    "openIssueMessage_post": "",
+    "openIssueMessage_post": " Por favor inclúa a seguinte información copiándoa e pegándoa na issue de Github.",
-    "sceneContent": ""
+    "sceneContent": "Contido da escena:"
   },
   "roomDialog": {
-    "desc_intro": "",
+    "desc_intro": "Podes invitar xente a colaborar contigo na túa escena actual.",
-    "desc_privacy": "",
+    "desc_privacy": "Non te preocupes, a sesión usa cifrado de punto a punto, polo que calquera cousa que debuxes mantense privada. Nin tan sequera o noso servidor será capaz de ver o que fas.",
-    "button_startSession": "",
+    "button_startSession": "Comezar sesión",
-    "button_stopSession": "",
+    "button_stopSession": "Rematar sesión",
-    "desc_inProgressIntro": "",
+    "desc_inProgressIntro": "A sesión de colaboración en directo está agora en progreso.",
-    "desc_shareLink": "",
+    "desc_shareLink": "Comparte esta ligazón con calquera que queiras colaborar:",
-    "desc_exitSession": "",
+    "desc_exitSession": "Deter a sesión desconectarao da sala, pero poderá seguir traballando coa escena de maneira local. Teña en conta que isto non afectará a outras persoas, que poderán seguir colaborando na súa versión.",
-    "shareTitle": ""
+    "shareTitle": "Únase a unha sesión de colaboración en directo en Excalidraw"
   },
   "errorDialog": {
     "title": "Erro"
   },
   "exportDialog": {
-    "disk_title": "",
+    "disk_title": "Gardar no disco",
-    "disk_details": "",
+    "disk_details": "Exporte os datos da escena a un ficheiro que poderás importar máis tarde.",
-    "disk_button": "",
+    "disk_button": "Gardar nun ficheiro",
-    "link_title": "",
+    "link_title": "Ligazón para compartir",
-    "link_details": "",
+    "link_details": "Exportar como unha ligazón de só lectura.",
-    "link_button": "",
+    "link_button": "Exportar a unha ligazón",
-    "excalidrawplus_description": "",
+    "excalidrawplus_description": "Garde a escena no seu espazo de traballo en Excalidraw+.",
-    "excalidrawplus_button": "",
+    "excalidrawplus_button": "Exportar",
-    "excalidrawplus_exportError": ""
+    "excalidrawplus_exportError": "Non se puido exportar a Excalidraw+ neste momento..."
   },
   "helpDialog": {
-    "blog": "",
+    "blog": "Le o noso blog",
-    "click": "",
+    "click": "clic",
-    "deepSelect": "",
+    "deepSelect": "Selección en profundidade",
-    "deepBoxSelect": "",
+    "deepBoxSelect": "Selección en profundidade dentro da caixa, evitando o arrastre",
-    "curvedArrow": "",
+    "curvedArrow": "Frecha curva",
-    "curvedLine": "",
+    "curvedLine": "Liña curva",
-    "documentation": "",
+    "documentation": "Documentación",
-    "doubleClick": "",
+    "doubleClick": "dobre-clic",
-    "drag": "",
+    "drag": "arrastrar",
-    "editor": "",
+    "editor": "Editor",
-    "editSelectedShape": "",
+    "editSelectedShape": "Editar a forma seleccionada (texto/frecha/liña)",
-    "github": "",
+    "github": "Encontrou un problema? Envíeo",
-    "howto": "",
+    "howto": "Sigue as nosas normas",
-    "or": "",
+    "or": "ou",
-    "preventBinding": "",
+    "preventBinding": "Evitar a unión de frechas",
-    "tools": "",
+    "tools": "Ferramentas",
-    "shortcuts": "",
+    "shortcuts": "Atallos de teclado",
-    "textFinish": "",
+    "textFinish": "Rematar de editar (editor de texto)",
-    "textNewLine": "",
+    "textNewLine": "Engadir unha nova liña (editor de texto)",
-    "title": "",
+    "title": "Axuda",
-    "view": "",
+    "view": "Vista",
-    "zoomToFit": "",
+    "zoomToFit": "Zoom que se axuste a todos os elementos",
-    "zoomToSelection": "",
+    "zoomToSelection": "Zoom á selección",
-    "toggleElementLock": ""
+    "toggleElementLock": "Bloquear/desbloquear selección",
+    "movePageUpDown": "",
+    "movePageLeftRight": ""
   },
   "clearCanvasDialog": {
-    "title": ""
+    "title": "Limpar lenzo"
   },
   "publishDialog": {
-    "title": "",
+    "title": "Publicar biblioteca",
-    "itemName": "",
+    "itemName": "Nome do elemento",
-    "authorName": "",
+    "authorName": "Nome do autor",
-    "githubUsername": "",
+    "githubUsername": "Nome de usuario en Github",
-    "twitterUsername": "",
+    "twitterUsername": "Nome de usuario en Twitter",
-    "libraryName": "",
+    "libraryName": "Nome da biblioteca",
-    "libraryDesc": "",
+    "libraryDesc": "Descrición da biblioteca",
-    "website": "",
+    "website": "Páxina web",
     "placeholder": {
-      "authorName": "",
+      "authorName": "O seu nome ou nome de usuario",
-      "libraryName": "",
+      "libraryName": "Nome da súa biblioteca",
-      "libraryDesc": "",
+      "libraryDesc": "Descrición da súa biblioteca para axudar a xente a entender o seu uso",
-      "githubHandle": "",
+      "githubHandle": "Nome de usuario de GitHub (opcional), así poderás editar a biblioteca unha vez enviada para a súa revisión",
-      "twitterHandle": "",
+      "twitterHandle": "Nome de usuario en Twitter(opcional), así sabemos a quen darlle crédito cando se lle de promoción a través de Twitter",
-      "website": ""
+      "website": "Ligazón ao teu sitio web persoal ou a outro sitio (opcional)"
     },
     "errors": {
-      "required": "",
+      "required": "Obrigatorio",
-      "website": ""
+      "website": "Introduza unha URL válida"
     },
     "noteDescription": {
-      "pre": "",
+      "pre": "Envíe a súa biblioteca para que sexa incluída no ",
-      "link": "",
+      "link": "repositorio público de bibliotecas",
-      "post": ""
+      "post": "para que outra xente a poida usar nos seus debuxos."
     },
     "noteGuidelines": {
-      "pre": "",
+      "pre": "A biblioteca necesita ser aprobada manualmente primeiro. Por favor, lea as ",
-      "link": "",
+      "link": "normas",
-      "post": ""
+      "post": " antes de ser enviado. Necesitarás unha conta de GitHub para comunicarte ou facer cambios se se solicitan, pero non é estritamente necesario."
     },
     "noteLicense": {
-      "pre": "",
+      "pre": "Ao enviar, estás de acordo con que a biblioteca sexa publicada baixo a ",
-      "link": "",
+      "link": "Licenza MIT, ",
-      "post": ""
+      "post": "o cal significa que, en resumo, calquera pode usalo sen restricións."
     },
-    "noteItems": "",
+    "noteItems": "Cada elemento da biblioteca debe ter o seu nome propio para que se poida filtrar. Os seguintes elementos da biblioteca serán incluídos:",
-    "atleastOneLibItem": "",
+    "atleastOneLibItem": "Por favor seleccione polo menos un elemento da biblioteca para comezar",
-    "republishWarning": ""
+    "republishWarning": "Nota: algúns dos elementos seleccionados están marcados como xa publicados/enviados. Só deberías reenviar elementos cando se actualice unha biblioteca ou envío."
   },
   "publishSuccessDialog": {
-    "title": "",
+    "title": "Biblioteca enviada",
-    "content": "",
+    "content": "Grazas {{authorName}}. A súa biblioteca foi enviada para ser revisada. Pode seguir o estado",
-    "link": ""
+    "link": "aquí"
   },
   "confirmDialog": {
-    "resetLibrary": "",
+    "resetLibrary": "Restablecer biblioteca",
-    "removeItemsFromLib": ""
+    "removeItemsFromLib": "Eliminar os elementos seleccionados da biblioteca"
   },
   "encrypted": {
-    "tooltip": "",
+    "tooltip": "Os teus debuxos están cifrados de punto a punto, polo que os servidores de Excalidraw nunca os verán.",
-    "link": ""
+    "link": "Entrada do blog acerca do cifrado de punto a punto en Excalidraw"
   },
   "stats": {
-    "angle": "",
+    "angle": "Ángulo",
-    "element": "",
+    "element": "Elemento",
-    "elements": "",
+    "elements": "Elementos",
-    "height": "",
+    "height": "Alto",
-    "scene": "",
+    "scene": "Escena",
-    "selected": "",
+    "selected": "Seleccionado",
-    "storage": "",
+    "storage": "Almacenamento",
-    "title": "",
+    "title": "Estadísticas para nerds",
-    "total": "",
+    "total": "Total",
-    "version": "",
+    "version": "Versión",
-    "versionCopy": "",
+    "versionCopy": "Faga clic para copiar",
-    "versionNotAvailable": "",
+    "versionNotAvailable": "Versión non dispoñible",
-    "width": ""
+    "width": "Ancho"
   },
   "toast": {
-    "addedToLibrary": "",
+    "addedToLibrary": "Engadido á biblioteca",
-    "copyStyles": "",
+    "copyStyles": "Estilos copiados.",
-    "copyToClipboard": "",
+    "copyToClipboard": "Copiado ao portapapeis.",
-    "copyToClipboardAsPng": "",
+    "copyToClipboardAsPng": "Copiar {{exportSelection}} ao portapapeis como PNG\n({{exportColorScheme}})",
-    "fileSaved": "",
+    "fileSaved": "Ficheiro gardado.",
-    "fileSavedToFilename": "",
+    "fileSavedToFilename": "Gardado en {filename}",
-    "canvas": "",
+    "canvas": "lenzo",
-    "selection": ""
+    "selection": "selección",
+    "pasteAsSingleElement": ""
   },
   "colors": {
-    "ffffff": "",
+    "ffffff": "Branco",
-    "f8f9fa": "",
+    "f8f9fa": "Gris 0",
-    "f1f3f5": "",
+    "f1f3f5": "Gris 1",
-    "fff5f5": "",
+    "fff5f5": "Vermello 0",
-    "fff0f6": "",
+    "fff0f6": "Rosa 0",
-    "f8f0fc": "",
+    "f8f0fc": "Uva 0",
-    "f3f0ff": "",
+    "f3f0ff": "Violeta 0",
-    "edf2ff": "",
+    "edf2ff": "Índigo 0",
-    "e7f5ff": "",
+    "e7f5ff": "Azul 0",
-    "e3fafc": "",
+    "e3fafc": "Ciano 0",
-    "e6fcf5": "",
+    "e6fcf5": "Turquesa 0",
-    "ebfbee": "",
+    "ebfbee": "Verde 0",
-    "f4fce3": "",
+    "f4fce3": "Lima 0",
-    "fff9db": "",
+    "fff9db": "Amarelo 0",
-    "fff4e6": "",
+    "fff4e6": "Laranxa 0",
-    "transparent": "",
+    "transparent": "Transparente",
-    "ced4da": "",
+    "ced4da": "Gris 4",
-    "868e96": "",
+    "868e96": "Gris 6",
-    "fa5252": "",
+    "fa5252": "Vermello 6",
-    "e64980": "",
+    "e64980": "Rosa 6",
-    "be4bdb": "",
+    "be4bdb": "Uva 6",
-    "7950f2": "",
+    "7950f2": "Violeta 6",
-    "4c6ef5": "",
+    "4c6ef5": "Índigo 6",
-    "228be6": "",
+    "228be6": "Azul 6",
-    "15aabf": "",
+    "15aabf": "Ciano 6",
-    "12b886": "",
+    "12b886": "Turquesa 6",
-    "40c057": "",
+    "40c057": "Verde 6",
-    "82c91e": "",
+    "82c91e": "Lima 6",
-    "fab005": "",
+    "fab005": "Amarelo 6",
-    "fd7e14": "",
+    "fd7e14": "Laranxa 6",
-    "000000": "",
+    "000000": "Negro",
-    "343a40": "",
+    "343a40": "Gris 8",
-    "495057": "",
+    "495057": "Gris 7",
-    "c92a2a": "",
+    "c92a2a": "Vermello 9",
-    "a61e4d": "",
+    "a61e4d": "Rosa 9",
-    "862e9c": "",
+    "862e9c": "Uva 9",
-    "5f3dc4": "",
+    "5f3dc4": "Violeta 9",
-    "364fc7": "",
+    "364fc7": "Índigo 9",
-    "1864ab": "",
+    "1864ab": "Azul 9",
-    "0b7285": "",
+    "0b7285": "Ciano 9",
-    "087f5b": "",
+    "087f5b": "Turquesa 9",
-    "2b8a3e": "",
+    "2b8a3e": "Verde 9",
-    "5c940d": "",
+    "5c940d": "Lima 9",
-    "e67700": "",
+    "e67700": "Amarelo 9",
-    "d9480f": ""
+    "d9480f": "Laranxa 9"
+  },
+  "welcomeScreen": {
+    "data": "Toda a información é gardada de maneira local no seu navegador.",
+    "switchToPlusApp": "Queres ir a Excalidraw+ no seu lugar?",
+    "menuHints": "Exportar, preferencias, idiomas, ...",
+    "toolbarHints": "Escolle unha ferramenta & Comeza a debuxar!",
+    "helpHints": "Atallos & axuda"
   }
 }