fix: changing font size when text is not selected or edited (#4751)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/actionProperties.tsx

@@ -145,6 +145,7 @@ const changeFontSize = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   getNewFontSize: (element: ExcalidrawTextElement) => number,
+  fallbackValue?: ExcalidrawTextElement["fontSize"],
 ) => {
   const newFontSizes = new Set<number>();
 
@@ -182,7 +183,7 @@ const changeFontSize = (
       currentItemFontSize:
         newFontSizes.size === 1
           ? [...newFontSizes][0]
-          : appState.currentItemFontSize,
+          : fallbackValue ?? appState.currentItemFontSize,
     },
     commitToHistory: true,
   };
@@ -520,7 +521,7 @@ export const actionChangeOpacity = register({
 export const actionChangeFontSize = register({
   name: "changeFontSize",
   perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value);
+    return changeFontSize(elements, appState, () => value, value);
   },
   PanelComponent: ({ elements, appState, updateData }) => (
     <fieldset>
@@ -532,21 +533,25 @@ export const actionChangeFontSize = register({
             value: 16,
             text: t("labels.small"),
             icon: <FontSizeSmallIcon theme={appState.theme} />,
+            testId: "fontSize-small",
           },
           {
             value: 20,
             text: t("labels.medium"),
             icon: <FontSizeMediumIcon theme={appState.theme} />,
+            testId: "fontSize-medium",
           },
           {
             value: 28,
             text: t("labels.large"),
             icon: <FontSizeLargeIcon theme={appState.theme} />,
+            testId: "fontSize-large",
           },
           {
             value: 36,
             text: t("labels.veryLarge"),
             icon: <FontSizeExtraLargeIcon theme={appState.theme} />,
+            testId: "fontSize-veryLarge",
           },
         ]}
         value={getFormValue(

src/components/ButtonIconSelect.tsx

@@ -7,7 +7,7 @@ export const ButtonIconSelect = <T extends Object>({
   onChange,
   group,
 }: {
-  options: { value: T; text: string; icon: JSX.Element }[];
+  options: { value: T; text: string; icon: JSX.Element; testId?: string }[];
   value: T | null;
   onChange: (value: T) => void;
   group: string;
@@ -24,6 +24,7 @@ export const ButtonIconSelect = <T extends Object>({
           name={group}
           onChange={() => onChange(option.value)}
           checked={value === option.value}
+          data-testid={option.testId}
         />
         {option.icon}
       </label>

src/tests/appState.test.tsx

@@ -1,8 +1,10 @@
-import { render, waitFor } from "./test-utils";
+import { queryByTestId, render, waitFor } from "./test-utils";
 import ExcalidrawApp from "../excalidraw-app";
 import { API } from "./helpers/api";
 import { getDefaultAppState } from "../appState";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import { Pointer, UI } from "./helpers/ui";
+import { ExcalidrawTextElement } from "../element/types";
 
 const { h } = window;
 
@@ -48,4 +50,26 @@ describe("appState", () => {
       expect(h.state.viewBackgroundColor).toBe("#000");
     });
   });
+
+  it("changing fontSize with text tool selected (no element created yet)", async () => {
+    const { container } = await render(<ExcalidrawApp />, {
+      localStorageData: {
+        appState: {
+          currentItemFontSize: 30,
+        },
+      },
+    });
+
+    UI.clickTool("text");
+
+    expect(h.state.currentItemFontSize).toBe(30);
+    queryByTestId(container, "fontSize-small")!.click();
+    expect(h.state.currentItemFontSize).toBe(16);
+
+    const mouse = new Pointer("mouse");
+
+    mouse.clickAt(100, 100);
+
+    expect((h.elements[0] as ExcalidrawTextElement).fontSize).toBe(16);
+  });
 });