@excalidraw/excalidraw 0.17.1-1ed53b1 → 0.17.1-22b3927

package/dist/dev/index.js

@@ -147,7 +147,7 @@ var init_colors = __esm({
 });
 
 // constants.ts
-var isDarwin, isWindows, isAndroid, isFirefox, isChrome, isSafari, isIOS, isBrave, supportsResizeObserver, APP_NAME, DRAGGING_THRESHOLD, LINE_CONFIRM_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, TEXT_TO_CENTER_SNAP_THRESHOLD, SHIFT_LOCKING_ANGLE, DEFAULT_LASER_COLOR, CURSOR_TYPE, POINTER_BUTTON, POINTER_EVENTS, YOUTUBE_STATES, ENV, CLASSES, FONT_FAMILY, THEME, FRAME_STYLE, WINDOWS_EMOJI_FALLBACK_FONT, MIN_FONT_SIZE, DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, DEFAULT_TRANSFORM_HANDLE_SPACING, SIDE_RESIZING_THRESHOLD, EPSILON, DEFAULT_COLLISION_THRESHOLD, COLOR_WHITE, COLOR_CHARCOAL_BLACK, COLOR_VOICE_CALL, GRID_SIZE, IMAGE_MIME_TYPES, ALLOWED_PASTE_MIME_TYPES, MIME_TYPES, EXPORT_IMAGE_TYPES, EXPORT_DATA_TYPES, EXPORT_SOURCE, IMAGE_RENDER_TIMEOUT, TAP_TWICE_TIMEOUT, TOUCH_CTX_MENU_TIMEOUT, SCROLL_TIMEOUT, ZOOM_STEP, MIN_ZOOM, MAX_ZOOM, HYPERLINK_TOOLTIP_DELAY, THEME_FILTER, URL_QUERY_KEYS, URL_HASH_KEYS, DEFAULT_UI_OPTIONS, MQ_MAX_WIDTH_PORTRAIT, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_HEIGHT_LANDSCAPE, MQ_RIGHT_SIDEBAR_MIN_WIDTH, LIBRARY_SIDEBAR_WIDTH, MAX_DECIMALS_FOR_SVG_EXPORT, EXPORT_SCALES, DEFAULT_EXPORT_PADDING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, MAX_ALLOWED_FILE_BYTES, SVG_NS, VERSIONS, BOUND_TEXT_PADDING, ARROW_LABEL_WIDTH_FRACTION, ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, VERTICAL_ALIGN, TEXT_ALIGN, ELEMENT_READY_TO_ERASE_OPACITY, DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_ADAPTIVE_RADIUS, ROUNDNESS, ROUGHNESS, STROKE_WIDTH, DEFAULT_ELEMENT_PROPS, LIBRARY_SIDEBAR_TAB, DEFAULT_SIDEBAR, LIBRARY_DISABLED_TYPES, TOOL_TYPE, EDITOR_LS_KEYS, DEFAULT_FILENAME;
+var isDarwin, isWindows, isAndroid, isFirefox, isChrome, isSafari, isIOS, isBrave, supportsResizeObserver, APP_NAME, TEXT_AUTOWRAP_THRESHOLD, DRAGGING_THRESHOLD, LINE_CONFIRM_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, TEXT_TO_CENTER_SNAP_THRESHOLD, SHIFT_LOCKING_ANGLE, DEFAULT_LASER_COLOR, CURSOR_TYPE, POINTER_BUTTON, POINTER_EVENTS, YOUTUBE_STATES, ENV, CLASSES, FONT_FAMILY, THEME, FRAME_STYLE, WINDOWS_EMOJI_FALLBACK_FONT, MIN_FONT_SIZE, DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, DEFAULT_TRANSFORM_HANDLE_SPACING, SIDE_RESIZING_THRESHOLD, EPSILON, DEFAULT_COLLISION_THRESHOLD, COLOR_WHITE, COLOR_CHARCOAL_BLACK, COLOR_VOICE_CALL, GRID_SIZE, IMAGE_MIME_TYPES, ALLOWED_PASTE_MIME_TYPES, MIME_TYPES, EXPORT_IMAGE_TYPES, EXPORT_DATA_TYPES, EXPORT_SOURCE, IMAGE_RENDER_TIMEOUT, TAP_TWICE_TIMEOUT, TOUCH_CTX_MENU_TIMEOUT, SCROLL_TIMEOUT, ZOOM_STEP, MIN_ZOOM, MAX_ZOOM, HYPERLINK_TOOLTIP_DELAY, THEME_FILTER, URL_QUERY_KEYS, URL_HASH_KEYS, DEFAULT_UI_OPTIONS, MQ_MAX_WIDTH_PORTRAIT, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_HEIGHT_LANDSCAPE, MQ_RIGHT_SIDEBAR_MIN_WIDTH, LIBRARY_SIDEBAR_WIDTH, MAX_DECIMALS_FOR_SVG_EXPORT, EXPORT_SCALES, DEFAULT_EXPORT_PADDING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, MAX_ALLOWED_FILE_BYTES, SVG_NS, VERSIONS, BOUND_TEXT_PADDING, ARROW_LABEL_WIDTH_FRACTION, ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, VERTICAL_ALIGN, TEXT_ALIGN, ELEMENT_READY_TO_ERASE_OPACITY, DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_ADAPTIVE_RADIUS, ROUNDNESS, ROUGHNESS, STROKE_WIDTH, DEFAULT_ELEMENT_PROPS, LIBRARY_SIDEBAR_TAB, DEFAULT_SIDEBAR, LIBRARY_DISABLED_TYPES, TOOL_TYPE, EDITOR_LS_KEYS, DEFAULT_FILENAME;
 var init_constants = __esm({
   "constants.ts"() {
     "use strict";
@@ -165,6 +165,7 @@ var init_constants = __esm({
     isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
     supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
     APP_NAME = "Excalidraw";
+    TEXT_AUTOWRAP_THRESHOLD = 36;
     DRAGGING_THRESHOLD = 10;
     LINE_CONFIRM_THRESHOLD = 8;
     ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -1209,18 +1210,10 @@ var init_fractionalIndex = __esm({
       const indicesGroups = [];
       let i = 0;
       while (i < elements.length) {
-        if (movedElements.has(elements[i].id) && !isValidFractionalIndex(
-          elements[i]?.index,
-          elements[i - 1]?.index,
-          elements[i + 1]?.index
-        )) {
+        if (movedElements.has(elements[i].id)) {
           const indicesGroup = [i - 1, i];
           while (++i < elements.length) {
-            if (!(movedElements.has(elements[i].id) && !isValidFractionalIndex(
-              elements[i]?.index,
-              elements[i - 1]?.index,
-              elements[i + 1]?.index
-            ))) {
+            if (!movedElements.has(elements[i].id)) {
               break;
             }
             indicesGroup.push(i);
@@ -1412,7 +1405,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 +1459,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 +1515,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 +4995,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, getMaxCharWidth, getBoundTextElementId, getBoundTextElement, getContainerElement, getContainerCenter, getContainerCoords, getTextElementAngle, shouldAllowVerticalAlign, suppportsHorizontalAlign, VALID_CONTAINER_TYPES, isValidTextContainer, computeContainerDimensionForBoundText, getBoundTextMaxWidth, getBoundTextMaxHeight, isMeasureTextSupported, DEFAULT_LINE_HEIGHT, FONT_METRICS, getDefaultLineHeight, getMinTextElementWidth;
 var init_textElement = __esm({
   "element/textElement.ts"() {
     "use strict";
@@ -5025,8 +5024,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 +5037,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(
@@ -5583,6 +5584,9 @@ var init_textElement = __esm({
       }
       return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
     };
+    getMinTextElementWidth = (font, lineHeight) => {
+      return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
+    };
   }
 });
 
@@ -6757,7 +6761,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 +6881,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: opts.originalText ?? text,
+        autoResize: opts.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 +6965,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),
@@ -8078,12 +8076,22 @@ var init_change = __esm({
         if (!flags.containsZindexDifference) {
           return elements;
         }
-        const previous = Array.from(elements.values());
-        const reordered = orderByFractionalIndex([...previous]);
-        if (!flags.containsVisibleDifference && Delta.isRightDifferent(previous, reordered, true)) {
+        const unordered = Array.from(elements.values());
+        const ordered = orderByFractionalIndex([...unordered]);
+        const moved = Delta.getRightDifferences(unordered, ordered, true).reduce(
+          (acc, arrayIndex) => {
+            const candidate = unordered[Number(arrayIndex)];
+            if (candidate && changed.has(candidate.id)) {
+              acc.set(candidate.id, candidate);
+            }
+            return acc;
+          },
+          /* @__PURE__ */ new Map()
+        );
+        if (!flags.containsVisibleDifference && moved.size) {
           flags.containsVisibleDifference = true;
         }
-        return arrayToMap(syncMovedIndices(reordered, changed));
+        return arrayToMap(syncMovedIndices(ordered, moved));
       }
       /**
        * It is necessary to post process the partials in case of reference values,
@@ -8184,8 +8192,35 @@ var init_store = __esm({
     };
     isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
     StoreAction = {
+      /**
+       * Immediately undoable.
+       *
+       * Use for updates which should be captured.
+       * Should be used for most of the local updates.
+       *
+       * These updates will _immediately_ make it to the local undo / redo stacks.
+       */
       CAPTURE: "capture",
+      /**
+       * Never undoable.
+       *
+       * Use for updates which should never be recorded, such as remote updates
+       * or scene initialization.
+       *
+       * These updates will _never_ make it to the local undo / redo stacks.
+       */
       UPDATE: "update",
+      /**
+       * Eventually undoable.
+       *
+       * Use for updates which should not be captured immediately - likely
+       * exceptions which are part of some async multi-step process. Otherwise, all
+       * such updates would end up being captured with the next
+       * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+       * or internally by the editor.
+       *
+       * These updates will _eventually_ make it to the local undo / redo stacks.
+       */
       NONE: "none"
     };
     StoreIncrementEvent = class {
@@ -9345,6 +9380,7 @@ var init_restore = __esm({
     init_textElement();
     init_url();
     init_fractionalIndex();
+    init_points();
     AllowedExcalidrawActiveTools = {
       selection: true,
       text: true,
@@ -9446,6 +9482,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) {
@@ -9495,7 +9532,8 @@ var init_restore = __esm({
             endArrowhead,
             points,
             x,
-            y
+            y,
+            ...getSizeFromPoints(points)
           });
         }
         case "ellipse":
@@ -11303,7 +11341,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}/`);
         }
@@ -13196,14 +13234,14 @@ var init_renderElement = __esm({
       }
       context.restore();
     };
-    renderSelectionElement = (element, context, appState) => {
+    renderSelectionElement = (element, context, appState, selectionColor) => {
       context.save();
       context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
       context.fillStyle = "rgba(0, 0, 200, 0.04)";
       const offset2 = 0.5 / appState.zoom.value;
       context.fillRect(offset2, offset2, element.width, element.height);
       context.lineWidth = 1 / appState.zoom.value;
-      context.strokeStyle = " rgb(105, 101, 219)";
+      context.strokeStyle = selectionColor;
       context.strokeRect(offset2, offset2, element.width, element.height);
       context.restore();
     };
@@ -13524,11 +13562,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 +13578,7 @@ var init_mutateElement = __esm({
           didChange = true;
         }
       }
-      if (!didChange) {
+      if (!didChange && !force) {
         return element;
       }
       return {
@@ -13657,14 +13695,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 +13716,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 +13876,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 +13949,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 +14117,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 +14221,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 +14235,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 +14302,89 @@ 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 = getMinTextElementWidth(
+          getFontString({
+            fontSize: element.fontSize,
+            fontFamily: element.fontFamily
+          }),
+          element.lineHeight
+        );
+        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 +14776,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 +14821,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);
@@ -14756,6 +14871,8 @@ var init_dragElements = __esm({
     init_textElement();
     init_math();
     init_typeChecks();
+    init_utils();
+    init_constants();
     dragSelectedElements = (pointerDownState, selectedElements, offset2, appState, scene, snapOffset, gridSize) => {
       const elementsToUpdate = new Set(
         selectedElements
@@ -14833,7 +14950,7 @@ var init_dragElements = __esm({
       const [x1, y1] = getCommonBounds(selectedElements);
       return [x - x1, y - y1];
     };
-    dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio2, shouldResizeFromCenter2, widthAspectRatio, originOffset = null) => {
+    dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio2, shouldResizeFromCenter2, zoom, widthAspectRatio, originOffset = null) => {
       if (shouldMaintainAspectRatio2 && draggingElement.type !== "selection") {
         if (widthAspectRatio) {
           height = width / widthAspectRatio;
@@ -14864,12 +14981,34 @@ var init_dragElements = __esm({
         newX = originX - width / 2;
         newY = originY - height / 2;
       }
+      let textAutoResize = null;
+      if (isTextElement(draggingElement)) {
+        height = draggingElement.height;
+        const minWidth = getMinTextElementWidth(
+          getFontString({
+            fontSize: draggingElement.fontSize,
+            fontFamily: draggingElement.fontFamily
+          }),
+          draggingElement.lineHeight
+        );
+        width = Math.max(width, minWidth);
+        if (Math.abs(x - originX) > TEXT_AUTOWRAP_THRESHOLD / zoom) {
+          textAutoResize = {
+            autoResize: false
+          };
+        }
+        newY = originY;
+        if (shouldResizeFromCenter2) {
+          newX = originX - width / 2;
+        }
+      }
       if (width !== 0 && height !== 0) {
         mutateElement(draggingElement, {
           x: newX + (originOffset?.x ?? 0),
           y: newY + (originOffset?.y ?? 0),
           width,
-          height
+          height,
+          ...textAutoResize
         });
       }
     };
@@ -15193,7 +15332,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 +15356,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 +16441,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 +18768,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 +20277,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 +20324,7 @@ function IconPicker({
       "button",
       {
         name: group,
+        type: "button",
         className: isActive ? "active" : "",
         "aria-label": label,
         onClick: () => setActive(!isActive),
@@ -20262,7 +20408,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 +22330,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 +24427,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 +24550,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 +27830,7 @@ var Dialog = (props) => {
             onClick: onClose,
             title: t("buttons.close"),
             "aria-label": t("buttons.close"),
+            type: "button",
             children: CloseIcon
           }
         ),
@@ -28524,6 +28682,7 @@ var ExitZenModeAction = ({
 }) => /* @__PURE__ */ jsx62(
   "button",
   {
+    type: "button",
     className: clsx28("disable-zen-mode", {
       "disable-zen-mode--visible": showExitZenModeBtn
     }),
@@ -29001,7 +29160,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 +29331,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 +29717,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 +29730,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 +29755,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 +29768,8 @@ var createRedoAction = (history, store) => ({
         "aria-label": t("buttons.redo"),
         onClick: updateData,
         size: data?.size || "medium",
-        disabled: isRedoStackEmpty
+        disabled: isRedoStackEmpty,
+        "data-testid": "button-redo"
       }
     );
   }
@@ -29737,6 +29906,7 @@ init_register();
 init_appState();
 init_clipboard();
 init_constants();
+init_constants();
 init_restore();
 init_element();
 init_binding();
@@ -29843,6 +30013,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 +31021,7 @@ var MobileMenu = ({
             appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && /* @__PURE__ */ jsx81(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -30915,6 +31087,7 @@ var ChartPreviewBtn = (props) => {
   return /* @__PURE__ */ jsx82(
     "button",
     {
+      type: "button",
       className: "ChartPreview",
       onClick: () => {
         if (chartElements) {
@@ -34303,7 +34476,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 +34586,7 @@ var LayerUI = ({
             appState.scrolledOutside && /* @__PURE__ */ jsx117(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -34558,19 +34732,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 +34768,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) => {
@@ -35715,7 +35876,7 @@ var getSnapLinesAtPointer = (elements, appState, pointer, event, elementsMap) =>
   };
 };
 var isActiveToolNonLinearSnappable = (activeToolType) => {
-  return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image;
+  return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image || activeToolType === TOOL_TYPE.text;
 };
 
 // components/BraveMeasureTextError.tsx
@@ -36576,7 +36737,7 @@ var renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding,
     fillCircle(context, x, y, threshold);
   });
 };
-var renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+var renderSelectionBorder = (context, appState, elementProperties) => {
   const {
     angle,
     elementX1,
@@ -36591,6 +36752,7 @@ var renderSelectionBorder = (context, appState, elementProperties, padding = DEF
   } = elementProperties;
   const elementWidth = elementX2 - elementX1;
   const elementHeight = elementY2 - elementY1;
+  const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
   const linePadding = padding / appState.zoom.value;
   const lineWidth = 8 / appState.zoom.value;
   const spaceWidth = 4 / appState.zoom.value;
@@ -36775,11 +36937,28 @@ var renderTransformHandles = (context, renderConfig, appState, transformHandles,
     }
   });
 };
+var renderTextBox = (text, context, appState, selectionColor) => {
+  context.save();
+  const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;
+  const width = text.width + padding * 2;
+  const height = text.height + padding * 2;
+  const cx = text.x + width / 2;
+  const cy = text.y + height / 2;
+  const shiftX = -(width / 2 + padding);
+  const shiftY = -(height / 2 + padding);
+  context.translate(cx + appState.scrollX, cy + appState.scrollY);
+  context.rotate(text.angle);
+  context.lineWidth = 1 / appState.zoom.value;
+  context.strokeStyle = selectionColor;
+  context.strokeRect(shiftX, shiftY, width, height);
+  context.restore();
+};
 var _renderInteractiveScene = ({
   canvas: canvas2,
   elementsMap,
   visibleElements,
   selectedElements,
+  allElementsMap,
   scale,
   appState,
   renderConfig,
@@ -36818,11 +36997,27 @@ var _renderInteractiveScene = ({
   }
   if (appState.selectionElement) {
     try {
-      renderSelectionElement(appState.selectionElement, context, appState);
+      renderSelectionElement(
+        appState.selectionElement,
+        context,
+        appState,
+        renderConfig.selectionColor
+      );
     } catch (error) {
       console.error(error);
     }
   }
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
+    const textElement = allElementsMap.get(appState.editingElement.id);
+    if (textElement && !textElement.autoResize) {
+      renderTextBox(
+        textElement,
+        context,
+        appState,
+        renderConfig.selectionColor
+      );
+    }
+  }
   if (appState.isBindingEnabled) {
     appState.suggestedBindings.filter((binding) => binding != null).forEach((suggestedBinding) => {
       renderBindingHighlight(
@@ -36946,7 +37141,8 @@ var _renderInteractiveScene = ({
         // when we render we don't know which pointer type so use mouse,
         getOmitSidesForDevice(device)
       );
-      if (!appState.viewModeEnabled && showBoundingBox) {
+      if (!appState.viewModeEnabled && showBoundingBox && // do not show transform handles when text is being edited
+      !isTextElement(appState.editingElement)) {
         renderTransformHandles(
           context,
           renderConfig,
@@ -37105,6 +37301,7 @@ var InteractiveCanvas = (props) => {
         elementsMap: props.elementsMap,
         visibleElements: props.visibleElements,
         selectedElements: props.selectedElements,
+        allElementsMap: props.allElementsMap,
         scale: window.devicePixelRatio,
         appState: props.appState,
         renderConfig: {
@@ -37172,11 +37369,12 @@ var getRelevantAppStateProps = (appState) => ({
   // Necessary for collab. sessions
   activeEmbeddable: appState.activeEmbeddable,
   snapLines: appState.snapLines,
-  zenModeEnabled: appState.zenModeEnabled
+  zenModeEnabled: appState.zenModeEnabled,
+  editingElement: appState.editingElement
 });
 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 +37462,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 +37551,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 +37794,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;
@@ -37891,7 +38096,8 @@ var textWysiwyg = ({
   element,
   canvas: canvas2,
   excalidrawContainer,
-  app
+  app,
+  autoSelect = true
 }) => {
   const textPropertiesUpdated = (updatedTextElement, editable2) => {
     if (!editable2.style.fontFamily || !editable2.style.fontSize) {
@@ -37997,6 +38203,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 +38245,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";
   }
@@ -38205,6 +38413,10 @@ var textWysiwyg = ({
   };
   let submittedViaKeyboard = false;
   const handleSubmit = () => {
+    if (isDestroyed) {
+      return;
+    }
+    isDestroyed = true;
     cleanup();
     const updateElement = Scene_default.getScene(element)?.getElement(
       element.id
@@ -38212,13 +38424,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,16 +38457,11 @@ var textWysiwyg = ({
       );
     }
     onSubmit({
-      text,
       viaKeyboard: submittedViaKeyboard,
-      originalText: editable.value
+      nextOriginalText: editable.value
     });
   };
   const cleanup = () => {
-    if (isDestroyed) {
-      return;
-    }
-    isDestroyed = true;
     editable.onblur = null;
     editable.oninput = null;
     editable.onkeydown = null;
@@ -38306,9 +38511,15 @@ var textWysiwyg = ({
       editable.onblur = null;
       window.addEventListener("pointerup", bindBlurEvent);
       window.addEventListener("blur", handleSubmit);
+    } else if (event.target instanceof HTMLElement && !event.target.contains(editable) && // Vitest simply ignores stopPropagation, capture-mode, or rAF
+    // so without introducing crazier hacks, nothing we can do
+    !isTestEnv()) {
+      requestAnimationFrame(() => {
+        handleSubmit();
+      });
     }
   };
-  const unbindUpdate = Scene_default.getScene(element).addCallback(() => {
+  const unbindUpdate = Scene_default.getScene(element).onUpdate(() => {
     updateWysiwygStyle();
     const isColorPickerActive = !!document.activeElement?.closest(
       ".color-picker-content"
@@ -38318,7 +38529,9 @@ var textWysiwyg = ({
     }
   });
   let isDestroyed = false;
-  editable.select();
+  if (autoSelect) {
+    editable.select();
+  }
   bindBlurEvent();
   let observer = null;
   if (canvas2 && "ResizeObserver" in window) {
@@ -38329,7 +38542,10 @@ var textWysiwyg = ({
   } else {
     window.addEventListener("resize", updateWysiwygStyle);
   }
-  window.addEventListener("pointerdown", onPointerDown);
+  editable.onpointerdown = (event) => event.stopPropagation();
+  requestAnimationFrame(() => {
+    window.addEventListener("pointerdown", onPointerDown, { capture: true });
+  });
   window.addEventListener("wheel", stopEvent, {
     passive: false,
     capture: true
@@ -38341,6 +38557,84 @@ 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
+init_bounds();
+
+// mermaid.ts
+init_define_import_meta_env();
+var isMaybeMermaidDefinition = (text) => {
+  const chartTypes = [
+    "flowchart",
+    "sequenceDiagram",
+    "classDiagram",
+    "stateDiagram",
+    "stateDiagram-v2",
+    "erDiagram",
+    "journey",
+    "gantt",
+    "pie",
+    "quadrantChart",
+    "requirementDiagram",
+    "gitGraph",
+    "C4Context",
+    "mindmap",
+    "timeline",
+    "zenuml",
+    "sankey",
+    "xychart",
+    "block"
+  ];
+  const re = new RegExp(
+    `^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes.map((x) => `${x}(-beta)?`).join("|")}\\b`
+  );
+  return re.test(text.trim());
+};
+
+// 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 +38839,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 +38998,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 +39405,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 +39604,7 @@ var App = class _App extends React38.Component {
                             elementsMap,
                             allElementsMap,
                             visibleElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -39334,8 +39625,9 @@ var App = class _App extends React38.Component {
                             canvas: this.interactiveCanvas,
                             elementsMap,
                             visibleElements,
+                            allElementsMap,
                             selectedElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -39429,7 +39721,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 +40205,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 +40241,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();
@@ -40013,7 +40306,7 @@ var App = class _App extends React38.Component {
       addEventListener(document, "keyup" /* KEYUP */, this.onKeyUp, { passive: true }),
       addEventListener(
         document,
-        "mousemove" /* MOUSE_MOVE */,
+        "pointermove" /* POINTER_MOVE */,
         this.updateCurrentCursorPosition
       ),
       // rerender text elements on font load to fix #637 && #1553
@@ -40042,6 +40335,7 @@ var App = class _App extends React38.Component {
       ),
       addEventListener(window, "focus" /* FOCUS */, () => {
         this.maybeCleanupAfterMissingPointerUp(null);
+        this.triggerRender(true);
       })
     );
     if (this.state.viewModeEnabled) {
@@ -40373,6 +40667,27 @@ var App = class _App extends React38.Component {
           retainSeed: isPlainPaste
         });
       } else if (data.text) {
+        if (data.text && isMaybeMermaidDefinition(data.text)) {
+          const api = await import("@excalidraw/mermaid-to-excalidraw");
+          try {
+            const { elements: skeletonElements, files } = await api.parseMermaidToExcalidraw(data.text, {
+              fontSize: DEFAULT_FONT_SIZE
+            });
+            const elements = convertToExcalidrawElements(skeletonElements, {
+              regenerateIds: true
+            });
+            this.addElementsFromPasteOrLibrary({
+              elements,
+              files,
+              position: "cursor"
+            });
+            return;
+          } catch (err) {
+            console.warn(
+              `parsing pasted text as mermaid definition failed: ${err.message}`
+            );
+          }
+        }
         const nonEmptyLines = normalizeEOL(data.text).split(/\n+/).map((s) => s.trim()).filter(Boolean);
         const embbeddableUrls = nonEmptyLines.map((str) => maybeParseEmbedSrc(str)).filter((string) => {
           return embeddableURLValidator(string, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) || getEmbedLink(string)?.type === "video");
@@ -40592,28 +40907,42 @@ var App = class _App extends React38.Component {
       text,
       fontSize: this.state.currentItemFontSize,
       fontFamily: this.state.currentItemFontFamily,
-      textAlign: this.state.currentItemTextAlign,
+      textAlign: DEFAULT_TEXT_ALIGN,
       verticalAlign: DEFAULT_VERTICAL_ALIGN,
       locked: false
     };
+    const fontString = getFontString({
+      fontSize: textElementProps.fontSize,
+      fontFamily: textElementProps.fontFamily
+    });
+    const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
+    const [x1, , x2] = getVisibleSceneBounds(this.state);
+    const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);
     const LINE_GAP = 10;
     let currentY = y;
     const lines = isPlainPaste ? [text] : text.split("\n");
     const textElements = lines.reduce(
       (acc, line, idx) => {
-        const text2 = line.trim();
-        const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
-        if (text2.length) {
+        const originalText = line.trim();
+        if (originalText.length) {
           const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
             x,
             y: currentY
           });
+          let metrics = measureText(originalText, fontString, lineHeight);
+          const isTextWrapped = metrics.width > maxTextWidth;
+          const text2 = isTextWrapped ? wrapText(originalText, fontString, maxTextWidth) : originalText;
+          metrics = isTextWrapped ? measureText(text2, fontString, lineHeight) : metrics;
+          const startX = x - metrics.width / 2;
+          const startY = currentY - metrics.height / 2;
           const element = newTextElement({
             ...textElementProps,
-            x,
-            y: currentY,
+            x: startX,
+            y: startY,
             text: text2,
+            originalText,
             lineHeight,
+            autoResize: !isTextWrapped,
             frameId: topLayerFrame ? topLayerFrame.id : null
           });
           acc.push(element);
@@ -40826,7 +41155,7 @@ var App = class _App extends React38.Component {
           ShapeCache.delete(element);
         }
       });
-      this.scene.informMutation();
+      this.scene.triggerUpdate();
       this.addNewImagesToImageCache();
     }
   );
@@ -40866,8 +41195,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 +41603,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 +41640,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) => ({
@@ -41346,10 +41680,15 @@ var App = class _App extends React38.Component {
       }),
       element,
       excalidrawContainer: this.excalidrawContainerRef.current,
-      app: this
+      app: this,
+      // when text is selected, it's hard (at least on iOS) to re-position the
+      // caret (i.e. deselect). There's not much use for always selecting
+      // the text on edit anyway (and users can select-all from contextmenu
+      // if needed)
+      autoSelect: !this.device.isTouchScreen
     });
     this.deselectElements();
-    updateElement(element.text, element.originalText, false);
+    updateElement(element.originalText, false);
   }
   deselectElements() {
     this.setState({
@@ -41548,7 +41887,8 @@ var App = class _App extends React38.Component {
     sceneX,
     sceneY,
     insertAtParentCenter = true,
-    container
+    container,
+    autoEdit = true
   }) => {
     let shouldBindToContainer = false;
     let parentCenterPosition = insertAtParentCenter && this.getTextWysiwygSnappedToCenterPosition(
@@ -41651,12 +41991,16 @@ var App = class _App extends React38.Component {
         this.scene.insertElement(element);
       }
     }
-    this.setState({
-      editingElement: element
-    });
-    this.handleTextWysiwyg(element, {
-      isExistingElement: !!existingTextElement
-    });
+    if (autoEdit || existingTextElement || container) {
+      this.handleTextWysiwyg(element, {
+        isExistingElement: !!existingTextElement
+      });
+    } else {
+      this.setState({
+        draggingElement: element,
+        multiElement: null
+      });
+    }
   };
   handleCanvasDoubleClick = (event) => {
     if (this.state.multiElement) {
@@ -41848,8 +42192,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 +42545,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
@@ -42392,7 +42739,6 @@ var App = class _App extends React38.Component {
     }
     if (this.state.activeTool.type === "text") {
       this.handleTextOnPointerDown(event, pointerDownState);
-      return;
     } else if (this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line") {
       this.handleLinearElementOnPointerDown(
         event,
@@ -42962,7 +43308,8 @@ var App = class _App extends React38.Component {
       sceneX,
       sceneY,
       insertAtParentCenter: !event.altKey,
-      container
+      container,
+      autoEdit: false
     });
     resetCursor(this.interactiveCanvas);
     if (!this.state.activeTool.locked) {
@@ -43967,6 +44314,24 @@ var App = class _App extends React38.Component {
         }
         return;
       }
+      if (isTextElement(draggingElement)) {
+        const minWidth = getMinTextElementWidth(
+          getFontString({
+            fontSize: draggingElement.fontSize,
+            fontFamily: draggingElement.fontFamily
+          }),
+          draggingElement.lineHeight
+        );
+        if (draggingElement.width < minWidth) {
+          mutateElement(draggingElement, {
+            autoResize: true
+          });
+        }
+        this.resetCursor();
+        this.handleTextWysiwyg(draggingElement, {
+          isExistingElement: true
+        });
+      }
       if (activeTool.type !== "selection" && draggingElement && isInvisiblySmallElement(draggingElement)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== draggingElement.id),
@@ -44002,7 +44367,7 @@ var App = class _App extends React38.Component {
                     [linearElement],
                     this.scene.getNonDeletedElementsMap()
                   );
-                  this.scene.informMutation();
+                  this.scene.triggerUpdate();
                 }
               }
             }
@@ -44355,7 +44720,7 @@ var App = class _App extends React38.Component {
   }
   restoreReadyToEraseElements = () => {
     this.elementsPendingErasure = /* @__PURE__ */ new Set();
-    this.onSceneUpdated();
+    this.triggerRender();
   };
   eraseElements = () => {
     let didChange = false;
@@ -44670,7 +45035,7 @@ var App = class _App extends React38.Component {
         files
       );
       if (updatedFiles.size) {
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
       }
     }
   };
@@ -44956,7 +45321,8 @@ var App = class _App extends React38.Component {
         distance(pointerDownState.origin.x, pointerCoords.x),
         distance(pointerDownState.origin.y, pointerCoords.y),
         shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter(event)
+        shouldResizeFromCenter(event),
+        this.state.zoom.value
       );
     } else {
       let [gridX, gridY] = getGridPoint(
@@ -44997,6 +45363,7 @@ var App = class _App extends React38.Component {
         distance(pointerDownState.originInGrid.y, gridY),
         isImageElement(draggingElement) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
         shouldResizeFromCenter(event),
+        this.state.zoom.value,
         aspectRatio,
         this.state.originSnapOffset
       );
@@ -45143,6 +45510,7 @@ var App = class _App extends React38.Component {
       return [actionCopy, ...options];
     }
     return [
+      CONTEXT_MENU_SEPARATOR,
       actionCut,
       actionCopy,
       actionPaste,
@@ -45155,6 +45523,7 @@ var App = class _App extends React38.Component {
       actionPasteStyles,
       CONTEXT_MENU_SEPARATOR,
       actionGroup,
+      actionTextAutoResize,
       actionUnbindText,
       actionBindText,
       actionWrapTextInContainer,