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

package/dist/excalidraw/components/App.js

@@ -11,11 +11,12 @@ import { actions } from "../actions/register";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
-import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, supportsResizeObserver, DEFAULT_COLLISION_THRESHOLD, } from "../constants";
+import { DEFAULT_FONT_SIZE } from "../constants";
+import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, supportsResizeObserver, DEFAULT_COLLISION_THRESHOLD, DEFAULT_TEXT_ALIGN, } from "../constants";
 import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
-import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds, getCursorForResizingElement, getDragOffsetXY, getElementWithTransformHandleType, getNormalizedDimensions, getResizeArrowDirection, getResizeOffsetXY, getLockedLinearCursorAlignSize, getTransformHandleTypeFromCoords, isInvisiblySmallElement, isNonDeletedElement, isTextElement, newElement, newLinearElement, newTextElement, newImageElement, transformElements, updateTextElement, redrawTextBoundingBox, getElementAbsoluteCoords, } from "../element";
+import { dragNewElement, dragSelectedElements, duplicateElement, getCommonBounds, getCursorForResizingElement, getDragOffsetXY, getElementWithTransformHandleType, getNormalizedDimensions, getResizeArrowDirection, getResizeOffsetXY, getLockedLinearCursorAlignSize, getTransformHandleTypeFromCoords, isInvisiblySmallElement, isNonDeletedElement, isTextElement, newElement, newLinearElement, newTextElement, newImageElement, transformElements, refreshTextDimensions, redrawTextBoundingBox, getElementAbsoluteCoords, } from "../element";
 import { bindOrUnbindLinearElement, bindOrUnbindLinearElements, fixBindingsAfterDeletion, fixBindingsAfterDuplication, getHoveredElementForBinding, isBindingEnabled, isLinearElementSimpleAndAlreadyBound, maybeBindLinearElement, shouldEnableBindingForPointerEvent, updateBoundElements, getSuggestedBindingsForArrows, } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { mutateElement, newElementWith } from "../element/mutateElement";
@@ -44,7 +45,7 @@ import { dataURLToFile, generateIdFromFile, getDataURL, getFileFromEvent, ImageU
 import { getInitializedImageElements, loadHTMLImageElement, normalizeSVG, updateImageCache as _updateImageCache, } from "../element/image";
 import throttle from "lodash.throttle";
 import { fileOpen } from "../data/filesystem";
-import { bindTextToShapeAfterDuplication, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getContainerCenter, getContainerElement, getDefaultLineHeight, getLineHeightInPx, isMeasureTextSupported, isValidTextContainer, } from "../element/textElement";
+import { bindTextToShapeAfterDuplication, getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getContainerCenter, getContainerElement, getDefaultLineHeight, getLineHeightInPx, getMinTextElementWidth, isMeasureTextSupported, isValidTextContainer, measureText, wrapText, } from "../element/textElement";
 import { showHyperlinkTooltip, hideHyperlinkToolip, Hyperlink, } from "../components/hyperlink/Hyperlink";
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
@@ -90,6 +91,9 @@ import { isOverScrollBars } from "../scene/scrollbars";
 import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
 import { isPointHittingLink, isPointHittingLinkIcon, } from "./hyperlink/helpers";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { actionTextAutoResize } from "../actions/actionTextAutoResize";
+import { getVisibleSceneBounds } from "../element/bounds";
+import { isMaybeMermaidDefinition } from "../mermaid";
 const AppContext = React.createContext(null);
 const AppPropsContext = React.createContext(null);
 const deviceContextInitialValue = {
@@ -286,10 +290,7 @@ class App extends React.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(createUndoAction(this.history, this.store));
@@ -444,7 +445,7 @@ class App extends React.Component {
             return false;
         });
         if (updated) {
-            this.scene.informMutation();
+            this.scene.triggerUpdate();
         }
         // GC
         this.iFrameRefs.forEach((ref, id) => {
@@ -803,9 +804,9 @@ class App extends React.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,
@@ -874,14 +875,14 @@ class App extends React.Component {
                                                                 this.focusContainer();
                                                                 callback?.();
                                                             });
-                                                        } })), _jsx(StaticCanvas, { canvas: this.canvas, rc: this.rc, elementsMap: elementsMap, allElementsMap: allElementsMap, visibleElements: visibleElements, versionNonce: versionNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderConfig: {
+                                                        } })), _jsx(StaticCanvas, { canvas: this.canvas, rc: this.rc, elementsMap: elementsMap, allElementsMap: allElementsMap, visibleElements: visibleElements, sceneNonce: sceneNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, renderConfig: {
                                                             imageCache: this.imageCache,
                                                             isExporting: false,
                                                             renderGrid: true,
                                                             canvasBackgroundColor: this.state.viewBackgroundColor,
                                                             embedsValidationStatus: this.embedsValidationStatus,
                                                             elementsPendingErasure: this.elementsPendingErasure,
-                                                        } }), _jsx(InteractiveCanvas, { containerRef: this.excalidrawContainerRef, canvas: this.interactiveCanvas, elementsMap: elementsMap, visibleElements: visibleElements, selectedElements: selectedElements, versionNonce: versionNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, device: this.device, renderInteractiveSceneCallback: this.renderInteractiveSceneCallback, handleCanvasRef: this.handleInteractiveCanvasRef, onContextMenu: this.handleCanvasContextMenu, onPointerMove: this.handleCanvasPointerMove, onPointerUp: this.handleCanvasPointerUp, onPointerCancel: this.removePointer, onTouchMove: this.handleTouchMove, onPointerDown: this.handleCanvasPointerDown, onDoubleClick: this.handleCanvasDoubleClick }), this.state.userToFollow && (_jsx(FollowMode, { width: this.state.width, height: this.state.height, userToFollow: this.state.userToFollow, onDisconnect: this.maybeUnfollowRemoteUser })), this.renderFrameNames()] }), this.renderEmbeddables()] }) }) }) }) }) }) }) }));
+                                                        } }), _jsx(InteractiveCanvas, { containerRef: this.excalidrawContainerRef, canvas: this.interactiveCanvas, elementsMap: elementsMap, visibleElements: visibleElements, allElementsMap: allElementsMap, selectedElements: selectedElements, sceneNonce: sceneNonce, selectionNonce: this.state.selectionElement?.versionNonce, scale: window.devicePixelRatio, appState: this.state, device: this.device, renderInteractiveSceneCallback: this.renderInteractiveSceneCallback, handleCanvasRef: this.handleInteractiveCanvasRef, onContextMenu: this.handleCanvasContextMenu, onPointerMove: this.handleCanvasPointerMove, onPointerUp: this.handleCanvasPointerUp, onPointerCancel: this.removePointer, onTouchMove: this.handleTouchMove, onPointerDown: this.handleCanvasPointerDown, onDoubleClick: this.handleCanvasDoubleClick }), this.state.userToFollow && (_jsx(FollowMode, { width: this.state.width, height: this.state.height, userToFollow: this.state.userToFollow, onDisconnect: this.maybeUnfollowRemoteUser })), this.renderFrameNames()] }), this.renderEmbeddables()] }) }) }) }) }) }) }) }));
     }
     focusContainer = () => {
         this.excalidrawContainerRef.current?.focus();
@@ -931,7 +932,7 @@ class App extends React.Component {
             mutateElement(frameElement, { customData: { generationData: data } }, false);
         }
         this.magicGenerations.set(frameElement.id, data);
-        this.onSceneUpdated();
+        this.triggerRender();
     };
     getTextFromElements(elements) {
         const text = elements
@@ -1441,7 +1442,7 @@ class App extends React.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();
@@ -1479,6 +1480,7 @@ class App extends React.Component {
     componentWillUnmount() {
         this.renderer.destroy();
         this.scene = new Scene();
+        this.fonts = new Fonts({ scene: this.scene });
         this.renderer = new Renderer(this.scene);
         this.files = {};
         this.imageCache.clear();
@@ -1534,7 +1536,7 @@ class App extends React.Component {
             this.onRemoveEventListenersEmitter.once(addEventListener(document, EVENT.KEYDOWN, this.onKeyDown, false));
         }
         this.onRemoveEventListenersEmitter.once(addEventListener(this.excalidrawContainerRef.current, EVENT.WHEEL, this.onWheel, { passive: false }), addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false), addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553
-        addEventListener(document, EVENT.COPY, this.onCopy), addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }), addEventListener(document, EVENT.MOUSE_MOVE, this.updateCurrentCursorPosition), 
+        addEventListener(document, EVENT.COPY, this.onCopy), addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }), addEventListener(document, EVENT.POINTER_MOVE, this.updateCurrentCursorPosition), 
         // rerender text elements on font load to fix #637 && #1553
         addEventListener(document.fonts, "loadingdone", (event) => {
             const loadedFontFaces = event.fontfaces;
@@ -1543,6 +1545,9 @@ class App extends React.Component {
         // Safari-only desktop pinch zoom
         addEventListener(document, EVENT.GESTURE_START, this.onGestureStart, false), addEventListener(document, EVENT.GESTURE_CHANGE, this.onGestureChange, false), addEventListener(document, EVENT.GESTURE_END, this.onGestureEnd, false), addEventListener(window, EVENT.FOCUS, () => {
             this.maybeCleanupAfterMissingPointerUp(null);
+            // browsers (chrome?) tend to free up memory a lot, which results
+            // in canvas context being cleared. Thus re-render on focus.
+            this.triggerRender(true);
         }));
         if (this.state.viewModeEnabled) {
             return;
@@ -1849,6 +1854,26 @@ class App extends React.Component {
             });
         }
         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())
@@ -2053,27 +2078,46 @@ class App extends React.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);
+        // long texts should not go beyond 800 pixels in width nor should it go below 200 px
+        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 text = line.trim();
-            const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
-            if (text.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 text = isTextWrapped
+                    ? wrapText(originalText, fontString, maxTextWidth)
+                    : originalText;
+                metrics = isTextWrapped
+                    ? measureText(text, 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,
+                    originalText,
                     lineHeight,
+                    autoResize: !isTextWrapped,
                     frameId: topLayerFrame ? topLayerFrame.id : null,
                 });
                 acc.push(element);
@@ -2292,7 +2336,7 @@ class App extends React.Component {
                 ShapeCache.delete(element);
             }
         });
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
         this.addNewImagesToImageCache();
     });
     updateScene = withBatchedUpdates((sceneData) => {
@@ -2326,8 +2370,15 @@ class App extends React.Component {
             this.setState({ collaborators: sceneData.collaborators });
         }
     });
-    onSceneUpdated = () => {
-        this.setState({});
+    triggerRender = (
+    /** force always re-renders canvas even if no change */
+    force) => {
+        if (force === true) {
+            this.scene.triggerUpdate();
+        }
+        else {
+            this.setState({});
+        }
     };
     /**
      * @returns whether the menu was toggled on or off
@@ -2772,15 +2823,16 @@ class App extends React.Component {
     });
     handleTextWysiwyg(element, { 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;
@@ -2800,15 +2852,15 @@ class App extends React.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);
                 // select the created text element only if submitting via keyboard
                 // (when submitting via click it should act as signal to deselect)
                 if (!isDeleted && viaKeyboard) {
@@ -2842,12 +2894,17 @@ class App extends React.Component {
             element,
             excalidrawContainer: this.excalidrawContainerRef.current,
             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,
         });
         // deselect all other elements when inserting text
         this.deselectElements();
         // do an initial update to re-initialize element position since we were
         // modifying element's x/y for sake of editor (case: syncing to remote)
-        updateElement(element.text, element.originalText, false);
+        updateElement(element.originalText, false);
     }
     deselectElements() {
         this.setState({
@@ -3044,7 +3101,7 @@ class App extends React.Component {
         }
         return isTextBindableContainer(hitElement, false) ? hitElement : null;
     }
-    startTextEditing = ({ sceneX, sceneY, insertAtParentCenter = true, container, }) => {
+    startTextEditing = ({ sceneX, sceneY, insertAtParentCenter = true, container, autoEdit = true, }) => {
         let shouldBindToContainer = false;
         let parentCenterPosition = insertAtParentCenter &&
             this.getTextWysiwygSnappedToCenterPosition(sceneX, sceneY, this.state, container);
@@ -3145,12 +3202,17 @@ class App extends React.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) => {
         // case: double-clicking with arrow/line tool selected would both create
@@ -3317,8 +3379,11 @@ class App extends React.Component {
                 }, state);
                 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,
                 });
             });
@@ -3639,7 +3704,7 @@ class App extends React.Component {
                 }
             }
             this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-            this.onSceneUpdated();
+            this.triggerRender();
         }
     };
     // set touch moving for mobile context menu
@@ -3850,7 +3915,6 @@ class App extends React.Component {
         }
         if (this.state.activeTool.type === "text") {
             this.handleTextOnPointerDown(event, pointerDownState);
-            return;
         }
         else if (this.state.activeTool.type === "arrow" ||
             this.state.activeTool.type === "line") {
@@ -4398,6 +4462,7 @@ class App extends React.Component {
             sceneY,
             insertAtParentCenter: !event.altKey,
             container,
+            autoEdit: false,
         });
         resetCursor(this.interactiveCanvas);
         if (!this.state.activeTool.locked) {
@@ -5288,6 +5353,21 @@ class App extends React.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)) {
@@ -5323,7 +5403,7 @@ class App extends React.Component {
                                         groupIds: [],
                                     });
                                     removeElementsFromFrame([linearElement], this.scene.getNonDeletedElementsMap());
-                                    this.scene.informMutation();
+                                    this.scene.triggerUpdate();
                                 }
                             }
                         }
@@ -5640,7 +5720,7 @@ class App extends React.Component {
     }
     restoreReadyToEraseElements = () => {
         this.elementsPendingErasure = new Set();
-        this.onSceneUpdated();
+        this.triggerRender();
     };
     eraseElements = () => {
         let didChange = false;
@@ -5932,7 +6012,7 @@ class App extends React.Component {
         if (uncachedImageElements.length) {
             const { updatedFiles } = await this.updateImageCache(uncachedImageElements, files);
             if (updatedFiles.size) {
-                this.scene.informMutation();
+                this.scene.triggerUpdate();
             }
         }
     };
@@ -6211,7 +6291,7 @@ class App extends React.Component {
         }
         if (draggingElement.type === "selection" &&
             this.state.activeTool.type !== "eraser") {
-            dragNewElement(draggingElement, this.state.activeTool.type, pointerDownState.origin.x, pointerDownState.origin.y, pointerCoords.x, pointerCoords.y, distance(pointerDownState.origin.x, pointerCoords.x), distance(pointerDownState.origin.y, pointerCoords.y), shouldMaintainAspectRatio(event), shouldResizeFromCenter(event));
+            dragNewElement(draggingElement, this.state.activeTool.type, pointerDownState.origin.x, pointerDownState.origin.y, pointerCoords.x, pointerCoords.y, distance(pointerDownState.origin.x, pointerCoords.x), distance(pointerDownState.origin.y, pointerCoords.y), shouldMaintainAspectRatio(event), shouldResizeFromCenter(event), this.state.zoom.value);
         }
         else {
             let [gridX, gridY] = getGridPoint(pointerCoords.x, pointerCoords.y, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
@@ -6237,7 +6317,7 @@ class App extends React.Component {
             });
             dragNewElement(draggingElement, this.state.activeTool.type, pointerDownState.originInGrid.x, pointerDownState.originInGrid.y, gridX, gridY, distance(pointerDownState.originInGrid.x, gridX), distance(pointerDownState.originInGrid.y, gridY), isImageElement(draggingElement)
                 ? !shouldMaintainAspectRatio(event)
-                : shouldMaintainAspectRatio(event), shouldResizeFromCenter(event), aspectRatio, this.state.originSnapOffset);
+                : shouldMaintainAspectRatio(event), shouldResizeFromCenter(event), this.state.zoom.value, aspectRatio, this.state.originSnapOffset);
             // highlight elements that are to be added to frames on frames creation
             if (this.state.activeTool.type === TOOL_TYPE.frame ||
                 this.state.activeTool.type === TOOL_TYPE.magicframe) {
@@ -6346,6 +6426,7 @@ class App extends React.Component {
             return [actionCopy, ...options];
         }
         return [
+            CONTEXT_MENU_SEPARATOR,
             actionCut,
             actionCopy,
             actionPaste,
@@ -6358,6 +6439,7 @@ class App extends React.Component {
             actionPasteStyles,
             CONTEXT_MENU_SEPARATOR,
             actionGroup,
+            actionTextAutoResize,
             actionUnbindText,
             actionBindText,
             actionWrapTextInContainer,

package/dist/excalidraw/components/ButtonIconSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
-export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList buttonListIcon", children: props.options.map((option) => props.type === "button" ? (_jsx("button", { onClick: (event) => props.onClick(option.value, event), className: clsx({
+export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList buttonListIcon", children: props.options.map((option) => props.type === "button" ? (_jsx("button", { type: "button", onClick: (event) => props.onClick(option.value, event), className: clsx({
             active: option.active ?? props.value === option.value,
         }), "data-testid": option.testId, title: option.text, children: option.icon }, option.text)) : (_jsxs("label", { className: clsx({ active: props.value === option.value }), title: option.text, children: [_jsx("input", { type: "radio", name: props.group, onChange: () => props.onChange(option.value), checked: props.value === option.value, "data-testid": option.testId }), option.icon] }, option.text))) }));

package/dist/excalidraw/components/CheckboxItem.js

@@ -6,5 +6,5 @@ export const CheckboxItem = ({ children, checked, onChange, className }) => {
     return (_jsxs("div", { className: clsx("Checkbox", className, { "is-checked": checked }), onClick: (event) => {
             onChange(!checked, event);
             event.currentTarget.querySelector(".Checkbox-box").focus();
-        }, children: [_jsx("button", { className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }), _jsx("div", { className: "Checkbox-label", children: children })] }));
+        }, children: [_jsx("button", { type: "button", className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }), _jsx("div", { className: "Checkbox-label", children: children })] }));
 };

package/dist/excalidraw/components/CommandPalette/CommandPalette.js

@@ -416,7 +416,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                     ...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(allCommands);
@@ -584,7 +584,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
             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,

package/dist/excalidraw/components/ContextMenu.js

@@ -46,7 +46,7 @@ export const ContextMenu = React.memo(({ actionManager, items, top, left, onClos
                         onClose(() => {
                             actionManager.executeAction(item, "contextMenu");
                         });
-                    }, children: _jsxs("button", { className: clsx("context-menu-item", {
+                    }, children: _jsxs("button", { type: "button", className: clsx("context-menu-item", {
                             dangerous: actionName === "deleteSelectedElements",
                             checkmark: item.checked?.(appState),
                         }), children: [_jsx("div", { className: "context-menu-item__label", children: label }), _jsx("kbd", { className: "context-menu-item__shortcut", children: actionName

package/dist/excalidraw/components/Dialog.js

@@ -72,5 +72,5 @@ export const Dialog = (props) => {
     };
     return (_jsx(Modal, { className: clsx("Dialog", props.className, {
             "Dialog--fullscreen": isFullscreen,
-        }), labelledBy: "dialog-title", maxWidth: getDialogSize(props.size), onCloseRequest: onClose, closeOnClickOutside: props.closeOnClickOutside, children: _jsxs(Island, { ref: setIslandNode, children: [props.title && (_jsx("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: _jsx("span", { className: "Dialog__titleContent", children: props.title }) })), isFullscreen && (_jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), children: CloseIcon })), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
+        }), labelledBy: "dialog-title", maxWidth: getDialogSize(props.size), onCloseRequest: onClose, closeOnClickOutside: props.closeOnClickOutside, children: _jsxs(Island, { ref: setIslandNode, children: [props.title && (_jsx("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: _jsx("span", { className: "Dialog__titleContent", children: props.title }) })), isFullscreen && (_jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), type: "button", children: CloseIcon })), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
 };

package/dist/excalidraw/components/FollowMode/FollowMode.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "../icons";
 import "./FollowMode.scss";
 const FollowMode = ({ height, width, userToFollow, onDisconnect, }) => {
-    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
+    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { type: "button", onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
 };
 export default FollowMode;

package/dist/excalidraw/components/IconPicker.js

@@ -72,7 +72,7 @@ function Picker({ options, value, label, onChange, onClose, }) {
         event.nativeEvent.stopImmediatePropagation();
         event.stopPropagation();
     };
-    return (_jsx("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: handleKeyDown, children: _jsx("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => (_jsxs("button", { className: clsx("picker-option", {
+    return (_jsx("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: handleKeyDown, children: _jsx("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => (_jsxs("button", { type: "button", className: clsx("picker-option", {
                     active: value === option.value,
                 }), onClick: (event) => {
                     event.currentTarget.focus();
@@ -92,7 +92,7 @@ export function IconPicker({ value, label, options, onChange, group = "", }) {
     const [isActive, setActive] = React.useState(false);
     const rPickerButton = React.useRef(null);
     const isRTL = getLanguage().rtl;
-    return (_jsxs("div", { children: [_jsx("button", { name: group, className: isActive ? "active" : "", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, children: options.find((option) => option.value === value)?.icon }), _jsx(React.Suspense, { fallback: "", children: isActive ? (_jsxs(_Fragment, { children: [_jsx(Popover, { onCloseRequest: (event) => event.target !== rPickerButton.current && setActive(false), ...(isRTL ? { right: 5.5 } : { left: -5.5 }), children: _jsx(Picker, { options: options.filter((opt) => opt.showInPicker !== false), value: value, label: label, onChange: onChange, onClose: () => {
+    return (_jsxs("div", { children: [_jsx("button", { name: group, type: "button", className: isActive ? "active" : "", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, children: options.find((option) => option.value === value)?.icon }), _jsx(React.Suspense, { fallback: "", children: isActive ? (_jsxs(_Fragment, { children: [_jsx(Popover, { onCloseRequest: (event) => event.target !== rPickerButton.current && setActive(false), ...(isRTL ? { right: 5.5 } : { left: -5.5 }), children: _jsx(Picker, { options: options.filter((opt) => opt.showInPicker !== false), value: value, label: label, onChange: onChange, onClose: () => {
                                     setActive(false);
                                     rPickerButton.current?.focus();
                                 } }) }), _jsx("div", { className: "picker-triangle" })] })) : null })] }));

package/dist/excalidraw/components/LayerUI.js

@@ -126,7 +126,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                             }, false);
                             ShapeCache.delete(element);
                         }
-                        Scene.getScene(selectedElements[0])?.informMutation();
+                        Scene.getScene(selectedElements[0])?.triggerUpdate();
                     }
                     else if (colorPickerType === "elementBackground") {
                         setAppState({
@@ -160,7 +160,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                             ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                             : {}, children: [renderWelcomeScreen && _jsx(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), _jsx(Footer, { appState: appState, actionManager: actionManager, showExitZenModeBtn: showExitZenModeBtn, renderWelcomeScreen: renderWelcomeScreen }), appState.showStats && (_jsx(Stats, { appState: appState, setAppState: setAppState, elements: elements, onClose: () => {
                                     actionManager.executeAction(actionToggleStats);
-                                }, renderCustomStats: renderCustomStats })), appState.scrolledOutside && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                }, renderCustomStats: renderCustomStats })), appState.scrolledOutside && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                     setAppState((appState) => ({
                                         ...calculateScrollCenter(elements, appState),
                                     }));

package/dist/excalidraw/components/MobileMenu.js

@@ -37,7 +37,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
                             !appState.viewModeEnabled &&
                             showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
                                     !appState.openMenu &&
-                                    !appState.openSidebar && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                    !appState.openSidebar && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                         setAppState((appState) => ({
                                             ...calculateScrollCenter(elements, appState),
                                         }));

package/dist/excalidraw/components/PasteChartDialog.js

@@ -35,7 +35,7 @@ const ChartPreviewBtn = (props) => {
             previewNode.replaceChildren();
         };
     }, [props.spreadsheet, props.chartType, props.selected]);
-    return (_jsx("button", { className: "ChartPreview", onClick: () => {
+    return (_jsx("button", { type: "button", className: "ChartPreview", onClick: () => {
             if (chartElements) {
                 props.onClick(props.chartType, chartElements);
             }

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -2,14 +2,15 @@ import React from "react";
 import type { DOMAttributes } from "react";
 import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
 type InteractiveCanvasProps = {
     containerRef: React.RefObject<HTMLDivElement>;
     canvas: HTMLCanvasElement | null;
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    allElementsMap: NonDeletedSceneElementsMap;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -49,6 +49,7 @@ const InteractiveCanvas = (props) => {
             elementsMap: props.elementsMap,
             visibleElements: props.visibleElements,
             selectedElements: props.selectedElements,
+            allElementsMap: props.allElementsMap,
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
@@ -99,14 +100,15 @@ const getRelevantAppStateProps = (appState) => ({
     activeEmbeddable: appState.activeEmbeddable,
     snapLines: appState.snapLines,
     zenModeEnabled: appState.zenModeEnabled,
+    editingElement: appState.editingElement,
 });
 const areEqual = (prevProps, nextProps) => {
     // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
     if (prevProps.selectionNonce !== nextProps.selectionNonce ||
-        prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.sceneNonce !== nextProps.sceneNonce ||
         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
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||