fix: restore elements and app state in updateScene

Co-authored-by: david <dw@dw.local>

.env.development

@@ -4,5 +4,5 @@ REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
-REACT_APP_SOCKET_SERVER_URL=http://localhost:3000
+REACT_APP_SOCKET_SERVER_URL=http://localhost:3002
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
       - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 16.x
       - name: Install and test
         run: |
           yarn --frozen-lockfile

.husky/pre-commit

@@ -1 +1,2 @@
+#!/bin/sh
 yarn lint-staged

README.md

@@ -118,6 +118,10 @@ yarn start
 
 Now you can open [http://localhost:3000](http://localhost:3000) and start coding in your favorite code editor.
 
+#### Collaboration
+
+For collaboration, you will need to set up [collab server](https://github.com/excalidraw/excalidraw-room) in local.
+
 #### Commands
 
 | Command            | Description                       |

package.json

@@ -21,15 +21,15 @@
   "dependencies": {
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.15.0",
+    "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
-    "@tldraw/vec": "0.1.3",
-    "@types/jest": "27.0.2",
+    "@tldraw/vec": "1.4.3",
+    "@types/jest": "27.4.0",
     "@types/pica": "5.1.3",
-    "@types/react": "17.0.34",
+    "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.21.1",
+    "browser-fs-access": "0.23.0",
     "clsx": "1.1.1",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
@@ -49,27 +49,28 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-scripts": "4.0.3",
-    "roughjs": "4.5.0",
-    "sass": "1.43.4",
+    "roughjs": "4.5.2",
+    "sass": "1.47.0",
     "socket.io-client": "2.3.1",
-    "typescript": "4.5.2"
+    "typescript": "4.5.4"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.0",
     "@excalidraw/prettier-config": "1.0.2",
-    "@types/chai": "4.2.22",
+    "@types/chai": "4.3.0",
     "@types/lodash.throttle": "4.1.6",
-    "@types/pako": "1.0.2",
+    "@types/pako": "1.0.3",
     "@types/resize-observer-browser": "0.1.6",
     "chai": "4.3.4",
+    "dotenv": "10.0.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.22.0",
+    "firebase-tools": "9.23.0",
     "husky": "7.0.4",
     "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.0.1",
+    "lint-staged": "12.1.7",
     "pepjs": "0.5.3",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "rewire": "5.0.0"
   },
   "resolutions": {

src/actions/actionAddToLibrary.ts

@@ -8,7 +8,12 @@ import { t } from "../i18n";
 export const actionAddToLibrary = register({
   name: "addToLibrary",
   perform: (elements, appState, _, app) => {
-    if (elements.some((element) => element.type === "image")) {
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+      true,
+    );
+    if (selectedElements.some((element) => element.type === "image")) {
       return {
         commitToHistory: false,
         appState: {
@@ -25,10 +30,7 @@ export const actionAddToLibrary = register({
           {
             id: randomId(),
             status: "unpublished",
-            elements: getSelectedElements(
-              getNonDeletedElements(elements),
-              appState,
-            ).map(deepCopyElement),
+            elements: selectedElements.map(deepCopyElement),
             created: Date.now(),
           },
           ...items,

src/actions/actionAlign.tsx

@@ -8,13 +8,13 @@ import {
   CenterVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { getElementMap, getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { getShortcutKey } from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
 const enableActionGroup = (
@@ -34,9 +34,11 @@ const alignSelectedElements = (
 
   const updatedElements = alignElements(selectedElements, alignment);
 
-  const updatedElementsMap = getElementMap(updatedElements);
+  const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map((element) => updatedElementsMap[element.id] || element);
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
+  );
 };
 
 export const actionAlignTop = register({

src/actions/actionCanvas.tsx

@@ -160,7 +160,7 @@ export const actionResetZoom = register({
     };
   },
   PanelComponent: ({ updateData, appState }) => (
-    <Tooltip label={t("buttons.resetZoom")}>
+    <Tooltip label={t("buttons.resetZoom")} style={{ height: "100%" }}>
       <ToolButton
         type="button"
         className="reset-zoom-button"

src/actions/actionClipboard.tsx

@@ -42,6 +42,7 @@ export const actionCopyAsSvg = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
+      true,
     );
     try {
       await exportCanvas(
@@ -81,6 +82,7 @@ export const actionCopyAsPng = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
+      true,
     );
     try {
       await exportCanvas(

src/actions/actionDeleteSelected.tsx

@@ -11,6 +11,7 @@ import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
+import { isBoundToContainer } from "../element/typeChecks";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -21,6 +22,12 @@ const deleteSelectedElements = (
       if (appState.selectedElementIds[el.id]) {
         return newElementWith(el, { isDeleted: true });
       }
+      if (
+        isBoundToContainer(el) &&
+        appState.selectedElementIds[el.containerId]
+      ) {
+        return newElementWith(el, { isDeleted: true });
+      }
       return el;
     }),
     appState: {
@@ -55,7 +62,7 @@ export const actionDeleteSelected = register({
     if (appState.editingLinearElement) {
       const {
         elementId,
-        activePointIndex,
+        selectedPointsIndices,
         startBindingElement,
         endBindingElement,
       } = appState.editingLinearElement;
@@ -65,8 +72,7 @@ export const actionDeleteSelected = register({
       }
       if (
         // case: no point selected → delete whole element
-        activePointIndex == null ||
-        activePointIndex === -1 ||
+        selectedPointsIndices == null ||
         // case: deleting last remaining point
         element.points.length < 2
       ) {
@@ -86,15 +92,17 @@ export const actionDeleteSelected = register({
       // We cannot do this inside `movePoint` because it is also called
       // when deleting the uncommitted point (which hasn't caused any binding)
       const binding = {
-        startBindingElement:
-          activePointIndex === 0 ? null : startBindingElement,
-        endBindingElement:
-          activePointIndex === element.points.length - 1
-            ? null
-            : endBindingElement,
+        startBindingElement: selectedPointsIndices?.includes(0)
+          ? null
+          : startBindingElement,
+        endBindingElement: selectedPointsIndices?.includes(
+          element.points.length - 1,
+        )
+          ? null
+          : endBindingElement,
       };
 
-      LinearElementEditor.movePoint(element, activePointIndex, "delete");
+      LinearElementEditor.deletePoints(element, selectedPointsIndices);
 
       return {
         elements,
@@ -103,13 +111,15 @@ export const actionDeleteSelected = register({
           editingLinearElement: {
             ...appState.editingLinearElement,
             ...binding,
-            activePointIndex: activePointIndex > 0 ? activePointIndex - 1 : 0,
+            selectedPointsIndices:
+              selectedPointsIndices?.[0] > 0
+                ? [selectedPointsIndices[0] - 1]
+                : [0],
           },
         },
         commitToHistory: true,
       };
     }
-
     let { elements: nextElements, appState: nextAppState } =
       deleteSelectedElements(elements, appState);
     fixBindingsAfterDeletion(

src/actions/actionDistribute.tsx

@@ -4,13 +4,13 @@ import {
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../disitrubte";
-import { getElementMap, getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { CODES } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { getShortcutKey } from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
 const enableActionGroup = (
@@ -30,9 +30,11 @@ const distributeSelectedElements = (
 
   const updatedElements = distributeElements(selectedElements, distribution);
 
-  const updatedElementsMap = getElementMap(updatedElements);
+  const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map((element) => updatedElementsMap[element.id] || element);
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
+  );
 };
 
 export const distributeHorizontally = register({

src/actions/actionDuplicateSelection.tsx

@@ -2,13 +2,12 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { isSomeElementSelected } from "../scene";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { clone } from "../components/icons";
 import { t } from "../i18n";
-import { getShortcutKey } from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { mutateElement } from "../element/mutateElement";
 import {
   selectGroupsForSelectedElements,
   getSelectedGroupForElement,
@@ -18,41 +17,23 @@ import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import { ActionResult } from "./types";
 import { GRID_SIZE } from "../constants";
+import { bindTextToShapeAfterDuplication } from "../element/textElement";
+import { isBoundToContainer } from "../element/typeChecks";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
   perform: (elements, appState) => {
-    // duplicate point if selected while editing multi-point element
+    // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {
-      const { activePointIndex, elementId } = appState.editingLinearElement;
-      const element = LinearElementEditor.getElement(elementId);
-      if (!element || activePointIndex === null) {
+      const ret = LinearElementEditor.duplicateSelectedPoints(appState);
+
+      if (!ret) {
         return false;
       }
-      const { points } = element;
-      const selectedPoint = points[activePointIndex];
-      const nextPoint = points[activePointIndex + 1];
-      mutateElement(element, {
-        points: [
-          ...points.slice(0, activePointIndex + 1),
-          nextPoint
-            ? [
-                (selectedPoint[0] + nextPoint[0]) / 2,
-                (selectedPoint[1] + nextPoint[1]) / 2,
-              ]
-            : [selectedPoint[0] + 30, selectedPoint[1] + 30],
-          ...points.slice(activePointIndex + 1),
-        ],
-      });
+
       return {
-        appState: {
-          ...appState,
-          editingLinearElement: {
-            ...appState.editingLinearElement,
-            activePointIndex: activePointIndex + 1,
-          },
-        },
         elements,
+        appState: ret.appState,
         commitToHistory: true,
       };
     }
@@ -106,9 +87,12 @@ const duplicateElements = (
   const finalElements: ExcalidrawElement[] = [];
 
   let index = 0;
+  const selectedElementIds = arrayToMap(
+    getSelectedElements(elements, appState, true),
+  );
   while (index < elements.length) {
     const element = elements[index];
-    if (appState.selectedElementIds[element.id]) {
+    if (selectedElementIds.get(element.id)) {
       if (element.groupIds.length) {
         const groupId = getSelectedGroupForElement(appState, element);
         // if group selected, duplicate it atomically
@@ -130,7 +114,11 @@ const duplicateElements = (
     }
     index++;
   }
-
+  bindTextToShapeAfterDuplication(
+    finalElements,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
   fixBindingsAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);
 
   return {
@@ -140,7 +128,9 @@ const duplicateElements = (
         ...appState,
         selectedGroupIds: {},
         selectedElementIds: newElements.reduce((acc, element) => {
-          acc[element.id] = true;
+          if (!isBoundToContainer(element)) {
+            acc[element.id] = true;
+          }
           return acc;
         }, {} as any),
       },

src/actions/actionFlip.ts

@@ -1,6 +1,6 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
-import { getElementMap, getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
@@ -9,6 +9,7 @@ import { getTransformHandles } from "../element/transformHandles";
 import { isFreeDrawElement, isLinearElement } from "../element/typeChecks";
 import { updateBoundElements } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { arrayToMap } from "../utils";
 
 const enableActionFlipHorizontal = (
   elements: readonly ExcalidrawElement[],
@@ -83,9 +84,11 @@ const flipSelectedElements = (
     flipDirection,
   );
 
-  const updatedElementsMap = getElementMap(updatedElements);
+  const updatedElementsMap = arrayToMap(updatedElements);
 
-  return elements.map((element) => updatedElementsMap[element.id] || element);
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
+  );
 };
 
 const flipElements = (
@@ -142,10 +145,9 @@ const flipElement = (
   }
 
   if (isLinearElement(element)) {
-    for (let i = 1; i < element.points.length; i++) {
-      LinearElementEditor.movePoint(element, i, [
-        -element.points[i][0],
-        element.points[i][1],
+    for (let index = 1; index < element.points.length; index++) {
+      LinearElementEditor.movePoints(element, [
+        { index, point: [-element.points[index][0], element.points[index][1]] },
       ]);
     }
     LinearElementEditor.normalizePoints(element);

src/actions/actionGroup.tsx

@@ -1,6 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
-import { getShortcutKey } from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 import { UngroupIcon, GroupIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
@@ -17,8 +17,9 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
 import { AppState } from "../types";
+import { isBoundToContainer } from "../element/typeChecks";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
@@ -44,6 +45,7 @@ const enableActionGroup = (
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
     appState,
+    true,
   );
   return (
     selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
@@ -56,6 +58,7 @@ export const actionGroup = register({
     const selectedElements = getSelectedElements(
       getNonDeletedElements(elements),
       appState,
+      true,
     );
     if (selectedElements.length < 2) {
       // nothing to group
@@ -83,8 +86,9 @@ export const actionGroup = register({
       }
     }
     const newGroupId = randomId();
+    const selectElementIds = arrayToMap(selectedElements);
     const updatedElements = elements.map((element) => {
-      if (!appState.selectedElementIds[element.id]) {
+      if (!selectElementIds.get(element.id)) {
         return element;
       }
       return newElementWith(element, {
@@ -148,7 +152,12 @@ export const actionUngroup = register({
     if (groupIds.length === 0) {
       return { appState, elements, commitToHistory: false };
     }
+
+    const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
     const nextElements = elements.map((element) => {
+      if (isBoundToContainer(element)) {
+        boundTextElementIds.push(element.id);
+      }
       const nextGroupIds = removeFromSelectedGroups(
         element.groupIds,
         appState.selectedGroupIds,
@@ -160,11 +169,19 @@ export const actionUngroup = register({
         groupIds: nextGroupIds,
       });
     });
+
+    const updateAppState = selectGroupsForSelectedElements(
+      { ...appState, selectedGroupIds: {} },
+      getNonDeletedElements(nextElements),
+    );
+
+    // remove binded text elements from selection
+    boundTextElementIds.forEach(
+      (id) => (updateAppState.selectedElementIds[id] = false),
+    );
     return {
-      appState: selectGroupsForSelectedElements(
-        { ...appState, selectedGroupIds: {} },
-        getNonDeletedElements(nextElements),
-      ),
+      appState: updateAppState,
+
       elements: nextElements,
       commitToHistory: true,
     };

src/actions/actionHistory.tsx

@@ -6,9 +6,9 @@ import History, { HistoryEntry } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { isWindows, KEYS } from "../keys";
-import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
+import { arrayToMap } from "../utils";
 
 const writeData = (
   prevElements: readonly ExcalidrawElement[],
@@ -27,17 +27,17 @@ const writeData = (
       return { commitToHistory };
     }
 
-    const prevElementMap = getElementMap(prevElements);
+    const prevElementMap = arrayToMap(prevElements);
     const nextElements = data.elements;
-    const nextElementMap = getElementMap(nextElements);
+    const nextElementMap = arrayToMap(nextElements);
 
     const deletedElements = prevElements.filter(
-      (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
+      (prevElement) => !nextElementMap.has(prevElement.id),
     );
     const elements = nextElements
       .map((nextElement) =>
         newElementWith(
-          prevElementMap[nextElement.id] || nextElement,
+          prevElementMap.get(nextElement.id) || nextElement,
           nextElement,
         ),
       )

src/actions/actionProperties.tsx

@@ -41,8 +41,16 @@ import {
   isTextElement,
   redrawTextBoundingBox,
 } from "../element";
-import { newElementWith } from "../element/mutateElement";
-import { isLinearElement, isLinearElementType } from "../element/typeChecks";
+import { mutateElement, newElementWith } from "../element/mutateElement";
+import {
+  getBoundTextElement,
+  getContainerElement,
+} from "../element/textElement";
+import {
+  isBoundToContainer,
+  isLinearElement,
+  isLinearElementType,
+} from "../element/typeChecks";
 import {
   Arrowhead,
   ExcalidrawElement,
@@ -52,25 +60,34 @@ import {
   TextAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
+import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
   canChangeSharpness,
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
+  getSelectedElements,
   getTargetElements,
   isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
+import { arrayToMap } from "../utils";
 import { register } from "./register";
 
+const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
+
 const changeProperty = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   callback: (element: ExcalidrawElement) => ExcalidrawElement,
+  includeBoundText = false,
 ) => {
+  const selectedElementIds = arrayToMap(
+    getSelectedElements(elements, appState, includeBoundText),
+  );
   return elements.map((element) => {
     if (
-      appState.selectedElementIds[element.id] ||
+      selectedElementIds.get(element.id) ||
       element.id === appState.editingElement?.id
     ) {
       return callback(element);
@@ -100,18 +117,96 @@ const getFormValue = function <T>(
   );
 };
 
+const offsetElementAfterFontResize = (
+  prevElement: ExcalidrawTextElement,
+  nextElement: ExcalidrawTextElement,
+) => {
+  if (isBoundToContainer(nextElement)) {
+    return nextElement;
+  }
+  return mutateElement(
+    nextElement,
+    {
+      x:
+        prevElement.textAlign === "left"
+          ? prevElement.x
+          : prevElement.x +
+            (prevElement.width - nextElement.width) /
+              (prevElement.textAlign === "center" ? 2 : 1),
+      // centering vertically is non-standard, but for Excalidraw I think
+      // it makes sense
+      y: prevElement.y + (prevElement.height - nextElement.height) / 2,
+    },
+    false,
+  );
+};
+
+const changeFontSize = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+  getNewFontSize: (element: ExcalidrawTextElement) => number,
+) => {
+  const newFontSizes = new Set<number>();
+
+  return {
+    elements: changeProperty(
+      elements,
+      appState,
+      (oldElement) => {
+        if (isTextElement(oldElement)) {
+          const newFontSize = getNewFontSize(oldElement);
+          newFontSizes.add(newFontSize);
+
+          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
+            fontSize: newFontSize,
+          });
+          redrawTextBoundingBox(
+            newElement,
+            getContainerElement(oldElement),
+            appState,
+          );
+
+          newElement = offsetElementAfterFontResize(oldElement, newElement);
+
+          return newElement;
+        }
+
+        return oldElement;
+      },
+      true,
+    ),
+    appState: {
+      ...appState,
+      // update state only if we've set all select text elements to
+      // the same font size
+      currentItemFontSize:
+        newFontSizes.size === 1
+          ? [...newFontSizes][0]
+          : appState.currentItemFontSize,
+    },
+    commitToHistory: true,
+  };
+};
+
+// -----------------------------------------------------------------------------
+
 export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   perform: (elements, appState, value) => {
     return {
       ...(value.currentItemStrokeColor && {
-        elements: changeProperty(elements, appState, (el) => {
-          return hasStrokeColor(el.type)
-            ? newElementWith(el, {
-                strokeColor: value.currentItemStrokeColor,
-              })
-            : el;
-        }),
+        elements: changeProperty(
+          elements,
+          appState,
+          (el) => {
+            return hasStrokeColor(el.type)
+              ? newElementWith(el, {
+                  strokeColor: value.currentItemStrokeColor,
+                })
+              : el;
+          },
+          true,
+        ),
       }),
       appState: {
         ...appState,
@@ -425,24 +520,7 @@ export const actionChangeOpacity = register({
 export const actionChangeFontSize = register({
   name: "changeFontSize",
   perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (isTextElement(el)) {
-          const element: ExcalidrawTextElement = newElementWith(el, {
-            fontSize: value,
-          });
-          redrawTextBoundingBox(element);
-          return element;
-        }
-
-        return el;
-      }),
-      appState: {
-        ...appState,
-        currentItemFontSize: value,
-      },
-      commitToHistory: true,
-    };
+    return changeFontSize(elements, appState, () => value);
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <fieldset>
@@ -474,7 +552,16 @@ export const actionChangeFontSize = register({
         value={getFormValue(
           elements,
           appState,
-          (element) => isTextElement(element) && element.fontSize,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.fontSize;
+            }
+            const boundTextElement = getBoundTextElement(element);
+            if (boundTextElement) {
+              return boundTextElement.fontSize;
+            }
+            return null;
+          },
           appState.currentItemFontSize || DEFAULT_FONT_SIZE,
         )}
         onChange={(value) => updateData(value)}
@@ -483,21 +570,71 @@ export const actionChangeFontSize = register({
   ),
 });
 
+export const actionDecreaseFontSize = register({
+  name: "decreaseFontSize",
+  perform: (elements, appState, value) => {
+    return changeFontSize(elements, appState, (element) =>
+      Math.round(
+        // get previous value before relative increase (doesn't work fully
+        // due to rounding and float precision issues)
+        (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize,
+      ),
+    );
+  },
+  keyTest: (event) => {
+    return (
+      event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      // KEYS.COMMA needed for MacOS
+      (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA)
+    );
+  },
+});
+
+export const actionIncreaseFontSize = register({
+  name: "increaseFontSize",
+  perform: (elements, appState, value) => {
+    return changeFontSize(elements, appState, (element) =>
+      Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
+    );
+  },
+  keyTest: (event) => {
+    return (
+      event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      // KEYS.PERIOD needed for MacOS
+      (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD)
+    );
+  },
+});
+
 export const actionChangeFontFamily = register({
   name: "changeFontFamily",
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (isTextElement(el)) {
-          const element: ExcalidrawTextElement = newElementWith(el, {
-            fontFamily: value,
-          });
-          redrawTextBoundingBox(element);
-          return element;
-        }
+      elements: changeProperty(
+        elements,
+        appState,
+        (oldElement) => {
+          if (isTextElement(oldElement)) {
+            const newElement: ExcalidrawTextElement = newElementWith(
+              oldElement,
+              {
+                fontFamily: value,
+              },
+            );
+            redrawTextBoundingBox(
+              newElement,
+              getContainerElement(oldElement),
+              appState,
+            );
+            return newElement;
+          }
 
-        return el;
-      }),
+          return oldElement;
+        },
+        true,
+      ),
       appState: {
         ...appState,
         currentItemFontFamily: value,
@@ -537,7 +674,16 @@ export const actionChangeFontFamily = register({
           value={getFormValue(
             elements,
             appState,
-            (element) => isTextElement(element) && element.fontFamily,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.fontFamily;
+              }
+              const boundTextElement = getBoundTextElement(element);
+              if (boundTextElement) {
+                return boundTextElement.fontFamily;
+              }
+              return null;
+            },
             appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
           )}
           onChange={(value) => updateData(value)}
@@ -551,17 +697,29 @@ export const actionChangeTextAlign = register({
   name: "changeTextAlign",
   perform: (elements, appState, value) => {
     return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (isTextElement(el)) {
-          const element: ExcalidrawTextElement = newElementWith(el, {
-            textAlign: value,
-          });
-          redrawTextBoundingBox(element);
-          return element;
-        }
+      elements: changeProperty(
+        elements,
+        appState,
+        (oldElement) => {
+          if (isTextElement(oldElement)) {
+            const newElement: ExcalidrawTextElement = newElementWith(
+              oldElement,
+              {
+                textAlign: value,
+              },
+            );
+            redrawTextBoundingBox(
+              newElement,
+              getContainerElement(oldElement),
+              appState,
+            );
+            return newElement;
+          }
 
-        return el;
-      }),
+          return oldElement;
+        },
+        true,
+      ),
       appState: {
         ...appState,
         currentItemTextAlign: value,
@@ -594,7 +752,16 @@ export const actionChangeTextAlign = register({
         value={getFormValue(
           elements,
           appState,
-          (element) => isTextElement(element) && element.textAlign,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.textAlign;
+            }
+            const boundTextElement = getBoundTextElement(element);
+            if (boundTextElement) {
+              return boundTextElement.textAlign;
+            }
+            return null;
+          },
           appState.currentItemTextAlign,
         )}
         onChange={(value) => updateData(value)}

src/actions/actionSelectAll.ts

@@ -1,7 +1,7 @@
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
-import { getNonDeletedElements } from "../element";
+import { getNonDeletedElements, isTextElement } from "../element";
 
 export const actionSelectAll = register({
   name: "selectAll",
@@ -15,7 +15,10 @@ export const actionSelectAll = register({
           ...appState,
           editingGroupId: null,
           selectedElementIds: elements.reduce((map, element) => {
-            if (!element.isDeleted) {
+            if (
+              !element.isDeleted &&
+              !(isTextElement(element) && element.containerId)
+            ) {
               map[element.id] = true;
             }
             return map;

src/actions/actionStyles.ts

@@ -12,6 +12,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
+import { getContainerElement } from "../element/textElement";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -55,13 +56,18 @@ export const actionPasteStyles = register({
             opacity: pastedElement?.opacity,
             roughness: pastedElement?.roughness,
           });
-          if (isTextElement(newElement)) {
+          if (isTextElement(newElement) && isTextElement(element)) {
             mutateElement(newElement, {
               fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
               fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
               textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
             });
-            redrawTextBoundingBox(newElement);
+
+            redrawTextBoundingBox(
+              element,
+              getContainerElement(element),
+              appState,
+            );
           }
           return newElement;
         }

src/actions/types.ts

@@ -101,7 +101,9 @@ export type ActionName =
   | "flipVertical"
   | "viewMode"
   | "exportWithDarkMode"
-  | "toggleTheme";
+  | "toggleTheme"
+  | "increaseFontSize"
+  | "decreaseFontSize";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/align.ts

@@ -1,6 +1,7 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
 import { Box, getCommonBoundingBox } from "./element/bounds";
+import { getMaximumGroups } from "./groups";
 
 export interface Alignment {
   position: "start" | "center" | "end";
@@ -30,28 +31,6 @@ export const alignElements = (
   });
 };
 
-export const getMaximumGroups = (
-  elements: ExcalidrawElement[],
-): ExcalidrawElement[][] => {
-  const groups: Map<String, ExcalidrawElement[]> = new Map<
-    String,
-    ExcalidrawElement[]
-  >();
-
-  elements.forEach((element: ExcalidrawElement) => {
-    const groupId =
-      element.groupIds.length === 0
-        ? element.id
-        : element.groupIds[element.groupIds.length - 1];
-
-    const currentGroupMembers = groups.get(groupId) || [];
-
-    groups.set(groupId, [...currentGroupMembers, element]);
-  });
-
-  return Array.from(groups.values());
-};
-
 const calculateTranslation = (
   group: ExcalidrawElement[],
   selectionBoundingBox: Box,

src/clipboard.ts

@@ -58,7 +58,8 @@ export const copyToClipboard = async (
   appState: AppState,
   files: BinaryFiles,
 ) => {
-  const selectedElements = getSelectedElements(elements, appState);
+  // select binded text elements when copying
+  const selectedElements = getSelectedElements(elements, appState, true);
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
     elements: selectedElements,

src/components/App.tsx

@@ -43,8 +43,7 @@ import {
 import {
   APP_NAME,
   CURSOR_TYPE,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_JPG,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_OTHER,
+  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD,
@@ -73,7 +72,12 @@ import {
 import { loadFromBlob } from "../data";
 import { isValidLibrary } from "../data/json";
 import Library from "../data/library";
-import { restore, restoreElements, restoreLibraryItems } from "../data/restore";
+import {
+  restore,
+  restoreAppState,
+  restoreElements,
+  restoreLibraryItems,
+} from "../data/restore";
 import {
   dragNewElement,
   dragSelectedElements,
@@ -121,8 +125,10 @@ import {
 } from "../element/mutateElement";
 import { deepCopyElement, newFreeDrawElement } from "../element/newElement";
 import {
+  hasBoundTextElement,
   isBindingElement,
   isBindingElementType,
+  isBoundToContainer,
   isImageElement,
   isInitializedImageElement,
   isLinearElement,
@@ -175,7 +181,7 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import Scene from "../scene/Scene";
-import { SceneState, ScrollBars } from "../scene/types";
+import { RenderConfig, ScrollBars } from "../scene/types";
 import { getNewZoom } from "../scene/zoom";
 import { findShapeByKey } from "../shapes";
 import {
@@ -195,6 +201,7 @@ import {
 import {
   debounce,
   distance,
+  getFontString,
   getNearestScrollableContainer,
   isInputLike,
   isToolIcon,
@@ -223,13 +230,19 @@ import {
 } from "../data/blob";
 import {
   getInitializedImageElements,
-  hasTransparentPixels,
   loadHTMLImageElement,
   normalizeSVG,
   updateImageCache as _updateImageCache,
 } from "../element/image";
 import throttle from "lodash.throttle";
 import { fileOpen, nativeFileSystemSupported } from "../data/filesystem";
+import {
+  bindTextToShapeAfterDuplication,
+  getApproxMinLineHeight,
+  getApproxMinLineWidth,
+  getBoundTextElementId,
+} from "../element/textElement";
+import { isHittingElementNotConsideringBoundingBox } from "../element/collision";
 
 const IsMobileContext = React.createContext(false);
 export const useIsMobile = () => useContext(IsMobileContext);
@@ -910,8 +923,16 @@ class App extends React.Component<AppProps, AppState> {
     window.removeEventListener(EVENT.RESIZE, this.onResize, false);
     window.removeEventListener(EVENT.UNLOAD, this.onUnload, false);
     window.removeEventListener(EVENT.BLUR, this.onBlur, false);
-    window.removeEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-    window.removeEventListener(EVENT.DROP, this.disableEvent, false);
+    this.excalidrawContainerRef.current?.removeEventListener(
+      EVENT.DRAG_OVER,
+      this.disableEvent,
+      false,
+    );
+    this.excalidrawContainerRef.current?.removeEventListener(
+      EVENT.DROP,
+      this.disableEvent,
+      false,
+    );
 
     document.removeEventListener(
       EVENT.GESTURE_START,
@@ -980,8 +1001,16 @@ class App extends React.Component<AppProps, AppState> {
     window.addEventListener(EVENT.RESIZE, this.onResize, false);
     window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
     window.addEventListener(EVENT.BLUR, this.onBlur, false);
-    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-    window.addEventListener(EVENT.DROP, this.disableEvent, false);
+    this.excalidrawContainerRef.current?.addEventListener(
+      EVENT.DRAG_OVER,
+      this.disableEvent,
+      false,
+    );
+    this.excalidrawContainerRef.current?.addEventListener(
+      EVENT.DROP,
+      this.disableEvent,
+      false,
+    );
   }
 
   componentDidUpdate(prevProps: AppProps, prevState: AppState) {
@@ -1055,8 +1084,10 @@ class App extends React.Component<AppProps, AppState> {
     const cursorButton: {
       [id: string]: string | undefined;
     } = {};
-    const pointerViewportCoords: SceneState["remotePointerViewportCoords"] = {};
-    const remoteSelectedElementIds: SceneState["remoteSelectedElementIds"] = {};
+    const pointerViewportCoords: RenderConfig["remotePointerViewportCoords"] =
+      {};
+    const remoteSelectedElementIds: RenderConfig["remoteSelectedElementIds"] =
+      {};
     const pointerUsernames: { [id: string]: string } = {};
     const pointerUserStates: { [id: string]: string } = {};
     this.state.collaborators.forEach((user, socketId) => {
@@ -1124,9 +1155,7 @@ class App extends React.Component<AppProps, AppState> {
         shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
         theme: this.state.theme,
         imageCache: this.imageCache,
-      },
-      {
-        renderOptimizations: true,
+        isExporting: false,
         renderScrollbars: !this.isMobile,
       },
     );
@@ -1135,7 +1164,7 @@ class App extends React.Component<AppProps, AppState> {
     }
     const scrolledOutside =
       // hide when editing text
-      this.state.editingElement?.type === "text"
+      isTextElement(this.state.editingElement)
         ? false
         : !atLeastOneVisibleElement && renderingElements.length > 0;
     if (this.state.scrolledOutside !== scrolledOutside) {
@@ -1282,7 +1311,8 @@ class App extends React.Component<AppProps, AppState> {
         }
       }
 
-      if (isSupportedImageFile(file)) {
+      // prefer spreadsheet data over image file (MS Office/Libre Office)
+      if (isSupportedImageFile(file) && !data.spreadsheet) {
         const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
           { clientX: cursorX, clientY: cursorY },
           this.state,
@@ -1377,6 +1407,7 @@ class App extends React.Component<AppProps, AppState> {
       oldIdToDuplicatedId.set(element.id, newElement.id);
       return newElement;
     });
+    bindTextToShapeAfterDuplication(newElements, elements, oldIdToDuplicatedId);
     const nextElements = [
       ...this.scene.getElementsIncludingDeleted(),
       ...newElements,
@@ -1395,7 +1426,9 @@ class App extends React.Component<AppProps, AppState> {
           ...this.state,
           isLibraryOpen: false,
           selectedElementIds: newElements.reduce((map, element) => {
-            map[element.id] = true;
+            if (!isBoundToContainer(element)) {
+              map[element.id] = true;
+            }
             return map;
           }, {} as any),
           selectedGroupIds: {},
@@ -1555,22 +1588,31 @@ class App extends React.Component<AppProps, AppState> {
       appState?: Pick<AppState, K> | null;
       collaborators?: SceneData["collaborators"];
       commitToHistory?: SceneData["commitToHistory"];
+      libraryItems?: SceneData["libraryItems"];
     }) => {
       if (sceneData.commitToHistory) {
         this.history.resumeRecording();
       }
 
       if (sceneData.appState) {
-        this.setState(sceneData.appState);
+        this.setState(restoreAppState(sceneData.appState, null));
       }
 
       if (sceneData.elements) {
-        this.scene.replaceAllElements(sceneData.elements);
+        this.scene.replaceAllElements(
+          restoreElements(sceneData.elements, null),
+        );
       }
 
       if (sceneData.collaborators) {
         this.setState({ collaborators: sceneData.collaborators });
       }
+
+      if (sceneData.libraryItems) {
+        this.library.saveLibrary(
+          restoreLibraryItems(sceneData.libraryItems, "unpublished"),
+        );
+      }
     },
   );
 
@@ -1614,7 +1656,10 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
-        (isWritableElement(event.target) && event.key !== KEYS.ESCAPE) ||
+        (isWritableElement(event.target) &&
+          event.key !== KEYS.ESCAPE &&
+          // handle cmd/ctrl-modifier shortcuts even inside inputs
+          !event[KEYS.CTRL_OR_CMD]) ||
         // case: using arrows to move between buttons
         (isArrowKey(event.key) && isInputLike(event.target))
       ) {
@@ -1653,9 +1698,11 @@ class App extends React.Component<AppProps, AppState> {
             ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
             : ELEMENT_TRANSLATE_AMOUNT);
 
-        const selectedElements = this.scene
-          .getElements()
-          .filter((element) => this.state.selectedElementIds[element.id]);
+        const selectedElements = getSelectedElements(
+          this.scene.getElements(),
+          this.state,
+          true,
+        );
 
         let offsetX = 0;
         let offsetY = 0;
@@ -1711,9 +1758,11 @@ class App extends React.Component<AppProps, AppState> {
           !isLinearElement(selectedElements[0])
         ) {
           const selectedElement = selectedElements[0];
+
           this.startTextEditing({
             sceneX: selectedElement.x + selectedElement.width / 2,
             sceneY: selectedElement.y + selectedElement.height / 2,
+            shouldBind: true,
           });
           event.preventDefault();
           return;
@@ -1734,6 +1783,7 @@ class App extends React.Component<AppProps, AppState> {
       if (event.key === KEYS.SPACE && gesture.pointers.size === 0) {
         isHoldingSpace = true;
         setCursor(this.canvas, CURSOR_TYPE.GRABBING);
+        event.preventDefault();
       }
 
       if (event.key === KEYS.G || event.key === KEYS.S) {
@@ -1868,14 +1918,24 @@ class App extends React.Component<AppProps, AppState> {
       isExistingElement?: boolean;
     },
   ) {
-    const updateElement = (text: string, isDeleted = false) => {
+    const updateElement = (
+      text: string,
+      originalText: string,
+      isDeleted: boolean,
+      isSubmit: boolean,
+    ) => {
       this.scene.replaceAllElements([
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement(_element)) {
-            return updateTextElement(_element, {
-              text,
-              isDeleted,
-            });
+            return updateTextElement(
+              _element,
+              {
+                text,
+                isDeleted,
+                originalText,
+              },
+              isSubmit,
+            );
           }
           return _element;
         }),
@@ -1900,21 +1960,24 @@ class App extends React.Component<AppProps, AppState> {
         ];
       },
       onChange: withBatchedUpdates((text) => {
-        updateElement(text);
+        updateElement(text, text, false, false);
         if (isNonDeletedElement(element)) {
           updateBoundElements(element);
         }
       }),
-      onSubmit: withBatchedUpdates(({ text, viaKeyboard }) => {
+      onSubmit: withBatchedUpdates(({ text, viaKeyboard, originalText }) => {
         const isDeleted = !text.trim();
-        updateElement(text, isDeleted);
+        updateElement(text, originalText, isDeleted, true);
         // select the created text element only if submitting via keyboard
         // (when submitting via click it should act as signal to deselect)
         if (!isDeleted && viaKeyboard) {
+          const elementIdToSelect = element.containerId
+            ? element.containerId
+            : element.id;
           this.setState((prevState) => ({
             selectedElementIds: {
               ...prevState.selectedElementIds,
-              [element.id]: true,
+              [elementIdToSelect]: true,
             },
           }));
         }
@@ -1943,7 +2006,7 @@ class App extends React.Component<AppProps, AppState> {
 
     // do an initial update to re-initialize element position since we were
     // modifying element's x/y for sake of editor (case: syncing to remote)
-    updateElement(element.text);
+    updateElement(element.text, element.originalText, false, false);
   }
 
   private deselectElements() {
@@ -1958,7 +2021,9 @@ class App extends React.Component<AppProps, AppState> {
     x: number,
     y: number,
   ): NonDeleted<ExcalidrawTextElement> | null {
-    const element = this.getElementAtPosition(x, y);
+    const element = this.getElementAtPosition(x, y, {
+      includeBoundTextElement: true,
+    });
 
     if (element && isTextElement(element) && !element.isDeleted) {
       return element;
@@ -1973,9 +2038,14 @@ class App extends React.Component<AppProps, AppState> {
       /** if true, returns the first selected element (with highest z-index)
         of all hit elements */
       preferSelected?: boolean;
+      includeBoundTextElement?: boolean;
     },
   ): NonDeleted<ExcalidrawElement> | null {
-    const allHitElements = this.getElementsAtPosition(x, y);
+    const allHitElements = this.getElementsAtPosition(
+      x,
+      y,
+      opts?.includeBoundTextElement,
+    );
     if (allHitElements.length > 1) {
       if (opts?.preferSelected) {
         for (let index = allHitElements.length - 1; index > -1; index--) {
@@ -2006,8 +2076,16 @@ class App extends React.Component<AppProps, AppState> {
   private getElementsAtPosition(
     x: number,
     y: number,
+    includeBoundTextElement: boolean = false,
   ): NonDeleted<ExcalidrawElement>[] {
-    return getElementsAtPosition(this.scene.getElements(), (element) =>
+    const elements = includeBoundTextElement
+      ? this.scene.getElements()
+      : this.scene
+          .getElements()
+          .filter(
+            (element) => !(isTextElement(element) && element.containerId),
+          );
+    return getElementsAtPosition(elements, (element) =>
       hitTest(element, this.state, x, y),
     );
   }
@@ -2015,18 +2093,18 @@ class App extends React.Component<AppProps, AppState> {
   private startTextEditing = ({
     sceneX,
     sceneY,
+    shouldBind,
     insertAtParentCenter = true,
   }: {
     /** X position to insert text at */
     sceneX: number;
     /** Y position to insert text at */
     sceneY: number;
+    shouldBind: boolean;
     /** whether to attempt to insert at element center if applicable */
     insertAtParentCenter?: boolean;
   }) => {
-    const existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
-
-    const parentCenterPosition =
+    let parentCenterPosition =
       insertAtParentCenter &&
       this.getTextWysiwygSnappedToCenterPosition(
         sceneX,
@@ -2036,6 +2114,51 @@ class App extends React.Component<AppProps, AppState> {
         window.devicePixelRatio,
       );
 
+    // bind to container when shouldBind is true or
+    // clicked on center of container
+    const container =
+      shouldBind || parentCenterPosition
+        ? getElementContainingPosition(
+            this.scene.getElements().filter((ele) => !isTextElement(ele)),
+            sceneX,
+            sceneY,
+          )
+        : null;
+
+    let existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
+
+    // consider bounded text element if container present
+    if (container) {
+      const boundTextElementId = getBoundTextElementId(container);
+      if (boundTextElementId) {
+        existingTextElement = this.scene.getElement(
+          boundTextElementId,
+        ) as ExcalidrawTextElement;
+      }
+    }
+    if (!existingTextElement && container) {
+      const fontString = {
+        fontSize: this.state.currentItemFontSize,
+        fontFamily: this.state.currentItemFontFamily,
+      };
+      const minWidth = getApproxMinLineWidth(getFontString(fontString));
+      const minHeight = getApproxMinLineHeight(getFontString(fontString));
+      const newHeight = Math.max(container.height, minHeight);
+      const newWidth = Math.max(container.width, minWidth);
+      mutateElement(container, { height: newHeight, width: newWidth });
+      sceneX = container.x + newWidth / 2;
+      sceneY = container.y + newHeight / 2;
+      if (parentCenterPosition) {
+        parentCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
+          sceneX,
+          sceneY,
+          this.state,
+          this.canvas,
+          window.devicePixelRatio,
+        );
+      }
+    }
+
     const element = existingTextElement
       ? existingTextElement
       : newTextElement({
@@ -2062,6 +2185,8 @@ class App extends React.Component<AppProps, AppState> {
           verticalAlign: parentCenterPosition
             ? "middle"
             : DEFAULT_VERTICAL_ALIGN,
+          containerId: container?.id ?? undefined,
+          groupIds: container?.groupIds ?? [],
         });
 
     this.setState({ editingElement: element });
@@ -2132,7 +2257,7 @@ class App extends React.Component<AppProps, AppState> {
 
     resetCursor(this.canvas);
 
-    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+    let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
       event,
       this.state,
     );
@@ -2164,9 +2289,22 @@ class App extends React.Component<AppProps, AppState> {
 
     resetCursor(this.canvas);
     if (!event[KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
+      const selectedElements = getSelectedElements(
+        this.scene.getElements(),
+        this.state,
+      );
+      if (selectedElements.length === 1) {
+        const selectedElement = selectedElements[0];
+        const canBindText = hasBoundTextElement(selectedElement);
+        if (canBindText) {
+          sceneX = selectedElement.x + selectedElement.width / 2;
+          sceneY = selectedElement.y + selectedElement.height / 2;
+        }
+      }
       this.startTextEditing({
         sceneX,
         sceneY,
+        shouldBind: false,
         insertAtParentCenter: !event.altKey,
       });
     }
@@ -2265,10 +2403,9 @@ class App extends React.Component<AppProps, AppState> {
       // and point
       const { draggingElement } = this.state;
       if (isBindingElement(draggingElement)) {
-        this.maybeSuggestBindingForLinearElementAtCursor(
+        this.maybeSuggestBindingsForLinearElementAtCoords(
           draggingElement,
-          "end",
-          scenePointer,
+          [scenePointer],
           this.state.startBoundElement,
         );
       } else {
@@ -2401,6 +2538,21 @@ class App extends React.Component<AppProps, AppState> {
       setCursor(this.canvas, CURSOR_TYPE.GRAB);
     } else if (isOverScrollBar) {
       setCursor(this.canvas, CURSOR_TYPE.AUTO);
+    } else if (this.state.editingLinearElement) {
+      const element = LinearElementEditor.getElement(
+        this.state.editingLinearElement.elementId,
+      );
+      if (
+        element &&
+        isHittingElementNotConsideringBoundingBox(element, this.state, [
+          scenePointer.x,
+          scenePointer.y,
+        ])
+      ) {
+        setCursor(this.canvas, CURSOR_TYPE.MOVE);
+      } else {
+        setCursor(this.canvas, CURSOR_TYPE.AUTO);
+      }
     } else if (
       // if using cmd/ctrl, we're not dragging
       !event[KEYS.CTRL_OR_CMD] &&
@@ -2593,11 +2745,13 @@ class App extends React.Component<AppProps, AppState> {
         (event.button === POINTER_BUTTON.WHEEL ||
           (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
           this.state.viewModeEnabled)
-      )
+      ) ||
+      isTextElement(this.state.editingElement)
     ) {
       return false;
     }
     isPanning = true;
+    event.preventDefault();
 
     let nextPastePrevented = false;
     const isLinux = /Linux/.test(window.navigator.platform);
@@ -2738,6 +2892,7 @@ class App extends React.Component<AppProps, AppState> {
             origin,
             selectedElements,
           ),
+        hasHitElementInside: false,
       },
       drag: {
         hasOccurred: false,
@@ -2749,6 +2904,9 @@ class App extends React.Component<AppProps, AppState> {
         onKeyUp: null,
         onKeyDown: null,
       },
+      boxSelection: {
+        hasOccurred: false,
+      },
     };
   }
 
@@ -2890,6 +3048,15 @@ class App extends React.Component<AppProps, AppState> {
             pointerDownState.origin.y,
           );
 
+        if (pointerDownState.hit.element) {
+          pointerDownState.hit.hasHitElementInside =
+            isHittingElementNotConsideringBoundingBox(
+              pointerDownState.hit.element,
+              this.state,
+              [pointerDownState.origin.x, pointerDownState.origin.y],
+            );
+        }
+
         // For overlapped elements one position may hit
         // multiple elements
         pointerDownState.hit.allHitElements = this.getElementsAtPosition(
@@ -2910,8 +3077,14 @@ class App extends React.Component<AppProps, AppState> {
           this.clearSelection(hitElement);
         }
 
-        // If we click on something
-        if (hitElement != null) {
+        if (this.state.editingLinearElement) {
+          this.setState({
+            selectedElementIds: {
+              [this.state.editingLinearElement.elementId]: true,
+            },
+          });
+          // If we click on something
+        } else if (hitElement != null) {
           // on CMD/CTRL, drill down to hit element regardless of groups etc.
           if (event[KEYS.CTRL_OR_CMD]) {
             if (!this.state.selectedElementIds[hitElement.id]) {
@@ -3004,13 +3177,25 @@ class App extends React.Component<AppProps, AppState> {
     // if we're currently still editing text, clicking outside
     // should only finalize it, not create another (irrespective
     // of state.elementLocked)
-    if (this.state.editingElement?.type === "text") {
+    if (isTextElement(this.state.editingElement)) {
       return;
     }
+    let sceneX = pointerDownState.origin.x;
+    let sceneY = pointerDownState.origin.y;
 
+    const element = this.getElementAtPosition(sceneX, sceneY, {
+      includeBoundTextElement: true,
+    });
+
+    const canBindText = hasBoundTextElement(element);
+    if (canBindText) {
+      sceneX = element.x + element.width / 2;
+      sceneY = element.y + element.height / 2;
+    }
     this.startTextEditing({
-      sceneX: pointerDownState.origin.x,
-      sceneY: pointerDownState.origin.y,
+      sceneX,
+      sceneY,
+      shouldBind: false,
       insertAtParentCenter: !event.altKey,
     });
 
@@ -3350,11 +3535,10 @@ class App extends React.Component<AppProps, AppState> {
           (appState) => this.setState(appState),
           pointerCoords.x,
           pointerCoords.y,
-          (element, startOrEnd) => {
-            this.maybeSuggestBindingForLinearElementAtCursor(
+          (element, pointsSceneCoords) => {
+            this.maybeSuggestBindingsForLinearElementAtCoords(
               element,
-              startOrEnd,
-              pointerCoords,
+              pointsSceneCoords,
             );
           },
         );
@@ -3371,8 +3555,16 @@ class App extends React.Component<AppProps, AppState> {
       );
 
       if (
-        hasHitASelectedElement ||
-        pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements
+        (hasHitASelectedElement ||
+          pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) &&
+        // this allows for box-selecting points when clicking inside the
+        // line's bounding box
+        (!this.state.editingLinearElement || !event.shiftKey) &&
+        // box-selecting without shift when editing line, not clicking on a line
+        (!this.state.editingLinearElement ||
+          this.state.editingLinearElement?.elementId !==
+            pointerDownState.hit.element?.id ||
+          pointerDownState.hit.hasHitElementInside)
       ) {
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
@@ -3403,10 +3595,10 @@ class App extends React.Component<AppProps, AppState> {
             selectedElements,
             dragX,
             dragY,
-            this.scene,
             lockDirection,
             dragDistanceX,
             dragDistanceY,
+            this.state,
           );
           this.maybeSuggestBindingForAll(selectedElements);
 
@@ -3423,9 +3615,15 @@ class App extends React.Component<AppProps, AppState> {
             const groupIdMap = new Map();
             const oldIdToDuplicatedId = new Map();
             const hitElement = pointerDownState.hit.element;
-            for (const element of this.scene.getElementsIncludingDeleted()) {
+            const elements = this.scene.getElementsIncludingDeleted();
+            const selectedElementIds: Array<ExcalidrawElement["id"]> =
+              getSelectedElements(elements, this.state, true).map(
+                (element) => element.id,
+              );
+
+            for (const element of elements) {
               if (
-                this.state.selectedElementIds[element.id] ||
+                selectedElementIds.includes(element.id) ||
                 // case: the state.selectedElementIds might not have been
                 // updated yet by the time this mousemove event is fired
                 (element.id === hitElement?.id &&
@@ -3453,6 +3651,11 @@ class App extends React.Component<AppProps, AppState> {
               }
             }
             const nextSceneElements = [...nextElements, ...elementsToAppend];
+            bindTextToShapeAfterDuplication(
+              nextElements,
+              elementsToAppend,
+              oldIdToDuplicatedId,
+            );
             fixBindingsAfterDuplication(
               nextSceneElements,
               elementsToAppend,
@@ -3509,10 +3712,9 @@ class App extends React.Component<AppProps, AppState> {
 
         if (isBindingElement(draggingElement)) {
           // When creating a linear element by dragging
-          this.maybeSuggestBindingForLinearElementAtCursor(
+          this.maybeSuggestBindingsForLinearElementAtCoords(
             draggingElement,
-            "end",
-            pointerCoords,
+            [pointerCoords],
             this.state.startBoundElement,
           );
         }
@@ -3523,8 +3725,15 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (this.state.elementType === "selection") {
+        pointerDownState.boxSelection.hasOccurred = true;
+
         const elements = this.scene.getElements();
-        if (!event.shiftKey && isSomeElementSelected(elements, this.state)) {
+        if (
+          !event.shiftKey &&
+          // allows for box-selecting points (without shift)
+          !this.state.editingLinearElement &&
+          isSomeElementSelected(elements, this.state)
+        ) {
           if (pointerDownState.withCmdOrCtrl && pointerDownState.hit.element) {
             this.setState((prevState) =>
               selectGroupsForSelectedElements(
@@ -3545,33 +3754,43 @@ class App extends React.Component<AppProps, AppState> {
             });
           }
         }
-        const elementsWithinSelection = getElementsWithinSelection(
-          elements,
-          draggingElement,
-        );
-        this.setState((prevState) =>
-          selectGroupsForSelectedElements(
-            {
-              ...prevState,
-              selectedElementIds: {
-                ...prevState.selectedElementIds,
-                ...elementsWithinSelection.reduce((map, element) => {
-                  map[element.id] = true;
-                  return map;
-                }, {} as any),
-                ...(pointerDownState.hit.element
-                  ? {
-                      // if using ctrl/cmd, select the hitElement only if we
-                      // haven't box-selected anything else
-                      [pointerDownState.hit.element.id]:
-                        !elementsWithinSelection.length,
-                    }
-                  : null),
+        // box-select line editor points
+        if (this.state.editingLinearElement) {
+          LinearElementEditor.handleBoxSelection(
+            event,
+            this.state,
+            this.setState.bind(this),
+          );
+          // regular box-select
+        } else {
+          const elementsWithinSelection = getElementsWithinSelection(
+            elements,
+            draggingElement,
+          );
+          this.setState((prevState) =>
+            selectGroupsForSelectedElements(
+              {
+                ...prevState,
+                selectedElementIds: {
+                  ...prevState.selectedElementIds,
+                  ...elementsWithinSelection.reduce((map, element) => {
+                    map[element.id] = true;
+                    return map;
+                  }, {} as any),
+                  ...(pointerDownState.hit.element
+                    ? {
+                        // if using ctrl/cmd, select the hitElement only if we
+                        // haven't box-selected anything else
+                        [pointerDownState.hit.element.id]:
+                          !elementsWithinSelection.length,
+                      }
+                    : null),
+                },
               },
-            },
-            this.scene.getElements(),
-          ),
-        );
+              this.scene.getElements(),
+            ),
+          );
+        }
       }
     });
   }
@@ -3636,16 +3855,25 @@ class App extends React.Component<AppProps, AppState> {
       // Handle end of dragging a point of a linear element, might close a loop
       // and sets binding element
       if (this.state.editingLinearElement) {
-        const editingLinearElement = LinearElementEditor.handlePointerUp(
-          childEvent,
-          this.state.editingLinearElement,
-          this.state,
-        );
-        if (editingLinearElement !== this.state.editingLinearElement) {
-          this.setState({
-            editingLinearElement,
-            suggestedBindings: [],
-          });
+        if (
+          !pointerDownState.boxSelection.hasOccurred &&
+          (pointerDownState.hit?.element?.id !==
+            this.state.editingLinearElement.elementId ||
+            !pointerDownState.hit.hasHitElementInside)
+        ) {
+          this.actionManager.executeAction(actionFinalize);
+        } else {
+          const editingLinearElement = LinearElementEditor.handlePointerUp(
+            childEvent,
+            this.state.editingLinearElement,
+            this.state,
+          );
+          if (editingLinearElement !== this.state.editingLinearElement) {
+            this.setState({
+              editingLinearElement,
+              suggestedBindings: [],
+            });
+          }
         }
       }
 
@@ -3827,9 +4055,14 @@ class App extends React.Component<AppProps, AppState> {
       if (
         hitElement &&
         !pointerDownState.drag.hasOccurred &&
-        !pointerDownState.hit.wasAddedToSelection
+        !pointerDownState.hit.wasAddedToSelection &&
+        // if we're editing a line, pointerup shouldn't switch selection if
+        // box selected
+        (!this.state.editingLinearElement ||
+          !pointerDownState.boxSelection.hasOccurred)
       ) {
-        if (childEvent.shiftKey) {
+        // when inside line editor, shift selects points instead
+        if (childEvent.shiftKey && !this.state.editingLinearElement) {
           if (this.state.selectedElementIds[hitElement.id]) {
             if (isSelectedViaGroup(this.state, hitElement)) {
               // We want to unselect all groups hitElement is part of
@@ -3873,6 +4106,7 @@ class App extends React.Component<AppProps, AppState> {
           } else {
             // add element to selection while
             // keeping prev elements selected
+
             this.setState((_prevState) => ({
               selectedElementIds: {
                 ..._prevState.selectedElementIds,
@@ -4003,30 +4237,19 @@ class App extends React.Component<AppProps, AppState> {
     const existingFileData = this.files[fileId];
     if (!existingFileData?.dataURL) {
       try {
-        if (!(await hasTransparentPixels(imageFile))) {
-          const _imageFile = await resizeImageFile(imageFile, {
-            maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_JPG,
-            outputType: MIME_TYPES.jpg,
-          });
-          if (_imageFile.size > MAX_ALLOWED_FILE_BYTES) {
-            imageFile = await resizeImageFile(imageFile, {
-              maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_OTHER,
-              outputType: MIME_TYPES.jpg,
-            });
-          } else {
-            imageFile = _imageFile;
-          }
-        } else {
-          imageFile = await resizeImageFile(imageFile, {
-            maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_OTHER,
-          });
-        }
+        imageFile = await resizeImageFile(imageFile, {
+          maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
+        });
       } catch (error: any) {
         console.error("error trying to resing image file on insertion", error);
       }
 
       if (imageFile.size > MAX_ALLOWED_FILE_BYTES) {
-        throw new Error(t("errors.fileTooBig"));
+        throw new Error(
+          t("errors.fileTooBig", {
+            maxSize: `${Math.trunc(MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`,
+          }),
+        );
       }
     }
 
@@ -4365,32 +4588,43 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
-  private maybeSuggestBindingForLinearElementAtCursor = (
+  private maybeSuggestBindingsForLinearElementAtCoords = (
     linearElement: NonDeleted<ExcalidrawLinearElement>,
-    startOrEnd: "start" | "end",
+    /** scene coords */
     pointerCoords: {
       x: number;
       y: number;
-    },
+    }[],
     // During line creation the start binding hasn't been written yet
     // into `linearElement`
     oppositeBindingBoundElement?: ExcalidrawBindableElement | null,
   ): void => {
-    const hoveredBindableElement = getHoveredElementForBinding(
-      pointerCoords,
-      this.scene,
+    if (!pointerCoords.length) {
+      return;
+    }
+
+    const suggestedBindings = pointerCoords.reduce(
+      (acc: NonDeleted<ExcalidrawBindableElement>[], coords) => {
+        const hoveredBindableElement = getHoveredElementForBinding(
+          coords,
+          this.scene,
+        );
+        if (
+          hoveredBindableElement != null &&
+          !isLinearElementSimpleAndAlreadyBound(
+            linearElement,
+            oppositeBindingBoundElement?.id,
+            hoveredBindableElement,
+          )
+        ) {
+          acc.push(hoveredBindableElement);
+        }
+        return acc;
+      },
+      [],
     );
-    this.setState({
-      suggestedBindings:
-        hoveredBindableElement != null &&
-        !isLinearElementSimpleAndAlreadyBound(
-          linearElement,
-          oppositeBindingBoundElement?.id,
-          hoveredBindableElement,
-        )
-          ? [hoveredBindableElement]
-          : [],
-    });
+
+    this.setState({ suggestedBindings });
   };
 
   private maybeSuggestBindingForAll(

src/components/Card.tsx

@@ -3,15 +3,22 @@ import OpenColor from "open-color";
 import "./Card.scss";
 
 export const Card: React.FC<{
-  color: keyof OpenColor;
+  color: keyof OpenColor | "primary";
 }> = ({ children, color }) => {
   return (
     <div
       className="Card"
       style={{
-        ["--card-color" as any]: OpenColor[color][7],
-        ["--card-color-darker" as any]: OpenColor[color][8],
-        ["--card-color-darkest" as any]: OpenColor[color][9],
+        ["--card-color" as any]:
+          color === "primary" ? "var(--color-primary)" : OpenColor[color][7],
+        ["--card-color-darker" as any]:
+          color === "primary"
+            ? "var(--color-primary-darker)"
+            : OpenColor[color][8],
+        ["--card-color-darkest" as any]:
+          color === "primary"
+            ? "var(--color-primary-darkest)"
+            : OpenColor[color][9],
       }}
     >
       {children}

src/components/CheckboxItem.tsx

@@ -6,14 +6,14 @@ import "./CheckboxItem.scss";
 
 export const CheckboxItem: React.FC<{
   checked: boolean;
-  onChange: (checked: boolean) => void;
+  onChange: (checked: boolean, event: React.MouseEvent) => void;
   className?: string;
 }> = ({ children, checked, onChange, className }) => {
   return (
     <div
       className={clsx("Checkbox", className, { "is-checked": checked })}
       onClick={(event) => {
-        onChange(!checked);
+        onChange(!checked, event);
         (
           (event.currentTarget as HTMLDivElement).querySelector(
             ".Checkbox-box",

src/components/HelpDialog.tsx

@@ -154,7 +154,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                 <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                 <Shortcut
                   label={t("toolBar.freedraw")}
-                  shortcuts={["Shift+P", "7"]}
+                  shortcuts={["Shift + P", "X", "7"]}
                 />
                 <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
                 <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
@@ -260,6 +260,18 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   label={t("labels.multiSelect")}
                   shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
                 />
+                <Shortcut
+                  label={t("helpDialog.deepSelect")}
+                  shortcuts={[
+                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`),
+                  ]}
+                />
+                <Shortcut
+                  label={t("helpDialog.deepBoxSelect")}
+                  shortcuts={[
+                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`),
+                  ]}
+                />
                 <Shortcut
                   label={t("labels.moveCanvas")}
                   shortcuts={[
@@ -382,6 +394,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   label={t("labels.showBackground")}
                   shortcuts={[getShortcutKey("G")]}
                 />
+                <Shortcut
+                  label={t("labels.decreaseFontSize")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
+                />
+                <Shortcut
+                  label={t("labels.increaseFontSize")}
+                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+>")]}
+                />
               </ShortcutIsland>
             </Column>
           </Columns>

src/components/HintViewer.tsx

@@ -7,6 +7,7 @@ import { AppState } from "../types";
 import {
   isImageElement,
   isLinearElement,
+  isTextBindableContainer,
   isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
@@ -60,15 +61,6 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.rotate");
   }
 
-  if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
-    if (appState.editingLinearElement) {
-      return appState.editingLinearElement.activePointIndex
-        ? t("hints.lineEditor_pointSelected")
-        : t("hints.lineEditor_nothingSelected");
-    }
-    return t("hints.lineEditor_info");
-  }
-
   if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
     return t("hints.text_selected");
   }
@@ -77,8 +69,31 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.text_editing");
   }
 
-  if (elementType === "selection" && !selectedElements.length && !isMobile) {
-    return t("hints.canvasPanning");
+  if (elementType === "selection") {
+    if (
+      appState.draggingElement?.type === "selection" &&
+      !appState.editingElement &&
+      !appState.editingLinearElement
+    ) {
+      return t("hints.deepBoxSelect");
+    }
+    if (!selectedElements.length && !isMobile) {
+      return t("hints.canvasPanning");
+    }
+  }
+
+  if (selectedElements.length === 1) {
+    if (isLinearElement(selectedElements[0])) {
+      if (appState.editingLinearElement) {
+        return appState.editingLinearElement.selectedPointsIndices
+          ? t("hints.lineEditor_pointSelected")
+          : t("hints.lineEditor_nothingSelected");
+      }
+      return t("hints.lineEditor_info");
+    }
+    if (isTextBindableContainer(selectedElements[0])) {
+      return t("hints.bindTextToElement");
+    }
   }
 
   return null;

src/components/IconPicker.scss

@@ -22,7 +22,7 @@
     align-items: center;
     justify-content: center;
 
-    &:focus {
+    &:focus-visible {
       outline: transparent;
       background-color: var(--button-gray-2);
       & svg {

src/components/ImageExportDialog.tsx

@@ -102,7 +102,7 @@ const ImageExportModal = ({
   const { exportBackground, viewBackgroundColor } = appState;
 
   const exportedElements = exportSelected
-    ? getSelectedElements(elements, appState)
+    ? getSelectedElements(elements, appState, true)
     : elements;
 
   useEffect(() => {

src/components/Island.scss

@@ -3,7 +3,7 @@
     --padding: 0;
     background-color: var(--island-bg-color);
     box-shadow: var(--shadow-island);
-    border-radius: 4px;
+    border-radius: var(--border-radius-lg);
     padding: calc(var(--padding) * var(--space-factor));
     position: relative;
     transition: box-shadow 0.5s ease-in-out;

src/components/LayerUI.tsx

@@ -19,7 +19,6 @@ import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
 import { Island } from "./Island";
-import "./LayerUI.scss";
 import { LoadingMessage } from "./LoadingMessage";
 import { LockButton } from "./LockButton";
 import { MobileMenu } from "./MobileMenu";
@@ -35,6 +34,9 @@ import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
 import { LibraryMenu } from "./LibraryMenu";
 
+import "./LayerUI.scss";
+import "./Toolbar.scss";
+
 interface LayerUIProps {
   actionManager: ActionManager;
   appState: AppState;
@@ -268,7 +270,7 @@ const LayerUI = ({
 
   const libraryMenu = appState.isLibraryOpen ? (
     <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState)}
+      pendingElements={getSelectedElements(elements, appState, true)}
       onClose={closeLibrary}
       onInsertShape={onInsertElements}
       onAddToLibrary={deselectItems}
@@ -305,7 +307,12 @@ const LayerUI = ({
             <Section heading="shapes">
               {(heading) => (
                 <Stack.Col gap={4} align="start">
-                  <Stack.Row gap={1}>
+                  <Stack.Row
+                    gap={1}
+                    className={clsx("App-toolbar-container", {
+                      "zen-mode": zenModeEnabled,
+                    })}
+                  >
                     <LockButton
                       zenModeEnabled={zenModeEnabled}
                       checked={appState.elementLocked}
@@ -314,7 +321,9 @@ const LayerUI = ({
                     />
                     <Island
                       padding={1}
-                      className={clsx({ "zen-mode": zenModeEnabled })}
+                      className={clsx("App-toolbar", {
+                        "zen-mode": zenModeEnabled,
+                      })}
                     >
                       <HintViewer
                         appState={appState}

src/components/LibraryButton.tsx

@@ -16,18 +16,18 @@ const LIBRARY_ICON = (
 export const LibraryButton: React.FC<{
   appState: AppState;
   setAppState: React.Component<any, AppState>["setState"];
-}> = ({ appState, setAppState }) => {
+  isMobile?: boolean;
+}> = ({ appState, setAppState, isMobile }) => {
   return (
     <label
       className={clsx(
-        "ToolIcon ToolIcon_type_floating ToolIcon__library zen-mode-visibility",
+        "ToolIcon ToolIcon_type_floating ToolIcon__library",
         `ToolIcon_size_medium`,
         {
-          "zen-mode-visibility--hidden": appState.zenModeEnabled,
+          "is-mobile": isMobile,
         },
       )}
       title={`${capitalizeString(t("toolBar.library"))} — 0`}
-      style={{ marginInlineStart: "var(--space-factor)" }}
     >
       <input
         className="ToolIcon_type_checkbox"

src/components/LibraryMenu.tsx

@@ -18,6 +18,7 @@ import "./LibraryMenu.scss";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { EVENT } from "../constants";
 import { KEYS } from "../keys";
+import { arrayToMap } from "../utils";
 
 const useOnClickOutside = (
   ref: RefObject<HTMLElement>,
@@ -236,6 +237,10 @@ export const LibraryMenu = ({
     ],
   );
 
+  const [lastSelectedItem, setLastSelectedItem] = useState<
+    LibraryItem["id"] | null
+  >(null);
+
   return loadingState === "preloading" ? null : (
     <Island padding={1} ref={ref} className="layer-ui__library">
       {showPublishLibraryDialog && (
@@ -271,10 +276,44 @@ export const LibraryMenu = ({
           files={files}
           id={id}
           selectedItems={selectedItems}
-          onToggle={(id) => {
-            if (!selectedItems.includes(id)) {
-              setSelectedItems([...selectedItems, id]);
+          onToggle={(id, event) => {
+            const shouldSelect = !selectedItems.includes(id);
+
+            if (shouldSelect) {
+              if (event.shiftKey && lastSelectedItem) {
+                const rangeStart = libraryItems.findIndex(
+                  (item) => item.id === lastSelectedItem,
+                );
+                const rangeEnd = libraryItems.findIndex(
+                  (item) => item.id === id,
+                );
+
+                if (rangeStart === -1 || rangeEnd === -1) {
+                  setSelectedItems([...selectedItems, id]);
+                  return;
+                }
+
+                const selectedItemsMap = arrayToMap(selectedItems);
+                const nextSelectedIds = libraryItems.reduce(
+                  (acc: LibraryItem["id"][], item, idx) => {
+                    if (
+                      (idx >= rangeStart && idx <= rangeEnd) ||
+                      selectedItemsMap.has(item.id)
+                    ) {
+                      acc.push(item.id);
+                    }
+                    return acc;
+                  },
+                  [],
+                );
+
+                setSelectedItems(nextSelectedIds);
+              } else {
+                setSelectedItems([...selectedItems, id]);
+              }
+              setLastSelectedItem(id);
             } else {
+              setLastSelectedItem(null);
               setSelectedItems(selectedItems.filter((_id) => _id !== id));
             }
           }}

src/components/LibraryMenuItems.tsx

@@ -21,6 +21,7 @@ import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
 
 import "./LibraryMenuItems.scss";
+import { VERSIONS } from "../constants";
 
 const LibraryMenuItems = ({
   libraryItems,
@@ -51,7 +52,7 @@ const LibraryMenuItems = ({
   library: Library;
   id: string;
   selectedItems: LibraryItem["id"][];
-  onToggle: (id: LibraryItem["id"]) => void;
+  onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
   onPublish: () => void;
   resetLibrary: () => void;
 }) => {
@@ -212,10 +213,8 @@ const LibraryMenuItems = ({
           onClick={params.onClick || (() => {})}
           id={params.item?.id || null}
           selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={() => {
-            if (params.item?.id) {
-              onToggle(params.item.id);
-            }
+          onToggle={(id, event) => {
+            onToggle(id, event);
           }}
         />
       </Stack.Col>
@@ -293,7 +292,9 @@ const LibraryMenuItems = ({
         <a
           href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
             window.name || "_blank"
-          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}`}
+          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
+            VERSIONS.excalidrawLibrary
+          }`}
           target="_excalidraw_libraries"
         >
           {t("labels.libraries")}

src/components/LibraryUnit.scss

@@ -27,6 +27,8 @@
 
   .library-unit__dragger {
     display: flex;
+    align-items: center;
+    justify-content: center;
     height: 100%;
     width: 100%;
   }
@@ -99,8 +101,13 @@
     margin-top: -10px;
     pointer-events: none;
   }
-  .library-unit--hover .library-unit__adder {
-    color: $oc-blue-7;
+  .library-unit:hover .library-unit__adder {
+    fill: $oc-blue-7;
+  }
+  .library-unit:active .library-unit__adder {
+    animation: none;
+    transform: scale(0.8);
+    fill: $oc-black;
   }
 
   .library-unit__active {

src/components/LibraryUnit.tsx

@@ -8,12 +8,15 @@ import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";
 
-// fa-plus
 const PLUS_ICON = (
   <svg viewBox="0 0 1792 1792">
     <path
-      fill="currentColor"
-      d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"
+      d="M1600 736v192c0 26.667-9.33 49.333-28 68-18.67 18.67-41.33 28-68 28h-416v416c0 26.67-9.33 49.33-28 68s-41.33 28-68 28H800c-26.667 0-49.333-9.33-68-28s-28-41.33-28-68v-416H288c-26.667 0-49.333-9.33-68-28-18.667-18.667-28-41.333-28-68V736c0-26.667 9.333-49.333 28-68s41.333-28 68-28h416V224c0-26.667 9.333-49.333 28-68s41.333-28 68-28h192c26.67 0 49.33 9.333 68 28s28 41.333 28 68v416h416c26.67 0 49.33 9.333 68 28s28 41.333 28 68Z"
+      style={{
+        stroke: "#fff",
+        strokeWidth: 140,
+      }}
+      transform="translate(0 64)"
     />
   </svg>
 );
@@ -33,7 +36,7 @@ export const LibraryUnit = ({
   isPending?: boolean;
   onClick: () => void;
   selected: boolean;
-  onToggle: (id: string) => void;
+  onToggle: (id: string, event: React.MouseEvent) => void;
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
@@ -84,7 +87,17 @@ export const LibraryUnit = ({
         })}
         ref={ref}
         draggable={!!elements}
-        onClick={!!elements || !!isPending ? onClick : undefined}
+        onClick={
+          !!elements || !!isPending
+            ? (event) => {
+                if (id && event.shiftKey) {
+                  onToggle(id, event);
+                } else {
+                  onClick();
+                }
+              }
+            : undefined
+        }
         onDragStart={(event) => {
           setIsHovered(false);
           event.dataTransfer.setData(
@@ -97,7 +110,7 @@ export const LibraryUnit = ({
       {id && elements && (isHovered || isMobile || selected) && (
         <CheckboxItem
           checked={selected}
-          onChange={() => onToggle(id)}
+          onChange={(checked, event) => onToggle(id, event)}
           className="library-unit__checkbox"
         />
       )}

src/components/LockButton.tsx

@@ -10,6 +10,7 @@ type LockIconProps = {
   checked: boolean;
   onChange?(): void;
   zenModeEnabled?: boolean;
+  isMobile?: boolean;
 };
 
 const DEFAULT_SIZE: ToolButtonSize = "medium";
@@ -42,10 +43,10 @@ export const LockButton = (props: LockIconProps) => {
   return (
     <label
       className={clsx(
-        "ToolIcon ToolIcon__lock ToolIcon_type_floating zen-mode-visibility",
+        "ToolIcon ToolIcon__lock ToolIcon_type_floating",
         `ToolIcon_size_${DEFAULT_SIZE}`,
         {
-          "zen-mode-visibility--hidden": props.zenModeEnabled,
+          "is-mobile": props.isMobile,
         },
       )}
       title={`${props.title} — Q`}

src/components/MobileMenu.tsx

@@ -64,8 +64,8 @@ export const MobileMenu = ({
         <Section heading="shapes">
           {(heading) => (
             <Stack.Col gap={4} align="center">
-              <Stack.Row gap={1}>
-                <Island padding={1}>
+              <Stack.Row gap={1} className="App-toolbar-container">
+                <Island padding={1} className="App-toolbar">
                   {heading}
                   <Stack.Row gap={1}>
                     <ShapesSwitcher
@@ -85,8 +85,13 @@ export const MobileMenu = ({
                   checked={appState.elementLocked}
                   onChange={onLockToggle}
                   title={t("toolBar.lock")}
+                  isMobile
+                />
+                <LibraryButton
+                  appState={appState}
+                  setAppState={setAppState}
+                  isMobile
                 />
-                <LibraryButton appState={appState} setAppState={setAppState} />
               </Stack.Row>
               {libraryMenu}
             </Stack.Col>

src/components/PublishLibrary.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useCallback, useEffect, useState } from "react";
-import oc from "open-color";
+import OpenColor from "open-color";
 
 import { Dialog } from "./Dialog";
 import { t } from "../i18n";
@@ -7,16 +7,19 @@ import { t } from "../i18n";
 import { ToolButton } from "./ToolButton";
 
 import { AppState, LibraryItems, LibraryItem } from "../types";
-import { exportToBlob } from "../packages/utils";
-import { EXPORT_DATA_TYPES, EXPORT_SOURCE } from "../constants";
+import { exportToCanvas } from "../packages/utils";
+import {
+  EXPORT_DATA_TYPES,
+  EXPORT_SOURCE,
+  MIME_TYPES,
+  VERSIONS,
+} from "../constants";
 import { ExportedLibraryData } from "../data/types";
 
 import "./PublishLibrary.scss";
-import { ExcalidrawElement } from "../element/types";
-import { newElement } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import { getCommonBoundingBox } from "../element/bounds";
 import SingleLibraryItem from "./SingleLibraryItem";
+import { canvasToBlob, resizeImageFile } from "../data/blob";
+import { chunk } from "../utils";
 
 interface PublishLibraryDataParams {
   authorName: string;
@@ -55,6 +58,75 @@ const importPublishLibDataFromStorage = () => {
   return null;
 };
 
+const generatePreviewImage = async (libraryItems: LibraryItems) => {
+  const MAX_ITEMS_PER_ROW = 6;
+  const BOX_SIZE = 128;
+  const BOX_PADDING = Math.round(BOX_SIZE / 16);
+  const BORDER_WIDTH = Math.max(Math.round(BOX_SIZE / 64), 2);
+
+  const rows = chunk(libraryItems, MAX_ITEMS_PER_ROW);
+
+  const canvas = document.createElement("canvas");
+
+  canvas.width =
+    rows[0].length * BOX_SIZE +
+    (rows[0].length + 1) * (BOX_PADDING * 2) -
+    BOX_PADDING * 2;
+  canvas.height =
+    rows.length * BOX_SIZE +
+    (rows.length + 1) * (BOX_PADDING * 2) -
+    BOX_PADDING * 2;
+
+  const ctx = canvas.getContext("2d")!;
+
+  ctx.fillStyle = OpenColor.white;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // draw items
+  // ---------------------------------------------------------------------------
+  for (const [index, item] of libraryItems.entries()) {
+    const itemCanvas = await exportToCanvas({
+      elements: item.elements,
+      files: null,
+      maxWidthOrHeight: BOX_SIZE,
+    });
+
+    const { width, height } = itemCanvas;
+
+    // draw item
+    // -------------------------------------------------------------------------
+    const rowOffset =
+      Math.floor(index / MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
+    const colOffset =
+      (index % MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
+
+    ctx.drawImage(
+      itemCanvas,
+      colOffset + (BOX_SIZE - width) / 2 + BOX_PADDING,
+      rowOffset + (BOX_SIZE - height) / 2 + BOX_PADDING,
+    );
+
+    // draw item border
+    // -------------------------------------------------------------------------
+    ctx.lineWidth = BORDER_WIDTH;
+    ctx.strokeStyle = OpenColor.gray[4];
+    ctx.strokeRect(
+      colOffset + BOX_PADDING / 2,
+      rowOffset + BOX_PADDING / 2,
+      BOX_SIZE + BOX_PADDING,
+      BOX_SIZE + BOX_PADDING,
+    );
+  }
+
+  return await resizeImageFile(
+    new File([await canvasToBlob(canvas)], "preview", { type: MIME_TYPES.png }),
+    {
+      outputType: MIME_TYPES.jpg,
+      maxWidthOrHeight: 5000,
+    },
+  );
+};
+
 const PublishLibrary = ({
   onClose,
   libraryItems,
@@ -129,59 +201,12 @@ const PublishLibrary = ({
       setIsSubmitting(false);
       return;
     }
-    const elements: ExcalidrawElement[] = [];
-    const prevBoundingBox = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
-    clonedLibItems.forEach((libItem) => {
-      const boundingBox = getCommonBoundingBox(libItem.elements);
-      const width = boundingBox.maxX - boundingBox.minX + 30;
-      const height = boundingBox.maxY - boundingBox.minY + 30;
-      const offset = {
-        x: prevBoundingBox.maxX - boundingBox.minX,
-        y: prevBoundingBox.maxY - boundingBox.minY,
-      };
 
-      const itemsWithUpdatedCoords = libItem.elements.map((element) => {
-        element = mutateElement(element, {
-          x: element.x + offset.x + 15,
-          y: element.y + offset.y + 15,
-        });
-        return element;
-      });
-      const items = [
-        ...itemsWithUpdatedCoords,
-        newElement({
-          type: "rectangle",
-          width,
-          height,
-          x: prevBoundingBox.maxX,
-          y: prevBoundingBox.maxY,
-          strokeColor: "#ced4da",
-          backgroundColor: "transparent",
-          strokeStyle: "solid",
-          opacity: 100,
-          roughness: 0,
-          strokeSharpness: "sharp",
-          fillStyle: "solid",
-          strokeWidth: 1,
-        }),
-      ];
-      elements.push(...items);
-      prevBoundingBox.maxX = prevBoundingBox.maxX + width + 30;
-    });
-    const png = await exportToBlob({
-      elements,
-      mimeType: "image/png",
-      appState: {
-        ...appState,
-        viewBackgroundColor: oc.white,
-        exportBackground: true,
-      },
-      files: null,
-    });
+    const previewImage = await generatePreviewImage(clonedLibItems);
 
     const libContent: ExportedLibraryData = {
       type: EXPORT_DATA_TYPES.excalidrawLibrary,
-      version: 2,
+      version: VERSIONS.excalidrawLibrary,
       source: EXPORT_SOURCE,
       libraryItems: clonedLibItems,
     };
@@ -190,7 +215,8 @@ const PublishLibrary = ({
 
     const formData = new FormData();
     formData.append("excalidrawLib", lib);
-    formData.append("excalidrawPng", png!);
+    formData.append("previewImage", previewImage);
+    formData.append("previewImageType", previewImage.type);
     formData.append("title", libraryData.name);
     formData.append("authorName", libraryData.authorName);
     formData.append("githubHandle", libraryData.githubHandle);

src/components/ToolIcon.scss

@@ -8,17 +8,7 @@
     position: relative;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    border-radius: var(--space-factor);
     user-select: none;
-
-    background-color: var(--button-gray-1);
-
-    &:hover {
-      background-color: var(--button-gray-2);
-    }
-    &:active {
-      background-color: var(--button-gray-3);
-    }
   }
 
   .ToolIcon--plain {
@@ -29,6 +19,20 @@
     }
   }
 
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    & + .ToolIcon__icon {
+      background-color: var(--button-gray-1);
+
+      &:hover {
+        background-color: var(--button-gray-2);
+      }
+      &:active {
+        background-color: var(--button-gray-3);
+      }
+    }
+  }
+
   .ToolIcon__icon {
     width: 2.5rem;
     height: 2.5rem;
@@ -38,7 +42,11 @@
     justify-content: center;
     align-items: center;
 
-    border-radius: var(--space-factor);
+    border-radius: var(--border-radius-lg);
+
+    & + .ToolIcon__label {
+      margin-inline-start: 0;
+    }
 
     svg {
       position: relative;
@@ -46,10 +54,6 @@
       fill: var(--icon-fill-color);
       color: var(--icon-fill-color);
     }
-
-    & + .ToolIcon__label {
-      margin-inline-start: 0;
-    }
   }
 
   .ToolIcon__label {
@@ -79,7 +83,7 @@
     margin: 0;
     font-size: inherit;
 
-    &:focus {
+    &:focus-visible {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
 
@@ -121,7 +125,7 @@
       }
     }
 
-    &:focus + .ToolIcon__icon {
+    &:focus-visible + .ToolIcon__icon {
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
 
@@ -141,10 +145,6 @@
       background-color: transparent;
     }
 
-    &:focus {
-      box-shadow: none;
-    }
-
     .ToolIcon__icon {
       background-color: var(--button-gray-1);
       &:hover {
@@ -159,13 +159,6 @@
     }
   }
 
-  .ToolIcon.ToolIcon__lock {
-    margin-inline-end: var(--space-factor);
-    &.ToolIcon_type_floating {
-      margin-left: 0.1rem;
-    }
-  }
-
   .ToolIcon__keybinding {
     position: absolute;
     bottom: 2px;

src/components/Toolbar.scss

@@ -0,0 +1,112 @@
+@import "open-color/open-color.scss";
+
+@mixin toolbarButtonColorStates {
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    & + .ToolIcon__icon:active {
+      background: var(--color-primary-light);
+    }
+    &:checked + .ToolIcon__icon {
+      background: var(--color-primary);
+      --icon-fill-color: #{$oc-white};
+      --keybinding-color: #{$oc-white};
+    }
+    &:checked + .ToolIcon__icon:active {
+      background: var(--color-primary-darker);
+    }
+  }
+
+  .ToolIcon__keybinding {
+    bottom: 4px;
+    right: 4px;
+  }
+}
+
+.excalidraw {
+  .App-toolbar-container {
+    .ToolIcon_type_floating {
+      @include toolbarButtonColorStates;
+
+      &:not(.is-mobile) {
+        .ToolIcon__icon {
+          padding: 1px;
+          background-color: var(--island-bg-color);
+          box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 15%);
+          border-radius: 50%;
+          transition: box-shadow 0.5s ease, transform 0.5s ease;
+        }
+      }
+
+      .ToolIcon_type_radio,
+      .ToolIcon_type_checkbox {
+        &:focus-within + .ToolIcon__icon {
+          // override for custom floating button shadow
+          box-shadow: 0 0 0 2px var(--focus-highlight-color);
+        }
+      }
+    }
+
+    .ToolIcon.ToolIcon__lock {
+      margin-inline-end: var(--space-factor);
+      &.ToolIcon_type_floating {
+        margin-left: 0.1rem;
+      }
+    }
+
+    .ToolIcon__library {
+      margin-inline-start: var(--space-factor);
+    }
+
+    &.zen-mode {
+      .ToolIcon_type_floating {
+        .ToolIcon__icon {
+          box-shadow: none;
+          transform: scale(0.9);
+        }
+        .ToolIcon_type_checkbox:not(:checked):not(:hover):not(:active) {
+          & + .ToolIcon__icon {
+            svg {
+              fill: $oc-gray-5;
+              color: $oc-gray-5;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .App-toolbar {
+    border-radius: var(--border-radius-lg);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 15%);
+
+    .ToolIcon {
+      &:hover {
+        --icon-fill-color: var(--color-primary-chubb);
+        --keybinding-color: var(--color-primary-chubb);
+      }
+      &:active {
+        --icon-fill-color: #{$oc-gray-9};
+        --keybinding-color: #{$oc-gray-9};
+      }
+
+      .ToolIcon__icon {
+        background: transparent;
+        border-radius: var(--border-radius-lg);
+      }
+
+      @include toolbarButtonColorStates;
+    }
+
+    &.zen-mode {
+      .ToolIcon__keybinding,
+      .HintViewer {
+        display: none;
+      }
+    }
+  }
+
+  &.theme--dark .App-toolbar .ToolIcon:active {
+    --icon-fill-color: #{$oc-gray-3};
+    --keybinding-color: #{$oc-gray-3};
+  }
+}

src/components/Tooltip.scss

@@ -29,7 +29,6 @@
 // wraps the element we want to apply the tooltip to
 .excalidraw-tooltip-wrapper {
   display: flex;
-  height: 100%;
 }
 
 .excalidraw-tooltip-icon {

src/components/Tooltip.tsx

@@ -62,9 +62,15 @@ type TooltipProps = {
   children: React.ReactNode;
   label: string;
   long?: boolean;
+  style?: React.CSSProperties;
 };
 
-export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
+export const Tooltip = ({
+  children,
+  label,
+  long = false,
+  style,
+}: TooltipProps) => {
   useEffect(() => {
     return () =>
       getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
@@ -84,6 +90,7 @@ export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
       onPointerLeave={() =>
         getTooltipDiv().classList.remove("excalidraw-tooltip--visible")
       }
+      style={style}
     >
       {children}
     </div>

src/components/UserList.scss

@@ -7,6 +7,10 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
+
+    &:empty {
+      display: none;
+    }
   }
 
   .UserList > * {

src/components/icons.tsx

@@ -15,8 +15,9 @@ import { THEME } from "../constants";
 
 const activeElementColor = (theme: Theme) =>
   theme === THEME.LIGHT ? oc.orange[4] : oc.orange[9];
-const iconFillColor = (theme: Theme) =>
-  theme === THEME.LIGHT ? oc.black : oc.gray[4];
+
+const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
+
 const handlerColor = (theme: Theme) =>
   theme === THEME.LIGHT ? oc.white : "#1e1e1e";
 

src/constants.ts

@@ -106,10 +106,6 @@ export const EXPORT_DATA_TYPES = {
 
 export const EXPORT_SOURCE = window.location.origin;
 
-export const STORAGE_KEYS = {
-  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
-} as const;
-
 // time in milliseconds
 export const IMAGE_RENDER_TIMEOUT = 500;
 export const TAP_TWICE_TIMEOUT = 300;
@@ -162,8 +158,7 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
 
-export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_JPG = 10000;
-export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT_OTHER = 1440;
+export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
 export const ALLOWED_IMAGE_MIME_TYPES = [
   MIME_TYPES.png,
@@ -177,3 +172,10 @@ export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 export const SVG_NS = "http://www.w3.org/2000/svg";
 
 export const ENCRYPTION_KEY_BITS = 128;
+
+export const VERSIONS = {
+  excalidraw: 2,
+  excalidrawLibrary: 2,
+} as const;
+
+export const BOUND_TEXT_PADDING = 5;

src/css/styles.scss

@@ -180,7 +180,7 @@
   }
 
   .buttonList label:focus-within,
-  input:focus {
+  input:focus-visible {
     outline: transparent;
     box-shadow: 0 0 0 2px var(--focus-highlight-color);
   }
@@ -190,14 +190,14 @@
     user-select: none;
     background-color: var(--button-gray-1);
     border: 0;
-    border-radius: 4px;
+    border-radius: var(--border-radius-md);
     margin: 0.125rem 0;
     padding: 0.25rem;
     white-space: nowrap;
 
     cursor: pointer;
 
-    &:focus {
+    &:focus-visible {
       outline: transparent;
       box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
@@ -217,14 +217,16 @@
 
   .active,
   .buttonList label.active {
-    background-color: var(--button-gray-2);
+    background-color: var(--color-primary);
+
+    --icon-fill-color: #{$oc-white};
 
     &:hover {
-      background-color: var(--button-gray-2);
+      background-color: var(--color-primary-darker);
     }
 
     &:active {
-      background-color: var(--button-gray-3);
+      background-color: var(--color-primary-darkest);
     }
   }
 
@@ -234,7 +236,7 @@
       justify-content: center;
       align-items: center;
       svg {
-        width: 36px;
+        width: 35px;
         height: 14px;
         padding: 2px;
         opacity: 0.6;
@@ -311,7 +313,7 @@
   }
 
   .App-menu_top {
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: auto max-content auto;
     grid-gap: 4px;
     align-items: flex-start;
     cursor: default;

src/css/theme.scss

@@ -12,7 +12,7 @@
   --dialog-border-color: #{$oc-gray-6};
   --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
   --focus-highlight-color: #{$oc-blue-2};
-  --icon-fill-color: #{$oc-black};
+  --icon-fill-color: #{$oc-gray-9};
   --icon-green-fill-color: #{$oc-green-9};
   --default-bg-color: #{$oc-white};
   --input-bg-color: #{$oc-white};
@@ -32,10 +32,20 @@
   --sar: env(safe-area-inset-right);
   --sat: env(safe-area-inset-top);
   --select-highlight-color: #{$oc-blue-5};
-  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
+  --shadow-island: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 12%);
+
   --space-factor: 0.25rem;
   --text-primary-color: #{$oc-gray-8};
 
+  --color-primary: #6965db;
+  --color-primary-chubb: #625ee0; // to offset Chubb illusion
+  --color-primary-darker: #5b57d1;
+  --color-primary-darkest: #4a47b1;
+  --color-primary-light: #e2e1fc;
+
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+
   &.theme--dark {
     background: $oc-black;
 
@@ -71,7 +81,13 @@
     --popup-text-color: #{$oc-gray-4};
     --popup-text-inverted-color: #2c2c2c;
     --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --shadow-island: 1px 1px 5px #{transparentize($oc-black, 0.7)};
     --text-primary-color: #{$oc-gray-4};
+
+    --color-primary: #5650f0;
+    --color-primary-chubb: #726dff; // to offset Chubb illusion
+    --color-primary-darker: #4b46d8;
+    --color-primary-darkest: #3e39be;
+    --color-primary-light: #3f3d64;
   }
 }

src/data/blob.ts

@@ -271,8 +271,6 @@ export const resizeImageFile = async (
     };
   }
 
-  const fileType = file.type;
-
   if (!isSupportedImageFile(file)) {
     throw new Error(t("errors.unsupportedFileType"));
   }
@@ -281,7 +279,7 @@ export const resizeImageFile = async (
     [await reduce.toBlob(file, { max: opts.maxWidthOrHeight })],
     file.name,
     {
-      type: fileType,
+      type: opts.outputType || file.type,
     },
   );
 };

src/data/encode.ts

@@ -234,7 +234,19 @@ const splitBuffers = (concatenatedBuffer: Uint8Array) => {
 
   let cursor = 0;
 
-  // first chunk is the version (ignored for now)
+  // first chunk is the version
+  const version = dataView(
+    concatenatedBuffer,
+    NEXT_CHUNK_SIZE_DATAVIEW_BYTES,
+    cursor,
+  );
+  // If version is outside of the supported versions, throw an error.
+  // This usually means the buffer wasn't encoded using this API, so we'd only
+  // waste compute.
+  if (version > CONCAT_BUFFERS_VERSION) {
+    throw new Error(`invalid version ${version}`);
+  }
+
   cursor += VERSION_DATAVIEW_BYTES;
 
   while (true) {

src/data/image.ts

@@ -1,11 +1,8 @@
-import extractPngChunks from "png-chunks-extract";
+import decodePng from "png-chunks-extract";
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
 import { stringToBase64, encode, decode, base64ToString } from "./encode";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
-import { PngChunk } from "../types";
-
-export { extractPngChunks };
 
 // -----------------------------------------------------------------------------
 // PNG
@@ -31,9 +28,7 @@ const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
 export const getTEXtChunk = async (
   blob: Blob,
 ): Promise<{ keyword: string; text: string } | null> => {
-  const chunks = extractPngChunks(
-    new Uint8Array(await blobToArrayBuffer(blob)),
-  );
+  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
   const metadataChunk = chunks.find((chunk) => chunk.name === "tEXt");
   if (metadataChunk) {
     return tEXt.decode(metadataChunk.data);
@@ -41,28 +36,6 @@ export const getTEXtChunk = async (
   return null;
 };
 
-export const findPngChunk = (
-  chunks: PngChunk[],
-  name: PngChunk["name"],
-  /** this makes the search stop before IDAT chunk (before which most
-   * metadata chunks reside). This is a perf optim. */
-  breakBeforeIDAT = true,
-) => {
-  let i = 0;
-  const len = chunks.length;
-  while (i <= len) {
-    const chunk = chunks[i];
-    if (chunk.name === name) {
-      return chunk;
-    }
-    if (breakBeforeIDAT && chunk.name === "IDAT") {
-      return null;
-    }
-    i++;
-  }
-  return null;
-};
-
 export const encodePngMetadata = async ({
   blob,
   metadata,
@@ -70,9 +43,7 @@ export const encodePngMetadata = async ({
   blob: Blob;
   metadata: string;
 }) => {
-  const chunks = extractPngChunks(
-    new Uint8Array(await blobToArrayBuffer(blob)),
-  );
+  const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
 
   const metadataChunk = tEXt.encode(
     MIME_TYPES.excalidraw,

src/data/json.ts

@@ -1,6 +1,11 @@
 import { fileOpen, fileSave } from "./filesystem";
 import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
-import { EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES } from "../constants";
+import {
+  EXPORT_DATA_TYPES,
+  EXPORT_SOURCE,
+  MIME_TYPES,
+  VERSIONS,
+} from "../constants";
 import { clearElementsForDatabase, clearElementsForExport } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems } from "../types";
@@ -42,7 +47,7 @@ export const serializeAsJSON = (
 ): string => {
   const data: ExportedDataState = {
     type: EXPORT_DATA_TYPES.excalidraw,
-    version: 2,
+    version: VERSIONS.excalidraw,
     source: EXPORT_SOURCE,
     elements:
       type === "local"
@@ -121,7 +126,7 @@ export const isValidLibrary = (json: any) => {
 export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
   const data: ExportedLibraryData = {
     type: EXPORT_DATA_TYPES.excalidrawLibrary,
-    version: 2,
+    version: VERSIONS.excalidrawLibrary,
     source: EXPORT_SOURCE,
     libraryItems,
   };

src/data/restore.ts

@@ -10,11 +10,7 @@ import {
   NormalizedZoomValue,
 } from "../types";
 import { ImportedDataState } from "./types";
-import {
-  getElementMap,
-  getNormalizedDimensions,
-  isInvisiblySmallElement,
-} from "../element";
+import { getNormalizedDimensions, isInvisiblySmallElement } from "../element";
 import { isLinearElementType } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
@@ -26,6 +22,8 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
+import { getUpdatedTimestamp } from "../utils";
+import { arrayToMap } from "../utils";
 
 type RestoredAppState = Omit<
   AppState,
@@ -66,7 +64,10 @@ const restoreElementWithProperties = <
   T extends ExcalidrawElement,
   K extends Pick<T, keyof Omit<Required<T>, keyof ExcalidrawElement>>,
 >(
-  element: Required<T>,
+  element: Required<T> & {
+    /** @deprecated */
+    boundElementIds?: readonly ExcalidrawElement["id"][];
+  },
   extra: Pick<
     T,
     // This extra Pick<T, keyof K> ensure no excess properties are passed.
@@ -100,7 +101,10 @@ const restoreElementWithProperties = <
     strokeSharpness:
       element.strokeSharpness ??
       (isLinearElementType(element.type) ? "round" : "sharp"),
-    boundElementIds: element.boundElementIds ?? [],
+    boundElements: element.boundElementIds
+      ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
+      : element.boundElements ?? [],
+    updated: element.updated ?? getUpdatedTimestamp(),
   };
 
   return {
@@ -131,6 +135,8 @@ const restoreElement = (
         baseline: element.baseline,
         textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
         verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
+        containerId: element.containerId ?? null,
+        originalText: element.originalText || element.text,
       });
     case "freedraw": {
       return restoreElementWithProperties(element, {
@@ -204,14 +210,14 @@ export const restoreElements = (
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
 ): ExcalidrawElement[] => {
-  const localElementsMap = localElements ? getElementMap(localElements) : null;
+  const localElementsMap = localElements ? arrayToMap(localElements) : null;
   return (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)) {
       let migratedElement: ExcalidrawElement | null = restoreElement(element);
       if (migratedElement) {
-        const localElement = localElementsMap?.[element.id];
+        const localElement = localElementsMap?.get(element.id);
         if (localElement && localElement.version > migratedElement.version) {
           migratedElement = bumpVersion(migratedElement, localElement.version);
         }

src/data/types.ts

@@ -1,6 +1,7 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
 import type { cleanAppStateForExport } from "../appState";
+import { VERSIONS } from "../constants";
 
 export interface ExportedDataState {
   type: string;
@@ -24,7 +25,7 @@ export interface ImportedDataState {
 
 export interface ExportedLibraryData {
   type: string;
-  version: 2;
+  version: typeof VERSIONS.excalidrawLibrary;
   source: string;
   libraryItems: LibraryItems;
 }

src/disitrubte.ts

@@ -1,17 +1,7 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { getCommonBounds } from "./element";
-
-interface Box {
-  minX: number;
-  minY: number;
-  maxX: number;
-  maxY: number;
-  midX: number;
-  midY: number;
-  width: number;
-  height: number;
-}
+import { getMaximumGroups } from "./groups";
+import { getCommonBoundingBox } from "./element/bounds";
 
 export interface Distribution {
   space: "between";
@@ -98,39 +88,3 @@ export const distributeElements = (
     );
   });
 };
-
-export const getMaximumGroups = (
-  elements: ExcalidrawElement[],
-): ExcalidrawElement[][] => {
-  const groups: Map<String, ExcalidrawElement[]> = new Map<
-    String,
-    ExcalidrawElement[]
-  >();
-
-  elements.forEach((element: ExcalidrawElement) => {
-    const groupId =
-      element.groupIds.length === 0
-        ? element.id
-        : element.groupIds[element.groupIds.length - 1];
-
-    const currentGroupMembers = groups.get(groupId) || [];
-
-    groups.set(groupId, [...currentGroupMembers, element]);
-  });
-
-  return Array.from(groups.values());
-};
-
-const getCommonBoundingBox = (elements: ExcalidrawElement[]): Box => {
-  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  return {
-    minX,
-    minY,
-    maxX,
-    maxY,
-    width: maxX - minX,
-    height: maxY - minY,
-    midX: (minX + maxX) / 2,
-    midY: (minY + maxY) / 2,
-  };
-};

src/element/binding.ts

@@ -8,7 +8,11 @@ import {
 } from "./types";
 import { getElementAtPosition } from "../scene";
 import { AppState } from "../types";
-import { isBindableElement, isBindingElement } from "./typeChecks";
+import {
+  isBindableElement,
+  isBindingElement,
+  isLinearElement,
+} from "./typeChecks";
 import {
   bindingBorderTest,
   distanceToBindableElement,
@@ -20,7 +24,7 @@ import {
 import { mutateElement } from "./mutateElement";
 import Scene from "../scene/Scene";
 import { LinearElementEditor } from "./linearElementEditor";
-import { tupleToCoors } from "../utils";
+import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 
 export type SuggestedBinding =
@@ -74,8 +78,9 @@ export const bindOrUnbindLinearElement = (
     .getNonDeletedElements(onlyUnbound)
     .forEach((element) => {
       mutateElement(element, {
-        boundElementIds: element.boundElementIds?.filter(
-          (id) => id !== linearElement.id,
+        boundElements: element.boundElements?.filter(
+          (element) =>
+            element.type !== "arrow" || element.id !== linearElement.id,
         ),
       });
     });
@@ -180,11 +185,16 @@ const bindLinearElement = (
       ...calculateFocusAndGap(linearElement, hoveredElement, startOrEnd),
     } as PointBinding,
   });
-  mutateElement(hoveredElement, {
-    boundElementIds: Array.from(
-      new Set([...(hoveredElement.boundElementIds ?? []), linearElement.id]),
-    ),
-  });
+
+  const boundElementsMap = arrayToMap(hoveredElement.boundElements || []);
+  if (!boundElementsMap.has(linearElement.id)) {
+    mutateElement(hoveredElement, {
+      boundElements: (hoveredElement.boundElements || []).concat({
+        id: linearElement.id,
+        type: "arrow",
+      }),
+    });
+  }
 };
 
 // Don't bind both ends of a simple segment
@@ -284,52 +294,56 @@ export const updateBoundElements = (
     newSize?: { width: number; height: number };
   },
 ) => {
-  const boundElementIds = changedElement.boundElementIds ?? [];
-  if (boundElementIds.length === 0) {
+  const boundLinearElements = (changedElement.boundElements ?? []).filter(
+    (el) => el.type === "arrow",
+  );
+  if (boundLinearElements.length === 0) {
     return;
   }
   const { newSize, simultaneouslyUpdated } = options ?? {};
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
-  (
-    Scene.getScene(changedElement)!.getNonDeletedElements(
-      boundElementIds,
-    ) as NonDeleted<ExcalidrawLinearElement>[]
-  ).forEach((linearElement) => {
-    const bindableElement = changedElement as ExcalidrawBindableElement;
-    // In case the boundElementIds are stale
-    if (!doesNeedUpdate(linearElement, bindableElement)) {
-      return;
-    }
-    const startBinding = maybeCalculateNewGapWhenScaling(
-      bindableElement,
-      linearElement.startBinding,
-      newSize,
-    );
-    const endBinding = maybeCalculateNewGapWhenScaling(
-      bindableElement,
-      linearElement.endBinding,
-      newSize,
-    );
-    // `linearElement` is being moved/scaled already, just update the binding
-    if (simultaneouslyUpdatedElementIds.has(linearElement.id)) {
-      mutateElement(linearElement, { startBinding, endBinding });
-      return;
-    }
-    updateBoundPoint(
-      linearElement,
-      "start",
-      startBinding,
-      changedElement as ExcalidrawBindableElement,
-    );
-    updateBoundPoint(
-      linearElement,
-      "end",
-      endBinding,
-      changedElement as ExcalidrawBindableElement,
-    );
-  });
+  Scene.getScene(changedElement)!
+    .getNonDeletedElements(boundLinearElements.map((el) => el.id))
+    .forEach((element) => {
+      if (!isLinearElement(element)) {
+        return;
+      }
+
+      const bindableElement = changedElement as ExcalidrawBindableElement;
+      // In case the boundElements are stale
+      if (!doesNeedUpdate(element, bindableElement)) {
+        return;
+      }
+      const startBinding = maybeCalculateNewGapWhenScaling(
+        bindableElement,
+        element.startBinding,
+        newSize,
+      );
+      const endBinding = maybeCalculateNewGapWhenScaling(
+        bindableElement,
+        element.endBinding,
+        newSize,
+      );
+      // `linearElement` is being moved/scaled already, just update the binding
+      if (simultaneouslyUpdatedElementIds.has(element.id)) {
+        mutateElement(element, { startBinding, endBinding });
+        return;
+      }
+      updateBoundPoint(
+        element,
+        "start",
+        startBinding,
+        changedElement as ExcalidrawBindableElement,
+      );
+      updateBoundPoint(
+        element,
+        "end",
+        endBinding,
+        changedElement as ExcalidrawBindableElement,
+      );
+    });
 };
 
 const doesNeedUpdate = (
@@ -401,10 +415,17 @@ const updateBoundPoint = (
       newEdgePoint = intersections[0];
     }
   }
-  LinearElementEditor.movePoint(
+  LinearElementEditor.movePoints(
     linearElement,
-    edgePointIndex,
-    LinearElementEditor.pointFromAbsoluteCoords(linearElement, newEdgePoint),
+    [
+      {
+        index: edgePointIndex,
+        point: LinearElementEditor.pointFromAbsoluteCoords(
+          linearElement,
+          newEdgePoint,
+        ),
+      },
+    ],
     { [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding },
   );
 };
@@ -552,11 +573,11 @@ export const fixBindingsAfterDuplication = (
   const allBindableElementIds: Set<ExcalidrawElement["id"]> = new Set();
   const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
   oldElements.forEach((oldElement) => {
-    const { boundElementIds } = oldElement;
-    if (boundElementIds != null && boundElementIds.length > 0) {
-      boundElementIds.forEach((boundElementId) => {
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElementId)) {
-          allBoundElementIds.add(boundElementId);
+    const { boundElements } = oldElement;
+    if (boundElements != null && boundElements.length > 0) {
+      boundElements.forEach((boundElement) => {
+        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {
+          allBoundElementIds.add(boundElement.id);
         }
       });
       allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id)!);
@@ -600,12 +621,16 @@ export const fixBindingsAfterDuplication = (
   sceneElements
     .filter(({ id }) => allBindableElementIds.has(id))
     .forEach((bindableElement) => {
-      const { boundElementIds } = bindableElement;
-      if (boundElementIds != null && boundElementIds.length > 0) {
+      const { boundElements } = bindableElement;
+      if (boundElements != null && boundElements.length > 0) {
         mutateElement(bindableElement, {
-          boundElementIds: boundElementIds.map(
-            (boundElementId) =>
-              oldIdToDuplicatedId.get(boundElementId) ?? boundElementId,
+          boundElements: boundElements.map((boundElement) =>
+            oldIdToDuplicatedId.has(boundElement.id)
+              ? {
+                  id: oldIdToDuplicatedId.get(boundElement.id)!,
+                  type: boundElement.type,
+                }
+              : boundElement,
           ),
         });
       }
@@ -638,9 +663,9 @@ export const fixBindingsAfterDeletion = (
   const boundElementIds: Set<ExcalidrawElement["id"]> = new Set();
   deletedElements.forEach((deletedElement) => {
     if (isBindableElement(deletedElement)) {
-      deletedElement.boundElementIds?.forEach((id) => {
-        if (!deletedElementIds.has(id)) {
-          boundElementIds.add(id);
+      deletedElement.boundElements?.forEach((element) => {
+        if (!deletedElementIds.has(element.id)) {
+          boundElementIds.add(element.id);
         }
       });
     }

src/element/bounds.ts

@@ -520,11 +520,24 @@ export interface Box {
   minY: number;
   maxX: number;
   maxY: number;
+  midX: number;
+  midY: number;
+  width: number;
+  height: number;
 }
 
 export const getCommonBoundingBox = (
   elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[],
 ): Box => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
-  return { minX, minY, maxX, maxY };
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+    midX: (minX + maxX) / 2,
+    midY: (minY + maxY) / 2,
+  };
 };

src/element/collision.ts

@@ -31,7 +31,9 @@ import { Point } from "../types";
 import { Drawable } from "roughjs/bin/core";
 import { AppState } from "../types";
 import { getShapeForElement } from "../renderer/renderElement";
-import { isImageElement } from "./typeChecks";
+import { hasBoundTextElement, isImageElement } from "./typeChecks";
+import { isTextElement } from ".";
+import { isTransparent } from "../utils";
 
 const isElementDraggableFromInside = (
   element: NonDeletedExcalidrawElement,
@@ -43,9 +45,8 @@ const isElementDraggableFromInside = (
   if (element.type === "freedraw") {
     return true;
   }
-
-  const isDraggableFromInside = element.backgroundColor !== "transparent";
-
+  const isDraggableFromInside =
+    !isTransparent(element.backgroundColor) || hasBoundTextElement(element);
   if (element.type === "line") {
     return isDraggableFromInside && isPathALoop(element.points);
   }
@@ -83,19 +84,18 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
   );
 };
 
-const isHittingElementNotConsideringBoundingBox = (
+export const isHittingElementNotConsideringBoundingBox = (
   element: NonDeletedExcalidrawElement,
   appState: AppState,
   point: Point,
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
 
-  const check =
-    element.type === "text"
-      ? isStrictlyInside
-      : isElementDraggableFromInside(element)
-      ? isInsideCheck
-      : isNearCheck;
+  const check = isTextElement(element)
+    ? isStrictlyInside
+    : isElementDraggableFromInside(element)
+    ? isInsideCheck
+    : isNearCheck;
 
   return hitTestPointAgainstElement({ element, point, threshold, check });
 };

src/element/dragElements.ts

@@ -5,45 +5,86 @@ import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import Scene from "../scene/Scene";
 import { NonDeletedExcalidrawElement } from "./types";
-import { PointerDownState } from "../types";
+import { AppState, PointerDownState } from "../types";
+import { getBoundTextElementId } from "./textElement";
+import { isSelectedViaGroup } from "../groups";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
   selectedElements: NonDeletedExcalidrawElement[],
   pointerX: number,
   pointerY: number,
-  scene: Scene,
   lockDirection: boolean = false,
   distanceX: number = 0,
   distanceY: number = 0,
+  appState: AppState,
 ) => {
   const [x1, y1] = getCommonBounds(selectedElements);
   const offset = { x: pointerX - x1, y: pointerY - y1 };
   selectedElements.forEach((element) => {
-    let x: number;
-    let y: number;
-    if (lockDirection) {
-      const lockX = lockDirection && distanceX < distanceY;
-      const lockY = lockDirection && distanceX > distanceY;
-      const original = pointerDownState.originalElements.get(element.id);
-      x = lockX && original ? original.x : element.x + offset.x;
-      y = lockY && original ? original.y : element.y + offset.y;
-    } else {
-      x = element.x + offset.x;
-      y = element.y + offset.y;
+    updateElementCoords(
+      lockDirection,
+      distanceX,
+      distanceY,
+      pointerDownState,
+      element,
+      offset,
+    );
+    // update coords of bound text only if we're dragging the container directly
+    // (we don't drag the group that it's part of)
+    if (
+      // container isn't part of any group
+      // (perf optim so we don't check `isSelectedViaGroup()` in every case)
+      !element.groupIds.length ||
+      // container is part of a group, but we're dragging the container directly
+      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
+    ) {
+      const boundTextElementId = getBoundTextElementId(element);
+      if (boundTextElementId) {
+        const textElement =
+          Scene.getScene(element)!.getElement(boundTextElementId);
+        updateElementCoords(
+          lockDirection,
+          distanceX,
+          distanceY,
+          pointerDownState,
+          textElement!,
+          offset,
+        );
+      }
     }
-
-    mutateElement(element, {
-      x,
-      y,
-    });
-
     updateBoundElements(element, {
       simultaneouslyUpdated: selectedElements,
     });
   });
 };
 
+const updateElementCoords = (
+  lockDirection: boolean,
+  distanceX: number,
+  distanceY: number,
+  pointerDownState: PointerDownState,
+  element: NonDeletedExcalidrawElement,
+  offset: { x: number; y: number },
+) => {
+  let x: number;
+  let y: number;
+  if (lockDirection) {
+    const lockX = lockDirection && distanceX < distanceY;
+    const lockY = lockDirection && distanceX > distanceY;
+    const original = pointerDownState.originalElements.get(element.id);
+    x = lockX && original ? original.x : element.x + offset.x;
+    y = lockY && original ? original.y : element.y + offset.y;
+  } else {
+    x = element.x + offset.x;
+    y = element.y + offset.y;
+  }
+
+  mutateElement(element, {
+    x,
+    y,
+  });
+};
 export const getDragOffsetXY = (
   selectedElements: NonDeletedExcalidrawElement[],
   x: number,

src/element/image.ts

@@ -3,7 +3,6 @@
 // -----------------------------------------------------------------------------
 
 import { MIME_TYPES, SVG_NS } from "../constants";
-import { getDataURL } from "../data/blob";
 import { t } from "../i18n";
 import { AppClassProperties, DataURL, BinaryFiles } from "../types";
 import { isInitializedImageElement } from "./typeChecks";
@@ -110,81 +109,3 @@ export const normalizeSVG = async (SVGString: string) => {
     return svg.outerHTML;
   }
 };
-
-/**
- * To improve perf, uses `createImageBitmap` is available. But there are
- * quality issues across browsers, so don't use this API where quality matters.
- */
-export const speedyImageToCanvas = async (imageFile: Blob | File) => {
-  let imageSrc: HTMLImageElement | ImageBitmap;
-  if (
-    typeof ImageBitmap !== "undefined" &&
-    ImageBitmap.prototype &&
-    ImageBitmap.prototype.close &&
-    window.createImageBitmap
-  ) {
-    imageSrc = await window.createImageBitmap(imageFile);
-  } else {
-    imageSrc = await loadHTMLImageElement(await getDataURL(imageFile));
-  }
-  const { width, height } = imageSrc;
-
-  const canvas = document.createElement("canvas");
-  canvas.height = height;
-  canvas.width = width;
-  const context = canvas.getContext("2d")!;
-  context.drawImage(imageSrc, 0, 0, width, height);
-
-  if (typeof ImageBitmap !== "undefined" && imageSrc instanceof ImageBitmap) {
-    imageSrc.close();
-  }
-
-  return { canvas, context, width, height };
-};
-
-/**
- * Does its best at figuring out if an image (PNG) has any (semi)transparent
- * pixels. If not PNG, always returns false.
- */
-export const hasTransparentPixels = async (imageFile: Blob | File) => {
-  if (imageFile.type !== MIME_TYPES.png) {
-    return false;
-  }
-
-  const { findPngChunk, extractPngChunks } = await import("../data/image");
-
-  const buffer = await imageFile.arrayBuffer();
-  const chunks = extractPngChunks(new Uint8Array(buffer));
-
-  // early exit if tRNS not found and IHDR states no support for alpha
-  // -----------------------------------------------------------------------
-
-  const IHDR = findPngChunk(chunks, "IHDR");
-
-  if (
-    IHDR &&
-    IHDR.data[9] !== 4 &&
-    IHDR.data[9] !== 6 &&
-    !findPngChunk(chunks, "tRNS")
-  ) {
-    return false;
-  }
-
-  // otherwise loop through pixels to check if there's any actually
-  // (semi)transparent pixel
-  // -----------------------------------------------------------------------
-
-  const { width, height, context } = await speedyImageToCanvas(imageFile);
-  {
-    const { data } = context.getImageData(0, 0, width, height);
-    const len = data.byteLength;
-    let i = 3;
-    while (i <= len) {
-      if (data[i] !== 255) {
-        return true;
-      }
-      i += 4;
-    }
-  }
-  return false;
-};

src/element/index.ts

@@ -59,15 +59,6 @@ export {
 } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";
 
-export const getElementMap = (elements: readonly ExcalidrawElement[]) =>
-  elements.reduce(
-    (acc: { [key: string]: ExcalidrawElement }, element: ExcalidrawElement) => {
-      acc[element.id] = element;
-      return acc;
-    },
-    {},
-  );
-
 export const getSceneVersion = (elements: readonly ExcalidrawElement[]) =>
   elements.reduce((acc, el) => acc + el.version, 0);
 

src/element/linearElementEditor.ts

@@ -25,11 +25,19 @@ export class LinearElementEditor {
   public elementId: ExcalidrawElement["id"] & {
     _brand: "excalidrawLinearElementId";
   };
-  public activePointIndex: number | null;
+  /** indices */
+  public selectedPointsIndices: readonly number[] | null;
+
+  public pointerDownState: Readonly<{
+    prevSelectedPointsIndices: readonly number[] | null;
+    /** index */
+    lastClickedPoint: number;
+  }>;
+
   /** whether you're dragging a point */
   public isDragging: boolean;
   public lastUncommittedPoint: Point | null;
-  public pointerOffset: { x: number; y: number };
+  public pointerOffset: Readonly<{ x: number; y: number }>;
   public startBindingElement: ExcalidrawBindableElement | null | "keep";
   public endBindingElement: ExcalidrawBindableElement | null | "keep";
 
@@ -40,12 +48,16 @@ export class LinearElementEditor {
     Scene.mapElementToScene(this.elementId, scene);
     LinearElementEditor.normalizePoints(element);
 
-    this.activePointIndex = null;
+    this.selectedPointsIndices = null;
     this.lastUncommittedPoint = null;
     this.isDragging = false;
     this.pointerOffset = { x: 0, y: 0 };
     this.startBindingElement = "keep";
     this.endBindingElement = "keep";
+    this.pointerDownState = {
+      prevSelectedPointsIndices: null,
+      lastClickedPoint: -1,
+    };
   }
 
   // ---------------------------------------------------------------------------
@@ -66,6 +78,58 @@ export class LinearElementEditor {
     return null;
   }
 
+  static handleBoxSelection(
+    event: PointerEvent,
+    appState: AppState,
+    setState: React.Component<any, AppState>["setState"],
+  ) {
+    if (
+      !appState.editingLinearElement ||
+      appState.draggingElement?.type !== "selection"
+    ) {
+      return false;
+    }
+    const { editingLinearElement } = appState;
+    const { selectedPointsIndices, elementId } = editingLinearElement;
+
+    const element = LinearElementEditor.getElement(elementId);
+    if (!element) {
+      return false;
+    }
+
+    const [selectionX1, selectionY1, selectionX2, selectionY2] =
+      getElementAbsoluteCoords(appState.draggingElement);
+
+    const pointsSceneCoords =
+      LinearElementEditor.getPointsGlobalCoordinates(element);
+
+    const nextSelectedPoints = pointsSceneCoords.reduce(
+      (acc: number[], point, index) => {
+        if (
+          (point[0] >= selectionX1 &&
+            point[0] <= selectionX2 &&
+            point[1] >= selectionY1 &&
+            point[1] <= selectionY2) ||
+          (event.shiftKey && selectedPointsIndices?.includes(index))
+        ) {
+          acc.push(index);
+        }
+
+        return acc;
+      },
+      [],
+    );
+
+    setState({
+      editingLinearElement: {
+        ...editingLinearElement,
+        selectedPointsIndices: nextSelectedPoints.length
+          ? nextSelectedPoints
+          : null,
+      },
+    });
+  }
+
   /** @returns whether point was dragged */
   static handlePointDragging(
     appState: AppState,
@@ -74,21 +138,27 @@ export class LinearElementEditor {
     scenePointerY: number,
     maybeSuggestBinding: (
       element: NonDeleted<ExcalidrawLinearElement>,
-      startOrEnd: "start" | "end",
+      pointSceneCoords: { x: number; y: number }[],
     ) => void,
   ): boolean {
     if (!appState.editingLinearElement) {
       return false;
     }
     const { editingLinearElement } = appState;
-    const { activePointIndex, elementId, isDragging } = editingLinearElement;
+    const { selectedPointsIndices, elementId, isDragging } =
+      editingLinearElement;
 
     const element = LinearElementEditor.getElement(elementId);
     if (!element) {
       return false;
     }
 
-    if (activePointIndex != null && activePointIndex > -1) {
+    // point that's being dragged (out of all selected points)
+    const draggingPoint = element.points[
+      editingLinearElement.pointerDownState.lastClickedPoint
+    ] as [number, number] | undefined;
+
+    if (selectedPointsIndices && draggingPoint) {
       if (isDragging === false) {
         setState({
           editingLinearElement: {
@@ -98,18 +168,79 @@ export class LinearElementEditor {
         });
       }
 
-      const newPoint = LinearElementEditor.createPointAt(
+      const newDraggingPointPosition = LinearElementEditor.createPointAt(
         element,
         scenePointerX - editingLinearElement.pointerOffset.x,
         scenePointerY - editingLinearElement.pointerOffset.y,
         appState.gridSize,
       );
-      LinearElementEditor.movePoint(element, activePointIndex, newPoint);
+
+      const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
+      const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
+
+      LinearElementEditor.movePoints(
+        element,
+        selectedPointsIndices.map((pointIndex) => {
+          const newPointPosition =
+            pointIndex ===
+            editingLinearElement.pointerDownState.lastClickedPoint
+              ? LinearElementEditor.createPointAt(
+                  element,
+                  scenePointerX - editingLinearElement.pointerOffset.x,
+                  scenePointerY - editingLinearElement.pointerOffset.y,
+                  appState.gridSize,
+                )
+              : ([
+                  element.points[pointIndex][0] + deltaX,
+                  element.points[pointIndex][1] + deltaY,
+                ] as const);
+          return {
+            index: pointIndex,
+            point: newPointPosition,
+            isDragging:
+              pointIndex ===
+              editingLinearElement.pointerDownState.lastClickedPoint,
+          };
+        }),
+      );
+
+      // suggest bindings for first and last point if selected
       if (isBindingElement(element)) {
-        maybeSuggestBinding(element, activePointIndex === 0 ? "start" : "end");
+        const coords: { x: number; y: number }[] = [];
+
+        const firstSelectedIndex = selectedPointsIndices[0];
+        if (firstSelectedIndex === 0) {
+          coords.push(
+            tupleToCoors(
+              LinearElementEditor.getPointGlobalCoordinates(
+                element,
+                element.points[0],
+              ),
+            ),
+          );
+        }
+
+        const lastSelectedIndex =
+          selectedPointsIndices[selectedPointsIndices.length - 1];
+        if (lastSelectedIndex === element.points.length - 1) {
+          coords.push(
+            tupleToCoors(
+              LinearElementEditor.getPointGlobalCoordinates(
+                element,
+                element.points[lastSelectedIndex],
+              ),
+            ),
+          );
+        }
+
+        if (coords.length) {
+          maybeSuggestBinding(element, coords);
+        }
       }
+
       return true;
     }
+
     return false;
   }
 
@@ -118,45 +249,79 @@ export class LinearElementEditor {
     editingLinearElement: LinearElementEditor,
     appState: AppState,
   ): LinearElementEditor {
-    const { elementId, activePointIndex, isDragging } = editingLinearElement;
+    const { elementId, selectedPointsIndices, isDragging, pointerDownState } =
+      editingLinearElement;
     const element = LinearElementEditor.getElement(elementId);
     if (!element) {
       return editingLinearElement;
     }
 
-    let binding = {};
-    if (
-      isDragging &&
-      (activePointIndex === 0 || activePointIndex === element.points.length - 1)
-    ) {
-      if (isPathALoop(element.points, appState.zoom.value)) {
-        LinearElementEditor.movePoint(
-          element,
-          activePointIndex,
-          activePointIndex === 0
-            ? element.points[element.points.length - 1]
-            : element.points[0],
-        );
+    const bindings: Partial<
+      Pick<
+        InstanceType<typeof LinearElementEditor>,
+        "startBindingElement" | "endBindingElement"
+      >
+    > = {};
+
+    if (isDragging && selectedPointsIndices) {
+      for (const selectedPoint of selectedPointsIndices) {
+        if (
+          selectedPoint === 0 ||
+          selectedPoint === element.points.length - 1
+        ) {
+          if (isPathALoop(element.points, appState.zoom.value)) {
+            LinearElementEditor.movePoints(element, [
+              {
+                index: selectedPoint,
+                point:
+                  selectedPoint === 0
+                    ? element.points[element.points.length - 1]
+                    : element.points[0],
+              },
+            ]);
+          }
+
+          const bindingElement = isBindingEnabled(appState)
+            ? getHoveredElementForBinding(
+                tupleToCoors(
+                  LinearElementEditor.getPointAtIndexGlobalCoordinates(
+                    element,
+                    selectedPoint!,
+                  ),
+                ),
+                Scene.getScene(element)!,
+              )
+            : null;
+
+          bindings[
+            selectedPoint === 0 ? "startBindingElement" : "endBindingElement"
+          ] = bindingElement;
+        }
       }
-      const bindingElement = isBindingEnabled(appState)
-        ? getHoveredElementForBinding(
-            tupleToCoors(
-              LinearElementEditor.getPointAtIndexGlobalCoordinates(
-                element,
-                activePointIndex!,
-              ),
-            ),
-            Scene.getScene(element)!,
-          )
-        : null;
-      binding = {
-        [activePointIndex === 0 ? "startBindingElement" : "endBindingElement"]:
-          bindingElement,
-      };
     }
+
     return {
       ...editingLinearElement,
-      ...binding,
+      ...bindings,
+      // if clicking without previously dragging a point(s), and not holding
+      // shift, deselect all points except the one clicked. If holding shift,
+      // toggle the point.
+      selectedPointsIndices:
+        isDragging || event.shiftKey
+          ? !isDragging &&
+            event.shiftKey &&
+            pointerDownState.prevSelectedPointsIndices?.includes(
+              pointerDownState.lastClickedPoint,
+            )
+            ? selectedPointsIndices &&
+              selectedPointsIndices.filter(
+                (pointIndex) =>
+                  pointIndex !== pointerDownState.lastClickedPoint,
+              )
+            : selectedPointsIndices
+          : selectedPointsIndices?.includes(pointerDownState.lastClickedPoint)
+          ? [pointerDownState.lastClickedPoint]
+          : selectedPointsIndices,
       isDragging: false,
       pointerOffset: { x: 0, y: 0 },
     };
@@ -206,7 +371,12 @@ export class LinearElementEditor {
       setState({
         editingLinearElement: {
           ...appState.editingLinearElement,
-          activePointIndex: element.points.length - 1,
+          pointerDownState: {
+            prevSelectedPointsIndices:
+              appState.editingLinearElement.selectedPointsIndices,
+            lastClickedPoint: -1,
+          },
+          selectedPointsIndices: [element.points.length - 1],
           lastUncommittedPoint: null,
           endBindingElement: getHoveredElementForBinding(
             scenePointer,
@@ -259,10 +429,28 @@ export class LinearElementEditor {
         element.angle,
       );
 
+    const nextSelectedPointsIndices =
+      clickedPointIndex > -1 || event.shiftKey
+        ? event.shiftKey ||
+          appState.editingLinearElement.selectedPointsIndices?.includes(
+            clickedPointIndex,
+          )
+          ? normalizeSelectedPoints([
+              ...(appState.editingLinearElement.selectedPointsIndices || []),
+              clickedPointIndex,
+            ])
+          : [clickedPointIndex]
+        : null;
+
     setState({
       editingLinearElement: {
         ...appState.editingLinearElement,
-        activePointIndex: clickedPointIndex > -1 ? clickedPointIndex : null,
+        pointerDownState: {
+          prevSelectedPointsIndices:
+            appState.editingLinearElement.selectedPointsIndices,
+          lastClickedPoint: clickedPointIndex,
+        },
+        selectedPointsIndices: nextSelectedPointsIndices,
         pointerOffset: targetPoint
           ? {
               x: scenePointer.x - targetPoint[0],
@@ -292,7 +480,7 @@ export class LinearElementEditor {
 
     if (!event.altKey) {
       if (lastPoint === lastUncommittedPoint) {
-        LinearElementEditor.movePoint(element, points.length - 1, "delete");
+        LinearElementEditor.deletePoints(element, [points.length - 1]);
       }
       return { ...editingLinearElement, lastUncommittedPoint: null };
     }
@@ -305,13 +493,14 @@ export class LinearElementEditor {
     );
 
     if (lastPoint === lastUncommittedPoint) {
-      LinearElementEditor.movePoint(
-        element,
-        element.points.length - 1,
-        newPoint,
-      );
+      LinearElementEditor.movePoints(element, [
+        {
+          index: element.points.length - 1,
+          point: newPoint,
+        },
+      ]);
     } else {
-      LinearElementEditor.movePoint(element, "new", newPoint);
+      LinearElementEditor.addPoints(element, [{ point: newPoint }]);
     }
 
     return {
@@ -320,6 +509,21 @@ export class LinearElementEditor {
     };
   }
 
+  /** scene coords */
+  static getPointGlobalCoordinates(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    point: Point,
+  ) {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+
+    let { x, y } = element;
+    [x, y] = rotate(x + point[0], y + point[1], cx, cy, element.angle);
+    return [x, y] as const;
+  }
+
+  /** scene coords */
   static getPointsGlobalCoordinates(
     element: NonDeleted<ExcalidrawLinearElement>,
   ) {
@@ -439,22 +643,122 @@ export class LinearElementEditor {
     mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
   }
 
-  static movePointByOffset(
-    element: NonDeleted<ExcalidrawLinearElement>,
-    pointIndex: number,
-    offset: { x: number; y: number },
-  ) {
-    const [x, y] = element.points[pointIndex];
-    LinearElementEditor.movePoint(element, pointIndex, [
-      x + offset.x,
-      y + offset.y,
-    ]);
+  static duplicateSelectedPoints(appState: AppState) {
+    if (!appState.editingLinearElement) {
+      return false;
+    }
+
+    const { selectedPointsIndices, elementId } = appState.editingLinearElement;
+
+    const element = LinearElementEditor.getElement(elementId);
+
+    if (!element || selectedPointsIndices === null) {
+      return false;
+    }
+
+    const { points } = element;
+
+    const nextSelectedIndices: number[] = [];
+
+    let pointAddedToEnd = false;
+    let indexCursor = -1;
+    const nextPoints = points.reduce((acc: Point[], point, index) => {
+      ++indexCursor;
+      acc.push(point);
+
+      const isSelected = selectedPointsIndices.includes(index);
+      if (isSelected) {
+        const nextPoint = points[index + 1];
+
+        if (!nextPoint) {
+          pointAddedToEnd = true;
+        }
+        acc.push(
+          nextPoint
+            ? [(point[0] + nextPoint[0]) / 2, (point[1] + nextPoint[1]) / 2]
+            : [point[0], point[1]],
+        );
+
+        nextSelectedIndices.push(indexCursor + 1);
+        ++indexCursor;
+      }
+
+      return acc;
+    }, []);
+
+    mutateElement(element, { points: nextPoints });
+
+    // temp hack to ensure the line doesn't move when adding point to the end,
+    // potentially expanding the bounding box
+    if (pointAddedToEnd) {
+      const lastPoint = element.points[element.points.length - 1];
+      LinearElementEditor.movePoints(element, [
+        {
+          index: element.points.length - 1,
+          point: [lastPoint[0] + 30, lastPoint[1] + 30],
+        },
+      ]);
+    }
+
+    return {
+      appState: {
+        ...appState,
+        editingLinearElement: {
+          ...appState.editingLinearElement,
+          selectedPointsIndices: nextSelectedIndices,
+        },
+      },
+    };
   }
 
-  static movePoint(
+  static deletePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
-    pointIndex: number | "new",
-    targetPosition: Point | "delete",
+    pointIndices: readonly number[],
+  ) {
+    let offsetX = 0;
+    let offsetY = 0;
+
+    const isDeletingOriginPoint = pointIndices.includes(0);
+
+    // if deleting first point, make the next to be [0,0] and recalculate
+    // positions of the rest with respect to it
+    if (isDeletingOriginPoint) {
+      const firstNonDeletedPoint = element.points.find((point, idx) => {
+        return !pointIndices.includes(idx);
+      });
+      if (firstNonDeletedPoint) {
+        offsetX = firstNonDeletedPoint[0];
+        offsetY = firstNonDeletedPoint[1];
+      }
+    }
+
+    const nextPoints = element.points.reduce((acc: Point[], point, idx) => {
+      if (!pointIndices.includes(idx)) {
+        acc.push(
+          !acc.length ? [0, 0] : [point[0] - offsetX, point[1] - offsetY],
+        );
+      }
+      return acc;
+    }, []);
+
+    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+  }
+
+  static addPoints(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    targetPoints: { point: Point }[],
+  ) {
+    const offsetX = 0;
+    const offsetY = 0;
+
+    const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
+
+    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+  }
+
+  static movePoints(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    targetPoints: { index: number; point: Point; isDragging?: boolean }[],
     otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
   ) {
     const { points } = element;
@@ -467,49 +771,50 @@ export class LinearElementEditor {
     let offsetX = 0;
     let offsetY = 0;
 
-    let nextPoints: (readonly [number, number])[];
-    if (targetPosition === "delete") {
-      // remove point
-      if (pointIndex === "new") {
-        throw new Error("invalid args in movePoint");
-      }
-      nextPoints = points.slice();
-      nextPoints.splice(pointIndex, 1);
-      if (pointIndex === 0) {
-        // if deleting first point, make the next to be [0,0] and recalculate
-        // positions of the rest with respect to it
-        offsetX = nextPoints[0][0];
-        offsetY = nextPoints[0][1];
-        nextPoints = nextPoints.map((point, idx) => {
-          if (idx === 0) {
-            return [0, 0];
-          }
-          return [point[0] - offsetX, point[1] - offsetY];
-        });
-      }
-    } else if (pointIndex === "new") {
-      nextPoints = [...points, targetPosition];
-    } else {
-      const deltaX = targetPosition[0] - points[pointIndex][0];
-      const deltaY = targetPosition[1] - points[pointIndex][1];
-      nextPoints = points.map((point, idx) => {
-        if (idx === pointIndex) {
-          if (idx === 0) {
-            offsetX = deltaX;
-            offsetY = deltaY;
-            return point;
-          }
-          offsetX = 0;
-          offsetY = 0;
+    const selectedOriginPoint = targetPoints.find(({ index }) => index === 0);
 
-          return [point[0] + deltaX, point[1] + deltaY] as const;
-        }
-        return offsetX || offsetY
-          ? ([point[0] - offsetX, point[1] - offsetY] as const)
-          : point;
-      });
+    if (selectedOriginPoint) {
+      offsetX =
+        selectedOriginPoint.point[0] - points[selectedOriginPoint.index][0];
+      offsetY =
+        selectedOriginPoint.point[1] - points[selectedOriginPoint.index][1];
     }
 
+    const nextPoints = points.map((point, idx) => {
+      const selectedPointData = targetPoints.find((p) => p.index === idx);
+      if (selectedPointData) {
+        if (selectedOriginPoint) {
+          return point;
+        }
+
+        const deltaX =
+          selectedPointData.point[0] - points[selectedPointData.index][0];
+        const deltaY =
+          selectedPointData.point[1] - points[selectedPointData.index][1];
+
+        return [point[0] + deltaX, point[1] + deltaY] as const;
+      }
+      return offsetX || offsetY
+        ? ([point[0] - offsetX, point[1] - offsetY] as const)
+        : point;
+    });
+
+    LinearElementEditor._updatePoints(
+      element,
+      nextPoints,
+      offsetX,
+      offsetY,
+      otherUpdates,
+    );
+  }
+
+  private static _updatePoints(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    nextPoints: readonly Point[],
+    offsetX: number,
+    offsetY: number,
+    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
+  ) {
     const nextCoords = getElementPointsCoords(
       element,
       nextPoints,
@@ -517,7 +822,7 @@ export class LinearElementEditor {
     );
     const prevCoords = getElementPointsCoords(
       element,
-      points,
+      element.points,
       element.strokeSharpness || "round",
     );
     const nextCenterX = (nextCoords[0] + nextCoords[2]) / 2;
@@ -536,3 +841,13 @@ export class LinearElementEditor {
     });
   }
 }
+
+const normalizeSelectedPoints = (
+  points: (number | null)[],
+): number[] | null => {
+  let nextPoints = [
+    ...new Set(points.filter((p) => p !== null && p !== -1)),
+  ] as number[];
+  nextPoints = nextPoints.sort((a, b) => a - b);
+  return nextPoints.length ? nextPoints : null;
+};

src/element/mutateElement.ts

@@ -4,6 +4,7 @@ import Scene from "../scene/Scene";
 import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
 import { Point } from "../types";
+import { getUpdatedTimestamp } from "../utils";
 
 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
@@ -92,6 +93,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 
   element.version++;
   element.versionNonce = randomInteger();
+  element.updated = getUpdatedTimestamp();
 
   if (informMutation) {
     Scene.getScene(element)?.informMutation();
@@ -126,13 +128,14 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
   return {
     ...element,
     ...updates,
+    updated: getUpdatedTimestamp(),
     version: element.version + 1,
     versionNonce: randomInteger(),
   };
 };
 
 /**
- * Mutates element and updates `version` & `versionNonce`.
+ * Mutates element, bumping `version`, `versionNonce`, and `updated`.
  *
  * NOTE: does not trigger re-render.
  */
@@ -142,5 +145,6 @@ export const bumpVersion = (
 ) => {
   element.version = (version ?? element.version) + 1;
   element.versionNonce = randomInteger();
+  element.updated = getUpdatedTimestamp();
   return element;
 };

src/element/newElement.ts

@@ -11,23 +11,27 @@ import {
   Arrowhead,
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
+  ExcalidrawRectangleElement,
 } from "../element/types";
-import { measureText, getFontString } from "../utils";
+import { getFontString, getUpdatedTimestamp, isTestEnv } from "../utils";
 import { randomInteger, randomId } from "../random";
-import { newElementWith } from "./mutateElement";
+import { mutateElement, newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
 import { AppState } from "../types";
 import { getElementAbsoluteCoords } from ".";
 import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
+import { getContainerElement, measureText } from "./textElement";
+import { isBoundToContainer } from "./typeChecks";
+import { BOUND_TEXT_PADDING } from "../constants";
 
 type ElementConstructorOpts = MarkOptional<
-  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted">,
+  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
   | "width"
   | "height"
   | "angle"
   | "groupIds"
-  | "boundElementIds"
+  | "boundElements"
   | "seed"
   | "version"
   | "versionNonce"
@@ -50,32 +54,36 @@ const _newElementBase = <T extends ExcalidrawElement>(
     angle = 0,
     groupIds = [],
     strokeSharpness,
-    boundElementIds = null,
+    boundElements = null,
     ...rest
   }: ElementConstructorOpts & Omit<Partial<ExcalidrawGenericElement>, "type">,
-) => ({
-  id: rest.id || randomId(),
-  type,
-  x,
-  y,
-  width,
-  height,
-  angle,
-  strokeColor,
-  backgroundColor,
-  fillStyle,
-  strokeWidth,
-  strokeStyle,
-  roughness,
-  opacity,
-  groupIds,
-  strokeSharpness,
-  seed: rest.seed ?? randomInteger(),
-  version: rest.version || 1,
-  versionNonce: rest.versionNonce ?? 0,
-  isDeleted: false as false,
-  boundElementIds,
-});
+) => {
+  const element = {
+    id: rest.id || randomId(),
+    type,
+    x,
+    y,
+    width,
+    height,
+    angle,
+    strokeColor,
+    backgroundColor,
+    fillStyle,
+    strokeWidth,
+    strokeStyle,
+    roughness,
+    opacity,
+    groupIds,
+    strokeSharpness,
+    seed: rest.seed ?? randomInteger(),
+    version: rest.version || 1,
+    versionNonce: rest.versionNonce ?? 0,
+    isDeleted: false as false,
+    boundElements,
+    updated: getUpdatedTimestamp(),
+  };
+  return element;
+};
 
 export const newElement = (
   opts: {
@@ -113,6 +121,7 @@ export const newTextElement = (
     fontFamily: FontFamilyValues;
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
+    containerId?: ExcalidrawRectangleElement["id"];
   } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawTextElement> => {
   const metrics = measureText(opts.text, getFontString(opts));
@@ -130,6 +139,8 @@ export const newTextElement = (
       width: metrics.width,
       height: metrics.height,
       baseline: metrics.baseline,
+      containerId: opts.containerId || null,
+      originalText: opts.text,
     },
     {},
   );
@@ -146,18 +157,29 @@ const getAdjustedDimensions = (
   height: number;
   baseline: number;
 } => {
+  let maxWidth = null;
+  const container = getContainerElement(element);
+  if (container) {
+    maxWidth = container.width - BOUND_TEXT_PADDING * 2;
+  }
   const {
     width: nextWidth,
     height: nextHeight,
     baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element));
+  } = measureText(nextText, getFontString(element), maxWidth);
   const { textAlign, verticalAlign } = element;
-
   let x: number;
   let y: number;
-
-  if (textAlign === "center" && verticalAlign === "middle") {
-    const prevMetrics = measureText(element.text, getFontString(element));
+  if (
+    textAlign === "center" &&
+    verticalAlign === "middle" &&
+    !element.containerId
+  ) {
+    const prevMetrics = measureText(
+      element.text,
+      getFontString(element),
+      maxWidth,
+    );
     const offsets = getTextElementPositionOffsets(element, {
       width: nextWidth - prevMetrics.width,
       height: nextHeight - prevMetrics.height,
@@ -194,6 +216,22 @@ const getAdjustedDimensions = (
     );
   }
 
+  // make sure container dimensions are set properly when
+  // text editor overflows beyond viewport dimensions
+  if (isBoundToContainer(element)) {
+    const container = getContainerElement(element)!;
+    let height = container.height;
+    let width = container.width;
+    if (nextHeight > height - BOUND_TEXT_PADDING * 2) {
+      height = nextHeight + BOUND_TEXT_PADDING * 2;
+    }
+    if (nextWidth > width - BOUND_TEXT_PADDING * 2) {
+      width = nextWidth + BOUND_TEXT_PADDING * 2;
+    }
+    if (height !== container.height || width !== container.width) {
+      mutateElement(container, { height, width });
+    }
+  }
   return {
     width: nextWidth,
     height: nextHeight,
@@ -205,12 +243,26 @@ const getAdjustedDimensions = (
 
 export const updateTextElement = (
   element: ExcalidrawTextElement,
-  { text, isDeleted }: { text: string; isDeleted?: boolean },
+  {
+    text,
+    isDeleted,
+    originalText,
+  }: { text: string; isDeleted?: boolean; originalText: string },
+
+  isSubmit: boolean,
 ): ExcalidrawTextElement => {
+  const boundToContainer = isBoundToContainer(element);
+
+  // Don't update dimensions and text value for bounded text unless submitted
+  const dimensions =
+    boundToContainer && !isSubmit
+      ? undefined
+      : getAdjustedDimensions(element, text);
   return newElementWith(element, {
     text,
+    originalText,
     isDeleted: isDeleted ?? element.isDeleted,
-    ...getAdjustedDimensions(element, text),
+    ...dimensions,
   });
 };
 
@@ -324,7 +376,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
   overrides?: Partial<TElement>,
 ): TElement => {
   let copy: TElement = deepCopyElement(element);
-  if (process.env.NODE_ENV === "test") {
+  if (isTestEnv()) {
     copy.id = `${copy.id}_copy`;
     // `window.h` may not be defined in some unit tests
     if (
@@ -337,6 +389,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
   } else {
     copy.id = randomId();
   }
+  copy.updated = getUpdatedTimestamp();
   copy.seed = randomInteger();
   copy.groupIds = getNewGroupIdsForDuplication(
     copy.groupIds,

src/element/resizeElements.ts

@@ -25,7 +25,7 @@ import {
 } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
-import { measureText, getFontString } from "../utils";
+import { getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import {
   TransformHandleType,
@@ -33,6 +33,13 @@ import {
   TransformHandleDirection,
 } from "./transformHandles";
 import { Point, PointerDownState } from "../types";
+import Scene from "../scene/Scene";
+import {
+  getApproxMinLineWidth,
+  getBoundTextElementId,
+  handleBindTextResize,
+  measureText,
+} from "./textElement";
 
 export const normalizeAngle = (angle: number): number => {
   if (angle >= 2 * Math.PI) {
@@ -132,6 +139,7 @@ export const transformElements = (
         pointerX,
         pointerY,
       );
+      handleBindTextResize(selectedElements, transformHandleType);
       return true;
     }
   }
@@ -154,6 +162,11 @@ const rotateSingleElement = (
   }
   angle = normalizeAngle(angle);
   mutateElement(element, { angle });
+  const boundTextElementId = getBoundTextElementId(element);
+  if (boundTextElementId) {
+    const textElement = Scene.getScene(element)!.getElement(boundTextElementId);
+    mutateElement(textElement!, { angle });
+  }
 };
 
 // used in DEV only
@@ -272,6 +285,7 @@ const measureFontSizeFromWH = (
   const metrics = measureText(
     element.text,
     getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
+    element.containerId ? element.width : null,
   );
   return {
     size: nextFontSize,
@@ -413,6 +427,9 @@ export const resizeSingleElement = (
     element.width,
     element.height,
   );
+
+  const boundTextElementId = getBoundTextElementId(element);
+
   const boundsCurrentWidth = esx2 - esx1;
   const boundsCurrentHeight = esy2 - esy1;
 
@@ -473,6 +490,11 @@ export const resizeSingleElement = (
   const newBoundsWidth = newBoundsX2 - newBoundsX1;
   const newBoundsHeight = newBoundsY2 - newBoundsY1;
 
+  // don't allow resize to negative dimensions when text is bounded to container
+  if ((newBoundsWidth < 0 || newBoundsHeight < 0) && boundTextElementId) {
+    return;
+  }
+
   // Calculate new topLeft based on fixed corner during resize
   let newTopLeft = [...startTopLeft] as [number, number];
   if (["n", "w", "nw"].includes(transformHandleDirection)) {
@@ -565,9 +587,16 @@ export const resizeSingleElement = (
       ],
     });
   }
+  let minWidth = 0;
+  if (boundTextElementId) {
+    const boundTextElement = Scene.getScene(element)!.getElement(
+      boundTextElementId,
+    ) as ExcalidrawTextElement;
+    minWidth = getApproxMinLineWidth(getFontString(boundTextElement));
+  }
 
   if (
-    resizedElement.width !== 0 &&
+    resizedElement.width > minWidth &&
     resizedElement.height !== 0 &&
     Number.isFinite(resizedElement.x) &&
     Number.isFinite(resizedElement.y)
@@ -576,6 +605,7 @@ export const resizeSingleElement = (
       newSize: { width: resizedElement.width, height: resizedElement.height },
     });
     mutateElement(element, resizedElement);
+    handleBindTextResize([element], transformHandleDirection);
   }
 };
 
@@ -647,7 +677,7 @@ const resizeMultipleElements = (
         const width = element.width * scale;
         const height = element.height * scale;
         let font: { fontSize?: number; baseline?: number } = {};
-        if (element.type === "text") {
+        if (isTextElement(element)) {
           const nextFont = measureFontSizeFromWH(element, width, height);
           if (nextFont === null) {
             return null;
@@ -728,6 +758,16 @@ const rotateMultipleElements = (
       y: element.y + (rotatedCY - cy),
       angle: normalizeAngle(centerAngle + origAngle),
     });
+    const boundTextElementId = getBoundTextElementId(element);
+    if (boundTextElementId) {
+      const textElement =
+        Scene.getScene(element)!.getElement(boundTextElementId)!;
+      mutateElement(textElement, {
+        x: textElement.x + (rotatedCX - cx),
+        y: textElement.y + (rotatedCY - cy),
+        angle: normalizeAngle(centerAngle + origAngle),
+      });
+    }
   });
 };
 

src/element/textElement.test.ts

@@ -0,0 +1,140 @@
+import { wrapText } from "./textElement";
+import { FontString } from "./types";
+
+describe("Test wrapText", () => {
+  const font = "20px Cascadia, width: Segoe UI Emoji" as FontString;
+
+  describe("When text doesn't contain new lines", () => {
+    const text = "Hello whats up";
+    [
+      {
+        desc: "break all words when width of each word is less than container width",
+        width: 90,
+        res: `Hello 
+whats 
+up`,
+      },
+      {
+        desc: "break all characters when width of each character is less than container width",
+        width: 25,
+        res: `H
+e
+l
+l
+o
+w
+h
+a
+t
+s
+u
+p`,
+      },
+      {
+        desc: "break words as per the width",
+
+        width: 150,
+        res: `Hello whats 
+up`,
+      },
+      {
+        desc: "fit the container",
+
+        width: 250,
+        res: "Hello whats up",
+      },
+    ].forEach((data) => {
+      it(`should ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+  describe("When text contain new lines", () => {
+    const text = `Hello
+whats up`;
+    [
+      {
+        desc: "break all words when width of each word is less than container width",
+        width: 90,
+        res: `Hello
+whats 
+up`,
+      },
+      {
+        desc: "break all characters when width of each character is less than container width",
+        width: 25,
+        res: `H
+e
+l
+l
+o
+w
+h
+a
+t
+s
+u
+p`,
+      },
+      {
+        desc: "break words as per the width",
+
+        width: 150,
+        res: `Hello
+whats up`,
+      },
+      {
+        desc: "fit the container",
+
+        width: 250,
+        res: `Hello
+whats up`,
+      },
+    ].forEach((data) => {
+      it(`should respect new lines and ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+  describe("When text is long", () => {
+    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
+    [
+      {
+        desc: "fit characters of long string as per container width",
+        width: 170,
+        res: `hellolongtextth
+isiswhatsupwith
+youIamtypingggg
+gandtypinggg 
+break it now`,
+      },
+
+      {
+        desc: "fit characters of long string as per container width and break words as per the width",
+
+        width: 130,
+        res: `hellolongte
+xtthisiswha
+tsupwithyou
+Iamtypinggg
+ggandtyping
+gg break it
+now`,
+      },
+      {
+        desc: "fit the long text when container width is greater than text length and move the rest to next line",
+
+        width: 600,
+        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg 
+break it now`,
+      },
+    ].forEach((data) => {
+      it(`should ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+});

src/element/textElement.ts

@@ -1,12 +1,440 @@
-import { measureText, getFontString } from "../utils";
-import { ExcalidrawTextElement } from "./types";
+import { getFontString, arrayToMap, isTestEnv } from "../utils";
+import {
+  ExcalidrawBindableElement,
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+  ExcalidrawTextElementWithContainer,
+  FontString,
+  NonDeletedExcalidrawElement,
+} from "./types";
 import { mutateElement } from "./mutateElement";
+import { BOUND_TEXT_PADDING } from "../constants";
+import { MaybeTransformHandleType } from "./transformHandles";
+import Scene from "../scene/Scene";
+import { AppState } from "../types";
+
+export const redrawTextBoundingBox = (
+  element: ExcalidrawTextElement,
+  container: ExcalidrawElement | null,
+  appState: AppState,
+) => {
+  const maxWidth = container
+    ? container.width - BOUND_TEXT_PADDING * 2
+    : undefined;
+  let text = element.text;
+
+  if (container) {
+    text = wrapText(
+      element.originalText,
+      getFontString(element),
+      container.width,
+    );
+  }
+  const metrics = measureText(
+    element.originalText,
+    getFontString(element),
+    maxWidth,
+  );
+
+  let coordY = element.y;
+  // Resize container and vertically center align the text
+  if (container) {
+    coordY = container.y + container.height / 2 - metrics.height / 2;
+    let nextHeight = container.height;
+    if (metrics.height > container.height - BOUND_TEXT_PADDING * 2) {
+      nextHeight = metrics.height + BOUND_TEXT_PADDING * 2;
+      coordY = container.y + nextHeight / 2 - metrics.height / 2;
+    }
+    mutateElement(container, { height: nextHeight });
+  }
 
-export const redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
-  const metrics = measureText(element.text, getFontString(element));
   mutateElement(element, {
     width: metrics.width,
     height: metrics.height,
     baseline: metrics.baseline,
+    y: coordY,
+    text,
   });
 };
+
+export const bindTextToShapeAfterDuplication = (
+  sceneElements: ExcalidrawElement[],
+  oldElements: ExcalidrawElement[],
+  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+): void => {
+  const sceneElementMap = arrayToMap(sceneElements) as Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement
+  >;
+  oldElements.forEach((element) => {
+    const newElementId = oldIdToDuplicatedId.get(element.id) as string;
+    const boundTextElementId = getBoundTextElementId(element);
+
+    if (boundTextElementId) {
+      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId)!;
+      mutateElement(
+        sceneElementMap.get(newElementId) as ExcalidrawBindableElement,
+        {
+          boundElements: element.boundElements?.concat({
+            type: "text",
+            id: newTextElementId,
+          }),
+        },
+      );
+      mutateElement(
+        sceneElementMap.get(newTextElementId) as ExcalidrawTextElement,
+        {
+          containerId: newElementId,
+        },
+      );
+    }
+  });
+};
+
+export const handleBindTextResize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  transformHandleType: MaybeTransformHandleType,
+) => {
+  elements.forEach((element) => {
+    const boundTextElementId = getBoundTextElementId(element);
+    if (boundTextElementId) {
+      const textElement = Scene.getScene(element)!.getElement(
+        boundTextElementId,
+      ) as ExcalidrawTextElement;
+      if (textElement && textElement.text) {
+        if (!element) {
+          return;
+        }
+        let text = textElement.text;
+        let nextHeight = textElement.height;
+        let containerHeight = element.height;
+        let nextBaseLine = textElement.baseline;
+        if (transformHandleType !== "n" && transformHandleType !== "s") {
+          if (text) {
+            text = wrapText(
+              textElement.originalText,
+              getFontString(textElement),
+              element.width,
+            );
+          }
+
+          const dimensions = measureText(
+            text,
+            getFontString(textElement),
+            element.width,
+          );
+          nextHeight = dimensions.height;
+          nextBaseLine = dimensions.baseline;
+        }
+        // increase height in case text element height exceeds
+        if (nextHeight > element.height - BOUND_TEXT_PADDING * 2) {
+          containerHeight = nextHeight + BOUND_TEXT_PADDING * 2;
+          const diff = containerHeight - element.height;
+          // fix the y coord when resizing from ne/nw/n
+          const updatedY =
+            transformHandleType === "ne" ||
+            transformHandleType === "nw" ||
+            transformHandleType === "n"
+              ? element.y - diff
+              : element.y;
+          mutateElement(element, {
+            height: containerHeight,
+            y: updatedY,
+          });
+        }
+
+        const updatedY = element.y + containerHeight / 2 - nextHeight / 2;
+        mutateElement(textElement, {
+          text,
+          // preserve padding and set width correctly
+          width: element.width - BOUND_TEXT_PADDING * 2,
+          height: nextHeight,
+          x: element.x + BOUND_TEXT_PADDING,
+          y: updatedY,
+          baseline: nextBaseLine,
+        });
+      }
+    }
+  });
+};
+
+// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
+export const measureText = (
+  text: string,
+  font: FontString,
+  maxWidth?: number | null,
+) => {
+  text = text
+    .split("\n")
+    // replace empty lines with single space because leading/trailing empty
+    // lines would be stripped from computation
+    .map((x) => x || " ")
+    .join("\n");
+  const container = document.createElement("div");
+  container.style.position = "absolute";
+  container.style.whiteSpace = "pre";
+  container.style.font = font;
+  container.style.minHeight = "1em";
+
+  if (maxWidth) {
+    const lineHeight = getApproxLineHeight(font);
+    container.style.width = `${String(maxWidth)}px`;
+    container.style.maxWidth = `${String(maxWidth)}px`;
+    container.style.overflow = "hidden";
+    container.style.wordBreak = "break-word";
+    container.style.lineHeight = `${String(lineHeight)}px`;
+    container.style.whiteSpace = "pre-wrap";
+  }
+  document.body.appendChild(container);
+  container.innerText = text;
+
+  const span = document.createElement("span");
+  span.style.display = "inline-block";
+  span.style.overflow = "hidden";
+  span.style.width = "1px";
+  span.style.height = "1px";
+  container.appendChild(span);
+  // Baseline is important for positioning text on canvas
+  const baseline = span.offsetTop + span.offsetHeight;
+  const width = container.offsetWidth;
+
+  const height = container.offsetHeight;
+  document.body.removeChild(container);
+
+  return { width, height, baseline };
+};
+
+const DUMMY_TEXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toLocaleUpperCase();
+export const getApproxLineHeight = (font: FontString) => {
+  return measureText(DUMMY_TEXT, font, null).height;
+};
+
+let canvas: HTMLCanvasElement | undefined;
+const getTextWidth = (text: string, font: FontString) => {
+  if (!canvas) {
+    canvas = document.createElement("canvas");
+  }
+  const canvas2dContext = canvas.getContext("2d")!;
+  canvas2dContext.font = font;
+
+  const metrics = canvas2dContext.measureText(text);
+  // since in test env the canvas measureText algo
+  // doesn't measure text and instead just returns number of
+  // characters hence we assume that each letteris 10px
+  if (isTestEnv()) {
+    return metrics.width * 10;
+  }
+
+  return metrics.width;
+};
+
+export const wrapText = (
+  text: string,
+  font: FontString,
+  containerWidth: number,
+) => {
+  const maxWidth = containerWidth - BOUND_TEXT_PADDING * 2;
+
+  const lines: Array<string> = [];
+  const originalLines = text.split("\n");
+  const spaceWidth = getTextWidth(" ", font);
+  originalLines.forEach((originalLine) => {
+    const words = originalLine.split(" ");
+    // This means its newline so push it
+    if (words.length === 1 && words[0] === "") {
+      lines.push(words[0]);
+    } else {
+      let currentLine = "";
+      let currentLineWidthTillNow = 0;
+
+      let index = 0;
+      while (index < words.length) {
+        const currentWordWidth = getTextWidth(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) {
+            lines.push(currentLine);
+          }
+          currentLine = "";
+          currentLineWidthTillNow = 0;
+          while (words[index].length > 0) {
+            const currentChar = words[index][0];
+            const width = charWidth.calculate(currentChar, font);
+            currentLineWidthTillNow += width;
+            words[index] = words[index].slice(1);
+
+            if (currentLineWidthTillNow >= maxWidth) {
+              // only remove last trailing space which we have added when joining words
+              if (currentLine.slice(-1) === " ") {
+                currentLine = currentLine.slice(0, -1);
+              }
+              lines.push(currentLine);
+              currentLine = currentChar;
+              currentLineWidthTillNow = width;
+              if (currentLineWidthTillNow === maxWidth) {
+                currentLine = "";
+                currentLineWidthTillNow = 0;
+              }
+            } else {
+              currentLine += currentChar;
+            }
+          }
+          // push current line if appending space exceeds max width
+          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+            lines.push(currentLine);
+            currentLine = "";
+            currentLineWidthTillNow = 0;
+          } else {
+            // space needs to be appended before next word
+            // as currentLine contains chars which couldn't be appended
+            // to previous line
+            currentLine += " ";
+            currentLineWidthTillNow += spaceWidth;
+          }
+
+          index++;
+        } else {
+          // 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);
+
+            if (currentLineWidthTillNow >= maxWidth) {
+              lines.push(currentLine);
+              currentLineWidthTillNow = 0;
+              currentLine = "";
+
+              break;
+            }
+            index++;
+            currentLine += `${word} `;
+
+            // Push the word if appending space exceeds max width
+            if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
+              lines.push(currentLine.slice(0, -1));
+              currentLine = "";
+              currentLineWidthTillNow = 0;
+              break;
+            }
+          }
+          if (currentLineWidthTillNow === maxWidth) {
+            currentLine = "";
+            currentLineWidthTillNow = 0;
+          }
+        }
+      }
+      if (currentLine) {
+        // only remove last trailing space which we have added when joining words
+        if (currentLine.slice(-1) === " ") {
+          currentLine = currentLine.slice(0, -1);
+        }
+        lines.push(currentLine);
+      }
+    }
+  });
+  return lines.join("\n");
+};
+
+export const charWidth = (() => {
+  const cachedCharWidth: { [key: FontString]: Array<number> } = {};
+
+  const calculate = (char: string, font: FontString) => {
+    const ascii = char.charCodeAt(0);
+    if (!cachedCharWidth[font]) {
+      cachedCharWidth[font] = [];
+    }
+    if (!cachedCharWidth[font][ascii]) {
+      const width = getTextWidth(char, font);
+      cachedCharWidth[font][ascii] = width;
+    }
+    return cachedCharWidth[font][ascii];
+  };
+
+  const getCache = (font: FontString) => {
+    return cachedCharWidth[font];
+  };
+  return {
+    calculate,
+    getCache,
+  };
+})();
+export const getApproxMinLineWidth = (font: FontString) => {
+  return (
+    measureText(DUMMY_TEXT.split("").join("\n"), font).width +
+    BOUND_TEXT_PADDING * 2
+  );
+};
+
+export const getApproxMinLineHeight = (font: FontString) => {
+  return getApproxLineHeight(font) + BOUND_TEXT_PADDING * 2;
+};
+
+export const getMinCharWidth = (font: FontString) => {
+  const cache = charWidth.getCache(font);
+  if (!cache) {
+    return 0;
+  }
+  const cacheWithOutEmpty = cache.filter((val) => val !== undefined);
+
+  return Math.min(...cacheWithOutEmpty);
+};
+
+export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
+  // Generally lower case is used so converting to lower case
+  const dummyText = DUMMY_TEXT.toLocaleLowerCase();
+  const batchLength = 6;
+  let index = 0;
+  let widthTillNow = 0;
+  let str = "";
+  while (widthTillNow <= width) {
+    const batch = dummyText.substr(index, index + batchLength);
+    str += batch;
+    widthTillNow += getTextWidth(str, font);
+    if (index === dummyText.length - 1) {
+      index = 0;
+    }
+    index = index + batchLength;
+  }
+
+  while (widthTillNow > width) {
+    str = str.substr(0, str.length - 1);
+    widthTillNow = getTextWidth(str, font);
+  }
+  return str.length;
+};
+
+export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
+  return container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id;
+};
+
+export const getBoundTextElement = (element: ExcalidrawElement | null) => {
+  if (!element) {
+    return null;
+  }
+  const boundTextElementId = getBoundTextElementId(element);
+  if (boundTextElementId) {
+    return (
+      (Scene.getScene(element)?.getElement(
+        boundTextElementId,
+      ) as ExcalidrawTextElementWithContainer) || null
+    );
+  }
+  return null;
+};
+
+export const getContainerElement = (
+  element:
+    | (ExcalidrawElement & { containerId: ExcalidrawElement["id"] | null })
+    | null,
+) => {
+  if (!element) {
+    return null;
+  }
+  if (element.containerId) {
+    return Scene.getScene(element)?.getElement(element.containerId) || null;
+  }
+  return null;
+};

src/element/textWysiwyg.test.tsx

@@ -1,169 +1,413 @@
 import ReactDOM from "react-dom";
 import ExcalidrawApp from "../excalidraw-app";
-import { render } from "../tests/test-utils";
-import { Pointer, UI } from "../tests/helpers/ui";
+import { render, screen } from "../tests/test-utils";
+import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import { KEYS } from "../keys";
-
+import { fireEvent } from "../tests/test-utils";
+import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
+import { ExcalidrawTextElementWithContainer } from "./types";
+import * as textElementUtils from "./textElement";
 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 
 const tab = "    ";
+const mouse = new Pointer("mouse");
 
 describe("textWysiwyg", () => {
-  let textarea: HTMLTextAreaElement;
-  beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+  describe("Test unbounded text", () => {
+    let textarea: HTMLTextAreaElement;
+    beforeEach(async () => {
+      await render(<ExcalidrawApp />);
 
-    const element = UI.createElement("text");
+      const element = UI.createElement("text");
 
-    new Pointer("mouse").clickOn(element);
-    textarea = document.querySelector(
-      ".excalidraw-textEditorContainer > textarea",
-    )!;
-  });
-
-  it("should add a tab at the start of the first line", () => {
-    const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
-    textarea.value = "Line#1\nLine#2";
-    // cursor: "|Line#1\nLine#2"
-    textarea.selectionStart = 0;
-    textarea.selectionEnd = 0;
-    textarea.dispatchEvent(event);
-
-    expect(textarea.value).toEqual(`${tab}Line#1\nLine#2`);
-    // cursor: "    |Line#1\nLine#2"
-    expect(textarea.selectionStart).toEqual(4);
-    expect(textarea.selectionEnd).toEqual(4);
-  });
-
-  it("should add a tab at the start of the second line", () => {
-    const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
-    textarea.value = "Line#1\nLine#2";
-    // cursor: "Line#1\nLin|e#2"
-    textarea.selectionStart = 10;
-    textarea.selectionEnd = 10;
-
-    textarea.dispatchEvent(event);
-
-    expect(textarea.value).toEqual(`Line#1\n${tab}Line#2`);
-
-    // cursor: "Line#1\n    Lin|e#2"
-    expect(textarea.selectionStart).toEqual(14);
-    expect(textarea.selectionEnd).toEqual(14);
-  });
-
-  it("should add a tab at the start of the first and second line", () => {
-    const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
-    textarea.value = "Line#1\nLine#2\nLine#3";
-    // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
-    textarea.selectionStart = 2;
-    textarea.selectionEnd = 9;
-
-    textarea.dispatchEvent(event);
-
-    expect(textarea.value).toEqual(`${tab}Line#1\n${tab}Line#2\nLine#3`);
-
-    // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
-    expect(textarea.selectionStart).toEqual(6);
-    expect(textarea.selectionEnd).toEqual(17);
-  });
-
-  it("should remove a tab at the start of the first line", () => {
-    const event = new KeyboardEvent("keydown", {
-      key: KEYS.TAB,
-      shiftKey: true,
+      mouse.clickOn(element);
+      textarea = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      )!;
     });
-    textarea.value = `${tab}Line#1\nLine#2`;
-    // cursor: "|    Line#1\nLine#2"
-    textarea.selectionStart = 0;
-    textarea.selectionEnd = 0;
 
-    textarea.dispatchEvent(event);
+    it("should add a tab at the start of the first line", () => {
+      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
+      textarea.value = "Line#1\nLine#2";
+      // cursor: "|Line#1\nLine#2"
+      textarea.selectionStart = 0;
+      textarea.selectionEnd = 0;
+      textarea.dispatchEvent(event);
 
-    expect(textarea.value).toEqual(`Line#1\nLine#2`);
-
-    // cursor: "|Line#1\nLine#2"
-    expect(textarea.selectionStart).toEqual(0);
-    expect(textarea.selectionEnd).toEqual(0);
-  });
-
-  it("should remove a tab at the start of the second line", () => {
-    const event = new KeyboardEvent("keydown", {
-      key: KEYS.TAB,
-      shiftKey: true,
+      expect(textarea.value).toEqual(`${tab}Line#1\nLine#2`);
+      // cursor: "    |Line#1\nLine#2"
+      expect(textarea.selectionStart).toEqual(4);
+      expect(textarea.selectionEnd).toEqual(4);
     });
-    // cursor: "Line#1\n    Lin|e#2"
-    textarea.value = `Line#1\n${tab}Line#2`;
-    textarea.selectionStart = 15;
-    textarea.selectionEnd = 15;
 
-    textarea.dispatchEvent(event);
+    it("should add a tab at the start of the second line", () => {
+      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
+      textarea.value = "Line#1\nLine#2";
+      // cursor: "Line#1\nLin|e#2"
+      textarea.selectionStart = 10;
+      textarea.selectionEnd = 10;
 
-    expect(textarea.value).toEqual(`Line#1\nLine#2`);
-    // cursor: "Line#1\nLin|e#2"
-    expect(textarea.selectionStart).toEqual(11);
-    expect(textarea.selectionEnd).toEqual(11);
-  });
+      textarea.dispatchEvent(event);
 
-  it("should remove a tab at the start of the first and second line", () => {
-    const event = new KeyboardEvent("keydown", {
-      key: KEYS.TAB,
-      shiftKey: true,
+      expect(textarea.value).toEqual(`Line#1\n${tab}Line#2`);
+
+      // cursor: "Line#1\n    Lin|e#2"
+      expect(textarea.selectionStart).toEqual(14);
+      expect(textarea.selectionEnd).toEqual(14);
     });
-    // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
-    textarea.value = `${tab}Line#1\n${tab}Line#2\nLine#3`;
-    textarea.selectionStart = 6;
-    textarea.selectionEnd = 17;
 
-    textarea.dispatchEvent(event);
+    it("should add a tab at the start of the first and second line", () => {
+      const event = new KeyboardEvent("keydown", { key: KEYS.TAB });
+      textarea.value = "Line#1\nLine#2\nLine#3";
+      // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
+      textarea.selectionStart = 2;
+      textarea.selectionEnd = 9;
 
-    expect(textarea.value).toEqual(`Line#1\nLine#2\nLine#3`);
-    // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
-    expect(textarea.selectionStart).toEqual(2);
-    expect(textarea.selectionEnd).toEqual(9);
-  });
+      textarea.dispatchEvent(event);
 
-  it("should remove a tab at the start of the second line and cursor stay on this line", () => {
-    const event = new KeyboardEvent("keydown", {
-      key: KEYS.TAB,
-      shiftKey: true,
+      expect(textarea.value).toEqual(`${tab}Line#1\n${tab}Line#2\nLine#3`);
+
+      // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
+      expect(textarea.selectionStart).toEqual(6);
+      expect(textarea.selectionEnd).toEqual(17);
     });
-    // cursor: "Line#1\n  |  Line#2"
-    textarea.value = `Line#1\n${tab}Line#2`;
-    textarea.selectionStart = 9;
-    textarea.selectionEnd = 9;
-    textarea.dispatchEvent(event);
 
-    // cursor: "Line#1\n|Line#2"
-    expect(textarea.selectionStart).toEqual(7);
-    // expect(textarea.selectionEnd).toEqual(7);
-  });
+    it("should remove a tab at the start of the first line", () => {
+      const event = new KeyboardEvent("keydown", {
+        key: KEYS.TAB,
+        shiftKey: true,
+      });
+      textarea.value = `${tab}Line#1\nLine#2`;
+      // cursor: "|    Line#1\nLine#2"
+      textarea.selectionStart = 0;
+      textarea.selectionEnd = 0;
 
-  it("should remove partial tabs", () => {
-    const event = new KeyboardEvent("keydown", {
-      key: KEYS.TAB,
-      shiftKey: true,
+      textarea.dispatchEvent(event);
+
+      expect(textarea.value).toEqual(`Line#1\nLine#2`);
+
+      // cursor: "|Line#1\nLine#2"
+      expect(textarea.selectionStart).toEqual(0);
+      expect(textarea.selectionEnd).toEqual(0);
     });
-    // cursor: "Line#1\n  Line#|2"
-    textarea.value = `Line#1\n  Line#2`;
-    textarea.selectionStart = 15;
-    textarea.selectionEnd = 15;
-    textarea.dispatchEvent(event);
 
-    expect(textarea.value).toEqual(`Line#1\nLine#2`);
-  });
+    it("should remove a tab at the start of the second line", () => {
+      const event = new KeyboardEvent("keydown", {
+        key: KEYS.TAB,
+        shiftKey: true,
+      });
+      // cursor: "Line#1\n    Lin|e#2"
+      textarea.value = `Line#1\n${tab}Line#2`;
+      textarea.selectionStart = 15;
+      textarea.selectionEnd = 15;
 
-  it("should remove nothing", () => {
-    const event = new KeyboardEvent("keydown", {
-      key: KEYS.TAB,
-      shiftKey: true,
+      textarea.dispatchEvent(event);
+
+      expect(textarea.value).toEqual(`Line#1\nLine#2`);
+      // cursor: "Line#1\nLin|e#2"
+      expect(textarea.selectionStart).toEqual(11);
+      expect(textarea.selectionEnd).toEqual(11);
     });
-    // cursor: "Line#1\n  Li|ne#2"
-    textarea.value = `Line#1\nLine#2`;
-    textarea.selectionStart = 9;
-    textarea.selectionEnd = 9;
-    textarea.dispatchEvent(event);
 
-    expect(textarea.value).toEqual(`Line#1\nLine#2`);
+    it("should remove a tab at the start of the first and second line", () => {
+      const event = new KeyboardEvent("keydown", {
+        key: KEYS.TAB,
+        shiftKey: true,
+      });
+      // cursor: "    Li|ne#1\n    Li|ne#2\nLine#3"
+      textarea.value = `${tab}Line#1\n${tab}Line#2\nLine#3`;
+      textarea.selectionStart = 6;
+      textarea.selectionEnd = 17;
+
+      textarea.dispatchEvent(event);
+
+      expect(textarea.value).toEqual(`Line#1\nLine#2\nLine#3`);
+      // cursor: "Li|ne#1\nLi|ne#2\nLine#3"
+      expect(textarea.selectionStart).toEqual(2);
+      expect(textarea.selectionEnd).toEqual(9);
+    });
+
+    it("should remove a tab at the start of the second line and cursor stay on this line", () => {
+      const event = new KeyboardEvent("keydown", {
+        key: KEYS.TAB,
+        shiftKey: true,
+      });
+      // cursor: "Line#1\n  |  Line#2"
+      textarea.value = `Line#1\n${tab}Line#2`;
+      textarea.selectionStart = 9;
+      textarea.selectionEnd = 9;
+      textarea.dispatchEvent(event);
+
+      // cursor: "Line#1\n|Line#2"
+      expect(textarea.selectionStart).toEqual(7);
+      // expect(textarea.selectionEnd).toEqual(7);
+    });
+
+    it("should remove partial tabs", () => {
+      const event = new KeyboardEvent("keydown", {
+        key: KEYS.TAB,
+        shiftKey: true,
+      });
+      // cursor: "Line#1\n  Line#|2"
+      textarea.value = `Line#1\n  Line#2`;
+      textarea.selectionStart = 15;
+      textarea.selectionEnd = 15;
+      textarea.dispatchEvent(event);
+
+      expect(textarea.value).toEqual(`Line#1\nLine#2`);
+    });
+
+    it("should remove nothing", () => {
+      const event = new KeyboardEvent("keydown", {
+        key: KEYS.TAB,
+        shiftKey: true,
+      });
+      // cursor: "Line#1\n  Li|ne#2"
+      textarea.value = `Line#1\nLine#2`;
+      textarea.selectionStart = 9;
+      textarea.selectionEnd = 9;
+      textarea.dispatchEvent(event);
+
+      expect(textarea.value).toEqual(`Line#1\nLine#2`);
+    });
+  });
+  describe("Test bounded text", () => {
+    let rectangle: any;
+    const {
+      h,
+    }: {
+      h: {
+        elements: any;
+      };
+    } = window;
+
+    const DUMMY_HEIGHT = 240;
+    const DUMMY_WIDTH = 160;
+    const APPROX_LINE_HEIGHT = 25;
+    const INITIAL_WIDTH = 10;
+
+    beforeAll(() => {
+      jest
+        .spyOn(textElementUtils, "getApproxLineHeight")
+        .mockReturnValue(APPROX_LINE_HEIGHT);
+    });
+
+    beforeEach(async () => {
+      await render(<ExcalidrawApp />);
+
+      rectangle = UI.createElement("rectangle", {
+        x: 10,
+        y: 20,
+        width: 90,
+        height: 75,
+      });
+    });
+
+    it("should bind text to container when double clicked on center", async () => {
+      expect(h.elements.length).toBe(1);
+      expect(h.elements[0].id).toBe(rectangle.id);
+
+      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);
+      mouse.down();
+      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();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+    });
+
+    it("should bind text to container when clicked on container and enter pressed", async () => {
+      expect(h.elements.length).toBe(1);
+      expect(h.elements[0].id).toBe(rectangle.id);
+
+      Keyboard.withModifierKeys({}, () => {
+        Keyboard.keyPress(KEYS.ENTER);
+      });
+
+      expect(h.elements.length).toBe(2);
+
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(rectangle.id);
+      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();
+      expect(rectangle.boundElements).toStrictEqual([
+        { id: text.id, type: "text" },
+      ]);
+    });
+
+    it("should update font family correctly on undo/redo by selecting bounded text when font family was updated", async () => {
+      mouse.doubleClickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+      mouse.down();
+
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      await new Promise((r) => setTimeout(r, 0));
+      fireEvent.change(editor, { target: { value: "Hello World!" } });
+      editor.blur();
+      expect(text.fontFamily).toEqual(FONT_FAMILY.Virgil);
+      UI.clickTool("text");
+
+      mouse.clickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+      mouse.down();
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      editor.select();
+      fireEvent.click(screen.getByTitle(/code/i));
+
+      await new Promise((r) => setTimeout(r, 0));
+      editor.blur();
+      expect(h.elements[1].fontFamily).toEqual(FONT_FAMILY.Cascadia);
+
+      //undo
+      Keyboard.withModifierKeys({ ctrl: true }, () => {
+        Keyboard.keyPress(KEYS.Z);
+      });
+      expect(h.elements[1].fontFamily).toEqual(FONT_FAMILY.Virgil);
+
+      //redo
+      Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
+        Keyboard.keyPress(KEYS.Z);
+      });
+      expect(h.elements[1].fontFamily).toEqual(FONT_FAMILY.Cascadia);
+    });
+
+    it("should wrap text and vertcially center align once text submitted", 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;
+          if (text === "Hello \nWorld!") {
+            height = APPROX_LINE_HEIGHT * 2;
+          }
+          if (maxWidth) {
+            width = maxWidth;
+            // To capture cases where maxWidth passed is initial width
+            // due to which the text is not wrapped correctly
+            if (maxWidth === INITIAL_WIDTH) {
+              height = DUMMY_HEIGHT;
+            }
+          }
+          return {
+            width,
+            height,
+            baseline,
+          };
+        });
+
+      Keyboard.withModifierKeys({}, () => {
+        Keyboard.keyPress(KEYS.ENTER);
+      });
+
+      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      let editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      // mock scroll height
+      jest
+        .spyOn(editor, "scrollHeight", "get")
+        .mockImplementation(() => APPROX_LINE_HEIGHT * 2);
+
+      fireEvent.change(editor, {
+        target: {
+          value: "Hello World!",
+        },
+      });
+
+      editor.dispatchEvent(new Event("input"));
+
+      await new Promise((cb) => setTimeout(cb, 0));
+      editor.blur();
+      text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.text).toBe("Hello \nWorld!");
+      expect(text.originalText).toBe("Hello World!");
+      expect(text.y).toBe(
+        rectangle.y + rectangle.height / 2 - (APPROX_LINE_HEIGHT * 2) / 2,
+      );
+      expect(text.x).toBe(rectangle.x + BOUND_TEXT_PADDING);
+      expect(text.height).toBe(APPROX_LINE_HEIGHT * 2);
+      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
+
+      // Edit and text by removing second line and it should
+      // still vertically align correctly
+      mouse.select(rectangle);
+      Keyboard.withModifierKeys({}, () => {
+        Keyboard.keyPress(KEYS.ENTER);
+      });
+      editor = document.querySelector(
+        ".excalidraw-textEditorContainer > textarea",
+      ) as HTMLTextAreaElement;
+
+      fireEvent.change(editor, {
+        target: {
+          value: "Hello",
+        },
+      });
+
+      // mock scroll height
+      jest
+        .spyOn(editor, "scrollHeight", "get")
+        .mockImplementation(() => APPROX_LINE_HEIGHT);
+      editor.style.height = "25px";
+      editor.dispatchEvent(new Event("input"));
+
+      await new Promise((r) => setTimeout(r, 0));
+
+      editor.blur();
+      text = h.elements[1] as ExcalidrawTextElementWithContainer;
+
+      expect(text.text).toBe("Hello");
+      expect(text.originalText).toBe("Hello");
+      expect(text.y).toBe(
+        rectangle.y + rectangle.height / 2 - APPROX_LINE_HEIGHT / 2,
+      );
+      expect(text.x).toBe(rectangle.x + BOUND_TEXT_PADDING);
+      expect(text.height).toBe(APPROX_LINE_HEIGHT);
+      expect(text.width).toBe(rectangle.width - BOUND_TEXT_PADDING * 2);
+    });
   });
 });

src/element/textWysiwyg.tsx

@@ -1,10 +1,22 @@
 import { CODES, KEYS } from "../keys";
-import { isWritableElement, getFontString } from "../utils";
+import {
+  isWritableElement,
+  getFontString,
+  getFontFamilyString,
+  isTestEnv,
+} from "../utils";
 import Scene from "../scene/Scene";
-import { isTextElement } from "./typeChecks";
-import { CLASSES } from "../constants";
-import { ExcalidrawElement } from "./types";
+import { isBoundToContainer, isTextElement } from "./typeChecks";
+import { CLASSES, BOUND_TEXT_PADDING } from "../constants";
+import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
 import { AppState } from "../types";
+import { mutateElement } from "./mutateElement";
+import {
+  getApproxLineHeight,
+  getBoundTextElementId,
+  getContainerElement,
+  wrapText,
+} from "./textElement";
 
 const normalizeText = (text: string) => {
   return (
@@ -22,16 +34,20 @@ const getTransform = (
   angle: number,
   appState: AppState,
   maxWidth: number,
+  maxHeight: number,
 ) => {
   const { zoom, offsetTop, offsetLeft } = appState;
   const degree = (180 * angle) / Math.PI;
   // offsets must be multiplied by 2 to account for the division by 2 of
   // the whole expression afterwards
   let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
-  const translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
+  let translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
   if (width > maxWidth && zoom.value !== 1) {
     translateX = (maxWidth / 2) * (zoom.value - 1);
   }
+  if (height > maxHeight && zoom.value !== 1) {
+    translateY = ((maxHeight - offsetTop * 2) * (zoom.value - 1)) / 2;
+  }
   return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
@@ -48,56 +64,157 @@ export const textWysiwyg = ({
   id: ExcalidrawElement["id"];
   appState: AppState;
   onChange?: (text: string) => void;
-  onSubmit: (data: { text: string; viaKeyboard: boolean }) => void;
+  onSubmit: (data: {
+    text: string;
+    viaKeyboard: boolean;
+    originalText: string;
+  }) => void;
   getViewportCoords: (x: number, y: number) => [number, number];
-  element: ExcalidrawElement;
+  element: ExcalidrawTextElement;
   canvas: HTMLCanvasElement | null;
   excalidrawContainer: HTMLDivElement | null;
 }) => {
+  const textPropertiesUpdated = (
+    updatedElement: ExcalidrawTextElement,
+    editable: HTMLTextAreaElement,
+  ) => {
+    const currentFont = editable.style.fontFamily.replaceAll('"', "");
+    if (
+      getFontFamilyString({ fontFamily: updatedElement.fontFamily }) !==
+      currentFont
+    ) {
+      return true;
+    }
+    if (`${updatedElement.fontSize}px` !== editable.style.fontSize) {
+      return true;
+    }
+    return false;
+  };
+  let originalContainerHeight: number;
+  let approxLineHeight = getApproxLineHeight(getFontString(element));
+
+  const initialText = element.originalText;
   const updateWysiwygStyle = () => {
     const updatedElement = Scene.getScene(element)?.getElement(id);
     if (updatedElement && isTextElement(updatedElement)) {
-      const [viewportX, viewportY] = getViewportCoords(
-        updatedElement.x,
-        updatedElement.y,
-      );
-      const { textAlign, angle } = updatedElement;
+      let coordX = updatedElement.x;
+      let coordY = updatedElement.y;
+      const container = getContainerElement(updatedElement);
+      let maxWidth = updatedElement.width;
 
-      editable.value = updatedElement.text;
-
-      const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n");
-      const lineHeight = updatedElement.height / lines.length;
-      const maxWidth =
-        (appState.offsetLeft + appState.width - viewportX - 8) /
-          appState.zoom.value -
-        // margin-right of parent if any
-        Number(
-          getComputedStyle(
-            excalidrawContainer?.parentNode as Element,
-          ).marginRight.slice(0, -2),
+      let maxHeight = updatedElement.height;
+      let width = updatedElement.width;
+      // Set to element height by default since thats
+      // what is going to be used for unbounded text
+      let height = updatedElement.height;
+      if (container && updatedElement.containerId) {
+        const propertiesUpdated = textPropertiesUpdated(
+          updatedElement,
+          editable,
         );
+        // using editor.style.height to get the accurate height of text editor
+        const editorHeight = Number(editable.style.height.slice(0, -2));
+        if (editorHeight > 0) {
+          height = editorHeight;
+        }
+        if (propertiesUpdated) {
+          approxLineHeight = getApproxLineHeight(getFontString(updatedElement));
 
+          originalContainerHeight = container.height;
+
+          // update height of the editor after properties updated
+          height = updatedElement.height;
+        }
+        if (!originalContainerHeight) {
+          originalContainerHeight = container.height;
+        }
+        maxWidth = container.width - BOUND_TEXT_PADDING * 2;
+        maxHeight = container.height - BOUND_TEXT_PADDING * 2;
+        width = maxWidth;
+        // The coordinates of text box set a distance of
+        // 30px to preserve padding
+        coordX = container.x + BOUND_TEXT_PADDING;
+        // autogrow container height if text exceeds
+        if (height > maxHeight) {
+          const diff = Math.min(height - maxHeight, approxLineHeight);
+          mutateElement(container, { height: container.height + diff });
+          return;
+        } else if (
+          // autoshrink container height until original container height
+          // is reached when text is removed
+          container.height > originalContainerHeight &&
+          height < maxHeight
+        ) {
+          const diff = Math.min(maxHeight - height, approxLineHeight);
+          mutateElement(container, { height: container.height - diff });
+        }
+        // Start pushing text upward until a diff of 30px (padding)
+        // is reached
+        else {
+          // vertically center align the text
+          coordY = container.y + container.height / 2 - height / 2;
+        }
+      }
+      const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
+      const { textAlign } = updatedElement;
+      editable.value = updatedElement.originalText;
+      const lines = updatedElement.originalText.split("\n");
+      const lineHeight = updatedElement.containerId
+        ? approxLineHeight
+        : updatedElement.height / lines.length;
+      if (!container) {
+        maxWidth =
+          (appState.offsetLeft + appState.width - viewportX - 8) /
+            appState.zoom.value -
+          // margin-right of parent if any
+          Number(
+            getComputedStyle(
+              excalidrawContainer?.parentNode as Element,
+            ).marginRight.slice(0, -2),
+          );
+      }
+
+      // Make sure text editor height doesn't go beyond viewport
+      const editorMaxHeight =
+        (appState.height -
+          viewportY -
+          // There is a ~14px difference which keeps on increasing
+          // with every zoom step when offset present hence I am subtracting it here
+          // However this is not the best fix and breaks in
+          // few scenarios
+          (appState.offsetTop
+            ? ((appState.zoom.value * 100 - 100) / 10) * 14
+            : 0)) /
+        appState.zoom.value;
+      const angle = container ? container.angle : updatedElement.angle;
       Object.assign(editable.style, {
         font: getFontString(updatedElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: `${lineHeight}px`,
-        width: `${updatedElement.width}px`,
-        height: `${updatedElement.height}px`,
+        width: `${width}px`,
+        height: `${height}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
         transform: getTransform(
-          updatedElement.width,
-          updatedElement.height,
+          width,
+          height,
           angle,
           appState,
           maxWidth,
+          editorMaxHeight,
         ),
         textAlign,
         color: updatedElement.strokeColor,
         opacity: updatedElement.opacity / 100,
         filter: "var(--theme-filter)",
         maxWidth: `${maxWidth}px`,
+        maxHeight: `${editorMaxHeight}px`,
       });
+      // For some reason updating font attribute doesn't set font family
+      // hence updating font family explicitly for test environment
+      if (isTestEnv()) {
+        editable.style.fontFamily = getFontFamilyString(updatedElement);
+      }
     }
   };
 
@@ -110,6 +227,13 @@ export const textWysiwyg = ({
   editable.wrap = "off";
   editable.classList.add("excalidraw-wysiwyg");
 
+  let whiteSpace = "pre";
+  let wordBreak = "normal";
+
+  if (isBoundToContainer(element)) {
+    whiteSpace = "pre-wrap";
+    wordBreak = "break-word";
+  }
   Object.assign(editable.style, {
     position: "absolute",
     display: "inline-block",
@@ -122,28 +246,63 @@ export const textWysiwyg = ({
     resize: "none",
     background: "transparent",
     overflow: "hidden",
-    // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
-    whiteSpace: "pre",
     // must be specified because in dark mode canvas creates a stacking context
     zIndex: "var(--zIndex-wysiwyg)",
+    wordBreak,
+    // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
+    whiteSpace,
+    overflowWrap: "break-word",
   });
-
   updateWysiwygStyle();
 
   if (onChange) {
     editable.oninput = () => {
+      // using scrollHeight here since we need to calculate
+      // number of lines so cannot use editable.style.height
+      // as that gets updated below
+      const lines = editable.scrollHeight / approxLineHeight;
+      // auto increase height only when lines  > 1 so its
+      // measured correctly and vertically alignes for
+      // first line as well as setting height to "auto"
+      // doubles the height as soon as user starts typing
+      if (isBoundToContainer(element) && lines > 1) {
+        let height = "auto";
+
+        if (lines === 2) {
+          const container = getContainerElement(element);
+          const actualLineCount = wrapText(
+            editable.value,
+            getFontString(element),
+            container!.width,
+          ).split("\n").length;
+
+          // This is browser behaviour when setting height to "auto"
+          // It sets the height needed for 2 lines even if actual
+          // line count is 1 as mentioned above as well
+          // hence reducing the height by half if actual line count is 1
+          // so single line aligns vertically when deleting
+          if (actualLineCount === 1) {
+            height = `${editable.scrollHeight / 2}px`;
+          }
+        }
+        editable.style.height = height;
+        editable.style.height = `${editable.scrollHeight}px`;
+      }
       onChange(normalizeText(editable.value));
     };
   }
 
   editable.onkeydown = (event) => {
-    event.stopPropagation();
+    if (!event[KEYS.CTRL_OR_CMD]) {
+      event.stopPropagation();
+    }
     if (event.key === KEYS.ESCAPE) {
       event.preventDefault();
       submittedViaKeyboard = true;
       handleSubmit();
     } else if (event.key === KEYS.ENTER && event[KEYS.CTRL_OR_CMD]) {
       event.preventDefault();
+      event.stopPropagation();
       if (event.isComposing || event.keyCode === 229) {
         return;
       }
@@ -156,6 +315,7 @@ export const textWysiwyg = ({
           event.code === CODES.BRACKET_RIGHT))
     ) {
       event.preventDefault();
+      event.stopPropagation();
       if (event.shiftKey || event.code === CODES.BRACKET_LEFT) {
         outdent();
       } else {
@@ -174,7 +334,7 @@ export const textWysiwyg = ({
     const linesStartIndices = getSelectedLinesStartIndices();
 
     let value = editable.value;
-    linesStartIndices.forEach((startIndex) => {
+    linesStartIndices.forEach((startIndex: number) => {
       const startValue = value.slice(0, startIndex);
       const endValue = value.slice(startIndex);
 
@@ -274,9 +434,63 @@ export const textWysiwyg = ({
     // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
     // wysiwyg on update
     cleanup();
+    const updateElement = Scene.getScene(element)?.getElement(element.id);
+    if (!updateElement) {
+      return;
+    }
+    let wrappedText = "";
+    if (isTextElement(updateElement) && updateElement?.containerId) {
+      const container = getContainerElement(updateElement);
+
+      if (container) {
+        wrappedText = wrapText(
+          editable.value,
+          getFontString(updateElement),
+          container.width,
+        );
+
+        if (updateElement.containerId) {
+          const editorHeight = Number(editable.style.height.slice(0, -2));
+          if (editable.value) {
+            // Don't mutate if text is not updated
+            if (initialText !== editable.value) {
+              mutateElement(updateElement, {
+                // vertically center align
+                y: container.y + container.height / 2 - editorHeight / 2,
+                height: editorHeight,
+                width: Number(editable.style.width.slice(0, -2)),
+                // preserve padding
+                x: container.x + BOUND_TEXT_PADDING,
+                angle: container.angle,
+              });
+            }
+
+            const boundTextElementId = getBoundTextElementId(container);
+            if (!boundTextElementId || boundTextElementId !== element.id) {
+              mutateElement(container, {
+                boundElements: (container.boundElements || []).concat({
+                  type: "text",
+                  id: element.id,
+                }),
+              });
+            }
+          } else {
+            mutateElement(container, {
+              boundElements: container.boundElements?.filter(
+                (ele) => ele.type !== "text",
+              ),
+            });
+          }
+        }
+      }
+    } else {
+      wrappedText = editable.value;
+    }
+
     onSubmit({
-      text: normalizeText(editable.value),
+      text: normalizeText(wrappedText),
       viaKeyboard: submittedViaKeyboard,
+      originalText: editable.value,
     });
   };
 
@@ -305,26 +519,45 @@ export const textWysiwyg = ({
     editable.remove();
   };
 
-  const bindBlurEvent = () => {
+  const bindBlurEvent = (event?: MouseEvent) => {
     window.removeEventListener("pointerup", bindBlurEvent);
     // Deferred so that the pointerdown that initiates the wysiwyg doesn't
     // trigger the blur on ensuing pointerup.
     // Also to handle cases such as picking a color which would trigger a blur
     // in that same tick.
+    const target = event?.target;
+
+    const isTargetColorPicker =
+      target instanceof HTMLInputElement &&
+      target.closest(".color-picker-input") &&
+      isWritableElement(target);
+
     setTimeout(() => {
       editable.onblur = handleSubmit;
+      if (target && isTargetColorPicker) {
+        target.onblur = () => {
+          editable.focus();
+        };
+      }
       // case: clicking on the same property → no change → no update → no focus
-      editable.focus();
+      if (!isTargetColorPicker) {
+        editable.focus();
+      }
     });
   };
 
   // prevent blur when changing properties from the menu
   const onPointerDown = (event: MouseEvent) => {
+    const isTargetColorPicker =
+      event.target instanceof HTMLInputElement &&
+      event.target.closest(".color-picker-input") &&
+      isWritableElement(event.target);
     if (
-      (event.target instanceof HTMLElement ||
+      ((event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
-      event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
-      !isWritableElement(event.target)
+        event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
+        !isWritableElement(event.target)) ||
+      isTargetColorPicker
     ) {
       editable.onblur = null;
       window.addEventListener("pointerup", bindBlurEvent);
@@ -337,7 +570,12 @@ export const textWysiwyg = ({
   // handle updates of textElement properties of editing element
   const unbindUpdate = Scene.getScene(element)!.addCallback(() => {
     updateWysiwygStyle();
-    editable.focus();
+    const isColorPickerActive = !!document.activeElement?.closest(
+      ".color-picker-input",
+    );
+    if (!isColorPickerActive) {
+      editable.focus();
+    }
   });
 
   // ---------------------------------------------------------------------------

src/element/transformHandles.ts

@@ -3,6 +3,7 @@ import { ExcalidrawElement, PointerType } from "./types";
 import { getElementAbsoluteCoords, Bounds } from "./bounds";
 import { rotate } from "../math";
 import { Zoom } from "../types";
+import { isTextElement } from ".";
 
 export type TransformHandleDirection =
   | "n"
@@ -242,7 +243,7 @@ export const getTransformHandles = (
         omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
       }
     }
-  } else if (element.type === "text") {
+  } else if (isTextElement(element)) {
     omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
   }
 

src/element/typeChecks.ts

@@ -7,6 +7,7 @@ import {
   ExcalidrawFreeDrawElement,
   InitializedExcalidrawImageElement,
   ExcalidrawImageElement,
+  ExcalidrawTextElementWithContainer,
 } from "./types";
 
 export const isGenericElement = (
@@ -85,7 +86,18 @@ export const isBindableElement = (
     (element.type === "rectangle" ||
       element.type === "diamond" ||
       element.type === "ellipse" ||
-      element.type === "text")
+      element.type === "image" ||
+      (element.type === "text" && !element.containerId))
+  );
+};
+
+export const isTextBindableContainer = (element: ExcalidrawElement | null) => {
+  return (
+    element != null &&
+    (element.type === "rectangle" ||
+      element.type === "diamond" ||
+      element.type === "ellipse" ||
+      element.type === "image")
   );
 };
 
@@ -100,3 +112,20 @@ export const isExcalidrawElement = (element: any): boolean => {
     element?.type === "line"
   );
 };
+
+export const hasBoundTextElement = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawBindableElement => {
+  return (
+    isBindableElement(element) &&
+    !!element.boundElements?.some(({ type }) => type === "text")
+  );
+};
+
+export const isBoundToContainer = (
+  element: ExcalidrawElement | null,
+): element is ExcalidrawTextElementWithContainer => {
+  return (
+    element !== null && isTextElement(element) && element.containerId !== null
+  );
+};

src/element/types.ts

@@ -43,8 +43,15 @@ type _ExcalidrawElementBase = Readonly<{
   /** List of groups the element belongs to.
       Ordered from deepest to shallowest. */
   groupIds: readonly GroupId[];
-  /** Ids of (linear) elements that are bound to this element. */
-  boundElementIds: readonly ExcalidrawLinearElement["id"][] | null;
+  /** other elements that are bound to this element */
+  boundElements:
+    | readonly Readonly<{
+        id: ExcalidrawLinearElement["id"];
+        type: "arrow" | "text";
+      }>[]
+    | null;
+  /** epoch (ms) timestamp of last element update */
+  updated: number;
 }>;
 
 export type ExcalidrawSelectionElement = _ExcalidrawElementBase & {
@@ -114,6 +121,8 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
     baseline: number;
     textAlign: TextAlign;
     verticalAlign: VerticalAlign;
+    containerId: ExcalidrawGenericElement["id"] | null;
+    originalText: string;
   }>;
 
 export type ExcalidrawBindableElement =
@@ -123,6 +132,10 @@ export type ExcalidrawBindableElement =
   | ExcalidrawTextElement
   | ExcalidrawImageElement;
 
+export type ExcalidrawTextElementWithContainer = {
+  containerId: ExcalidrawGenericElement["id"];
+} & ExcalidrawTextElement;
+
 export type PointBinding = {
   elementId: ExcalidrawBindableElement["id"];
   focus: number;

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -78,7 +78,7 @@ export const ExportToExcalidrawPlus: React.FC<{
   onError: (error: Error) => void;
 }> = ({ elements, appState, files, onError }) => {
   return (
-    <Card color="indigo">
+    <Card color="primary">
       <div className="Card-icon">{excalidrawPlusIcon}</div>
       <h2>Excalidraw+</h2>
       <div className="Card-details">

src/excalidraw-app/data/FileManager.ts

@@ -199,7 +199,11 @@ export const encodeFilesForUpload = async ({
     });
 
     if (buffer.byteLength > maxBytes) {
-      throw new Error(t("errors.fileTooBig"));
+      throw new Error(
+        t("errors.fileTooBig", {
+          maxSize: `${Math.trunc(maxBytes / 1024 / 1024)}MB`,
+        }),
+      );
     }
 
     processedFiles.push({

src/excalidraw-app/data/firebase.ts

@@ -11,7 +11,15 @@ import { MIME_TYPES } from "../../constants";
 // private
 // -----------------------------------------------------------------------------
 
-const FIREBASE_CONFIG = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
+let FIREBASE_CONFIG: Record<string, any>;
+try {
+  FIREBASE_CONFIG = JSON.parse(process.env.REACT_APP_FIREBASE_CONFIG);
+} catch (error: any) {
+  console.warn(
+    `Error JSON parsing firebase config. Supplied value: ${process.env.REACT_APP_FIREBASE_CONFIG}`,
+  );
+  FIREBASE_CONFIG = {};
+}
 
 let firebasePromise: Promise<typeof import("firebase/app").default> | null =
   null;

src/excalidraw-app/data/index.ts

@@ -1,6 +1,6 @@
+import { compressData, decompressData } from "../../data/encode";
 import {
   decryptData,
-  encryptData,
   generateEncryptionKey,
   IV_LENGTH_BYTES,
 } from "../../data/encryption";
@@ -109,9 +109,45 @@ export const getCollaborationLink = (data: {
   return `${window.location.origin}${window.location.pathname}#room=${data.roomId},${data.roomKey}`;
 };
 
+/**
+ * Decodes shareLink data using the legacy buffer format.
+ * @deprecated
+ */
+const legacy_decodeFromBackend = async ({
+  buffer,
+  decryptionKey,
+}: {
+  buffer: ArrayBuffer;
+  decryptionKey: string;
+}) => {
+  let decrypted: ArrayBuffer;
+
+  try {
+    // Buffer should contain both the IV (fixed length) and encrypted data
+    const iv = buffer.slice(0, IV_LENGTH_BYTES);
+    const encrypted = buffer.slice(IV_LENGTH_BYTES, buffer.byteLength);
+    decrypted = await decryptData(new Uint8Array(iv), encrypted, decryptionKey);
+  } catch (error: any) {
+    // Fixed IV (old format, backward compatibility)
+    const fixedIv = new Uint8Array(IV_LENGTH_BYTES);
+    decrypted = await decryptData(fixedIv, buffer, decryptionKey);
+  }
+
+  // We need to convert the decrypted array buffer to a string
+  const string = new window.TextDecoder("utf-8").decode(
+    new Uint8Array(decrypted),
+  );
+  const data: ImportedDataState = JSON.parse(string);
+
+  return {
+    elements: data.elements || null,
+    appState: data.appState || null,
+  };
+};
+
 const importFromBackend = async (
   id: string,
-  privateKey: string,
+  decryptionKey: string,
 ): Promise<ImportedDataState> => {
   try {
     const response = await fetch(`${BACKEND_V2_GET}${id}`);
@@ -122,28 +158,28 @@ const importFromBackend = async (
     }
     const buffer = await response.arrayBuffer();
 
-    let decrypted: ArrayBuffer;
     try {
-      // Buffer should contain both the IV (fixed length) and encrypted data
-      const iv = buffer.slice(0, IV_LENGTH_BYTES);
-      const encrypted = buffer.slice(IV_LENGTH_BYTES, buffer.byteLength);
-      decrypted = await decryptData(new Uint8Array(iv), encrypted, privateKey);
+      const { data: decodedBuffer } = await decompressData(
+        new Uint8Array(buffer),
+        {
+          decryptionKey,
+        },
+      );
+      const data: ImportedDataState = JSON.parse(
+        new TextDecoder().decode(decodedBuffer),
+      );
+
+      return {
+        elements: data.elements || null,
+        appState: data.appState || null,
+      };
     } catch (error: any) {
-      // Fixed IV (old format, backward compatibility)
-      const fixedIv = new Uint8Array(IV_LENGTH_BYTES);
-      decrypted = await decryptData(fixedIv, buffer, privateKey);
+      console.warn(
+        "error when decoding shareLink data using the new format:",
+        error,
+      );
+      return legacy_decodeFromBackend({ buffer, decryptionKey });
     }
-
-    // We need to convert the decrypted array buffer to a string
-    const string = new window.TextDecoder("utf-8").decode(
-      new Uint8Array(decrypted),
-    );
-    const data: ImportedDataState = JSON.parse(string);
-
-    return {
-      elements: data.elements || null,
-      appState: data.appState || null,
-    };
   } catch (error: any) {
     window.alert(t("alerts.importBackendFailed"));
     console.error(error);
@@ -188,20 +224,14 @@ export const exportToBackend = async (
   appState: AppState,
   files: BinaryFiles,
 ) => {
-  const json = serializeAsJSON(elements, appState, files, "database");
-  const encoded = new TextEncoder().encode(json);
+  const encryptionKey = await generateEncryptionKey("string");
 
-  const cryptoKey = await generateEncryptionKey("cryptoKey");
-
-  const { encryptedBuffer, iv } = await encryptData(cryptoKey, encoded);
-
-  // Concatenate IV with encrypted data (IV does not have to be secret).
-  const payloadBlob = new Blob([iv.buffer, encryptedBuffer]);
-  const payload = await new Response(payloadBlob).arrayBuffer();
-
-  // We use jwk encoding to be able to extract just the base64 encoded key.
-  // We will hardcode the rest of the attributes when importing back the key.
-  const exportedKey = await window.crypto.subtle.exportKey("jwk", cryptoKey);
+  const payload = await compressData(
+    new TextEncoder().encode(
+      serializeAsJSON(elements, appState, files, "database"),
+    ),
+    { encryptionKey },
+  );
 
   try {
     const filesMap = new Map<FileId, BinaryFileData>();
@@ -211,8 +241,6 @@ export const exportToBackend = async (
       }
     }
 
-    const encryptionKey = exportedKey.k!;
-
     const filesToUpload = await encodeFilesForUpload({
       files: filesMap,
       encryptionKey,
@@ -221,7 +249,7 @@ export const exportToBackend = async (
 
     const response = await fetch(BACKEND_V2_POST, {
       method: "POST",
-      body: payload,
+      body: payload.buffer,
     });
     const json = await response.json();
     if (json.id) {

src/excalidraw-app/data/localStorage.ts

@@ -5,13 +5,13 @@ import {
   getDefaultAppState,
 } from "../../appState";
 import { clearElementsForLocalStorage } from "../../element";
-import { STORAGE_KEYS as APP_STORAGE_KEYS } from "../../constants";
 
 export const STORAGE_KEYS = {
   LOCAL_STORAGE_ELEMENTS: "excalidraw",
   LOCAL_STORAGE_APP_STATE: "excalidraw-state",
   LOCAL_STORAGE_COLLAB: "excalidraw-collab",
   LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG: "collabLinkForceLoadFlag",
+  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
 };
 
 export const saveUsernameToLocalStorage = (username: string) => {
@@ -113,9 +113,7 @@ export const getTotalStorageSize = () => {
   try {
     const appState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
     const collab = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
-    const library = localStorage.getItem(
-      APP_STORAGE_KEYS.LOCAL_STORAGE_LIBRARY,
-    );
+    const library = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
 
     const appStateSize = appState?.length || 0;
     const collabSize = collab?.length || 0;

src/excalidraw-app/index.scss

@@ -9,7 +9,7 @@
 
   .encrypted-icon {
     border-radius: var(--space-factor);
-    color: var(--icon-green-fill-color);
+    color: var(--color-primary);
     margin-top: auto;
     margin-bottom: auto;
     margin-inline-start: auto;

src/excalidraw-app/index.tsx

@@ -7,7 +7,6 @@ import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import {
   APP_NAME,
   EVENT,
-  STORAGE_KEYS,
   TITLE_TIMEOUT,
   URL_HASH_KEYS,
   VERSION_TIMEOUT,
@@ -53,6 +52,7 @@ import { exportToBackend, getCollaborationLinkData, loadScene } from "./data";
 import {
   importFromLocalStorage,
   saveToLocalStorage,
+  STORAGE_KEYS,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restoreAppState, RestoredDataState } from "../data/restore";
@@ -262,7 +262,7 @@ const PlusLinkJSX = (
     Introducing Excalidraw+
     <br />
     <a
-      href="https://plus.excalidraw.com/?utm_source=excalidraw&utm_medium=banner&utm_campaign=launch"
+      href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=banner&utm_campaign=launch"
       target="_blank"
       rel="noreferrer"
     >

src/global.d.ts

@@ -1,5 +1,3 @@
-// import type {PngChunk} from "./types";
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 interface Document {
   fonts?: {
@@ -56,6 +54,8 @@ type NonOptional<T> = Exclude<T, undefined>;
 
 // PNG encoding/decoding
 // -----------------------------------------------------------------------------
+type TEXtChunk = { name: "tEXt"; data: Uint8Array };
+
 declare module "png-chunk-text" {
   function encode(
     name: string,
@@ -64,11 +64,11 @@ declare module "png-chunk-text" {
   function decode(data: Uint8Array): { keyword: string; text: string };
 }
 declare module "png-chunks-encode" {
-  function encode(chunks: import("./types").PngChunk[]): Uint8Array;
+  function encode(chunks: TEXtChunk[]): Uint8Array;
   export = encode;
 }
 declare module "png-chunks-extract" {
-  function extract(buffer: Uint8Array): import("./types").PngChunk[];
+  function extract(buffer: Uint8Array): TEXtChunk[];
   export = extract;
 }
 // -----------------------------------------------------------------------------

src/groups.ts

@@ -1,6 +1,13 @@
-import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
+import {
+  GroupId,
+  ExcalidrawElement,
+  NonDeleted,
+  ExcalidrawTextElementWithContainer,
+} from "./element/types";
 import { AppState } from "./types";
 import { getSelectedElements } from "./scene";
+import { getBoundTextElementId } from "./element/textElement";
+import Scene from "./scene/Scene";
 
 export const selectGroup = (
   groupId: GroupId,
@@ -158,3 +165,33 @@ export const removeFromSelectedGroups = (
   groupIds: ExcalidrawElement["groupIds"],
   selectedGroupIds: { [groupId: string]: boolean },
 ) => groupIds.filter((groupId) => !selectedGroupIds[groupId]);
+
+export const getMaximumGroups = (
+  elements: ExcalidrawElement[],
+): ExcalidrawElement[][] => {
+  const groups: Map<String, ExcalidrawElement[]> = new Map<
+    String,
+    ExcalidrawElement[]
+  >();
+
+  elements.forEach((element: ExcalidrawElement) => {
+    const groupId =
+      element.groupIds.length === 0
+        ? element.id
+        : element.groupIds[element.groupIds.length - 1];
+
+    const currentGroupMembers = groups.get(groupId) || [];
+
+    // Include bounded text if present when grouping
+    const boundTextElementId = getBoundTextElementId(element);
+    if (boundTextElementId) {
+      const textElement = Scene.getScene(element)!.getElement(
+        boundTextElementId,
+      ) as ExcalidrawTextElementWithContainer;
+      currentGroupMembers.push(textElement);
+    }
+    groups.set(groupId, [...currentGroupMembers, element]);
+  });
+
+  return Array.from(groups.values());
+};

src/keys.ts

@@ -40,6 +40,10 @@ export const KEYS = {
   QUESTION_MARK: "?",
   SPACE: " ",
   TAB: "Tab",
+  CHEVRON_LEFT: "<",
+  CHEVRON_RIGHT: ">",
+  PERIOD: ".",
+  COMMA: ",",
 
   A: "a",
   D: "d",

src/locales/ar-SA.json

@@ -100,7 +100,9 @@
     "share": "مشاركة",
     "showStroke": "إظهار منتقي لون الخط",
     "showBackground": "إظهار منتقي لون الخلفية",
-    "toggleTheme": "غير النمط"
+    "toggleTheme": "غير النمط",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "إعادة تعيين اللوحة",
@@ -135,7 +137,11 @@
     "zenMode": "وضع التأمل",
     "exitZenMode": "إلغاء الوضع الليلى",
     "cancel": "إلغاء",
-    "clear": "مسح"
+    "clear": "مسح",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "هذا سيُزيل كامل اللوحة. هل أنت متأكد؟",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة",
     "invalidSceneUrl": "تعذر استيراد المشهد من عنوان URL المتوفر. إما أنها مشوهة، أو لا تحتوي على بيانات Excalidraw JSON صالحة.",
     "resetLibrary": "هذا سوف يمسح مكتبتك. هل أنت متأكد؟",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفاً. التعاون المباشر معطل."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "انقر نقراً مزدوجاً أو اضغط Enter لتعديل النقاط",
     "lineEditor_pointSelected": "اضغط على حذف لإزالة النقطة، Ctrl Or Cmd+D للتكرار، أو اسحب للانتقال",
     "lineEditor_nothingSelected": "حدد نقطة لتحريك أو إزالتها، أو اضغط Alt ثم انقر لإضافة نقاط جديدة",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "تعذر عرض المعاينة",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "رسوماتك مشفرة من النهاية إلى النهاية حتى أن خوادم Excalidraw لن تراها أبدا.",
     "link": "مشاركة المدونة في التشفير من النهاية إلى النهاية في Excalidraw"
@@ -289,6 +345,7 @@
     "width": "العرض"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "نسخت الانماط.",
     "copyToClipboard": "نسخ إلى الحافظة.",
     "copyToClipboardAsPng": "تم نسخ {{exportSelection}} إلى الحافظة بصيغة PNG\n({{exportColorScheme}})",

src/locales/bg-BG.json

@@ -100,7 +100,9 @@
     "share": "",
     "showStroke": "",
     "showBackground": "",
-    "toggleTheme": ""
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "Нулиране на платно",
@@ -135,7 +137,11 @@
     "zenMode": "Режим Zen",
     "exitZenMode": "Спиране на Zen режим",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "Това ще изчисти цялото платно. Сигурни ли сте?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Не може да бъде възстановена сцена от този файл",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Кликнете два пъти или натиснете Enter за да промените точките",
     "lineEditor_pointSelected": "Натиснете Delete за да изтриете точка, CtrlOrCmd+D за дуплициране, или извлачете за да преместите",
     "lineEditor_nothingSelected": "Изберете точка за местене или изтриване, или пък задръжте Alt и натиснете за да добавите нови точки",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "Невъзможност за показване на preview",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "Вашите рисунки са криптирани от край до край, така че сървърите на Excalidraw няма да могат да ги виждат.",
     "link": ""
@@ -289,6 +345,7 @@
     "width": "Широчина"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "Копирани стилове.",
     "copyToClipboard": "Копирано в клипборда.",
     "copyToClipboardAsPng": "",

src/locales/bn-BD.json

@@ -100,7 +100,9 @@
     "share": "",
     "showStroke": "",
     "showBackground": "",
-    "toggleTheme": ""
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "",
@@ -135,7 +137,11 @@
     "zenMode": "",
     "exitZenMode": "",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -289,6 +345,7 @@
     "width": ""
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "",
     "copyToClipboard": "",
     "copyToClipboardAsPng": "",

src/locales/ca-ES.json

@@ -100,7 +100,9 @@
     "share": "Comparteix",
     "showStroke": "Mostra el selector de color del traç",
     "showBackground": "Mostra el selector de color de fons",
-    "toggleTheme": "Activa o desactiva el tema"
+    "toggleTheme": "Activa o desactiva el tema",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "Neteja el llenç",
@@ -135,7 +137,11 @@
     "zenMode": "Mode zen",
     "exitZenMode": "Surt de mode zen",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "S'esborrarà tot el llenç. N'esteu segur?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "L’escena no s’ha pogut restaurar des d’aquest fitxer d’imatge",
     "invalidSceneUrl": "No s'ha pogut importar l'escena des de l'adreça URL proporcionada. Està malformada o no conté dades Excalidraw JSON vàlides.",
     "resetLibrary": "Això buidarà la biblioteca. N'esteu segur?",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Fes doble clic o premi Enter per editar punts",
     "lineEditor_pointSelected": "Premeu Suprimir per a eliminar el punt, CtrlOrCmd+D per a duplicar-lo, o arrossegueu-lo per a moure'l",
     "lineEditor_nothingSelected": "Selecciona un punt per moure o eliminar, o manté premut Alt i fes clic per afegir punts nous",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "No es pot mostrar la previsualització",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "Els vostres dibuixos estan xifrats de punta a punta de manera que els servidors d’Excalidraw no els veuran mai.",
     "link": "Article del blog sobre encriptació d'extrem a extrem a Excalidraw"
@@ -289,6 +345,7 @@
     "width": "Amplada"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "S'han copiat els estils.",
     "copyToClipboard": "S'ha copiat al porta-retalls.",
     "copyToClipboardAsPng": "S'ha copiat {{exportSelection}} al porta-retalls en format PNG\n({{exportColorScheme}})",

src/locales/cs-CZ.json

@@ -100,7 +100,9 @@
     "share": "Sdílet",
     "showStroke": "",
     "showBackground": "",
-    "toggleTheme": "Přepnout tmavý řežim"
+    "toggleTheme": "Přepnout tmavý řežim",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "",
@@ -135,7 +137,11 @@
     "zenMode": "Zen mód",
     "exitZenMode": "Opustit zen mód",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -289,6 +345,7 @@
     "width": ""
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "",
     "copyToClipboard": "",
     "copyToClipboardAsPng": "",

src/locales/da-DK.json

@@ -100,7 +100,9 @@
     "share": "Del",
     "showStroke": "",
     "showBackground": "",
-    "toggleTheme": ""
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "",
@@ -135,7 +137,11 @@
     "zenMode": "",
     "exitZenMode": "",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "",
     "link": ""
@@ -289,6 +345,7 @@
     "width": "Bredde"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "Kopieret stilarter.",
     "copyToClipboard": "Kopieret til klippebord.",
     "copyToClipboardAsPng": "Kopieret {{exportSelection}} til klippebord som PNG\n({{exportColorScheme}})",

src/locales/de-DE.json

@@ -100,7 +100,9 @@
     "share": "Teilen",
     "showStroke": "Auswahl für Strichfarbe anzeigen",
     "showBackground": "Hintergrundfarbe auswählen",
-    "toggleTheme": "Design umschalten"
+    "toggleTheme": "Design umschalten",
+    "personalLib": "Persönliche Bibliothek",
+    "excalidrawLib": "Excalidraw-Bibliothek"
   },
   "buttons": {
     "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",
@@ -135,7 +137,11 @@
     "zenMode": "Zen-Modus",
     "exitZenMode": "Zen-Modus verlassen",
     "cancel": "Abbrechen",
-    "clear": "Löschen"
+    "clear": "Löschen",
+    "remove": "Entfernen",
+    "publishLibrary": "Veröffentlichen",
+    "submit": "Absenden",
+    "confirm": "Bestätigen"
   },
   "alerts": {
     "clearReset": "Dies wird die ganze Zeichenfläche löschen. Bist du dir sicher?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Die Zeichnung konnte aus dieser Bilddatei nicht wiederhergestellt werden",
     "invalidSceneUrl": "Die Szene konnte nicht von der angegebenen URL importiert werden. Sie ist entweder fehlerhaft oder enthält keine gültigen Excalidraw JSON-Daten.",
     "resetLibrary": "Dieses löscht deine Bibliothek. Bist du sicher?",
+    "removeItemsFromsLibrary": "{{count}} Element(e) aus der Bibliothek löschen?",
     "invalidEncryptionKey": "Verschlüsselungsschlüssel muss 22 Zeichen lang sein. Die Live-Zusammenarbeit ist deaktiviert."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Doppelklicken oder Eingabetaste drücken, um Punkte zu bearbeiten",
     "lineEditor_pointSelected": "Drücke Löschen, um Punkt zu entfernen, Strg+D oder Cmd+D zum Duplizieren oder ziehe zum Verschieben",
     "lineEditor_nothingSelected": "Wähle einen Punkt zum Verschieben oder Löschen oder halte die Alt-Taste 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"
+    "placeImage": "Klicken, um das Bild zu platzieren oder klicken und ziehen um seine Größe manuell zu setzen",
+    "publishLibrary": "Veröffentliche deine eigene Bibliothek"
   },
   "canvasError": {
     "cannotShowPreview": "Vorschau kann nicht angezeigt werden",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Zeichenfläche löschen"
   },
+  "publishDialog": {
+    "title": "Bibliothek veröffentlichen",
+    "itemName": "Elementname",
+    "authorName": "Name des Autors",
+    "githubUsername": "GitHub-Benutzername",
+    "twitterUsername": "Twitter-Benutzername",
+    "libraryName": "Name der Bibliothek",
+    "libraryDesc": "Beschreibung der Bibliothek",
+    "website": "Webseite",
+    "placeholder": {
+      "authorName": "Dein Name oder Benutzername",
+      "libraryName": "Name deiner Bibliothek",
+      "libraryDesc": "Beschreibung deiner Bibliothek, um anderen Nutzern bei der Verwendung zu helfen",
+      "githubHandle": "GitHub-Handle (optional), damit du die Bibliothek bearbeiten kannst, wenn sie zur Überprüfung eingereicht wurde",
+      "twitterHandle": "Twitter-Benutzername (optional), damit wir wissen, wen wir bei Werbung über Twitter nennen können",
+      "website": "Link zu deiner persönlichen Webseite oder zu anderer Seite (optional)"
+    },
+    "errors": {
+      "required": "Erforderlich",
+      "website": "Gültige URL eingeben"
+    },
+    "noteDescription": {
+      "pre": "Sende deine Bibliothek ein, um in die ",
+      "link": "öffentliche Bibliotheks-Repository aufgenommen zu werden",
+      "post": "damit andere Nutzer sie in ihren Zeichnungen verwenden können."
+    },
+    "noteGuidelines": {
+      "pre": "Die Bibliothek muss zuerst manuell freigegeben werden. Bitte lies die ",
+      "link": "Richtlinien",
+      "post": " vor dem Absenden. Du benötigst ein GitHub-Konto, um zu kommunizieren und Änderungen vorzunehmen, falls erforderlich, aber es ist nicht unbedingt erforderlich."
+    },
+    "noteLicense": {
+      "pre": "Mit dem Absenden stimmst du zu, dass die Bibliothek unter der ",
+      "link": "MIT-Lizenz, ",
+      "post": "die zusammengefasst beinhaltet, dass jeder sie ohne Einschränkungen nutzen kann."
+    },
+    "noteItems": "Jedes Bibliothekselement muss einen eigenen Namen haben, damit es gefiltert werden kann. Die folgenden Bibliothekselemente werden hinzugefügt:",
+    "atleastOneLibItem": "Bitte wähle mindestens ein Bibliothekselement aus, um zu beginnen"
+  },
+  "publishSuccessDialog": {
+    "title": "Bibliothek übermittelt",
+    "content": "Vielen Dank {{authorName}}. Deine Bibliothek wurde zur Überprüfung eingereicht. Du kannst den Status verfolgen",
+    "link": "hier"
+  },
+  "confirmDialog": {
+    "resetLibrary": "Bibliothek zurücksetzen",
+    "removeItemsFromLib": "Ausgewählte Elemente aus der Bibliothek entfernen"
+  },
   "encrypted": {
     "tooltip": "Da deine Zeichnungen Ende-zu-Ende verschlüsselt werden, sehen auch unsere Excalidraw-Server sie niemals.",
     "link": "Blogbeitrag über Ende-zu-Ende-Verschlüsselung in Excalidraw"
@@ -289,6 +345,7 @@
     "width": "Breite"
   },
   "toast": {
+    "addedToLibrary": "Zur Bibliothek hinzugefügt",
     "copyStyles": "Formatierungen kopiert.",
     "copyToClipboard": "In die Zwischenablage kopiert.",
     "copyToClipboardAsPng": "{{exportSelection}} als PNG in die Zwischenablage kopiert\n({{exportColorScheme}})",

src/locales/el-GR.json

@@ -100,7 +100,9 @@
     "share": "Κοινοποίηση",
     "showStroke": "Εμφάνιση επιλογέα χρωμάτων πινελιάς",
     "showBackground": "Εμφάνιση επιλογέα χρώματος φόντου",
-    "toggleTheme": "Εναλλαγή θέματος"
+    "toggleTheme": "Εναλλαγή θέματος",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "Επαναφορά του καμβά",
@@ -135,7 +137,11 @@
     "zenMode": "Λειτουργία Zεν",
     "exitZenMode": "Έξοδος από την λειτουργία Zen",
     "cancel": "Ακύρωση",
-    "clear": "Καθαρισμός"
+    "clear": "Καθαρισμός",
+    "remove": "Κατάργηση",
+    "publishLibrary": "Δημοσίευση",
+    "submit": "Υποβολή",
+    "confirm": "Επιβεβαίωση"
   },
   "alerts": {
     "clearReset": "Αυτό θα σβήσει ολόκληρο τον καμβά. Είσαι σίγουρος;",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Η σκηνή δεν ήταν δυνατό να αποκατασταθεί από αυτό το αρχείο εικόνας",
     "invalidSceneUrl": "",
     "resetLibrary": "Αυτό θα καθαρίσει τη βιβλιοθήκη σας. Είστε σίγουροι;",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": "Το κλειδί κρυπτογράφησης πρέπει να είναι 22 χαρακτήρες. Η ζωντανή συνεργασία είναι απενεργοποιημένη."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Διπλό-κλικ ή πιέστε Enter για να επεξεργαστείτε τα σημεία",
     "lineEditor_pointSelected": "Πιέστε Διαγραφή για να αφαιρέσετε το σημείου, CtrlOrCmd+D για να το αντιγράψετε ή σύρτε το για να το μετακινήσετε",
     "lineEditor_nothingSelected": "Επιλέξτε ένα σημείο για μετακίνηση ή αφαίρεση, ή κρατήστε παρατεταμένα το Alt και κάντε κλικ για να προσθέσετε νέα σημεία",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": "Δημοσιεύστε τη δική σας βιβλιοθήκη"
   },
   "canvasError": {
     "cannotShowPreview": "Αδυναμία εμφάνισης προεπισκόπησης",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Καθαρισμός καμβά"
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "Όνομα δημιουργού",
+    "githubUsername": "GitHub username",
+    "twitterUsername": "Twitter username",
+    "libraryName": "Όνομα βιβλιοθήκης",
+    "libraryDesc": "",
+    "website": "Ιστοσελίδα",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": "Εισάγετε μια έγκυρη διεύθυνση URL"
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα είναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw.",
     "link": "Blog post στην κρυπτογράφηση end-to-end στο Excalidraw"
@@ -289,6 +345,7 @@
     "width": "Πλάτος"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "Αντιγράφηκαν στυλ.",
     "copyToClipboard": "Αντιγράφηκε στο πρόχειρο.",
     "copyToClipboardAsPng": "Αντιγράφηκε {{exportSelection}} στο πρόχειρο ως PNG\n({{exportColorScheme}})",

src/locales/en.json

@@ -102,7 +102,9 @@
     "showBackground": "Show background color picker",
     "toggleTheme": "Toggle theme",
     "personalLib": "Personal Library",
-    "excalidrawLib": "Excalidraw Library"
+    "excalidrawLib": "Excalidraw Library",
+    "decreaseFontSize": "Decrease font size",
+    "increaseFontSize": "Increase font size"
   },
   "buttons": {
     "clearReset": "Reset the canvas",
@@ -169,7 +171,7 @@
   "errors": {
     "unsupportedFileType": "Unsupported file type.",
     "imageInsertError": "Couldn't insert image. Try again later...",
-    "fileTooBig": "File is too big.",
+    "fileTooBig": "File is too big. Maximum allowed size is {{maxSize}}.",
     "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
     "invalidSVGString": "Invalid SVG."
   },
@@ -204,10 +206,12 @@
     "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_pointSelected": "Press Delete to remove point, CtrlOrCmd+D to duplicate, or drag to move",
-    "lineEditor_nothingSelected": "Select a point to move or remove, or hold Alt and click to add new 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",
-    "publishLibrary": "Publish your own library"
+    "publishLibrary": "Publish your own library",
+    "bindTextToElement": "Press enter to add text",
+    "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging"
   },
   "canvasError": {
     "cannotShowPreview": "Cannot show preview",
@@ -254,6 +258,8 @@
   "helpDialog": {
     "blog": "Read our blog",
     "click": "click",
+    "deepSelect": "Deep select",
+    "deepBoxSelect": "Deep select within box, and prevent dragging",
     "curvedArrow": "Curved arrow",
     "curvedLine": "Curved line",
     "documentation": "Documentation",

src/locales/es-ES.json

@@ -100,7 +100,9 @@
     "share": "Compartir",
     "showStroke": "Mostrar selector de color de trazo",
     "showBackground": "Mostrar el selector de color de fondo",
-    "toggleTheme": "Alternar tema"
+    "toggleTheme": "Alternar tema",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
@@ -135,7 +137,11 @@
     "zenMode": "Modo Zen",
     "exitZenMode": "Salir del modo Zen",
     "cancel": "Cancelar",
-    "clear": "Borrar"
+    "clear": "Borrar",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "Esto limpiará todo el lienzo. Estás seguro?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "No se pudo restaurar la escena desde este archivo de imagen",
     "invalidSceneUrl": "No se ha podido importar la escena desde la URL proporcionada. Está mal formada, o no contiene datos de Excalidraw JSON válidos.",
     "resetLibrary": "Esto borrará tu biblioteca. ¿Estás seguro?",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": "La clave de cifrado debe tener 22 caracteres. La colaboración en vivo está deshabilitada."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Doble clic o pulse Enter para editar puntos",
     "lineEditor_pointSelected": "Presione Suprimir para eliminar el punto, CtrlOrCmd+D para duplicarlo, o arrástrelo para moverlo",
     "lineEditor_nothingSelected": "Selecciona un punto sea para mover o eliminar, o mantén pulsado Alt y haz clic 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 clic y arrastre para establecer su tamaño manualmente",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "No se puede mostrar la vista previa",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Borrar lienzo"
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "Tus dibujos están cifrados de punto a punto, por lo que los servidores de Excalidraw nunca los verán.",
     "link": "Entrada en el blog sobre cifrado de extremo a extremo"
@@ -289,6 +345,7 @@
     "width": "Ancho"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "Estilos copiados.",
     "copyToClipboard": "Copiado en el portapapeles.",
     "copyToClipboardAsPng": "Copiado {{exportSelection}} al portapapeles como PNG\n({{exportColorScheme}})",

src/locales/fa-IR.json

@@ -100,7 +100,9 @@
     "share": "اشتراک‌گذاری",
     "showStroke": "نمایش انتخاب کننده رنگ حاشیه",
     "showBackground": "نمایش انتخاب کننده رنگ پس زمینه",
-    "toggleTheme": "تغییر تم"
+    "toggleTheme": "تغییر تم",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "پاکسازی بوم نقاشی",
@@ -135,7 +137,11 @@
     "zenMode": "حالت ذن",
     "exitZenMode": "خروج از حالت تمرکز",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "این کار کل صفحه را پاک میکند. آیا مطمئنید؟",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "صحنه را نمی توان از این فایل تصویری بازیابی کرد",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "دوبار کلیک کنید یا Enter را فشار دهید تا نقاط را ویرایش کنید",
     "lineEditor_pointSelected": "برای حذف نقطه Delete برای کپی زدن Ctrl یا Cmd+D را بزنید و یا برای جابجایی بکشید.",
     "lineEditor_nothingSelected": "یک نقطه را برای جابجایی یا حذف انتخاب کنید یا کلید Alt بگیرید و کلیک کنید تا بتوانید یک نقطه جدید اضافه کنید",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "پیش نمایش نشان داده نمی شود",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "شما در یک محیط رمزگزاری شده دو طرفه در حال طراحی هستید پس Excalidraw هرگز طرح های شما را نمیبند.",
     "link": ""
@@ -289,6 +345,7 @@
     "width": "عرض"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "کپی سبک.",
     "copyToClipboard": "در کلیپ‌بورد کپی شد.",
     "copyToClipboardAsPng": "",

src/locales/fi-FI.json

@@ -100,7 +100,9 @@
     "share": "Jaa",
     "showStroke": "Näytä viivan värin valitsin",
     "showBackground": "Näytä taustavärin valitsin",
-    "toggleTheme": "Vaihda teema"
+    "toggleTheme": "Vaihda teema",
+    "personalLib": "Oma kirjasto",
+    "excalidrawLib": "Excalidraw kirjasto"
   },
   "buttons": {
     "clearReset": "Tyhjennä piirtoalue",
@@ -135,7 +137,11 @@
     "zenMode": "Zen-tila",
     "exitZenMode": "Poistu zen-tilasta",
     "cancel": "Peruuta",
-    "clear": "Pyyhi"
+    "clear": "Pyyhi",
+    "remove": "Poista",
+    "publishLibrary": "Julkaise",
+    "submit": "Lähetä",
+    "confirm": "Vahvista"
   },
   "alerts": {
     "clearReset": "Tämä tyhjentää koko piirtoalueen. Jatketaanko?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Teosta ei voitu palauttaa tästä kuvatiedostosta",
     "invalidSceneUrl": "Teosta ei voitu tuoda annetusta URL-osoitteesta. Tallenne on vioittunut, tai osoitteessa ei ole Excalidraw JSON-dataa.",
     "resetLibrary": "Tämä tyhjentää kirjastosi. Jatketaanko?",
+    "removeItemsFromsLibrary": "Poista {{count}} kohdetta kirjastosta?",
     "invalidEncryptionKey": "Salausavaimen on oltava 22 merkkiä pitkä. Live-yhteistyö ei ole käytössä."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Kaksoisnapauta tai paina Enter muokataksesi pisteitä",
     "lineEditor_pointSelected": "Paina Delete poistaaksesi pisteen, Ctrl tai Cmd+D monistaaksesi, tai raahaa liikuttaaksesi",
     "lineEditor_nothingSelected": "Valitse liikutettava tai poistettava piste, tai pidä ALT-näppäintä alaspainettuna ja napsauta lisätäksesi uusia pisteitä",
-    "placeImage": "Klikkaa asettaaksesi kuvan, tai klikkaa ja raahaa asettaaksesi sen koon manuaalisesti"
+    "placeImage": "Klikkaa asettaaksesi kuvan, tai klikkaa ja raahaa asettaaksesi sen koon manuaalisesti",
+    "publishLibrary": "Julkaise oma kirjasto"
   },
   "canvasError": {
     "cannotShowPreview": "Esikatselua ei voitu näyttää",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Pyyhi piirtoalue"
   },
+  "publishDialog": {
+    "title": "Julkaise kirjasto",
+    "itemName": "Kohteen nimi",
+    "authorName": "Tekijän nimi",
+    "githubUsername": "GitHub-käyttäjätunnus",
+    "twitterUsername": "Twitter-käyttäjätunnus",
+    "libraryName": "Kirjaston nimi",
+    "libraryDesc": "Kirjaston kuvaus",
+    "website": "Verkkosivu",
+    "placeholder": {
+      "authorName": "Nimesi tai käyttäjänimesi",
+      "libraryName": "Kirjastosi nimi",
+      "libraryDesc": "Kirjaston kuvaus, joka auttaa ihmisiä ymmärtämään sen käyttötarkoitukset",
+      "githubHandle": "GitHub-tunnuksesi (valinnainen), jotta voit muokata kirjastoa sen jälkeen kun se on lähetetty tarkastettavaksi",
+      "twitterHandle": "Twitter-tunnus (valinnainen), jotta tiedämme ketä kiittää kun viestimme Twitterissä",
+      "website": "Linkki henkilökohtaiselle verkkosivustollesi tai muualle (valinnainen)"
+    },
+    "errors": {
+      "required": "Pakollinen",
+      "website": "Syötä oikeamuotoinen URL-osoite"
+    },
+    "noteDescription": {
+      "pre": "Lähetä kirjastosi, jotta se voidaan sisällyttää ",
+      "link": "julkisessa kirjastolistauksessa",
+      "post": "muiden käyttöön omissa piirrustuksissaan."
+    },
+    "noteGuidelines": {
+      "pre": "Kirjasto on ensin hyväksyttävä manuaalisesti. Ole hyvä ja lue ",
+      "link": "ohjeet",
+      "post": " ennen lähettämistä. Tarvitset GitHub-tilin, jotta voit viestiä ja tehdä muutoksia pyydettäessä, mutta se ei ole ehdottoman välttämätöntä."
+    },
+    "noteLicense": {
+      "pre": "Lähettämällä hyväksyt että kirjasto julkaistaan ",
+      "link": "MIT-lisenssin ",
+      "post": "alla, mikä lyhyesti antaa muiden käyttää sitä ilman rajoituksia."
+    },
+    "noteItems": "Jokaisella kirjaston kohteella on oltava oma nimensä suodatusta varten. Seuraavat kirjaston kohteet sisältyvät:",
+    "atleastOneLibItem": "Valitse vähintään yksi kirjaston kohde aloittaaksesi"
+  },
+  "publishSuccessDialog": {
+    "title": "Kirjasto lähetetty",
+    "content": "Kiitos {{authorName}}. Kirjastosi on lähetetty tarkistettavaksi. Voit seurata sen tilaa",
+    "link": "täällä"
+  },
+  "confirmDialog": {
+    "resetLibrary": "Tyhjennä kirjasto",
+    "removeItemsFromLib": "Poista valitut kohteet kirjastosta"
+  },
   "encrypted": {
     "tooltip": "Piirroksesi ovat päästä-päähän-salattuja, joten Excalidrawin palvelimet eivät koskaan näe niitä.",
     "link": "Blogiartikkeli päästä päähän -salauksesta Excalidraw:ssa"
@@ -289,6 +345,7 @@
     "width": "Leveys"
   },
   "toast": {
+    "addedToLibrary": "Lisätty kirjastoon",
     "copyStyles": "Tyylit kopioitiin.",
     "copyToClipboard": "Kopioitiin leikepöydälle.",
     "copyToClipboardAsPng": "Kopioitiin {{exportSelection}} leikepöydälle PNG:nä\n({{exportColorScheme}})",

src/locales/fr-FR.json

@@ -100,7 +100,9 @@
     "share": "Partager",
     "showStroke": "Afficher le sélecteur de couleur de trait",
     "showBackground": "Afficher le sélecteur de couleur d'arrière-plan",
-    "toggleTheme": "Changer le thème"
+    "toggleTheme": "Changer le thème",
+    "personalLib": "Bibliothèque personnelle",
+    "excalidrawLib": "Bibliothèque Excalidraw"
   },
   "buttons": {
     "clearReset": "Réinitialiser le canevas",
@@ -135,7 +137,11 @@
     "zenMode": "Mode zen",
     "exitZenMode": "Quitter le mode zen",
     "cancel": "Annuler",
-    "clear": "Effacer"
+    "clear": "Effacer",
+    "remove": "Supprimer",
+    "publishLibrary": "Publier",
+    "submit": "Envoyer",
+    "confirm": "Confirmer"
   },
   "alerts": {
     "clearReset": "L'intégralité du canevas va être effacée. Êtes-vous sûr ?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Impossible de restaurer la scène depuis ce fichier image",
     "invalidSceneUrl": "Impossible d'importer la scène depuis l'URL fournie. Elle est soit incorrecte, soit ne contient pas de données JSON Excalidraw valides.",
     "resetLibrary": "Cela va effacer votre bibliothèque. Êtes-vous sûr·e ?",
+    "removeItemsFromsLibrary": "Supprimer {{count}} élément(s) de la bibliothèque ?",
     "invalidEncryptionKey": "La clé de chiffrement doit comporter 22 caractères. La collaboration en direct est désactivée."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Double-cliquez ou appuyez sur Entrée pour éditer les points",
     "lineEditor_pointSelected": "Appuyez sur Supprimer pour supprimer le point, Ctrl ou Cmd+D pour le dupliquer, ou faites-le glisser pour le déplacer",
     "lineEditor_nothingSelected": "Sélectionnez un point à déplacer ou supprimer, ou maintenez Alt et cliquez pour ajouter de nouveaux points",
-    "placeImage": "Cliquez pour placer l'image, ou cliquez et faites glisser pour définir sa taille manuellement"
+    "placeImage": "Cliquez pour placer l'image, ou cliquez et faites glisser pour définir sa taille manuellement",
+    "publishLibrary": "Publier votre propre bibliothèque"
   },
   "canvasError": {
     "cannotShowPreview": "Impossible d’afficher l’aperçu",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Effacer la zone de dessin"
   },
+  "publishDialog": {
+    "title": "Publier la bibliothèque",
+    "itemName": "Nom de l’élément",
+    "authorName": "Nom de l'auteur",
+    "githubUsername": "Nom d'utilisateur GitHub",
+    "twitterUsername": "Nom d'utilisateur Twitter",
+    "libraryName": "Nom de la bibliothèque",
+    "libraryDesc": "Description de la bibliothèque",
+    "website": "Site web",
+    "placeholder": {
+      "authorName": "Votre nom ou nom d'utilisateur",
+      "libraryName": "Nom de votre bibliothèque",
+      "libraryDesc": "Description de votre bibliothèque pour aider les gens à comprendre son usage",
+      "githubHandle": "Nom d'utilisateur GitHub (optionnel), pour que tu puisses modifier la bibliothèque une fois soumise pour vérification",
+      "twitterHandle": "Nom d'utilisateur Twitter (optionnel), pour savoir qui créditer lors de la promotion sur Twitter",
+      "website": "Lien vers votre site web personnel ou autre (optionnel)"
+    },
+    "errors": {
+      "required": "Requis",
+      "website": "Entrer une URL valide"
+    },
+    "noteDescription": {
+      "pre": "Soumets ta bibliothèque pour l'inclure au ",
+      "link": "dépôt de bibliothèque publique",
+      "post": "pour permettre son utilisation par autrui dans leurs dessins."
+    },
+    "noteGuidelines": {
+      "pre": "La bibliothèque doit d'abord être approuvée manuellement. Veuillez lire les ",
+      "link": "lignes directrices",
+      "post": " avant de la soumettre. Vous aurez besoin d'un compte GitHub pour communiquer et apporter des modifications si demandé, mais ce n'est pas obligatoire."
+    },
+    "noteLicense": {
+      "pre": "En soumettant, vous acceptez que la bibliothèque soit publiée sous la ",
+      "link": "Licence MIT, ",
+      "post": "ce qui en gros signifie que tout le monde peut l'utiliser sans restrictions."
+    },
+    "noteItems": "Chaque élément de la bibliothèque doit avoir son propre nom afin qu'il soit filtrable. Les éléments de bibliothèque suivants seront inclus :",
+    "atleastOneLibItem": "Veuillez sélectionner au moins un élément de bibliothèque pour commencer"
+  },
+  "publishSuccessDialog": {
+    "title": "Bibliothèque soumise",
+    "content": "Merci {{authorName}}. Votre bibliothèque a été soumise pour examen. Vous pouvez suivre le statut",
+    "link": "ici"
+  },
+  "confirmDialog": {
+    "resetLibrary": "Réinitialiser la bibliothèque",
+    "removeItemsFromLib": "Enlever les éléments sélectionnés de la bibliothèque"
+  },
   "encrypted": {
     "tooltip": "Vos dessins sont chiffrés de bout en bout, les serveurs d'Excalidraw ne les verront jamais.",
     "link": "Article de blog sur le chiffrement de bout en bout dans Excalidraw"
@@ -289,6 +345,7 @@
     "width": "Largeur"
   },
   "toast": {
+    "addedToLibrary": "Ajouté à la bibliothèque",
     "copyStyles": "Styles copiés.",
     "copyToClipboard": "Copié dans le presse-papier.",
     "copyToClipboardAsPng": "{{exportSelection}} copié dans le presse-papier en PNG\n({{exportColorScheme}})",

src/locales/he-IL.json

@@ -100,7 +100,9 @@
     "share": "שתף",
     "showStroke": "הצג צבעי קו מתאר",
     "showBackground": "הצג צבעי רקע",
-    "toggleTheme": "שינוי ערכת העיצוב"
+    "toggleTheme": "שינוי ערכת העיצוב",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "אפס את הלוח",
@@ -135,7 +137,11 @@
     "zenMode": "מצב זן",
     "exitZenMode": "צא ממצב תפריט מרחף",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "פעולה זו תנקה את כל הלוח. אתה בטוח?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "לא הצלחנו לשחזר את התצוגה מקובץ התמונה",
     "invalidSceneUrl": "ייבוא המידע מן סצינה מכתובת האינטרנט נכשלה. המידע בנוי באופן משובש או שהוא אינו קובץ JSON תקין של Excalidraw.",
     "resetLibrary": "פעולה זו תנקה את כל הלוח. אתה בטוח?",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "לחץ לחיצה כפולה או אנטר לעריכת הנקודות",
     "lineEditor_pointSelected": "לחץ על Delete להסרת נקודה, CtrlOrCmd+D לשכפל, או גרור להזזה",
     "lineEditor_nothingSelected": "בחר נקודה להזזה או הסרה, או החזק את כפתור Alt והקלק להוספת נקודות חדשות",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "לא הצלחנו להציג את התצוגה המקדימה",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "הרישומים שלך מוצפנים מקצה לקצה כך שהשרתים של Excalidraw לא יראו אותם לעולם.",
     "link": "פוסט בבלוג על הצפנה מקצה לקצב ב-Excalidraw"
@@ -289,6 +345,7 @@
     "width": "רוחב"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "העתק סגנונות.",
     "copyToClipboard": "הועתק אל הלוח.",
     "copyToClipboardAsPng": "{{exportSelection}} הועתקה ללוח כ-PNG\n({{exportColorScheme}})",

src/locales/hi-IN.json

@@ -100,7 +100,9 @@
     "share": "",
     "showStroke": "",
     "showBackground": "",
-    "toggleTheme": ""
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "कैनवास रीसेट करें",
@@ -135,7 +137,11 @@
     "zenMode": "ज़ेन मोड",
     "exitZenMode": "जेन मोड से बाहर निकलें",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "इससे पूरा कैनवास साफ हो जाएगा। क्या आपको यकीन है?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "छवि फ़ाइल बहाल दृश्य नहीं है",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "बिंदुओं को संपादित करने के लिए Enter पर डबल-क्लिक करें या दबाएँ",
     "lineEditor_pointSelected": "बिंदु हटाने के लिए डिलीट दबाएं, प्रतिरूपित करने के लिए कण्ट्रोल या कमांड डी दबाएं या स्थानांतरित करने के लिए खींचे",
     "lineEditor_nothingSelected": "स्थानांतरित करने या हटाने के लिए एक बिंदु का चयन करें, या Alt दबाए रखें और नए बिंदुओं को जोड़ने के लिए क्लिक करें",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "पूर्वावलोकन नहीं दिखा सकते हैं",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "आपके चित्र अंत-से-अंत एन्क्रिप्टेड हैं, इसलिए एक्सक्लूसिव्रॉव के सर्वर उन्हें कभी नहीं देखेंगे।",
     "link": ""
@@ -289,6 +345,7 @@
     "width": "चौड़ाई"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "काॅपी कीए स्टाइल",
     "copyToClipboard": "क्लिपबोर्ड में कॉपी कीए",
     "copyToClipboardAsPng": "",

src/locales/hu-HU.json

@@ -100,7 +100,9 @@
     "share": "",
     "showStroke": "",
     "showBackground": "",
-    "toggleTheme": ""
+    "toggleTheme": "",
+    "personalLib": "",
+    "excalidrawLib": ""
   },
   "buttons": {
     "clearReset": "Vászon törlése",
@@ -135,7 +137,11 @@
     "zenMode": "Letisztult mód",
     "exitZenMode": "Kilépés a letisztult módból",
     "cancel": "",
-    "clear": ""
+    "clear": "",
+    "remove": "",
+    "publishLibrary": "",
+    "submit": "",
+    "confirm": ""
   },
   "alerts": {
     "clearReset": "Ez a művelet törli a vászont. Biztos benne?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "A jelenet visszaállítása nem sikerült ebből a kép fájlból",
     "invalidSceneUrl": "",
     "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
     "invalidEncryptionKey": ""
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Kattints duplán, vagy nyomj entert a pontok szerkesztéséhez",
     "lineEditor_pointSelected": "Nyomd meg a delete gombot a pont eltávolításához, Ctrl vagy Cmd + D-t a duplikáláshoz, vagy húzva mozgasd",
     "lineEditor_nothingSelected": "Válassz ki egy pontot a mozgatáshoz vagy törtléshez, vagy az Alt lenyomása mellett kattintva hozz létre új pontokat",
-    "placeImage": ""
+    "placeImage": "",
+    "publishLibrary": ""
   },
   "canvasError": {
     "cannotShowPreview": "Előnézet nem jeleníthető meg",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": ""
   },
+  "publishDialog": {
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
+    "placeholder": {
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
+    },
+    "errors": {
+      "required": "",
+      "website": ""
+    },
+    "noteDescription": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteGuidelines": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteLicense": {
+      "pre": "",
+      "link": "",
+      "post": ""
+    },
+    "noteItems": "",
+    "atleastOneLibItem": ""
+  },
+  "publishSuccessDialog": {
+    "title": "",
+    "content": "",
+    "link": ""
+  },
+  "confirmDialog": {
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
+  },
   "encrypted": {
     "tooltip": "A rajzaidat végpontok közötti titkosítással tároljuk, tehát az Excalidraw szervereiről se tud más belenézni.",
     "link": ""
@@ -289,6 +345,7 @@
     "width": "Szélesség"
   },
   "toast": {
+    "addedToLibrary": "",
     "copyStyles": "",
     "copyToClipboard": "",
     "copyToClipboardAsPng": "",

src/locales/id-ID.json

@@ -100,7 +100,9 @@
     "share": "Bagikan",
     "showStroke": "Tampilkan garis pengambil warna",
     "showBackground": "Tampilkan latar pengambil warna",
-    "toggleTheme": "Ubah tema"
+    "toggleTheme": "Ubah tema",
+    "personalLib": "Pustaka Pribadi",
+    "excalidrawLib": "Pustaka Excalidraw"
   },
   "buttons": {
     "clearReset": "Setel Ulang Kanvas",
@@ -135,7 +137,11 @@
     "zenMode": "Mode zen",
     "exitZenMode": "Keluar dari mode zen",
     "cancel": "Batal",
-    "clear": "Hapus"
+    "clear": "Hapus",
+    "remove": "Hapus",
+    "publishLibrary": "Terbitkan",
+    "submit": "Kirimkan",
+    "confirm": "Konfirmasi"
   },
   "alerts": {
     "clearReset": "Ini akan menghapus semua yang ada dikanvas. Apakah kamu yakin ?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Pemandangan tidak dapat dipulihkan dari file gambar ini",
     "invalidSceneUrl": "Tidak dapat impor pemandangan dari URL. Kemungkinan URL itu rusak atau tidak berisi data JSON Excalidraw yang valid.",
     "resetLibrary": "Ini akan menghapus pustaka Anda. Anda yakin?",
+    "removeItemsFromsLibrary": "Hapus {{count}} item dari pustaka?",
     "invalidEncryptionKey": "Sandi enkripsi harus 22 karakter. Kolaborasi langsung dinonaktifkan."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Klik ganda atau tekan Enter untuk mengedit titik",
     "lineEditor_pointSelected": "Tekan Delete untuk menghapus titik, Ctrl/Cmd + D untuk menduplikasi, atau seret untuk memindahkan",
     "lineEditor_nothingSelected": "Pilih sebuah titik untuk memindah atau menghapus, atau tekan Alt dan klik untuk menambahkan titik baru",
-    "placeImage": "Klik untuk tempatkan gambar, atau klik dan jatuhkan untuk tetapkan ukuran secara manual"
+    "placeImage": "Klik untuk tempatkan gambar, atau klik dan jatuhkan untuk tetapkan ukuran secara manual",
+    "publishLibrary": "Terbitkan pustaka Anda"
   },
   "canvasError": {
     "cannotShowPreview": "Tidak dapat menampilkan pratinjau",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Hapus kanvas"
   },
+  "publishDialog": {
+    "title": "Terbitkan pustaka",
+    "itemName": "Nama item",
+    "authorName": "Nama pembuat",
+    "githubUsername": "Nama pengguna github",
+    "twitterUsername": "Nama pengguna Twitter",
+    "libraryName": "Nama Pustaka",
+    "libraryDesc": "Deskripsi pustaka",
+    "website": "Situs Web",
+    "placeholder": {
+      "authorName": "Nama atau nama pengguna Anda",
+      "libraryName": "Nama dari pustaka Anda",
+      "libraryDesc": "Deskripsi pustaka Anda untuk membantu orang mengerti penggunaannya",
+      "githubHandle": "Akun GitHub (opsional), jadi Anda dapat mengubah pustaka ketika diserahkan untuk review",
+      "twitterHandle": "Nama pengguna Twitter (opsional), jadi kami tahu siapa dipuji ketika mempromosikannya melalui Twitter",
+      "website": "Hubungkan ke situs personal Anda atau lainnya (opsional)"
+    },
+    "errors": {
+      "required": "Dibutuhkan",
+      "website": "Masukkan URL valid"
+    },
+    "noteDescription": {
+      "pre": "Kirimkan pustaka Anda untuk disertakan di ",
+      "link": "repositori pustaka publik",
+      "post": "untuk orang lain menggunakannya dalam gambar mereka."
+    },
+    "noteGuidelines": {
+      "pre": "Pustaka butuh disetujui secara manual terlebih dahulu. Baca ",
+      "link": "pedoman",
+      "post": " sebelum mengirim. Anda butuh akun GitHub untuk berkomunikasi dan membuat perubahan jika dibutuhkan, tetapi tidak wajib dibutukan."
+    },
+    "noteLicense": {
+      "pre": "Dengan mengkirimkannya, Anda setuju pustaka akan diterbitkan dibawah ",
+      "link": "Lisensi MIT, ",
+      "post": "yang artinya siapa pun dapat menggunakannya tanpa batasan."
+    },
+    "noteItems": "Setiap item pustaka harus memiliki nama, sehingga bisa disortir. Item pustaka di bawah ini akan dimasukan:",
+    "atleastOneLibItem": "Pilih setidaknya satu item pustaka untuk mulai"
+  },
+  "publishSuccessDialog": {
+    "title": "Pustaka telah dikirm",
+    "content": "Terima kasih {{authorName}}. pustaka Anda telah diserahkan untuk ditinjau ulang. Anda dapat cek statusnya",
+    "link": "di sini"
+  },
+  "confirmDialog": {
+    "resetLibrary": "Reset pustaka",
+    "removeItemsFromLib": "Hapus item yang dipilih dari pustaka"
+  },
   "encrypted": {
     "tooltip": "Gambar anda terenkripsi end-to-end sehingga server Excalidraw tidak akan pernah dapat melihatnya.",
     "link": "Pos blog tentang enkripsi ujung ke ujung di Excalidraw"
@@ -289,6 +345,7 @@
     "width": "Lebar"
   },
   "toast": {
+    "addedToLibrary": "Tambahkan ke pustaka",
     "copyStyles": "Gaya tersalin.",
     "copyToClipboard": "Tersalin ke papan klip.",
     "copyToClipboardAsPng": "Tersalin {{exportSelection}} ke clipboard sebagai PNG\n({{exportColorScheme}})",

src/locales/it-IT.json

@@ -100,7 +100,9 @@
     "share": "Condividi",
     "showStroke": "Mostra selettore colore del tratto",
     "showBackground": "Mostra selettore colore di sfondo",
-    "toggleTheme": "Cambia tema"
+    "toggleTheme": "Cambia tema",
+    "personalLib": "Libreria Personale",
+    "excalidrawLib": "Libreria di Excalidraw"
   },
   "buttons": {
     "clearReset": "Svuota la tela",
@@ -135,7 +137,11 @@
     "zenMode": "Modalità Zen",
     "exitZenMode": "Uscire dalla modalità zen",
     "cancel": "Annulla",
-    "clear": "Cancella"
+    "clear": "Cancella",
+    "remove": "Rimuovi",
+    "publishLibrary": "Pubblica",
+    "submit": "Invia",
+    "confirm": "Conferma"
   },
   "alerts": {
     "clearReset": "Questa azione cancellerà l'intera tela. Sei sicuro?",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "Impossibile ripristinare la scena da questo file immagine",
     "invalidSceneUrl": "Impossibile importare la scena dall'URL fornito. Potrebbe essere malformato o non contenere dati JSON Excalidraw validi.",
     "resetLibrary": "Questa azione cancellerà l'intera libreria. Sei sicuro?",
+    "removeItemsFromsLibrary": "Eliminare {{count}} elementi dalla libreria?",
     "invalidEncryptionKey": "La chiave di cifratura deve essere composta da 22 caratteri. La collaborazione live è disabilitata."
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "Fai doppio click o premi invio per modificare i punti",
     "lineEditor_pointSelected": "Premere Elimina per rimuovere il punto, CtrlOrCmd+D per duplicare o trascinare per spostare",
     "lineEditor_nothingSelected": "Seleziona un punto per spostare o rimuovere, oppure tieni premuto Alt e fai clic per aggiungere nuovi punti",
-    "placeImage": "Fai click per posizionare l'immagine, o click e trascina per impostarne la dimensione manualmente"
+    "placeImage": "Fai click per posizionare l'immagine, o click e trascina per impostarne la dimensione manualmente",
+    "publishLibrary": "Pubblica la tua libreria"
   },
   "canvasError": {
     "cannotShowPreview": "Impossibile visualizzare l'anteprima",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "Svuota la tela"
   },
+  "publishDialog": {
+    "title": "Pubblica la libreria",
+    "itemName": "Nome dell'elemento",
+    "authorName": "Nome dell'autore",
+    "githubUsername": "Nome utente di GitHub",
+    "twitterUsername": "Nome utente di Twitter",
+    "libraryName": "Nome della libreria",
+    "libraryDesc": "Descrizione della libreria",
+    "website": "Sito Web",
+    "placeholder": {
+      "authorName": "Il tuo nome o nome utente",
+      "libraryName": "Nome della tua libreria",
+      "libraryDesc": "Descrizione della tua libreria per aiutare le persone a comprenderne lo scopo",
+      "githubHandle": "Handle di GitHub (opzionale), così che tu possa modificare la libreria una volta inviata per la revisione",
+      "twitterHandle": "Nome utente di Twitter (opzionale), così che sappiamo chi accreditare promuovendo su Twitter",
+      "website": "Link al tuo sito web personale o altro (opzionale)"
+    },
+    "errors": {
+      "required": "Obbligatorio",
+      "website": "Inserisci un URL valido"
+    },
+    "noteDescription": {
+      "pre": "Invia la tua libreria da includere nella ",
+      "link": "repository della libreria pubblica",
+      "post": "perché sia usata da altri nei loro disegni."
+    },
+    "noteGuidelines": {
+      "pre": "La libreria dev'esser prima approvata manualmente. Sei pregato di leggere le ",
+      "link": "linee guida",
+      "post": " prima di inviarla. Necessiterai di un profilo di GitHub per comunicare ed effettuare modifiche se richiesto, ma non è strettamente necessario."
+    },
+    "noteLicense": {
+      "pre": "Inviando, acconsenti che la libreria sarà pubblicata sotto la ",
+      "link": "Licenza MIT, ",
+      "post": "che in breve significa che chiunque possa usarla senza restrizioni."
+    },
+    "noteItems": "Ogni elemento della libreria deve avere il proprio nome, così che sia filtrabile. Gli elementi della seguente libreria saranno inclusi:",
+    "atleastOneLibItem": "Sei pregato di selezionare almeno un elemento della libreria per iniziare"
+  },
+  "publishSuccessDialog": {
+    "title": "Libreria inviata",
+    "content": "Grazie {{authorName}}. La tua libreria è stata inviata per la revisione. Puoi monitorarne lo stato",
+    "link": "qui"
+  },
+  "confirmDialog": {
+    "resetLibrary": "Ripristina la libreria",
+    "removeItemsFromLib": "Rimuovi gli elementi selezionati dalla libreria"
+  },
   "encrypted": {
     "tooltip": "I tuoi disegni sono crittografati end-to-end in modo che i server di Excalidraw non li possano mai vedere.",
     "link": "Articolo del blog sulla crittografia end-to-end di Excalidraw"
@@ -289,6 +345,7 @@
     "width": "Larghezza"
   },
   "toast": {
+    "addedToLibrary": "Aggiunto alla libreria",
     "copyStyles": "Stili copiati.",
     "copyToClipboard": "Copiato negli appunti.",
     "copyToClipboardAsPng": "{{exportSelection}} copiato negli appunti come PNG\n({{exportColorScheme}})",

src/locales/ja-JP.json

@@ -100,7 +100,9 @@
     "share": "共有",
     "showStroke": "ストロークカラーピッカーを表示",
     "showBackground": "背景色ピッカーを表示",
-    "toggleTheme": "テーマの切り替え"
+    "toggleTheme": "テーマの切り替え",
+    "personalLib": "個人ライブラリ",
+    "excalidrawLib": "Excalidrawライブラリ"
   },
   "buttons": {
     "clearReset": "キャンバスのリセット",
@@ -135,7 +137,11 @@
     "zenMode": "Zenモード",
     "exitZenMode": "集中モードをやめる",
     "cancel": "キャンセル",
-    "clear": "消去"
+    "clear": "消去",
+    "remove": "削除",
+    "publishLibrary": "公開",
+    "submit": "送信",
+    "confirm": "確認"
   },
   "alerts": {
     "clearReset": "この操作によってキャンバス全体が消えます。よろしいですか？",
@@ -157,6 +163,7 @@
     "cannotRestoreFromImage": "このイメージファイルからシーンを復元できませんでした",
     "invalidSceneUrl": "指定された URL からシーンをインポートできませんでした。不正な形式であるか、有効な Excalidraw JSON データが含まれていません。",
     "resetLibrary": "ライブラリを消去します。本当によろしいですか？",
+    "removeItemsFromsLibrary": "{{count}} 個のアイテムをライブラリから削除しますか？",
     "invalidEncryptionKey": "暗号化キーは22文字でなければなりません。ライブコラボレーションは無効化されています。"
   },
   "errors": {
@@ -199,7 +206,8 @@
     "lineEditor_info": "ポイントを編集するには、ダブルクリックまたはEnterキーを押します",
     "lineEditor_pointSelected": "削除ボタンを押して点を削除します。Ctrl+D または Cmd+D で複製します。またはドラッグして移動します",
     "lineEditor_nothingSelected": "移動または削除する点を選択するか、Altキーを押しながらクリックして新しい点を追加します",
-    "placeImage": "クリックして画像を配置するか、クリックしてドラッグしてサイズを手動で設定します"
+    "placeImage": "クリックして画像を配置するか、クリックしてドラッグしてサイズを手動で設定します",
+    "publishLibrary": "自分のライブラリを公開"
   },
   "canvasError": {
     "cannotShowPreview": "プレビューを表示できません",
@@ -269,6 +277,54 @@
   "clearCanvasDialog": {
     "title": "キャンバスを消去"
   },
+  "publishDialog": {
+    "title": "ライブラリを公開",
+    "itemName": "アイテム名",
+    "authorName": "作成者名",
+    "githubUsername": "GitHub ユーザ名",
+    "twitterUsername": "Twitter ユーザ名",
+    "libraryName": "ライブラリ名",
+    "libraryDesc": "ライブラリの説明",
+    "website": "Webサイト",
+    "placeholder": {
+      "authorName": "お名前またはユーザー名",
+      "libraryName": "あなたのライブラリ名",
+      "libraryDesc": "ライブラリの使い方を理解するための説明",
+      "githubHandle": "GitHubハンドル(任意)。一度レビューのために送信されると、ライブラリを編集できます",
+      "twitterHandle": "Twitterのユーザー名 (任意)。Twitterでプロモーションする際にクレジットする人を知っておくためのものです",
+      "website": "個人のウェブサイトまたは他のサイトへのリンク (オプション)"
+    },
+    "errors": {
+      "required": "必須項目",
+      "website": "有効な URL を入力してください"
+    },
+    "noteDescription": {
+      "pre": "以下に含めるライブラリを提出してください ",
+      "link": "公開ライブラリのリポジトリ",
+      "post": "他の人が作図に使えるようにするためです"
+    },
+    "noteGuidelines": {
+      "pre": "最初にライブラリを手動で承認する必要があります。次をお読みください ",
+      "link": "ガイドライン",
+      "post": " 送信する前に、GitHubアカウントが必要になりますが、必須ではありません。"
+    },
+    "noteLicense": {
+      "pre": "提出することにより、ライブラリが次の下で公開されることに同意します： ",
+      "link": "MIT ライセンス",
+      "post": "つまり誰でも制限なく使えるということです"
+    },
+    "noteItems": "",
+    "atleastOneLibItem": "開始するには少なくとも1つのライブラリ項目を選択してください"
+  },
+  "publishSuccessDialog": {
+    "title": "ライブラリを送信しました",
+    "content": "{{authorName}} さん、ありがとうございます。あなたのライブラリはレビューのために提出されました。状況を追跡できます。",
+    "link": "こちら"
+  },
+  "confirmDialog": {
+    "resetLibrary": "ライブラリをリセット",
+    "removeItemsFromLib": "選択したアイテムをライブラリから削除"
+  },
   "encrypted": {
     "tooltip": "描画内容はエンドツーエンド暗号化が施されており、Excalidrawサーバーが内容を見ることはできません。",
     "link": "Excalidrawのエンドツーエンド暗号化に関するブログ記事"
@@ -289,6 +345,7 @@
     "width": "幅"
   },
   "toast": {
+    "addedToLibrary": "ライブラリに追加しました",
     "copyStyles": "スタイルをコピーしました。",
     "copyToClipboard": "クリップボードにコピー",
     "copyToClipboardAsPng": "{{exportSelection}} を PNG 形式でクリップボードにコピーしました\n({{exportColorScheme}})",