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

package/dist/browser/dev/index.js

@@ -202,6 +202,7 @@ import {
   getLinkHandleFromCoords,
   getLockedLinearCursorAlignSize,
   getMaximumGroups,
+  getMinTextElementWidth,
   getNearestScrollableContainer,
   getNonDeletedElements,
   getNormalizedCanvasDimensions,
@@ -404,18 +405,17 @@ import {
   updateObject,
   updateOriginalContainerCache,
   updateStable,
-  updateTextElement,
   viewportCoordsToSceneCoords,
   wrapEvent,
   wrapText
-} from "./excalidraw-assets-dev/chunk-OKAZAA6U.js";
+} from "./excalidraw-assets-dev/chunk-VC7RRIDZ.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 +2679,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 +3781,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 +6070,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 +10598,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 +10645,7 @@ function IconPicker({
       "button",
       {
         name: group,
+        type: "button",
         className: isActive ? "active" : "",
         "aria-label": label,
         onClick: () => setActive(!isActive),
@@ -10710,7 +10717,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 +12504,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-J7S3ALXP.js").then(
           ({ encodePngMetadata }) => encodePngMetadata({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -12586,7 +12593,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 +14586,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 +14709,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 +17887,7 @@ var Dialog = (props) => {
             onClick: onClose,
             title: t("buttons.close"),
             "aria-label": t("buttons.close"),
+            type: "button",
             children: CloseIcon
           }
         ),
@@ -18814,6 +18833,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 +19310,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 +19481,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 +19856,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 +19869,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 +19894,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 +19907,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 +20123,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 +21099,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 +21162,7 @@ var ChartPreviewBtn = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "button",
     {
+      type: "button",
       className: "ChartPreview",
       onClick: () => {
         if (chartElements) {
@@ -24439,7 +24472,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 +24960,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 +25070,7 @@ var LayerUI = ({
             appState.scrolledOutside && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
               "button",
               {
+                type: "button",
                 className: "scroll-back-to-content",
                 onClick: () => {
                   setAppState((appState2) => ({
@@ -25173,13 +25207,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 +25239,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) => {
@@ -26301,7 +26324,7 @@ var getSnapLinesAtPointer = (elements, appState, pointer, event, elementsMap) =>
   };
 };
 var isActiveToolNonLinearSnappable = (activeToolType) => {
-  return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image;
+  return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image || activeToolType === TOOL_TYPE.text;
 };
 
 // components/BraveMeasureTextError.tsx
@@ -27138,7 +27161,7 @@ var renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding,
     fillCircle(context, x3, y3, threshold);
   });
 };
-var renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+var renderSelectionBorder = (context, appState, elementProperties) => {
   const {
     angle,
     elementX1,
@@ -27153,6 +27176,7 @@ var renderSelectionBorder = (context, appState, elementProperties, padding = DEF
   } = elementProperties;
   const elementWidth = elementX2 - elementX1;
   const elementHeight = elementY2 - elementY1;
+  const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
   const linePadding = padding / appState.zoom.value;
   const lineWidth = 8 / appState.zoom.value;
   const spaceWidth = 4 / appState.zoom.value;
@@ -27337,11 +27361,28 @@ var renderTransformHandles = (context, renderConfig, appState, transformHandles,
     }
   });
 };
+var renderTextBox = (text, context, appState, selectionColor) => {
+  context.save();
+  const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;
+  const width = text.width + padding * 2;
+  const height = text.height + padding * 2;
+  const cx = text.x + width / 2;
+  const cy = text.y + height / 2;
+  const shiftX = -(width / 2 + padding);
+  const shiftY = -(height / 2 + padding);
+  context.translate(cx + appState.scrollX, cy + appState.scrollY);
+  context.rotate(text.angle);
+  context.lineWidth = 1 / appState.zoom.value;
+  context.strokeStyle = selectionColor;
+  context.strokeRect(shiftX, shiftY, width, height);
+  context.restore();
+};
 var _renderInteractiveScene = ({
   canvas,
   elementsMap,
   visibleElements,
   selectedElements,
+  allElementsMap,
   scale,
   appState,
   renderConfig,
@@ -27380,11 +27421,27 @@ var _renderInteractiveScene = ({
   }
   if (appState.selectionElement) {
     try {
-      renderSelectionElement(appState.selectionElement, context, appState);
+      renderSelectionElement(
+        appState.selectionElement,
+        context,
+        appState,
+        renderConfig.selectionColor
+      );
     } catch (error) {
       console.error(error);
     }
   }
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
+    const textElement = allElementsMap.get(appState.editingElement.id);
+    if (textElement && !textElement.autoResize) {
+      renderTextBox(
+        textElement,
+        context,
+        appState,
+        renderConfig.selectionColor
+      );
+    }
+  }
   if (appState.isBindingEnabled) {
     appState.suggestedBindings.filter((binding) => binding != null).forEach((suggestedBinding) => {
       renderBindingHighlight(
@@ -27508,7 +27565,8 @@ var _renderInteractiveScene = ({
         // when we render we don't know which pointer type so use mouse,
         getOmitSidesForDevice(device)
       );
-      if (!appState.viewModeEnabled && showBoundingBox) {
+      if (!appState.viewModeEnabled && showBoundingBox && // do not show transform handles when text is being edited
+      !isTextElement(appState.editingElement)) {
         renderTransformHandles(
           context,
           renderConfig,
@@ -27667,6 +27725,7 @@ var InteractiveCanvas = (props) => {
         elementsMap: props.elementsMap,
         visibleElements: props.visibleElements,
         selectedElements: props.selectedElements,
+        allElementsMap: props.allElementsMap,
         scale: window.devicePixelRatio,
         appState: props.appState,
         renderConfig: {
@@ -27734,11 +27793,12 @@ var getRelevantAppStateProps = (appState) => ({
   // Necessary for collab. sessions
   activeEmbeddable: appState.activeEmbeddable,
   snapLines: appState.snapLines,
-  zenModeEnabled: appState.zenModeEnabled
+  zenModeEnabled: appState.zenModeEnabled,
+  editingElement: appState.editingElement
 });
 var areEqual2 = (prevProps, nextProps) => {
-  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.versionNonce !== nextProps.versionNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
-  // even if versionNonce didn't change (e.g. we filter elements out based
+  if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.sceneNonce !== nextProps.sceneNonce || prevProps.scale !== nextProps.scale || // we need to memoize on elementsMap because they may have renewed
+  // even if sceneNonce didn't change (e.g. we filter elements out based
   // on appState)
   prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements) {
     return false;
@@ -27824,8 +27884,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 +27969,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 +28197,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;
@@ -28765,7 +28832,8 @@ var textWysiwyg = ({
   element,
   canvas,
   excalidrawContainer,
-  app
+  app,
+  autoSelect = true
 }) => {
   const textPropertiesUpdated = (updatedTextElement, editable2) => {
     if (!editable2.style.fontFamily || !editable2.style.fontSize) {
@@ -28871,6 +28939,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 +28981,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";
   }
@@ -29079,6 +29149,10 @@ var textWysiwyg = ({
   };
   let submittedViaKeyboard = false;
   const handleSubmit = () => {
+    if (isDestroyed) {
+      return;
+    }
+    isDestroyed = true;
     cleanup();
     const updateElement = Scene_default.getScene(element)?.getElement(
       element.id
@@ -29086,13 +29160,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,16 +29193,11 @@ var textWysiwyg = ({
       );
     }
     onSubmit({
-      text,
       viaKeyboard: submittedViaKeyboard,
-      originalText: editable.value
+      nextOriginalText: editable.value
     });
   };
   const cleanup = () => {
-    if (isDestroyed) {
-      return;
-    }
-    isDestroyed = true;
     editable.onblur = null;
     editable.oninput = null;
     editable.onkeydown = null;
@@ -29180,9 +29247,15 @@ var textWysiwyg = ({
       editable.onblur = null;
       window.addEventListener("pointerup", bindBlurEvent);
       window.addEventListener("blur", handleSubmit);
+    } else if (event.target instanceof HTMLElement && !event.target.contains(editable) && // Vitest simply ignores stopPropagation, capture-mode, or rAF
+    // so without introducing crazier hacks, nothing we can do
+    !isTestEnv()) {
+      requestAnimationFrame(() => {
+        handleSubmit();
+      });
     }
   };
-  const unbindUpdate = Scene_default.getScene(element).addCallback(() => {
+  const unbindUpdate = Scene_default.getScene(element).onUpdate(() => {
     updateWysiwygStyle();
     const isColorPickerActive = !!document.activeElement?.closest(
       ".color-picker-content"
@@ -29192,7 +29265,9 @@ var textWysiwyg = ({
     }
   });
   let isDestroyed = false;
-  editable.select();
+  if (autoSelect) {
+    editable.select();
+  }
   bindBlurEvent();
   let observer = null;
   if (canvas && "ResizeObserver" in window) {
@@ -29203,7 +29278,10 @@ var textWysiwyg = ({
   } else {
     window.addEventListener("resize", updateWysiwygStyle);
   }
-  window.addEventListener("pointerdown", onPointerDown);
+  editable.onpointerdown = (event) => event.stopPropagation();
+  requestAnimationFrame(() => {
+    window.addEventListener("pointerdown", onPointerDown, { capture: true });
+  });
   window.addEventListener("wheel", stopEvent, {
     passive: false,
     capture: true
@@ -29212,6 +29290,72 @@ 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
+    };
+  }
+});
+
+// mermaid.ts
+init_define_import_meta_env();
+var isMaybeMermaidDefinition = (text) => {
+  const chartTypes = [
+    "flowchart",
+    "sequenceDiagram",
+    "classDiagram",
+    "stateDiagram",
+    "stateDiagram-v2",
+    "erDiagram",
+    "journey",
+    "gantt",
+    "pie",
+    "quadrantChart",
+    "requirementDiagram",
+    "gitGraph",
+    "C4Context",
+    "mindmap",
+    "timeline",
+    "zenuml",
+    "sankey",
+    "xychart",
+    "block"
+  ];
+  const re = new RegExp(
+    `^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes.map((x3) => `${x3}(-beta)?`).join("|")}\\b`
+  );
+  return re.test(text.trim());
+};
+
 // components/App.tsx
 var import_jsx_runtime128 = __toESM(require_jsx_runtime(), 1);
 var AppContext = import_react100.default.createContext(null);
@@ -29417,10 +29561,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 +29720,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 +30127,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 +30326,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,
@@ -30206,8 +30347,9 @@ var App = class _App extends import_react100.default.Component {
                             canvas: this.interactiveCanvas,
                             elementsMap,
                             visibleElements,
+                            allElementsMap,
                             selectedElements,
-                            versionNonce,
+                            sceneNonce,
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
@@ -30301,7 +30443,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 +30927,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 +30963,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();
@@ -30885,7 +31028,7 @@ var App = class _App extends import_react100.default.Component {
       addEventListener(document, "keyup" /* KEYUP */, this.onKeyUp, { passive: true }),
       addEventListener(
         document,
-        "mousemove" /* MOUSE_MOVE */,
+        "pointermove" /* POINTER_MOVE */,
         this.updateCurrentCursorPosition
       ),
       // rerender text elements on font load to fix #637 && #1553
@@ -30914,6 +31057,7 @@ var App = class _App extends import_react100.default.Component {
       ),
       addEventListener(window, "focus" /* FOCUS */, () => {
         this.maybeCleanupAfterMissingPointerUp(null);
+        this.triggerRender(true);
       })
     );
     if (this.state.viewModeEnabled) {
@@ -31245,6 +31389,27 @@ var App = class _App extends import_react100.default.Component {
           retainSeed: isPlainPaste
         });
       } else if (data.text) {
+        if (data.text && isMaybeMermaidDefinition(data.text)) {
+          const api = await import("./excalidraw-assets-dev/dist-6QVAH5JA.js");
+          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((s3) => s3.trim()).filter(Boolean);
         const embbeddableUrls = nonEmptyLines.map((str) => maybeParseEmbedSrc(str)).filter((string) => {
           return embeddableURLValidator(string, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) || getEmbedLink(string)?.type === "video");
@@ -31464,28 +31629,42 @@ var App = class _App extends import_react100.default.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, , x22] = getVisibleSceneBounds(this.state);
+    const maxTextWidth = Math.max(Math.min((x22 - x1) * 0.5, 800), 200);
     const LINE_GAP = 10;
     let currentY = y3;
     const lines = isPlainPaste ? [text] : text.split("\n");
     const textElements = lines.reduce(
       (acc, line, idx) => {
-        const text2 = line.trim();
-        const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
-        if (text2.length) {
+        const originalText = line.trim();
+        if (originalText.length) {
           const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
             x: x3,
             y: currentY
           });
+          let metrics = measureText(originalText, fontString, lineHeight);
+          const isTextWrapped = metrics.width > maxTextWidth;
+          const text2 = isTextWrapped ? wrapText(originalText, fontString, maxTextWidth) : originalText;
+          metrics = isTextWrapped ? measureText(text2, fontString, lineHeight) : metrics;
+          const startX = x3 - metrics.width / 2;
+          const startY = currentY - metrics.height / 2;
           const element = newTextElement({
             ...textElementProps,
-            x: x3,
-            y: currentY,
+            x: startX,
+            y: startY,
             text: text2,
+            originalText,
             lineHeight,
+            autoResize: !isTextWrapped,
             frameId: topLayerFrame ? topLayerFrame.id : null
           });
           acc.push(element);
@@ -31698,7 +31877,7 @@ var App = class _App extends import_react100.default.Component {
           ShapeCache.delete(element);
         }
       });
-      this.scene.informMutation();
+      this.scene.triggerUpdate();
       this.addNewImagesToImageCache();
     }
   );
@@ -31738,8 +31917,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 +32325,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 +32362,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) => ({
@@ -32218,10 +32402,15 @@ var App = class _App extends import_react100.default.Component {
       }),
       element,
       excalidrawContainer: this.excalidrawContainerRef.current,
-      app: this
+      app: this,
+      // when text is selected, it's hard (at least on iOS) to re-position the
+      // caret (i.e. deselect). There's not much use for always selecting
+      // the text on edit anyway (and users can select-all from contextmenu
+      // if needed)
+      autoSelect: !this.device.isTouchScreen
     });
     this.deselectElements();
-    updateElement(element.text, element.originalText, false);
+    updateElement(element.originalText, false);
   }
   deselectElements() {
     this.setState({
@@ -32420,7 +32609,8 @@ var App = class _App extends import_react100.default.Component {
     sceneX,
     sceneY,
     insertAtParentCenter = true,
-    container
+    container,
+    autoEdit = true
   }) => {
     let shouldBindToContainer = false;
     let parentCenterPosition = insertAtParentCenter && this.getTextWysiwygSnappedToCenterPosition(
@@ -32523,12 +32713,16 @@ var App = class _App extends import_react100.default.Component {
         this.scene.insertElement(element);
       }
     }
-    this.setState({
-      editingElement: element
-    });
-    this.handleTextWysiwyg(element, {
-      isExistingElement: !!existingTextElement
-    });
+    if (autoEdit || existingTextElement || container) {
+      this.handleTextWysiwyg(element, {
+        isExistingElement: !!existingTextElement
+      });
+    } else {
+      this.setState({
+        draggingElement: element,
+        multiElement: null
+      });
+    }
   };
   handleCanvasDoubleClick = (event) => {
     if (this.state.multiElement) {
@@ -32720,8 +32914,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 +33267,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
@@ -33264,7 +33461,6 @@ var App = class _App extends import_react100.default.Component {
     }
     if (this.state.activeTool.type === "text") {
       this.handleTextOnPointerDown(event, pointerDownState);
-      return;
     } else if (this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line") {
       this.handleLinearElementOnPointerDown(
         event,
@@ -33834,7 +34030,8 @@ var App = class _App extends import_react100.default.Component {
       sceneX,
       sceneY,
       insertAtParentCenter: !event.altKey,
-      container
+      container,
+      autoEdit: false
     });
     resetCursor(this.interactiveCanvas);
     if (!this.state.activeTool.locked) {
@@ -34839,6 +35036,24 @@ var App = class _App extends import_react100.default.Component {
         }
         return;
       }
+      if (isTextElement(draggingElement)) {
+        const minWidth = getMinTextElementWidth(
+          getFontString({
+            fontSize: draggingElement.fontSize,
+            fontFamily: draggingElement.fontFamily
+          }),
+          draggingElement.lineHeight
+        );
+        if (draggingElement.width < minWidth) {
+          mutateElement(draggingElement, {
+            autoResize: true
+          });
+        }
+        this.resetCursor();
+        this.handleTextWysiwyg(draggingElement, {
+          isExistingElement: true
+        });
+      }
       if (activeTool.type !== "selection" && draggingElement && isInvisiblySmallElement(draggingElement)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== draggingElement.id),
@@ -34874,7 +35089,7 @@ var App = class _App extends import_react100.default.Component {
                     [linearElement],
                     this.scene.getNonDeletedElementsMap()
                   );
-                  this.scene.informMutation();
+                  this.scene.triggerUpdate();
                 }
               }
             }
@@ -35227,7 +35442,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 +35757,7 @@ var App = class _App extends import_react100.default.Component {
         files
       );
       if (updatedFiles.size) {
-        this.scene.informMutation();
+        this.scene.triggerUpdate();
       }
     }
   };
@@ -35828,7 +36043,8 @@ var App = class _App extends import_react100.default.Component {
         distance(pointerDownState.origin.x, pointerCoords.x),
         distance(pointerDownState.origin.y, pointerCoords.y),
         shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter(event)
+        shouldResizeFromCenter(event),
+        this.state.zoom.value
       );
     } else {
       let [gridX, gridY] = getGridPoint(
@@ -35869,6 +36085,7 @@ var App = class _App extends import_react100.default.Component {
         distance(pointerDownState.originInGrid.y, gridY),
         isImageElement(draggingElement) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
         shouldResizeFromCenter(event),
+        this.state.zoom.value,
         aspectRatio,
         this.state.originSnapOffset
       );
@@ -36015,6 +36232,7 @@ var App = class _App extends import_react100.default.Component {
       return [actionCopy, ...options];
     }
     return [
+      CONTEXT_MENU_SEPARATOR,
       actionCut,
       actionCopy,
       actionPaste,
@@ -36027,6 +36245,7 @@ var App = class _App extends import_react100.default.Component {
       actionPasteStyles,
       CONTEXT_MENU_SEPARATOR,
       actionGroup,
+      actionTextAutoResize,
       actionUnbindText,
       actionBindText,
       actionWrapTextInContainer,