@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/actions/actionProperties.js

@@ -1,25 +1,29 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS, DEFAULT_ELEMENT_STROKE_COLOR_PALETTE, DEFAULT_ELEMENT_STROKE_PICKS, } from "../colors";
 import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
+import { FontPicker } from "../components/FontPicker/FontPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
-import { ArrowheadArrowIcon, ArrowheadBarIcon, ArrowheadCircleIcon, ArrowheadTriangleIcon, ArrowheadNoneIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, EdgeSharpIcon, EdgeRoundIcon, FreedrawIcon, FontFamilyNormalIcon, FontFamilyCodeIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FillZigZagIcon, ArrowheadTriangleOutlineIcon, ArrowheadCircleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, fontSizeIcon, } from "../components/icons";
+import { ArrowheadArrowIcon, ArrowheadBarIcon, ArrowheadCircleIcon, ArrowheadTriangleIcon, ArrowheadNoneIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, EdgeSharpIcon, EdgeRoundIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FillZigZagIcon, ArrowheadTriangleOutlineIcon, ArrowheadCircleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, fontSizeIcon, } from "../components/icons";
 import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, FONT_FAMILY, ROUNDNESS, STROKE_WIDTH, VERTICAL_ALIGN, } from "../constants";
 import { getNonDeletedElements, isTextElement, redrawTextBoundingBox, } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getBoundTextElement, getDefaultLineHeight, } from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
 import { isBoundToContainer, isLinearElement, isUsingAdaptiveRadius, } from "../element/typeChecks";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import { canHaveArrowheads, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, isSomeElementSelected, } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { arrayToMap, getFontFamilyString, getShortcutKey } from "../utils";
 import { register } from "./register";
+import { StoreAction } from "../store";
+import { Fonts, getLineHeight } from "../fonts";
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 export const changeProperty = (elements, appState, callback, includeBoundText = false) => {
     const selectedElementIds = arrayToMap(getSelectedElements(elements, appState, {
@@ -59,7 +63,7 @@ export const getFormValue = function (elements, appState, getAttribute, isReleva
     return ret;
 };
 const offsetElementAfterFontResize = (prevElement, nextElement) => {
-    if (isBoundToContainer(nextElement)) {
+    if (isBoundToContainer(nextElement) || !nextElement.autoResize) {
         return nextElement;
     }
     return mutateElement(nextElement, {
@@ -97,7 +101,7 @@ const changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue)
                 ? [...newFontSizes][0]
                 : fallbackValue ?? appState.currentItemFontSize,
         },
-        commitToHistory: true,
+        storeAction: StoreAction.CAPTURE,
     };
 };
 // -----------------------------------------------------------------------------
@@ -120,7 +124,9 @@ export const actionChangeStrokeColor = register({
                 ...appState,
                 ...value,
             },
-            commitToHistory: !!value.currentItemStrokeColor,
+            storeAction: !!value.currentItemStrokeColor
+                ? StoreAction.CAPTURE
+                : StoreAction.NONE,
         };
     },
     PanelComponent: ({ elements, appState, updateData, appProps }) => (_jsxs(_Fragment, { children: [_jsx("h3", { "aria-hidden": "true", children: t("labels.stroke") }), _jsx(ColorPicker, { topPicks: DEFAULT_ELEMENT_STROKE_PICKS, palette: DEFAULT_ELEMENT_STROKE_COLOR_PALETTE, type: "elementStroke", label: t("labels.stroke"), color: getFormValue(elements, appState, (element) => element.strokeColor, true, appState.currentItemStrokeColor), onChange: (color) => updateData({ currentItemStrokeColor: color }), elements: elements, appState: appState, updateData: updateData })] })),
@@ -140,7 +146,9 @@ export const actionChangeBackgroundColor = register({
                 ...appState,
                 ...value,
             },
-            commitToHistory: !!value.currentItemBackgroundColor,
+            storeAction: !!value.currentItemBackgroundColor
+                ? StoreAction.CAPTURE
+                : StoreAction.NONE,
         };
     },
     PanelComponent: ({ elements, appState, updateData, appProps }) => (_jsxs(_Fragment, { children: [_jsx("h3", { "aria-hidden": "true", children: t("labels.background") }), _jsx(ColorPicker, { topPicks: DEFAULT_ELEMENT_BACKGROUND_PICKS, palette: DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE, type: "elementBackground", label: t("labels.background"), color: getFormValue(elements, appState, (element) => element.backgroundColor, true, appState.currentItemBackgroundColor), onChange: (color) => updateData({ currentItemBackgroundColor: color }), elements: elements, appState: appState, updateData: updateData })] })),
@@ -156,7 +164,7 @@ export const actionChangeFillStyle = register({
                 fillStyle: value,
             })),
             appState: { ...appState, currentItemFillStyle: value },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => {
@@ -203,7 +211,7 @@ export const actionChangeStrokeWidth = register({
                 strokeWidth: value,
             })),
             appState: { ...appState, currentItemStrokeWidth: value },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.strokeWidth") }), _jsx(ButtonIconSelect, { group: "stroke-width", options: [
@@ -238,7 +246,7 @@ export const actionChangeSloppiness = register({
                 roughness: value,
             })),
             appState: { ...appState, currentItemRoughness: value },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.sloppiness") }), _jsx(ButtonIconSelect, { group: "sloppiness", options: [
@@ -269,7 +277,7 @@ export const actionChangeStrokeStyle = register({
                 strokeStyle: value,
             })),
             appState: { ...appState, currentItemStrokeStyle: value },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.strokeStyle") }), _jsx(ButtonIconSelect, { group: "strokeStyle", options: [
@@ -300,7 +308,7 @@ export const actionChangeOpacity = register({
                 opacity: value,
             }), true),
             appState: { ...appState, currentItemOpacity: value },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => (_jsxs("label", { className: "control-label", children: [t("labels.opacity"), _jsx("input", { type: "range", min: "0", max: "100", step: "10", onChange: (event) => updateData(+event.target.value), value: getFormValue(elements, appState, (element) => element.opacity, true, appState.currentItemOpacity) ?? undefined })] })),
@@ -389,59 +397,253 @@ export const actionChangeFontFamily = register({
     label: "labels.fontFamily",
     trackEvent: false,
     perform: (elements, appState, value, app) => {
-        return {
-            elements: changeProperty(elements, appState, (oldElement) => {
-                if (isTextElement(oldElement)) {
-                    const newElement = newElementWith(oldElement, {
-                        fontFamily: value,
-                        lineHeight: getDefaultLineHeight(value),
+        const { cachedElements, resetAll, resetContainers, ...nextAppState } = value;
+        if (resetAll) {
+            const nextElements = changeProperty(elements, appState, (element) => {
+                const cachedElement = cachedElements?.get(element.id);
+                if (cachedElement) {
+                    const newElement = newElementWith(element, {
+                        ...cachedElement,
                     });
-                    redrawTextBoundingBox(newElement, app.scene.getContainerElement(oldElement), app.scene.getNonDeletedElementsMap());
                     return newElement;
                 }
-                return oldElement;
-            }, true),
+                return element;
+            }, true);
+            return {
+                elements: nextElements,
+                appState: {
+                    ...appState,
+                    ...nextAppState,
+                },
+                storeAction: StoreAction.UPDATE,
+            };
+        }
+        const { currentItemFontFamily, currentHoveredFontFamily } = value;
+        let nexStoreAction = StoreAction.NONE;
+        let nextFontFamily;
+        let skipOnHoverRender = false;
+        if (currentItemFontFamily) {
+            nextFontFamily = currentItemFontFamily;
+            nexStoreAction = StoreAction.CAPTURE;
+        }
+        else if (currentHoveredFontFamily) {
+            nextFontFamily = currentHoveredFontFamily;
+            nexStoreAction = StoreAction.NONE;
+            const selectedTextElements = getSelectedElements(elements, appState, {
+                includeBoundTextElement: true,
+            }).filter((element) => isTextElement(element));
+            // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined
+            if (selectedTextElements.length > 200) {
+                skipOnHoverRender = true;
+            }
+            else {
+                let i = 0;
+                let textLengthAccumulator = 0;
+                while (i < selectedTextElements.length &&
+                    textLengthAccumulator < 5000) {
+                    const textElement = selectedTextElements[i];
+                    textLengthAccumulator += textElement?.originalText.length || 0;
+                    i++;
+                }
+                if (textLengthAccumulator > 5000) {
+                    skipOnHoverRender = true;
+                }
+            }
+        }
+        const result = {
             appState: {
                 ...appState,
-                currentItemFontFamily: value,
+                ...nextAppState,
             },
-            commitToHistory: true,
+            storeAction: nexStoreAction,
         };
+        if (nextFontFamily && !skipOnHoverRender) {
+            const elementContainerMapping = new Map();
+            let uniqueGlyphs = new Set();
+            let skipFontFaceCheck = false;
+            const fontsCache = Array.from(Fonts.loadedFontsCache.values());
+            const fontFamily = Object.entries(FONT_FAMILY).find(([_, value]) => value === nextFontFamily)?.[0];
+            // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)
+            if (currentHoveredFontFamily &&
+                fontFamily &&
+                fontsCache.some((sig) => sig.startsWith(fontFamily))) {
+                skipFontFaceCheck = true;
+            }
+            // following causes re-render so make sure we changed the family
+            // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg
+            Object.assign(result, {
+                elements: changeProperty(elements, appState, (oldElement) => {
+                    if (isTextElement(oldElement) &&
+                        (oldElement.fontFamily !== nextFontFamily ||
+                            currentItemFontFamily) // force update on selection
+                    ) {
+                        const newElement = newElementWith(oldElement, {
+                            fontFamily: nextFontFamily,
+                            lineHeight: getLineHeight(nextFontFamily),
+                        });
+                        const cachedContainer = cachedElements?.get(oldElement.containerId || "") || {};
+                        const container = app.scene.getContainerElement(oldElement);
+                        if (resetContainers && container && cachedContainer) {
+                            // reset the container back to it's cached version
+                            mutateElement(container, { ...cachedContainer }, false);
+                        }
+                        if (!skipFontFaceCheck) {
+                            uniqueGlyphs = new Set([
+                                ...uniqueGlyphs,
+                                ...Array.from(newElement.originalText),
+                            ]);
+                        }
+                        elementContainerMapping.set(newElement, container);
+                        return newElement;
+                    }
+                    return oldElement;
+                }, true),
+            });
+            // size is irrelevant, but necessary
+            const fontString = `10px ${getFontFamilyString({
+                fontFamily: nextFontFamily,
+            })}`;
+            const glyphs = Array.from(uniqueGlyphs.values()).join();
+            if (skipFontFaceCheck ||
+                window.document.fonts.check(fontString, glyphs)) {
+                // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded
+                for (const [element, container] of elementContainerMapping) {
+                    // trigger synchronous redraw
+                    redrawTextBoundingBox(element, container, app.scene.getNonDeletedElementsMap(), false);
+                }
+            }
+            else {
+                // otherwise try to load all font faces for the given glyphs and redraw elements once our font faces loaded
+                window.document.fonts.load(fontString, glyphs).then((fontFaces) => {
+                    for (const [element, container] of elementContainerMapping) {
+                        // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)
+                        const latestElement = app.scene.getElement(element.id);
+                        const latestContainer = container
+                            ? app.scene.getElement(container.id)
+                            : null;
+                        if (latestElement) {
+                            // trigger async redraw
+                            redrawTextBoundingBox(latestElement, latestContainer, app.scene.getNonDeletedElementsMap(), false);
+                        }
+                    }
+                    // trigger update once we've mutated all the elements, which also updates our cache
+                    app.fonts.onLoaded(fontFaces);
+                });
+            }
+        }
+        return result;
     },
-    PanelComponent: ({ elements, appState, updateData, app }) => {
-        const options = [
-            {
-                value: FONT_FAMILY.Virgil,
-                text: t("labels.handDrawn"),
-                icon: FreedrawIcon,
-                testId: "font-family-virgil",
-            },
-            {
-                value: FONT_FAMILY.Helvetica,
-                text: t("labels.normal"),
-                icon: FontFamilyNormalIcon,
-                testId: "font-family-normal",
-            },
-            {
-                value: FONT_FAMILY.Cascadia,
-                text: t("labels.code"),
-                icon: FontFamilyCodeIcon,
-                testId: "font-family-code",
-            },
-        ];
-        return (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.fontFamily") }), _jsx(ButtonIconSelect, { group: "font-family", options: options, value: getFormValue(elements, appState, (element) => {
-                        if (isTextElement(element)) {
-                            return element.fontFamily;
+    PanelComponent: ({ elements, appState, app, updateData }) => {
+        const cachedElementsRef = useRef(new Map());
+        const prevSelectedFontFamilyRef = useRef(null);
+        // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
+        const [batchedData, setBatchedData] = useState({});
+        const isUnmounted = useRef(true);
+        const selectedFontFamily = useMemo(() => {
+            const getFontFamily = (elementsArray, elementsMap) => getFormValue(elementsArray, appState, (element) => {
+                if (isTextElement(element)) {
+                    return element.fontFamily;
+                }
+                const boundTextElement = getBoundTextElement(element, elementsMap);
+                if (boundTextElement) {
+                    return boundTextElement.fontFamily;
+                }
+                return null;
+            }, (element) => isTextElement(element) ||
+                getBoundTextElement(element, elementsMap) !== null, (hasSelection) => hasSelection
+                ? null
+                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY);
+            // popup opened, use cached elements
+            if (batchedData.openPopup === "fontFamily" &&
+                appState.openPopup === "fontFamily") {
+                return getFontFamily(Array.from(cachedElementsRef.current?.values() ?? []), cachedElementsRef.current);
+            }
+            // popup closed, use all elements
+            if (!batchedData.openPopup && appState.openPopup !== "fontFamily") {
+                return getFontFamily(elements, app.scene.getNonDeletedElementsMap());
+            }
+            // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had
+            return prevSelectedFontFamilyRef.current;
+        }, [batchedData.openPopup, appState, elements, app.scene]);
+        useEffect(() => {
+            prevSelectedFontFamilyRef.current = selectedFontFamily;
+        }, [selectedFontFamily]);
+        useEffect(() => {
+            if (Object.keys(batchedData).length) {
+                updateData(batchedData);
+                // reset the data after we've used the data
+                setBatchedData({});
+            }
+            // call update only on internal state changes
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [batchedData]);
+        useEffect(() => {
+            isUnmounted.current = false;
+            return () => {
+                isUnmounted.current = true;
+            };
+        }, []);
+        return (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.fontFamily") }), _jsx(FontPicker, { isOpened: appState.openPopup === "fontFamily", selectedFontFamily: selectedFontFamily, hoveredFontFamily: appState.currentHoveredFontFamily, onSelect: (fontFamily) => {
+                        setBatchedData({
+                            openPopup: null,
+                            currentHoveredFontFamily: null,
+                            currentItemFontFamily: fontFamily,
+                        });
+                        // defensive clear so immediate close won't abuse the cached elements
+                        cachedElementsRef.current.clear();
+                    }, onHover: (fontFamily) => {
+                        setBatchedData({
+                            currentHoveredFontFamily: fontFamily,
+                            cachedElements: new Map(cachedElementsRef.current),
+                            resetContainers: true,
+                        });
+                    }, onLeave: () => {
+                        setBatchedData({
+                            currentHoveredFontFamily: null,
+                            cachedElements: new Map(cachedElementsRef.current),
+                            resetAll: true,
+                        });
+                    }, onPopupChange: (open) => {
+                        if (open) {
+                            // open, populate the cache from scratch
+                            cachedElementsRef.current.clear();
+                            const { editingElement } = appState;
+                            if (editingElement?.type === "text") {
+                                // retrieve the latest version from the scene, as `editingElement` isn't mutated
+                                const latestEditingElement = app.scene.getElement(editingElement.id);
+                                // inside the wysiwyg editor
+                                cachedElementsRef.current.set(editingElement.id, newElementWith(latestEditingElement || editingElement, {}, true));
+                            }
+                            else {
+                                const selectedElements = getSelectedElements(elements, appState, {
+                                    includeBoundTextElement: true,
+                                });
+                                for (const element of selectedElements) {
+                                    cachedElementsRef.current.set(element.id, newElementWith(element, {}, true));
+                                }
+                            }
+                            setBatchedData({
+                                openPopup: "fontFamily",
+                            });
                         }
-                        const boundTextElement = getBoundTextElement(element, app.scene.getNonDeletedElementsMap());
-                        if (boundTextElement) {
-                            return boundTextElement.fontFamily;
+                        else {
+                            // close, use the cache and clear it afterwards
+                            const data = {
+                                openPopup: null,
+                                currentHoveredFontFamily: null,
+                                cachedElements: new Map(cachedElementsRef.current),
+                                resetAll: true,
+                            };
+                            if (isUnmounted.current) {
+                                // in case the component was unmounted by the parent, trigger the update directly
+                                updateData({ ...batchedData, ...data });
+                            }
+                            else {
+                                setBatchedData(data);
+                            }
+                            cachedElementsRef.current.clear();
                         }
-                        return null;
-                    }, (element) => isTextElement(element) ||
-                        getBoundTextElement(element, app.scene.getNonDeletedElementsMap()) !== null, (hasSelection) => hasSelection
-                        ? null
-                        : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY), onChange: (value) => updateData(value) })] }));
+                    } })] }));
     },
 });
 export const actionChangeTextAlign = register({
@@ -462,7 +664,7 @@ export const actionChangeTextAlign = register({
                 ...appState,
                 currentItemTextAlign: value,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData, app }) => {
@@ -516,7 +718,7 @@ export const actionChangeVerticalAlign = register({
             appState: {
                 ...appState,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData, app }) => {
@@ -571,7 +773,7 @@ export const actionChangeRoundness = register({
                 ...appState,
                 currentItemRoundness: value,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => {
@@ -691,7 +893,7 @@ export const actionChangeArrowhead = register({
                     ? "currentItemStartArrowhead"
                     : "currentItemEndArrowhead"]: value.type,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     PanelComponent: ({ elements, appState, updateData }) => {

package/dist/excalidraw/actions/actionSelectAll.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../element/types";
+import type { ExcalidrawElement } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
 export declare const actionSelectAll: {
     name: "selectAll";
@@ -9,7 +9,7 @@ export declare const actionSelectAll: {
         category: "canvas";
     };
     viewMode: false;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any, app: import("../types").AppClassProperties) => false | {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, value: any, app: import("../types").AppClassProperties) => false | {
         appState: {
             selectedLinearElement: LinearElementEditor | null;
             selectedElementIds: Readonly<{
@@ -71,6 +71,7 @@ export declare const actionSelectAll: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             scrollX: number;
@@ -84,7 +85,7 @@ export declare const actionSelectAll: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -142,7 +143,10 @@ export declare const actionSelectAll: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -162,9 +166,9 @@ export declare const actionSelectAll: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: true;
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionSelectAll.js

@@ -6,6 +6,7 @@ import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { selectAllIcon } from "../components/icons";
+import { StoreAction } from "../store";
 export const actionSelectAll = register({
     name: "selectAll",
     label: "labels.selectAll",
@@ -36,7 +37,7 @@ export const actionSelectAll = register({
                     ? new LinearElementEditor(elements[0])
                     : null,
             },
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.A,

package/dist/excalidraw/actions/actionStyles.d.ts

@@ -7,7 +7,7 @@ export declare const actionCopyStyles: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, formData: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, formData: any, app: import("../types").AppClassProperties) => {
         appState: {
             toast: {
                 message: string;
@@ -64,6 +64,7 @@ export declare const actionCopyStyles: {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentHoveredFontFamily: number | null;
             currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             scrollX: number;
@@ -77,7 +78,7 @@ export declare const actionCopyStyles: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -137,7 +138,10 @@ export declare const actionCopyStyles: {
                 isSpeaking?: boolean | undefined;
                 isMuted?: boolean | undefined;
             }>>;
-            showStats: boolean;
+            stats: {
+                open: boolean;
+                panels: number;
+            };
             currentChartType: import("../element/types").ChartType;
             pasteDialog: {
                 shown: false;
@@ -158,11 +162,11 @@ export declare const actionCopyStyles: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: "none";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionPasteStyles: {
     name: "pasteStyles";
@@ -171,14 +175,14 @@ export declare const actionPasteStyles: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, formData: any, app: import("../types").AppClassProperties) => {
-        elements: readonly import("../element/types").ExcalidrawElement[];
-        commitToHistory: false;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, formData: any, app: import("../types").AppClassProperties) => {
+        elements: readonly import("../element/types").OrderedExcalidrawElement[];
+        storeAction: "none";
     } | {
-        elements: import("../element/types").ExcalidrawElement[];
-        commitToHistory: true;
+        elements: import("../element/types").OrderedExcalidrawElement[];
+        storeAction: "capture";
     };
-    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
-    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };

package/dist/excalidraw/actions/actionStyles.js

@@ -4,10 +4,12 @@ import { t } from "../i18n";
 import { register } from "./register";
 import { newElementWith } from "../element/mutateElement";
 import { DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, } from "../constants";
-import { getBoundTextElement, getDefaultLineHeight, } from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
 import { hasBoundTextElement, canApplyRoundnessTypeToElement, getDefaultRoundnessTypeForElement, isFrameLikeElement, isArrowElement, } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 import { paintIcon } from "../components/icons";
+import { StoreAction } from "../store";
+import { getLineHeight } from "../fonts";
 // `copiedStyles` is exported only for tests.
 export let copiedStyles = "{}";
 export const actionCopyStyles = register({
@@ -31,7 +33,7 @@ export const actionCopyStyles = register({
                 ...appState,
                 toast: { message: t("toast.copyStyles") },
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.C,
@@ -46,7 +48,7 @@ export const actionPasteStyles = register({
         const pastedElement = elementsCopied[0];
         const boundTextElement = elementsCopied[1];
         if (!isExcalidrawElement(pastedElement)) {
-            return { elements, commitToHistory: false };
+            return { elements, storeAction: StoreAction.NONE };
         }
         const selectedElements = getSelectedElements(elements, appState, {
             includeBoundTextElement: true,
@@ -87,7 +89,7 @@ export const actionPasteStyles = register({
                             textAlign: elementStylesToCopyFrom.textAlign ||
                                 DEFAULT_TEXT_ALIGN,
                             lineHeight: elementStylesToCopyFrom.lineHeight ||
-                                getDefaultLineHeight(fontFamily),
+                                getLineHeight(fontFamily),
                         });
                         let container = null;
                         if (newElement.containerId) {
@@ -114,7 +116,7 @@ export const actionPasteStyles = register({
                 }
                 return element;
             }),
-            commitToHistory: true,
+            storeAction: StoreAction.CAPTURE,
         };
     },
     keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,