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

package/dist/browser/dev/index.js

@@ -404,18 +404,17 @@ import {
   updateObject,
   updateOriginalContainerCache,
   updateStable,
-  updateTextElement,
   viewportCoordsToSceneCoords,
   wrapEvent,
   wrapText
-} from "./excalidraw-assets-dev/chunk-OKAZAA6U.js";
+} from "./excalidraw-assets-dev/chunk-Q6NFAEKN.js";
 import {
   define_import_meta_env_default,
   init_define_import_meta_env
 } from "./excalidraw-assets-dev/chunk-YRUDZAGT.js";
 import {
   en_default
-} from "./excalidraw-assets-dev/chunk-JKPJV7MZ.js";
+} from "./excalidraw-assets-dev/chunk-Q6A4M3MN.js";
 import {
   percentages_default
 } from "./excalidraw-assets-dev/chunk-YZTYRBEQ.js";
@@ -2679,7 +2678,7 @@ var globImport_locales_json = __glob({
   "./locales/da-DK.json": () => import("./excalidraw-assets-dev/da-DK-6OKJ2GQ6.js"),
   "./locales/de-DE.json": () => import("./excalidraw-assets-dev/de-DE-BD5ICOQ2.js"),
   "./locales/el-GR.json": () => import("./excalidraw-assets-dev/el-GR-JFDBTDHS.js"),
-  "./locales/en.json": () => import("./excalidraw-assets-dev/en-BF4XUPIZ.js"),
+  "./locales/en.json": () => import("./excalidraw-assets-dev/en-Y27YPU72.js"),
   "./locales/es-ES.json": () => import("./excalidraw-assets-dev/es-ES-CBBTGYGR.js"),
   "./locales/eu-ES.json": () => import("./excalidraw-assets-dev/eu-ES-CHAPMSLE.js"),
   "./locales/fa-IR.json": () => import("./excalidraw-assets-dev/fa-IR-LOJOKEJO.js"),
@@ -3781,12 +3780,16 @@ var arrownNarrowUpJSX = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { str
 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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
@@ -6066,6 +6069,7 @@ var ButtonIconSelect = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("
   (option) => props.type === "button" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
     {
+      type: "button",
       onClick: (event) => props.onClick(option.value, event),
       className: clsx_m_default({
         active: option.active ?? props.value === option.value
@@ -10593,6 +10597,7 @@ function Picker2({
       children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "picker-content", ref: rGallery, children: options.map((option, i3) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "button",
         {
+          type: "button",
           className: clsx_m_default("picker-option", {
             active: value === option.value
           }),
@@ -10639,6 +10644,7 @@ function IconPicker({
       "button",
       {
         name: group,
+        type: "button",
         className: isActive ? "active" : "",
         "aria-label": label,
         onClick: () => setActive(!isActive),
@@ -10710,7 +10716,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(
@@ -12497,7 +12503,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./excalidraw-assets-dev/image-LVS32KQQ.js").then(
+        (blob2) => import("./excalidraw-assets-dev/image-Y5X7K6KW.js").then(
           ({ encodePngMetadata }) => encodePngMetadata({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -12586,7 +12592,16 @@ var CheckboxItem = ({ children, checked, onChange, className }) => {
         ).focus();
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "Checkbox-box",
+            role: "checkbox",
+            "aria-checked": checked,
+            children: checkIcon
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "Checkbox-label", children })
       ]
     }
@@ -14570,7 +14585,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({
@@ -14692,7 +14708,8 @@ var actionWrapTextInContainer = register({
             containerId: container.id,
             verticalAlign: VERTICAL_ALIGN.MIDDLE,
             boundElements: null,
-            textAlign: TEXT_ALIGN.CENTER
+            textAlign: TEXT_ALIGN.CENTER,
+            autoResize: true
           },
           false
         );
@@ -17869,6 +17886,7 @@ var Dialog = (props) => {
             onClick: onClose,
             title: t("buttons.close"),
             "aria-label": t("buttons.close"),
+            type: "button",
             children: CloseIcon
           }
         ),
@@ -18814,6 +18832,7 @@ var ExitZenModeAction = ({
 }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
   "button",
   {
+    type: "button",
     className: clsx_m_default("disable-zen-mode", {
       "disable-zen-mode--visible": showExitZenModeBtn
     }),
@@ -19290,7 +19309,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);
@@ -19461,7 +19480,9 @@ function CommandPaletteInner({
       setCurrentCommand(showLastUsed ? lastUsed : matchingCommands[0] || null);
       return;
     }
-    const _query = deburr(commandSearch.replace(/[<>-_| ]/g, ""));
+    const _query = deburr(
+      commandSearch.toLocaleLowerCase().replace(/[<>_| -]/g, "")
+    );
     matchingCommands = import_fuzzy.default.filter(_query, matchingCommands, {
       extract: (command) => command.haystack
     }).sort((a3, b3) => b3.score - a3.score).map((item) => item.original);
@@ -19834,7 +19855,10 @@ var createUndoAction = (history, store) => ({
   PanelComponent: ({ updateData, data }) => {
     const { isUndoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
-      new HistoryChangedEvent()
+      new HistoryChangedEvent(
+        history.isUndoStackEmpty,
+        history.isRedoStackEmpty
+      )
     );
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       ToolButton,
@@ -19844,7 +19868,8 @@ var createUndoAction = (history, store) => ({
         "aria-label": t("buttons.undo"),
         onClick: updateData,
         size: data?.size || "medium",
-        disabled: isUndoStackEmpty
+        disabled: isUndoStackEmpty,
+        "data-testid": "button-undo"
       }
     );
   }
@@ -19868,7 +19893,10 @@ var createRedoAction = (history, store) => ({
   PanelComponent: ({ updateData, data }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
-      new HistoryChangedEvent()
+      new HistoryChangedEvent(
+        history.isUndoStackEmpty,
+        history.isRedoStackEmpty
+      )
     );
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       ToolButton,
@@ -19878,7 +19906,8 @@ var createRedoAction = (history, store) => ({
         "aria-label": t("buttons.redo"),
         onClick: updateData,
         size: data?.size || "medium",
-        disabled: isRedoStackEmpty
+        disabled: isRedoStackEmpty,
+        "data-testid": "button-redo"
       }
     );
   }
@@ -20093,6 +20122,7 @@ var ContextMenu = import_react71.default.memo(
                   children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
                     "button",
                     {
+                      type: "button",
                       className: clsx_m_default("context-menu-item", {
                         dangerous: actionName === "deleteSelectedElements",
                         checkmark: item.checked?.(appState)
@@ -21068,6 +21098,7 @@ var MobileMenu = ({
             appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -21130,6 +21161,7 @@ var ChartPreviewBtn = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "button",
     {
+      type: "button",
       className: "ChartPreview",
       onClick: () => {
         if (chartElements) {
@@ -24439,7 +24471,7 @@ TTD mermaid definition render errror: ${error3.message}`,
     refOnGenerate.current = onGenerate;
     const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = (0, import_react93.useState)({
       loaded: false,
-      api: import("./excalidraw-assets-dev/dist-ITJNUBZF.js")
+      api: import("./excalidraw-assets-dev/dist-6QVAH5JA.js")
     });
     (0, import_react93.useEffect)(() => {
       const fn = async () => {
@@ -24927,7 +24959,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
@@ -25037,6 +25069,7 @@ var LayerUI = ({
             appState.scrolledOutside && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -25173,13 +25206,8 @@ var import_lodash2 = __toESM(require_lodash(), 1);
 init_define_import_meta_env();
 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
@@ -25210,21 +25238,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) => {
@@ -27737,8 +27759,8 @@ var getRelevantAppStateProps = (appState) => ({
   zenModeEnabled: appState.zenModeEnabled
 });
 var areEqual2 = (prevProps, nextProps) => {
-  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
-  // even if versionNonce didn't change (e.g. we filter elements out based
+  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
+  // even if sceneNonce didn't change (e.g. we filter elements out based
   // on appState)
   prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements) {
     return false;
@@ -27824,8 +27846,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;
@@ -27909,9 +27931,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({
@@ -28138,7 +28159,15 @@ var FollowMode = ({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })
+    /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onDisconnect,
+        className: "follow-mode__disconnect-btn",
+        children: CloseIcon
+      }
+    )
   ] }) });
 };
 var FollowMode_default = FollowMode;
@@ -28871,6 +28900,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, {
@@ -28911,7 +28942,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";
   }
@@ -29086,13 +29117,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) {
@@ -29121,9 +29150,8 @@ var textWysiwyg = ({
       );
     }
     onSubmit({
-      text,
       viaKeyboard: submittedViaKeyboard,
-      originalText: editable.value
+      nextOriginalText: editable.value
     });
   };
   const cleanup = () => {
@@ -29182,7 +29210,7 @@ var textWysiwyg = ({
       window.addEventListener("blur", handleSubmit);
     }
   };
-  const unbindUpdate = Scene_default.getScene(element).addCallback(() => {
+  const unbindUpdate = Scene_default.getScene(element).onUpdate(() => {
     updateWysiwygStyle();
     const isColorPickerActive = !!document.activeElement?.closest(
       ".color-picker-content"
@@ -29212,6 +29240,42 @@ var textWysiwyg = ({
   excalidrawContainer?.querySelector(".excalidraw-textEditorContainer").appendChild(editable);
 };
 
+// actions/actionTextAutoResize.ts
+init_define_import_meta_env();
+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
 var import_jsx_runtime128 = __toESM(require_jsx_runtime(), 1);
 var AppContext = import_react100.default.createContext(null);
@@ -29417,10 +29481,7 @@ var App = class _App extends import_react100.default.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(
@@ -29579,7 +29640,7 @@ var App = class _App extends import_react100.default.Component {
       return false;
     });
     if (updated) {
-      this.scene.informMutation();
+      this.scene.triggerUpdate();
     }
     this.iFrameRefs.forEach((ref, id) => {
       if (!iframeLikes.has(id)) {
@@ -29986,9 +30047,9 @@ var App = class _App extends import_react100.default.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,
@@ -30185,7 +30246,7 @@ var App = class _App extends import_react100.default.Component {
                             elementsMap,
                             allElementsMap,
                             visibleElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -30207,7 +30268,7 @@ var App = class _App extends import_react100.default.Component {
                             elementsMap,
                             visibleElements,
                             selectedElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -30301,7 +30362,7 @@ var App = class _App extends import_react100.default.Component {
       );
     }
     this.magicGenerations.set(frameElement.id, data);
-    this.onSceneUpdated();
+    this.triggerRender();
   };
   getTextFromElements(elements) {
     const text = elements.reduce((acc, element) => {
@@ -30785,7 +30846,7 @@ var App = class _App extends import_react100.default.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();
@@ -30821,6 +30882,7 @@ var App = class _App extends import_react100.default.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();
@@ -30914,6 +30976,7 @@ var App = class _App extends import_react100.default.Component {
       ),
       addEventListener(window, "focus" /* FOCUS */, () => {
         this.maybeCleanupAfterMissingPointerUp(null);
+        this.triggerRender(true);
       })
     );
     if (this.state.viewModeEnabled) {
@@ -31698,7 +31761,7 @@ var App = class _App extends import_react100.default.Component {
           ShapeCache.delete(element);
         }
       });
-      this.scene.informMutation();
+      this.scene.triggerUpdate();
       this.addNewImagesToImageCache();
     }
   );
@@ -31738,8 +31801,12 @@ var App = class _App extends import_react100.default.Component {
       }
     }
   );
-  onSceneUpdated = () => {
-    this.setState({});
+  triggerRender = (force) => {
+    if (force === true) {
+      this.scene.triggerUpdate();
+    } else {
+      this.setState({});
+    }
   };
   /**
    * @returns whether the menu was toggled on or off
@@ -32142,21 +32209,22 @@ var App = class _App extends import_react100.default.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;
         })
@@ -32178,15 +32246,15 @@ var App = class _App extends import_react100.default.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) => ({
@@ -32221,7 +32289,7 @@ var App = class _App extends import_react100.default.Component {
       app: this
     });
     this.deselectElements();
-    updateElement(element.text, element.originalText, false);
+    updateElement(element.originalText, false);
   }
   deselectElements() {
     this.setState({
@@ -32720,8 +32788,11 @@ var App = class _App extends import_react100.default.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
         });
       });
@@ -33070,7 +33141,7 @@ var App = class _App extends import_react100.default.Component {
         }
       }
       this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-      this.onSceneUpdated();
+      this.triggerRender();
     }
   };
   // set touch moving for mobile context menu
@@ -34874,7 +34945,7 @@ var App = class _App extends import_react100.default.Component {
                     [linearElement],
                     this.scene.getNonDeletedElementsMap()
                   );
-                  this.scene.informMutation();
+                  this.scene.triggerUpdate();
                 }
               }
             }
@@ -35227,7 +35298,7 @@ var App = class _App extends import_react100.default.Component {
   }
   restoreReadyToEraseElements = () => {
     this.elementsPendingErasure = /* @__PURE__ */ new Set();
-    this.onSceneUpdated();
+    this.triggerRender();
   };
   eraseElements = () => {
     let didChange = false;
@@ -35542,7 +35613,7 @@ var App = class _App extends import_react100.default.Component {
         files
       );
       if (updatedFiles.size) {
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
       }
     }
   };
@@ -36015,6 +36086,7 @@ var App = class _App extends import_react100.default.Component {
       return [actionCopy, ...options];
     }
     return [
+      CONTEXT_MENU_SEPARATOR,
       actionCut,
       actionCopy,
       actionPaste,
@@ -36027,6 +36099,7 @@ var App = class _App extends import_react100.default.Component {
       actionPasteStyles,
       CONTEXT_MENU_SEPARATOR,
       actionGroup,
+      actionTextAutoResize,
       actionUnbindText,
       actionBindText,
       actionWrapTextInContainer,