@excalidraw/excalidraw 0.17.1-1ed53b1 → 0.17.1-2f9526d

package/dist/dev/index.js

@@ -1412,7 +1412,16 @@ var init_Scene = __esm({
         elements: null,
         cache: /* @__PURE__ */ new Map()
       };
-      versionNonce;
+      /**
+       * Random integer regenerated each scene update.
+       *
+       * Does not relate to elements versions, it's only a renderer
+       * cache-invalidation nonce at the moment.
+       */
+      sceneNonce;
+      getSceneNonce() {
+        return this.sceneNonce;
+      }
       getNonDeletedElementsMap() {
         return this.nonDeletedElementsMap;
       }
@@ -1457,9 +1466,6 @@ var init_Scene = __esm({
       getElement(id) {
         return this.elementsMap.get(id) || null;
       }
-      getVersionNonce() {
-        return this.versionNonce;
-      }
       getNonDeletedElement(id) {
         const element = this.getElement(id);
         if (element && isNonDeletedElement(element)) {
@@ -1516,15 +1522,15 @@ var init_Scene = __esm({
         this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
         this.frames = nextFrameLikes;
         this.nonDeletedFramesLikes = getNonDeletedElements(this.frames).elements;
-        this.informMutation();
+        this.triggerUpdate();
       }
-      informMutation() {
-        this.versionNonce = randomInteger();
+      triggerUpdate() {
+        this.sceneNonce = randomInteger();
         for (const callback of Array.from(this.callbacks)) {
           callback();
         }
       }
-      addCallback(cb) {
+      onUpdate(cb) {
         if (this.callbacks.has(cb)) {
           throw new Error();
         }
@@ -4996,7 +5002,7 @@ var init_containerCache = __esm({
 });
 
 // element/textElement.ts
-var normalizeText, splitIntoLines, redrawTextBoundingBox, bindTextToShapeAfterDuplication, handleBindTextResize, computeBoundTextPosition, measureText, detectLineHeight, getLineHeightInPx, getVerticalOffset, getApproxMinLineHeight, canvas, getLineWidth, getTextWidth, getTextHeight, parseTokens, wrapText, charWidth, DUMMY_TEXT, getApproxMinLineWidth, getMaxCharWidth, getBoundTextElementId, getBoundTextElement, getContainerElement, getContainerCenter, getContainerCoords, getTextElementAngle, shouldAllowVerticalAlign, suppportsHorizontalAlign, VALID_CONTAINER_TYPES, isValidTextContainer, computeContainerDimensionForBoundText, getBoundTextMaxWidth, getBoundTextMaxHeight, isMeasureTextSupported, DEFAULT_LINE_HEIGHT, FONT_METRICS, getDefaultLineHeight;
+var normalizeText, splitIntoLines, redrawTextBoundingBox, bindTextToShapeAfterDuplication, handleBindTextResize, computeBoundTextPosition, measureText, detectLineHeight, getLineHeightInPx, getVerticalOffset, getApproxMinLineHeight, canvas, getLineWidth, getTextWidth, getTextHeight, parseTokens, wrapText, charWidth, DUMMY_TEXT, getApproxMinLineWidth, getMinCharWidth, getMaxCharWidth, getBoundTextElementId, getBoundTextElement, getContainerElement, getContainerCenter, getContainerCoords, getTextElementAngle, shouldAllowVerticalAlign, suppportsHorizontalAlign, VALID_CONTAINER_TYPES, isValidTextContainer, computeContainerDimensionForBoundText, getBoundTextMaxWidth, getBoundTextMaxHeight, isMeasureTextSupported, DEFAULT_LINE_HEIGHT, FONT_METRICS, getDefaultLineHeight;
 var init_textElement = __esm({
   "element/textElement.ts"() {
     "use strict";
@@ -5025,8 +5031,8 @@ var init_textElement = __esm({
         angle: container?.angle ?? textElement.angle
       };
       boundTextUpdates.text = textElement.text;
-      if (container) {
-        maxWidth = getBoundTextMaxWidth(container, textElement);
+      if (container || !textElement.autoResize) {
+        maxWidth = container ? getBoundTextMaxWidth(container, textElement) : textElement.width;
         boundTextUpdates.text = wrapText(
           textElement.originalText,
           getFontString(textElement),
@@ -5038,7 +5044,9 @@ var init_textElement = __esm({
         getFontString(textElement),
         textElement.lineHeight
       );
-      boundTextUpdates.width = metrics.width;
+      if (textElement.autoResize) {
+        boundTextUpdates.width = metrics.width;
+      }
       boundTextUpdates.height = metrics.height;
       if (container) {
         const maxContainerHeight = getBoundTextMaxHeight(
@@ -5371,6 +5379,14 @@ var init_textElement = __esm({
       }
       return maxCharWidth + BOUND_TEXT_PADDING * 2;
     };
+    getMinCharWidth = (font) => {
+      const cache = charWidth.getCache(font);
+      if (!cache) {
+        return 0;
+      }
+      const cacheWithOutEmpty = cache.filter((val) => val !== void 0);
+      return Math.min(...cacheWithOutEmpty);
+    };
     getMaxCharWidth = (font) => {
       const cache = charWidth.getCache(font);
       if (!cache) {
@@ -6757,7 +6773,7 @@ var init_cursor = __esm({
 });
 
 // element/newElement.ts
-var _newElementBase, newElement, newEmbeddableElement, newIframeElement, newFrameElement, newMagicFrameElement, getTextElementPositionOffsets, newTextElement, getAdjustedDimensions, refreshTextDimensions, updateTextElement, newFreeDrawElement, newLinearElement, newImageElement, _deepCopyElement, deepCopyElement, regenerateId, duplicateElement, duplicateElements;
+var _newElementBase, newElement, newEmbeddableElement, newIframeElement, newFrameElement, newMagicFrameElement, getTextElementPositionOffsets, newTextElement, getAdjustedDimensions, refreshTextDimensions, newFreeDrawElement, newLinearElement, newImageElement, _deepCopyElement, deepCopyElement, regenerateId, duplicateElement, duplicateElements;
 var init_newElement = __esm({
   "element/newElement.ts"() {
     "use strict";
@@ -6877,36 +6893,41 @@ var init_newElement = __esm({
         { textAlign, verticalAlign },
         metrics
       );
+      const textElementProps = {
+        ..._newElementBase("text", opts),
+        text,
+        fontSize,
+        fontFamily,
+        textAlign,
+        verticalAlign,
+        x: opts.x - offsets.x,
+        y: opts.y - offsets.y,
+        width: metrics.width,
+        height: metrics.height,
+        containerId: opts.containerId || null,
+        originalText: text,
+        autoResize: true,
+        lineHeight
+      };
       const textElement = newElementWith(
-        {
-          ..._newElementBase("text", opts),
-          text,
-          fontSize,
-          fontFamily,
-          textAlign,
-          verticalAlign,
-          x: opts.x - offsets.x,
-          y: opts.y - offsets.y,
-          width: metrics.width,
-          height: metrics.height,
-          containerId: opts.containerId || null,
-          originalText: text,
-          lineHeight
-        },
+        textElementProps,
         {}
       );
       return textElement;
     };
     getAdjustedDimensions = (element, elementsMap, nextText) => {
-      const { width: nextWidth, height: nextHeight } = measureText(
+      let { width: nextWidth, height: nextHeight } = measureText(
         nextText,
         getFontString(element),
         element.lineHeight
       );
+      if (!element.autoResize) {
+        nextWidth = element.width;
+      }
       const { textAlign, verticalAlign } = element;
       let x;
       let y;
-      if (textAlign === "center" && verticalAlign === VERTICAL_ALIGN.MIDDLE && !element.containerId) {
+      if (textAlign === "center" && verticalAlign === VERTICAL_ALIGN.MIDDLE && !element.containerId && element.autoResize) {
         const prevMetrics = measureText(
           element.text,
           getFontString(element),
@@ -6956,27 +6977,16 @@ var init_newElement = __esm({
       if (textElement.isDeleted) {
         return;
       }
-      if (container) {
+      if (container || !textElement.autoResize) {
         text = wrapText(
           text,
           getFontString(textElement),
-          getBoundTextMaxWidth(container, textElement)
+          container ? getBoundTextMaxWidth(container, textElement) : textElement.width
         );
       }
       const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
       return { text, ...dimensions };
     };
-    updateTextElement = (textElement, container, elementsMap, {
-      text,
-      isDeleted,
-      originalText
-    }) => {
-      return newElementWith(textElement, {
-        originalText,
-        isDeleted: isDeleted ?? textElement.isDeleted,
-        ...refreshTextDimensions(textElement, container, elementsMap, originalText)
-      });
-    };
     newFreeDrawElement = (opts) => {
       return {
         ..._newElementBase(opts.type, opts),
@@ -9446,6 +9456,7 @@ var init_restore = __esm({
             verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
             containerId: element.containerId ?? null,
             originalText: element.originalText || text,
+            autoResize: element.autoResize ?? true,
             lineHeight
           });
           if (!text && !element.isDeleted) {
@@ -11303,7 +11314,7 @@ var init_export = __esm({
       }
       let assetPath = "https://excalidraw.com/";
       if (define_import_meta_env_default.VITE_IS_EXCALIDRAW_NPM_PACKAGE) {
-        assetPath = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${define_import_meta_env_default.VITE_PKG_NAME}@${define_import_meta_env_default.PKG_VERSION}`;
+        assetPath = window.EXCALIDRAW_ASSET_PATH || `https://unpkg.com/${define_import_meta_env_default.VITE_PKG_NAME}@${define_import_meta_env_default.VITE_PKG_VERSION}`;
         if (assetPath?.startsWith("/")) {
           assetPath = assetPath.replace("/", `${window.location.origin}/`);
         }
@@ -13524,11 +13535,11 @@ var init_mutateElement = __esm({
       element.versionNonce = randomInteger();
       element.updated = getUpdatedTimestamp();
       if (informMutation) {
-        Scene_default.getScene(element)?.informMutation();
+        Scene_default.getScene(element)?.triggerUpdate();
       }
       return element;
     };
-    newElementWith = (element, updates) => {
+    newElementWith = (element, updates, force = false) => {
       let didChange = false;
       for (const key in updates) {
         const value = updates[key];
@@ -13540,7 +13551,7 @@ var init_mutateElement = __esm({
           didChange = true;
         }
       }
-      if (!didChange) {
+      if (!didChange && !force) {
         return element;
       }
       return {
@@ -13657,14 +13668,13 @@ var init_sizeHelpers = __esm({
 });
 
 // element/transformHandles.ts
-var transformHandleSizes, ROTATION_RESIZE_HANDLE_GAP, DEFAULT_OMIT_SIDES, OMIT_SIDES_FOR_TEXT_ELEMENT, OMIT_SIDES_FOR_LINE_SLASH, OMIT_SIDES_FOR_LINE_BACKSLASH, generateTransformHandle, canResizeFromSides, getOmitSidesForDevice, getTransformHandlesFromCoords, getTransformHandles, shouldShowBoundingBox;
+var transformHandleSizes, ROTATION_RESIZE_HANDLE_GAP, DEFAULT_OMIT_SIDES, OMIT_SIDES_FOR_LINE_SLASH, OMIT_SIDES_FOR_LINE_BACKSLASH, generateTransformHandle, canResizeFromSides, getOmitSidesForDevice, getTransformHandlesFromCoords, getTransformHandles, shouldShowBoundingBox;
 var init_transformHandles = __esm({
   "element/transformHandles.ts"() {
     "use strict";
     init_define_import_meta_env();
     init_bounds();
     init_math();
-    init_element();
     init_typeChecks();
     init_constants();
     transformHandleSizes = {
@@ -13679,12 +13689,6 @@ var init_transformHandles = __esm({
       n: true,
       w: true
     };
-    OMIT_SIDES_FOR_TEXT_ELEMENT = {
-      e: true,
-      s: true,
-      n: true,
-      w: true
-    };
     OMIT_SIDES_FOR_LINE_SLASH = {
       e: true,
       s: true,
@@ -13845,8 +13849,6 @@ var init_transformHandles = __esm({
             omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
           }
         }
-      } else if (isTextElement(element)) {
-        omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
       } else if (isFrameLikeElement(element)) {
         omitSides = {
           ...omitSides,
@@ -13920,7 +13922,7 @@ var init_resizeTest = __esm({
           element,
           elementsMap
         );
-        if (element.type !== "text" && !(isLinearElement(element) && element.points.length <= 2)) {
+        if (!(isLinearElement(element) && element.points.length <= 2)) {
           const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
           const sides = getSelectionBorders(
             [x1 - SPACING, y1 - SPACING],
@@ -14088,8 +14090,9 @@ var init_resizeElements = __esm({
             shouldRotateWithDiscreteAngle2
           );
           updateBoundElements(element, elementsMap);
-        } else if (isTextElement(element) && (transformHandleType === "nw" || transformHandleType === "ne" || transformHandleType === "sw" || transformHandleType === "se")) {
+        } else if (isTextElement(element) && transformHandleType) {
           resizeSingleTextElement(
+            originalElements,
             element,
             elementsMap,
             transformHandleType,
@@ -14191,7 +14194,7 @@ var init_resizeElements = __esm({
         size: nextFontSize
       };
     };
-    resizeSingleTextElement = (element, elementsMap, transformHandleType, shouldResizeFromCenter2, pointerX, pointerY) => {
+    resizeSingleTextElement = (originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter2, pointerX, pointerY) => {
       const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
         element,
         elementsMap
@@ -14205,17 +14208,19 @@ var init_resizeElements = __esm({
       );
       let scaleX = 0;
       let scaleY = 0;
-      if (transformHandleType.includes("e")) {
-        scaleX = (rotatedX - x1) / (x2 - x1);
-      }
-      if (transformHandleType.includes("w")) {
-        scaleX = (x2 - rotatedX) / (x2 - x1);
-      }
-      if (transformHandleType.includes("n")) {
-        scaleY = (y2 - rotatedY) / (y2 - y1);
-      }
-      if (transformHandleType.includes("s")) {
-        scaleY = (rotatedY - y1) / (y2 - y1);
+      if (transformHandleType !== "e" && transformHandleType !== "w") {
+        if (transformHandleType.includes("e")) {
+          scaleX = (rotatedX - x1) / (x2 - x1);
+        }
+        if (transformHandleType.includes("w")) {
+          scaleX = (x2 - rotatedX) / (x2 - x1);
+        }
+        if (transformHandleType.includes("n")) {
+          scaleY = (y2 - rotatedY) / (y2 - y1);
+        }
+        if (transformHandleType.includes("s")) {
+          scaleY = (rotatedY - y1) / (y2 - y1);
+        }
       }
       const scale = Math.max(scaleX, scaleY);
       if (scale > 0) {
@@ -14270,6 +14275,83 @@ var init_resizeElements = __esm({
           y: nextY
         });
       }
+      if (transformHandleType === "e" || transformHandleType === "w") {
+        const stateAtResizeStart = originalElements.get(element.id);
+        const [x12, y12, x22, y22] = getResizedElementAbsoluteCoords(
+          stateAtResizeStart,
+          stateAtResizeStart.width,
+          stateAtResizeStart.height,
+          true
+        );
+        const startTopLeft = [x12, y12];
+        const startBottomRight = [x22, y22];
+        const startCenter = centerPoint(startTopLeft, startBottomRight);
+        const rotatedPointer = rotatePoint(
+          [pointerX, pointerY],
+          startCenter,
+          -stateAtResizeStart.angle
+        );
+        const [esx1, , esx2] = getResizedElementAbsoluteCoords(
+          element,
+          element.width,
+          element.height,
+          true
+        );
+        const boundsCurrentWidth = esx2 - esx1;
+        const atStartBoundsWidth = startBottomRight[0] - startTopLeft[0];
+        const minWidth = getMinCharWidth(getFontString(element)) + BOUND_TEXT_PADDING * 2;
+        let scaleX2 = atStartBoundsWidth / boundsCurrentWidth;
+        if (transformHandleType.includes("e")) {
+          scaleX2 = (rotatedPointer[0] - startTopLeft[0]) / boundsCurrentWidth;
+        }
+        if (transformHandleType.includes("w")) {
+          scaleX2 = (startBottomRight[0] - rotatedPointer[0]) / boundsCurrentWidth;
+        }
+        const newWidth = element.width * scaleX2 < minWidth ? minWidth : element.width * scaleX2;
+        const text = wrapText(
+          element.originalText,
+          getFontString(element),
+          Math.abs(newWidth)
+        );
+        const metrics = measureText(
+          text,
+          getFontString(element),
+          element.lineHeight
+        );
+        const eleNewHeight = metrics.height;
+        const [newBoundsX1, newBoundsY1, newBoundsX2, newBoundsY2] = getResizedElementAbsoluteCoords(
+          stateAtResizeStart,
+          newWidth,
+          eleNewHeight,
+          true
+        );
+        const newBoundsWidth = newBoundsX2 - newBoundsX1;
+        const newBoundsHeight = newBoundsY2 - newBoundsY1;
+        let newTopLeft = [...startTopLeft];
+        if (["n", "w", "nw"].includes(transformHandleType)) {
+          newTopLeft = [
+            startBottomRight[0] - Math.abs(newBoundsWidth),
+            startTopLeft[1]
+          ];
+        }
+        const angle = stateAtResizeStart.angle;
+        const rotatedTopLeft = rotatePoint(newTopLeft, startCenter, angle);
+        const newCenter = [
+          newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
+          newTopLeft[1] + Math.abs(newBoundsHeight) / 2
+        ];
+        const rotatedNewCenter = rotatePoint(newCenter, startCenter, angle);
+        newTopLeft = rotatePoint(rotatedTopLeft, rotatedNewCenter, -angle);
+        const resizedElement = {
+          width: Math.abs(newWidth),
+          height: Math.abs(metrics.height),
+          x: newTopLeft[0],
+          y: newTopLeft[1],
+          text,
+          autoResize: false
+        };
+        mutateElement(element, resizedElement);
+      }
     };
     resizeSingleElement = (originalElements, shouldMaintainAspectRatio2, element, elementsMap, transformHandleDirection, shouldResizeFromCenter2, pointerX, pointerY) => {
       const stateAtResizeStart = originalElements.get(element.id);
@@ -14661,7 +14743,7 @@ var init_resizeElements = __esm({
           handleBindTextResize(element, elementsMap, transformHandleType, true);
         }
       }
-      Scene_default.getScene(elementsAndUpdates[0].element)?.informMutation();
+      Scene_default.getScene(elementsAndUpdates[0].element)?.triggerUpdate();
     };
     rotateMultipleElements = (originalElements, elements, elementsMap, pointerX, pointerY, shouldRotateWithDiscreteAngle2, centerX, centerY) => {
       let centerAngle = 5 * Math.PI / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
@@ -14706,7 +14788,7 @@ var init_resizeElements = __esm({
           );
         }
       });
-      Scene_default.getScene(elements[0])?.informMutation();
+      Scene_default.getScene(elements[0])?.triggerUpdate();
     };
     getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x, y) => {
       const [x1, y1, x2, y2] = selectedElements.length === 1 ? getElementAbsoluteCoords(selectedElements[0], elementsMap) : getCommonBounds(selectedElements);
@@ -15193,7 +15275,7 @@ init_define_import_meta_env();
 
 // i18n.ts
 init_define_import_meta_env();
-import fallbackLangData from "./en-UQDDYCH7.json";
+import fallbackLangData from "./en-OIPCBIOA.json";
 import percentages from "./percentages-UCQDHIQF.json";
 
 // jotai.ts
@@ -15217,7 +15299,7 @@ var globImport_locales_json = __glob({
   "./locales/da-DK.json": () => import("./da-DK-WBEQB3CJ.json"),
   "./locales/de-DE.json": () => import("./de-DE-VEIMCP7R.json"),
   "./locales/el-GR.json": () => import("./el-GR-TKRKG5GQ.json"),
-  "./locales/en.json": () => import("./en-UQDDYCH7.json"),
+  "./locales/en.json": () => import("./en-OIPCBIOA.json"),
   "./locales/es-ES.json": () => import("./es-ES-TOLWEZNW.json"),
   "./locales/eu-ES.json": () => import("./eu-ES-7CDRJQWJ.json"),
   "./locales/fa-IR.json": () => import("./fa-IR-527E2XGU.json"),
@@ -16302,12 +16384,16 @@ var arrownNarrowUpJSX = /* @__PURE__ */ jsxs3("g", { strokeWidth: 1.5, children:
 var BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
 var SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
   ...tablerIconProps,
-  transform: "rotate(180)"
+  style: {
+    transform: "rotate(180deg)"
+  }
 });
 var BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
 var SendToBackIcon = createIcon(arrowBarToTopJSX, {
   ...tablerIconProps,
-  transform: "rotate(180)"
+  style: {
+    transform: "rotate(180deg)"
+  }
 });
 var AlignTopIcon = createIcon(
   /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -18625,6 +18711,7 @@ var ButtonIconSelect = (props) => /* @__PURE__ */ jsx9("div", { className: "butt
   (option) => props.type === "button" ? /* @__PURE__ */ jsx9(
     "button",
     {
+      type: "button",
       onClick: (event) => props.onClick(option.value, event),
       className: clsx4({
         active: option.active ?? props.value === option.value
@@ -20133,6 +20220,7 @@ function Picker2({
       children: /* @__PURE__ */ jsx20("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => /* @__PURE__ */ jsxs12(
         "button",
         {
+          type: "button",
           className: clsx11("picker-option", {
             active: value === option.value
           }),
@@ -20179,6 +20267,7 @@ function IconPicker({
       "button",
       {
         name: group,
+        type: "button",
         className: isActive ? "active" : "",
         "aria-label": label,
         onClick: () => setActive(!isActive),
@@ -20262,7 +20351,7 @@ var getFormValue = function(elements, appState, getAttribute, isRelevantElement,
   return ret;
 };
 var offsetElementAfterFontResize = (prevElement, nextElement) => {
-  if (isBoundToContainer(nextElement)) {
+  if (isBoundToContainer(nextElement) || !nextElement.autoResize) {
     return nextElement;
   }
   return mutateElement(
@@ -22184,7 +22273,16 @@ var CheckboxItem = ({ children, checked, onChange, className }) => {
         ).focus();
       },
       children: [
-        /* @__PURE__ */ jsx27("button", { className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }),
+        /* @__PURE__ */ jsx27(
+          "button",
+          {
+            type: "button",
+            className: "Checkbox-box",
+            role: "checkbox",
+            "aria-checked": checked,
+            children: checkIcon
+          }
+        ),
         /* @__PURE__ */ jsx27("div", { className: "Checkbox-label", children })
       ]
     }
@@ -24272,7 +24370,8 @@ var actionBindText = register({
     mutateElement(textElement, {
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
-      textAlign: TEXT_ALIGN.CENTER
+      textAlign: TEXT_ALIGN.CENTER,
+      autoResize: true
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
@@ -24394,7 +24493,8 @@ var actionWrapTextInContainer = register({
             containerId: container.id,
             verticalAlign: VERTICAL_ALIGN.MIDDLE,
             boundElements: null,
-            textAlign: TEXT_ALIGN.CENTER
+            textAlign: TEXT_ALIGN.CENTER,
+            autoResize: true
           },
           false
         );
@@ -27673,6 +27773,7 @@ var Dialog = (props) => {
             onClick: onClose,
             title: t("buttons.close"),
             "aria-label": t("buttons.close"),
+            type: "button",
             children: CloseIcon
           }
         ),
@@ -28524,6 +28625,7 @@ var ExitZenModeAction = ({
 }) => /* @__PURE__ */ jsx62(
   "button",
   {
+    type: "button",
     className: clsx28("disable-zen-mode", {
       "disable-zen-mode--visible": showExitZenModeBtn
     }),
@@ -29001,7 +29103,7 @@ function CommandPaletteInner({
           ...command,
           icon: command.icon || boltIcon,
           order: command.order ?? getCategoryOrder(command.category),
-          haystack: `${deburr(command.label)} ${command.keywords?.join(" ") || ""}`
+          haystack: `${deburr(command.label.toLocaleLowerCase())} ${command.keywords?.join(" ") || ""}`
         };
       });
       setAllCommands(allCommands2);
@@ -29172,7 +29274,9 @@ function CommandPaletteInner({
       setCurrentCommand(showLastUsed ? lastUsed : matchingCommands[0] || null);
       return;
     }
-    const _query = deburr(commandSearch.replace(/[<>-_| ]/g, ""));
+    const _query = deburr(
+      commandSearch.toLocaleLowerCase().replace(/[<>_| -]/g, "")
+    );
     matchingCommands = fuzzy.filter(_query, matchingCommands, {
       extract: (command) => command.haystack
     }).sort((a, b) => b.score - a.score).map((item) => item.original);
@@ -29556,7 +29660,10 @@ var createUndoAction = (history, store) => ({
   PanelComponent: ({ updateData, data }) => {
     const { isUndoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
-      new HistoryChangedEvent()
+      new HistoryChangedEvent(
+        history.isUndoStackEmpty,
+        history.isRedoStackEmpty
+      )
     );
     return /* @__PURE__ */ jsx66(
       ToolButton,
@@ -29566,7 +29673,8 @@ var createUndoAction = (history, store) => ({
         "aria-label": t("buttons.undo"),
         onClick: updateData,
         size: data?.size || "medium",
-        disabled: isUndoStackEmpty
+        disabled: isUndoStackEmpty,
+        "data-testid": "button-undo"
       }
     );
   }
@@ -29590,7 +29698,10 @@ var createRedoAction = (history, store) => ({
   PanelComponent: ({ updateData, data }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
-      new HistoryChangedEvent()
+      new HistoryChangedEvent(
+        history.isUndoStackEmpty,
+        history.isRedoStackEmpty
+      )
     );
     return /* @__PURE__ */ jsx66(
       ToolButton,
@@ -29600,7 +29711,8 @@ var createRedoAction = (history, store) => ({
         "aria-label": t("buttons.redo"),
         onClick: updateData,
         size: data?.size || "medium",
-        disabled: isRedoStackEmpty
+        disabled: isRedoStackEmpty,
+        "data-testid": "button-redo"
       }
     );
   }
@@ -29843,6 +29955,7 @@ var ContextMenu = React24.memo(
                   children: /* @__PURE__ */ jsxs37(
                     "button",
                     {
+                      type: "button",
                       className: clsx30("context-menu-item", {
                         dangerous: actionName === "deleteSelectedElements",
                         checkmark: item.checked?.(appState)
@@ -30850,6 +30963,7 @@ var MobileMenu = ({
             appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && /* @__PURE__ */ jsx81(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -30915,6 +31029,7 @@ var ChartPreviewBtn = (props) => {
   return /* @__PURE__ */ jsx82(
     "button",
     {
+      type: "button",
       className: "ChartPreview",
       onClick: () => {
         if (chartElements) {
@@ -34303,7 +34418,7 @@ var LayerUI = ({
               );
               ShapeCache.delete(element);
             }
-            Scene_default.getScene(selectedElements[0])?.informMutation();
+            Scene_default.getScene(selectedElements[0])?.triggerUpdate();
           } else if (colorPickerType === "elementBackground") {
             setAppState({
               currentItemBackgroundColor: color
@@ -34413,6 +34528,7 @@ var LayerUI = ({
             appState.scrolledOutside && /* @__PURE__ */ jsx117(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -34558,19 +34674,12 @@ init_transformHandles();
 init_define_import_meta_env();
 init_element();
 init_mutateElement();
-init_textElement();
-init_typeChecks();
 init_utils();
 init_ShapeCache();
 var Fonts = class _Fonts {
   scene;
-  onSceneUpdated;
-  constructor({
-    scene,
-    onSceneUpdated
-  }) {
+  constructor({ scene }) {
     this.scene = scene;
-    this.onSceneUpdated = onSceneUpdated;
   }
   // it's ok to track fonts across multiple instances only once, so let's use
   // a static member to reduce memory footprint
@@ -34601,21 +34710,15 @@ var Fonts = class _Fonts {
     }
     let didUpdate = false;
     this.scene.mapElements((element) => {
-      if (isTextElement(element) && !isBoundToContainer(element)) {
-        ShapeCache.delete(element);
+      if (isTextElement(element)) {
         didUpdate = true;
-        return newElementWith(element, {
-          ...refreshTextDimensions(
-            element,
-            getContainerElement(element, this.scene.getNonDeletedElementsMap()),
-            this.scene.getNonDeletedElementsMap()
-          )
-        });
+        ShapeCache.delete(element);
+        return newElementWith(element, {}, true);
       }
       return element;
     });
     if (didUpdate) {
-      this.onSceneUpdated();
+      this.scene.triggerUpdate();
     }
   };
   loadFontsForElements = async (elements) => {
@@ -37175,8 +37278,8 @@ var getRelevantAppStateProps = (appState) => ({
   zenModeEnabled: appState.zenModeEnabled
 });
 var areEqual2 = (prevProps, nextProps) => {
-  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
-  // even if versionNonce didn't change (e.g. we filter elements out based
+  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
+  // even if sceneNonce didn't change (e.g. we filter elements out based
   // on appState)
   prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements) {
     return false;
@@ -37264,8 +37367,8 @@ var getRelevantAppStateProps2 = (appState) => ({
   editingGroupId: appState.editingGroupId
 });
 var areEqual3 = (prevProps, nextProps) => {
-  if (prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
-  // even if versionNonce didn't change (e.g. we filter elements out based
+  if (prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
+  // even if sceneNonce didn't change (e.g. we filter elements out based
   // on appState)
   prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements) {
     return false;
@@ -37353,9 +37456,8 @@ var Renderer = class {
         width,
         editingElement,
         pendingImageElementId,
-        // unused but serves we cache on it to invalidate elements if they
-        // get mutated
-        versionNonce: _versionNonce
+        // cache-invalidation nonce
+        sceneNonce: _sceneNonce
       }) => {
         const elements = this.scene.getNonDeletedElements();
         const elementsMap = getRenderableElements({
@@ -37597,7 +37699,15 @@ var FollowMode = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx125("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })
+    /* @__PURE__ */ jsx125(
+      "button",
+      {
+        type: "button",
+        onClick: onDisconnect,
+        className: "follow-mode__disconnect-btn",
+        children: CloseIcon
+      }
+    )
   ] }) });
 };
 var FollowMode_default = FollowMode;
@@ -37997,6 +38107,8 @@ var textWysiwyg = ({
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
         textElementWidth = Math.min(textElementWidth, maxWidth);
+      } else {
+        textElementWidth += 0.5;
       }
       const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
       Object.assign(editable.style, {
@@ -38037,7 +38149,7 @@ var textWysiwyg = ({
   editable.classList.add("excalidraw-wysiwyg");
   let whiteSpace = "pre";
   let wordBreak = "normal";
-  if (isBoundToContainer(element)) {
+  if (isBoundToContainer(element) || !element.autoResize) {
     whiteSpace = "pre-wrap";
     wordBreak = "break-word";
   }
@@ -38212,13 +38324,11 @@ var textWysiwyg = ({
     if (!updateElement) {
       return;
     }
-    let text = editable.value;
     const container = getContainerElement(
       updateElement,
       app.scene.getNonDeletedElementsMap()
     );
     if (container) {
-      text = updateElement.text;
       if (editable.value.trim()) {
         const boundTextElementId = getBoundTextElementId(container);
         if (!boundTextElementId || boundTextElementId !== element.id) {
@@ -38247,9 +38357,8 @@ var textWysiwyg = ({
       );
     }
     onSubmit({
-      text,
       viaKeyboard: submittedViaKeyboard,
-      originalText: editable.value
+      nextOriginalText: editable.value
     });
   };
   const cleanup = () => {
@@ -38308,7 +38417,7 @@ var textWysiwyg = ({
       window.addEventListener("blur", handleSubmit);
     }
   };
-  const unbindUpdate = Scene_default.getScene(element).addCallback(() => {
+  const unbindUpdate = Scene_default.getScene(element).onUpdate(() => {
     updateWysiwygStyle();
     const isColorPickerActive = !!document.activeElement?.closest(
       ".color-picker-content"
@@ -38341,6 +38450,51 @@ var textWysiwyg = ({
 // components/App.tsx
 init_fractionalIndex();
 init_helpers();
+
+// actions/actionTextAutoResize.ts
+init_define_import_meta_env();
+init_element();
+init_mutateElement();
+init_textElement();
+init_scene();
+init_store();
+init_utils();
+init_register();
+var actionTextAutoResize = register({
+  name: "autoResize",
+  label: "labels.autoResize",
+  icon: null,
+  trackEvent: { category: "element" },
+  predicate: (elements, appState, _, app) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return selectedElements.length === 1 && isTextElement(selectedElements[0]) && !selectedElements[0].autoResize;
+  },
+  perform: (elements, appState, _, app) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return {
+      appState,
+      elements: elements.map((element) => {
+        if (element.id === selectedElements[0].id && isTextElement(element)) {
+          const metrics = measureText(
+            element.originalText,
+            getFontString(element),
+            element.lineHeight
+          );
+          return newElementWith(element, {
+            autoResize: true,
+            width: metrics.width,
+            height: metrics.height,
+            text: element.originalText
+          });
+        }
+        return element;
+      }),
+      storeAction: StoreAction.CAPTURE
+    };
+  }
+});
+
+// components/App.tsx
 import { Fragment as Fragment21, jsx as jsx126, jsxs as jsxs71 } from "react/jsx-runtime";
 var AppContext = React38.createContext(null);
 var AppPropsContext = React38.createContext(null);
@@ -38545,10 +38699,7 @@ var App = class _App extends React38.Component {
       container: this.excalidrawContainerRef.current,
       id: this.id
     };
-    this.fonts = new Fonts({
-      scene: this.scene,
-      onSceneUpdated: this.onSceneUpdated
-    });
+    this.fonts = new Fonts({ scene: this.scene });
     this.history = new History();
     this.actionManager.registerAll(actions);
     this.actionManager.registerAction(
@@ -38707,7 +38858,7 @@ var App = class _App extends React38.Component {
       return false;
     });
     if (updated) {
-      this.scene.informMutation();
+      this.scene.triggerUpdate();
     }
     this.iFrameRefs.forEach((ref, id) => {
       if (!iframeLikes.has(id)) {
@@ -39114,9 +39265,9 @@ var App = class _App extends React38.Component {
   render() {
     const selectedElements = this.scene.getSelectedElements(this.state);
     const { renderTopRightUI, renderCustomStats } = this.props;
-    const versionNonce = this.scene.getVersionNonce();
+    const sceneNonce = this.scene.getSceneNonce();
     const { elementsMap, visibleElements } = this.renderer.getRenderableElements({
-      versionNonce,
+      sceneNonce,
       zoom: this.state.zoom,
       offsetLeft: this.state.offsetLeft,
       offsetTop: this.state.offsetTop,
@@ -39313,7 +39464,7 @@ var App = class _App extends React38.Component {
                             elementsMap,
                             allElementsMap,
                             visibleElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -39335,7 +39486,7 @@ var App = class _App extends React38.Component {
                             elementsMap,
                             visibleElements,
                             selectedElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -39429,7 +39580,7 @@ var App = class _App extends React38.Component {
       );
     }
     this.magicGenerations.set(frameElement.id, data);
-    this.onSceneUpdated();
+    this.triggerRender();
   };
   getTextFromElements(elements) {
     const text = elements.reduce((acc, element) => {
@@ -39913,7 +40064,7 @@ var App = class _App extends React38.Component {
     this.store.onStoreIncrementEmitter.on((increment) => {
       this.history.record(increment.elementsChange, increment.appStateChange);
     });
-    this.scene.addCallback(this.onSceneUpdated);
+    this.scene.onUpdate(this.triggerRender);
     this.addEventListeners();
     if (this.props.autoFocus && this.excalidrawContainerRef.current) {
       this.focusContainer();
@@ -39949,6 +40100,7 @@ var App = class _App extends React38.Component {
   componentWillUnmount() {
     this.renderer.destroy();
     this.scene = new Scene_default();
+    this.fonts = new Fonts({ scene: this.scene });
     this.renderer = new Renderer(this.scene);
     this.files = {};
     this.imageCache.clear();
@@ -40042,6 +40194,7 @@ var App = class _App extends React38.Component {
       ),
       addEventListener(window, "focus" /* FOCUS */, () => {
         this.maybeCleanupAfterMissingPointerUp(null);
+        this.triggerRender(true);
       })
     );
     if (this.state.viewModeEnabled) {
@@ -40826,7 +40979,7 @@ var App = class _App extends React38.Component {
           ShapeCache.delete(element);
         }
       });
-      this.scene.informMutation();
+      this.scene.triggerUpdate();
       this.addNewImagesToImageCache();
     }
   );
@@ -40866,8 +41019,12 @@ var App = class _App extends React38.Component {
       }
     }
   );
-  onSceneUpdated = () => {
-    this.setState({});
+  triggerRender = (force) => {
+    if (force === true) {
+      this.scene.triggerUpdate();
+    } else {
+      this.setState({});
+    }
   };
   /**
    * @returns whether the menu was toggled on or off
@@ -41270,21 +41427,22 @@ var App = class _App extends React38.Component {
     isExistingElement = false
   }) {
     const elementsMap = this.scene.getElementsMapIncludingDeleted();
-    const updateElement = (text, originalText, isDeleted) => {
+    const updateElement = (nextOriginalText, isDeleted) => {
       this.scene.replaceAllElements([
         // Not sure why we include deleted elements as well hence using deleted elements map
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement(_element)) {
-            return updateTextElement(
-              _element,
-              getContainerElement(_element, elementsMap),
-              elementsMap,
-              {
-                text,
-                isDeleted,
-                originalText
-              }
-            );
+            return newElementWith(_element, {
+              originalText: nextOriginalText,
+              isDeleted: isDeleted ?? _element.isDeleted,
+              // returns (wrapped) text and new dimensions
+              ...refreshTextDimensions(
+                _element,
+                getContainerElement(_element, elementsMap),
+                elementsMap,
+                nextOriginalText
+              )
+            });
           }
           return _element;
         })
@@ -41306,15 +41464,15 @@ var App = class _App extends React38.Component {
           viewportY - this.state.offsetTop
         ];
       },
-      onChange: withBatchedUpdates((text) => {
-        updateElement(text, text, false);
+      onChange: withBatchedUpdates((nextOriginalText) => {
+        updateElement(nextOriginalText, false);
         if (isNonDeletedElement(element)) {
           updateBoundElements(element, elementsMap);
         }
       }),
-      onSubmit: withBatchedUpdates(({ text, viaKeyboard, originalText }) => {
-        const isDeleted = !text.trim();
-        updateElement(text, originalText, isDeleted);
+      onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
+        const isDeleted = !nextOriginalText.trim();
+        updateElement(nextOriginalText, isDeleted);
         if (!isDeleted && viaKeyboard) {
           const elementIdToSelect = element.containerId ? element.containerId : element.id;
           this.setState((prevState) => ({
@@ -41349,7 +41507,7 @@ var App = class _App extends React38.Component {
       app: this
     });
     this.deselectElements();
-    updateElement(element.text, element.originalText, false);
+    updateElement(element.originalText, false);
   }
   deselectElements() {
     this.setState({
@@ -41848,8 +42006,11 @@ var App = class _App extends React38.Component {
         );
         this.translateCanvas({
           zoom: zoomState.zoom,
-          scrollX: zoomState.scrollX + deltaX / nextZoom,
-          scrollY: zoomState.scrollY + deltaY / nextZoom,
+          // 2x multiplier is just a magic number that makes this work correctly
+          // on touchscreen devices (note: if we get report that panning is slower/faster
+          // than actual movement, consider swapping with devicePixelRatio)
+          scrollX: zoomState.scrollX + 2 * (deltaX / nextZoom),
+          scrollY: zoomState.scrollY + 2 * (deltaY / nextZoom),
           shouldCacheIgnoreZoom: true
         });
       });
@@ -42198,7 +42359,7 @@ var App = class _App extends React38.Component {
         }
       }
       this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-      this.onSceneUpdated();
+      this.triggerRender();
     }
   };
   // set touch moving for mobile context menu
@@ -44002,7 +44163,7 @@ var App = class _App extends React38.Component {
                     [linearElement],
                     this.scene.getNonDeletedElementsMap()
                   );
-                  this.scene.informMutation();
+                  this.scene.triggerUpdate();
                 }
               }
             }
@@ -44355,7 +44516,7 @@ var App = class _App extends React38.Component {
   }
   restoreReadyToEraseElements = () => {
     this.elementsPendingErasure = /* @__PURE__ */ new Set();
-    this.onSceneUpdated();
+    this.triggerRender();
   };
   eraseElements = () => {
     let didChange = false;
@@ -44670,7 +44831,7 @@ var App = class _App extends React38.Component {
         files
       );
       if (updatedFiles.size) {
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
       }
     }
   };
@@ -45143,6 +45304,7 @@ var App = class _App extends React38.Component {
       return [actionCopy, ...options];
     }
     return [
+      CONTEXT_MENU_SEPARATOR,
       actionCut,
       actionCopy,
       actionPaste,
@@ -45155,6 +45317,7 @@ var App = class _App extends React38.Component {
       actionPasteStyles,
       CONTEXT_MENU_SEPARATOR,
       actionGroup,
+      actionTextAutoResize,
       actionUnbindText,
       actionBindText,
       actionWrapTextInContainer,