@dwelle/excalidraw 0.5.0-e56eec7 → 0.5.0-e8bcd96

package/dist/excalidraw/components/Actions.js

@@ -9,7 +9,7 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
+import { hasBoundTextElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -53,6 +53,9 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
         !isTransparent(appState.currentItemBackgroundColor)) ||
         targetElements.some((element) => hasBackground(element.type) && !isTransparent(element.backgroundColor));
     const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
+    const showLineEditorAction = !appState.editingLinearElement &&
+        targetElements.length === 1 &&
+        isLinearElement(targetElements[0]);
     return (_jsxs("div", { className: "panelColumn", children: [_jsx("div", { children: canChangeStrokeColor(appState, targetElements) &&
                     renderAction("changeStrokeColor") }), canChangeBackgroundColor(appState, targetElements) && (_jsx("div", { children: renderAction("changeBackgroundColor") })), showFillIcons && renderAction("changeFillStyle"), (hasStrokeWidth(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeWidth(element.type))) &&
@@ -65,14 +68,14 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
                         suppportsHorizontalAlign(targetElements, elementsMap)) &&
                         renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||
-                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringToFront"), renderAction("bringForward")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
+                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringForward"), renderAction("bringToFront")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
                                 renderAction("distributeHorizontally"), _jsx("div", { style: { flexBasis: "100%", height: 0 } }), _jsxs("div", { style: {
                                     display: "flex",
                                     flexWrap: "wrap",
                                     gap: ".5rem",
                                     marginTop: "-0.5rem",
                                 }, children: [renderAction("alignTop"), renderAction("alignVerticallyCentered"), renderAction("alignBottom"), targetElements.length > 2 &&
-                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink")] })] }))] }));
+                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink"), showLineEditorAction && renderAction("toggleLinearEditor")] })] }))] }));
 };
 export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
     const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
@@ -122,8 +125,8 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
                                     fontSize: 8,
                                     fontFamily: "Cascadia, monospace",
                                     position: "absolute",
-                                    background: "pink",
-                                    color: "black",
+                                    background: "var(--color-promo)",
+                                    color: "var(--color-surface-lowest)",
                                     bottom: 3,
                                     right: 4,
                                 }, children: "AI" }))] }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsExtraToolsMenuOpen(false), onSelect: () => setIsExtraToolsMenuOpen(false), className: "App-toolbar__extra-tools-dropdown", children: [_jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "frame" }), icon: frameToolIcon, shortcut: KEYS.F.toLocaleUpperCase(), "data-testid": "toolbar-frame", selected: frameToolSelected, children: t("toolBar.frame") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "embeddable" }), icon: EmbedIcon, "data-testid": "toolbar-embeddable", selected: embeddableToolSelected, children: t("toolBar.embeddable") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "laser" }), icon: laserPointerToolIcon, "data-testid": "toolbar-laser", selected: laserToolSelected, shortcut: KEYS.K.toLocaleUpperCase(), children: t("toolBar.laser") }), _jsx("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }), app.props.aiEnabled !== false && _jsx(TTDDialogTriggerTunnel.Out, {}), _jsx(DropdownMenu.Item, { onSelect: () => app.setOpenDialog({ name: "ttd", tab: "mermaid" }), icon: mermaidLogoIcon, "data-testid": "toolbar-embeddable", children: t("toolBar.mermaidToExcalidraw") }), app.props.aiEnabled !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => app.onMagicframeToolSelect(), icon: MagicIcon, "data-testid": "toolbar-magicframe", children: [t("toolBar.magicframe"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }), _jsx(DropdownMenu.Item, { onSelect: () => {

package/dist/excalidraw/components/App.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
-import { EXPORT_IMAGE_TYPES } from "../constants";
-import { ExportedElements } from "../data";
+import type { EXPORT_IMAGE_TYPES } from "../constants";
+import type { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
+import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
 import { History } from "../history";
 import Scene from "../scene/Scene";
-import { GeometricShape } from "../../utils/geometry/shape";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
-import { FileSystemHandle } from "../data/filesystem";
+import type { GeometricShape } from "../../utils/geometry/shape";
+import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
+import type { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
 import { Emitter } from "../emitter";
 import { Store } from "../store";
@@ -345,7 +345,7 @@ declare class App extends React.Component<AppProps, AppState> {
         /** @default StoreAction.CAPTURE */
         storeAction?: SceneData["storeAction"];
     }) => void;
-    private onSceneUpdated;
+    private triggerRender;
     /**
      * @returns whether the menu was toggled on or off
      */
@@ -474,7 +474,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private updateBindingEnabledOnPointerMove;
     private maybeSuggestBindingAtCursor;
     private maybeSuggestBindingsForLinearElementAtCoords;
-    private maybeSuggestBindingForAll;
     private clearSelection;
     private handleInteractiveCanvasRef;
     private handleAppOnDrop;

package/dist/excalidraw/components/App.js

@@ -10,13 +10,13 @@ import { ActionManager } from "../actions/manager";
 import { actions } from "../actions/register";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
-import { copyTextToSystemClipboard, parseClipboard, } from "../clipboard";
+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 { exportAsImage, 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 { bindOrUnbindLinearElement, bindOrUnbindSelectedElements, fixBindingsAfterDeletion, fixBindingsAfterDuplication, getEligibleElementsForBinding, getHoveredElementForBinding, isBindingEnabled, isLinearElementSimpleAndAlreadyBound, maybeBindLinearElement, shouldEnableBindingForPointerEvent, unbindLinearElements, updateBoundElements, } from "../element/binding";
+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";
 import { deepCopyElement, duplicateElements, newFrameElement, newFreeDrawElement, newEmbeddableElement, newMagicFrameElement, newIframeElement, } from "../element/newElement";
@@ -37,7 +37,7 @@ import { getClosedCurveShape, getCurveShape, getEllipseShape, getFreedrawShape,
 import { isPointInShape } from "../../utils/collision";
 import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, normalizeEOL, getDateTime, isShallowEqual, arrayToMap, } from "../utils";
 import { createSrcDoc, embeddableURLValidator, maybeParseEmbedSrc, getEmbedLink, } from "../element/embeddable";
-import { ContextMenu, CONTEXT_MENU_SEPARATOR, } from "./ContextMenu";
+import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
@@ -63,7 +63,7 @@ import { getSnapLinesAtPointer, snapDraggedElements, isActiveToolNonLinearSnappa
 import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { activeEyeDropperAtom } from "./EyeDropper";
-import { convertToExcalidrawElements, } from "../data/transform";
+import { convertToExcalidrawElements } from "../data/transform";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
@@ -91,6 +91,7 @@ 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";
 const AppContext = React.createContext(null);
 const AppPropsContext = React.createContext(null);
 const deviceContextInitialValue = {
@@ -288,10 +289,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));
@@ -446,7 +444,7 @@ class App extends React.Component {
             return false;
         });
         if (updated) {
-            this.scene.informMutation();
+            this.scene.triggerUpdate();
         }
         // GC
         this.iFrameRefs.forEach((ref, id) => {
@@ -805,9 +803,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,
@@ -879,14 +877,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, 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();
@@ -944,7 +942,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
@@ -1464,7 +1462,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();
@@ -1502,6 +1500,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();
@@ -2350,7 +2349,7 @@ class App extends React.Component {
                 ShapeCache.delete(element);
             }
         });
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
         this.addNewImagesToImageCache();
     });
     updateScene = withBatchedUpdates((sceneData) => {
@@ -2384,7 +2383,7 @@ class App extends React.Component {
             this.setState({ collaborators: sceneData.collaborators });
         }
     });
-    onSceneUpdated = () => {
+    triggerRender = () => {
         this.setState({});
     };
     /**
@@ -2552,7 +2551,9 @@ class App extends React.Component {
                     simultaneouslyUpdated: selectedElements,
                 });
             });
-            this.maybeSuggestBindingForAll(selectedElements);
+            this.setState({
+                suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this),
+            });
             event.preventDefault();
         }
         else if (event.key === KEYS.ENTER) {
@@ -2690,11 +2691,7 @@ class App extends React.Component {
             this.setState({ isBindingEnabled: true });
         }
         if (isArrowKey(event.key)) {
-            const selectedElements = this.scene.getSelectedElements(this.state);
-            const elementsMap = this.scene.getNonDeletedElementsMap();
-            isBindingEnabled(this.state)
-                ? bindOrUnbindSelectedElements(selectedElements, this)
-                : unbindLinearElements(selectedElements, elementsMap);
+            bindOrUnbindLinearElements(this.scene.getSelectedElements(this.state).filter(isLinearElement), this, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
             this.setState({ suggestedBindings: [] });
         }
     });
@@ -2845,15 +2842,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;
@@ -2873,15 +2871,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) {
@@ -2920,7 +2918,7 @@ class App extends React.Component {
         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({
@@ -3715,7 +3713,7 @@ class App extends React.Component {
                 }
             }
             this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-            this.onSceneUpdated();
+            this.triggerRender();
         }
     };
     // set touch moving for mobile context menu
@@ -4993,7 +4991,9 @@ class App extends React.Component {
                     // able to select and interact with the text input
                     !this.state.editingFrame &&
                         dragSelectedElements(pointerDownState, selectedElements, dragOffset, this.state, this.scene, snapOffset, event[KEYS.CTRL_OR_CMD] ? null : this.state.gridSize);
-                    this.maybeSuggestBindingForAll(selectedElements);
+                    this.setState({
+                        suggestedBindings: getSuggestedBindingsForArrows(selectedElements, this),
+                    });
                     // We duplicate the selected element if alt is pressed on pointer move
                     if (event.altKey && !pointerDownState.hit.hasBeenDuplicated) {
                         // Move the currently selected elements to the top of the z index stack, and
@@ -5401,7 +5401,7 @@ class App extends React.Component {
                                         groupIds: [],
                                     });
                                     removeElementsFromFrame([linearElement], this.scene.getNonDeletedElementsMap());
-                                    this.scene.informMutation();
+                                    this.scene.triggerUpdate();
                                 }
                             }
                         }
@@ -5678,9 +5678,12 @@ class App extends React.Component {
                 this.store.shouldCaptureIncrement();
             }
             if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
-                isBindingEnabled(this.state)
-                    ? bindOrUnbindSelectedElements(this.scene.getSelectedElements(this.state), this)
-                    : unbindLinearElements(this.scene.getSelectedElements(this.state), elementsMap);
+                // We only allow binding via linear elements, specifically via dragging
+                // the endpoints ("start" or "end").
+                const linearElements = this.scene
+                    .getSelectedElements(this.state)
+                    .filter(isLinearElement);
+                bindOrUnbindLinearElements(linearElements, this, isBindingEnabled(this.state), this.state.selectedLinearElement?.selectedPointsIndices ?? []);
             }
             if (activeTool.type === "laser") {
                 this.laserTrails.endPath();
@@ -5715,7 +5718,7 @@ class App extends React.Component {
     }
     restoreReadyToEraseElements = () => {
         this.elementsPendingErasure = new Set();
-        this.onSceneUpdated();
+        this.triggerRender();
     };
     eraseElements = () => {
         let didChange = false;
@@ -6007,7 +6010,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();
             }
         }
     };
@@ -6047,13 +6050,6 @@ class App extends React.Component {
         }, []);
         this.setState({ suggestedBindings });
     };
-    maybeSuggestBindingForAll(selectedElements) {
-        if (selectedElements.length > 50) {
-            return;
-        }
-        const suggestedBindings = getEligibleElementsForBinding(selectedElements, this);
-        this.setState({ suggestedBindings });
-    }
     clearSelection(hitElement) {
         this.setState((prevState) => ({
             selectedElementIds: makeNextSelectedElementIds({}, prevState),
@@ -6323,7 +6319,6 @@ 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);
-            this.maybeSuggestBindingForAll([draggingElement]);
             // 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) {
@@ -6380,13 +6375,14 @@ class App extends React.Component {
         if (transformElements(pointerDownState.originalElements, transformHandleType, selectedElements, this.scene.getElementsMapIncludingDeleted(), shouldRotateWithDiscreteAngle(event), shouldResizeFromCenter(event), selectedElements.some((element) => isImageElement(element))
             ? !shouldMaintainAspectRatio(event)
             : shouldMaintainAspectRatio(event), resizeX, resizeY, pointerDownState.resize.center.x, pointerDownState.resize.center.y)) {
-            this.maybeSuggestBindingForAll(selectedElements);
+            const suggestedBindings = getSuggestedBindingsForArrows(selectedElements, this);
             const elementsToHighlight = new Set();
             selectedFrames.forEach((frame) => {
                 getElementsInResizingFrame(this.scene.getNonDeletedElements(), frame, this.state, this.scene.getNonDeletedElementsMap()).forEach((element) => elementsToHighlight.add(element));
             });
             this.setState({
                 elementsToHighlight: [...elementsToHighlight],
+                suggestedBindings,
             });
             return true;
         }
@@ -6431,6 +6427,7 @@ class App extends React.Component {
             return [actionCopy, ...options];
         }
         return [
+            CONTEXT_MENU_SEPARATOR,
             actionCut,
             actionCopy,
             actionPaste,
@@ -6443,6 +6440,7 @@ class App extends React.Component {
             actionPasteStyles,
             CONTEXT_MENU_SEPARATOR,
             actionGroup,
+            actionTextAutoResize,
             actionUnbindText,
             actionBindText,
             actionWrapTextInContainer,

package/dist/excalidraw/components/ColorPicker/ColorInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPickerType } from "./colorPickerUtils";
 interface ColorInputProps {
     color: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/ColorInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
 import { jotaiScope } from "../../jotai";
 import { KEYS } from "../../keys";

package/dist/excalidraw/components/ColorPicker/ColorPicker.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../../element/types";
-import { AppState } from "../../types";
-import { ColorPickerType } from "./colorPickerUtils";
-import { ColorTuple, ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { AppState } from "../../types";
+import type { ColorPickerType } from "./colorPickerUtils";
+import type { ColorTuple, ColorPaletteCustom } from "../../colors";
 import "./ColorPicker.scss";
 export declare const getColor: (color: string) => string | null;
 interface ColorPickerProps {

package/dist/excalidraw/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ import { TopPicks } from "./TopPicks";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { useDevice, useExcalidrawContainer } from "../App";
 import { COLOR_PALETTE } from "../../colors";
 import PickerHeading from "./PickerHeading";

package/dist/excalidraw/components/ColorPicker/Picker.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ExcalidrawElement } from "../../element/types";
-import { ColorPickerType } from "./colorPickerUtils";
-import { ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPaletteCustom } from "../../colors";
 interface PickerProps {
     color: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/PickerColorList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
+import type { ColorPaletteCustom } from "../../colors";
 interface PickerColorListProps {
     palette: ColorPaletteCustom;
     color: string;

package/dist/excalidraw/components/ColorPicker/PickerHeading.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const PickerHeading: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;

package/dist/excalidraw/components/ColorPicker/ShadeList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
+import type { ColorPaletteCustom } from "../../colors";
 interface ShadeListProps {
     hex: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/TopPicks.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPickerType } from "./colorPickerUtils";
 interface TopPicksProps {
     onChange: (color: string) => void;
     type: ColorPickerType;

package/dist/excalidraw/components/ColorPicker/colorPickerUtils.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from "../../element/types";
-import { ColorPickerColor, ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
 export declare const getColorNameAndShadeFromColor: ({ palette, color, }: {
     palette: ColorPaletteCustom;
     color: string;

package/dist/excalidraw/components/ColorPicker/colorPickerUtils.js

@@ -1,5 +1,5 @@
 import { atom } from "jotai";
-import { MAX_CUSTOM_COLORS_USED_IN_CANVAS, } from "../../colors";
+import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
 export const getColorNameAndShadeFromColor = ({ palette, color, }) => {
     for (const [colorName, colorVal] of Object.entries(palette)) {
         if (Array.isArray(colorVal)) {

package/dist/excalidraw/components/ColorPicker/keyboardNavHandlers.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
-import { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
+import type { ColorPaletteCustom } from "../../colors";
+import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
 interface ColorPickerKeyNavHandlerProps {
     event: React.KeyboardEvent;
     activeColorPickerSection: ActiveColorPickerSectionAtomType;

package/dist/excalidraw/components/ColorPicker/keyboardNavHandlers.js

@@ -1,5 +1,5 @@
 import { KEYS } from "../../keys";
-import { COLORS_PER_ROW, COLOR_PALETTE, } from "../../colors";
+import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
 import { colorPickerHotkeyBindings, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
 const arrowHandler = (eventKey, currentIndex, length) => {
     const rows = Math.ceil(length / COLORS_PER_ROW);

package/dist/excalidraw/components/CommandPalette/CommandPalette.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommandPaletteItem } from "./types";
+import type { CommandPaletteItem } from "./types";
 import * as defaultItems from "./defaultCommandPaletteItems";
 import "./CommandPalette.scss";
 export declare const DEFAULT_CATEGORIES: {

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

@@ -7,7 +7,7 @@ import { TextField } from "../TextField";
 import clsx from "clsx";
 import { getSelectedElements } from "../../scene";
 import { t } from "../../i18n";
-import { getShortcutFromShortcutName, } from "../../actions/shortcuts";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
 import { LockedIcon, UnlockedIcon, clockIcon, searchIcon, boltIcon, bucketFillIcon, ExportImageIcon, mermaidLogoIcon, brainIconThin, LibraryIcon, } from "../icons";
 import fuzzy from "fuzzy";
@@ -164,10 +164,10 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 actionManager.actions.deleteSelectedElements,
                 actionManager.actions.copyStyles,
                 actionManager.actions.pasteStyles,
+                actionManager.actions.bringToFront,
+                actionManager.actions.bringForward,
                 actionManager.actions.sendBackward,
                 actionManager.actions.sendToBack,
-                actionManager.actions.bringForward,
-                actionManager.actions.bringToFront,
                 actionManager.actions.alignTop,
                 actionManager.actions.alignBottom,
                 actionManager.actions.alignLeft,
@@ -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/CommandPalette/defaultCommandPaletteItems.d.ts

@@ -1,2 +1,2 @@
-import { CommandPaletteItem } from "./types";
+import type { CommandPaletteItem } from "./types";
 export declare const toggleTheme: CommandPaletteItem;

package/dist/excalidraw/components/CommandPalette/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { Action } from "../../actions/types";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { Action } from "../../actions/types";
+import type { UIAppState } from "../../types";
 export type CommandPaletteItem = {
     label: string;
     /** additional keywords to match against

package/dist/excalidraw/components/ConfirmDialog.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DialogProps } from "./Dialog";
+import type { DialogProps } from "./Dialog";
 import "./ConfirmDialog.scss";
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
     onConfirm: () => void;