move actionChangeFontSize as well

packages/excalidraw/actions/actionChangeFontSize.tsx

@@ -0,0 +1,84 @@
+import { ButtonIconSelect } from "../components/ButtonIconSelect";
+import {
+  FontSizeExtraLargeIcon,
+  FontSizeLargeIcon,
+  FontSizeMediumIcon,
+  FontSizeSmallIcon,
+} from "../components/icons";
+import { DEFAULT_FONT_SIZE } from "../constants";
+import { isTextElement } from "../element";
+import { getBoundTextElement } from "../element/textElement";
+import { t } from "../i18n";
+import { changeFontSize } from "./utils";
+import { getFormValue } from "./actionProperties";
+import { register } from "./register";
+
+export const actionChangeFontSize = register({
+  name: "changeFontSize",
+  trackEvent: false,
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, () => value, value);
+  },
+  PanelComponent: ({ elements, appState, updateData, app }) => (
+    <fieldset>
+      <legend>{t("labels.fontSize")}</legend>
+      <ButtonIconSelect
+        group="font-size"
+        options={[
+          {
+            value: 16,
+            text: t("labels.small"),
+            icon: FontSizeSmallIcon,
+            testId: "fontSize-small",
+          },
+          {
+            value: 20,
+            text: t("labels.medium"),
+            icon: FontSizeMediumIcon,
+            testId: "fontSize-medium",
+          },
+          {
+            value: 28,
+            text: t("labels.large"),
+            icon: FontSizeLargeIcon,
+            testId: "fontSize-large",
+          },
+          {
+            value: 36,
+            text: t("labels.veryLarge"),
+            icon: FontSizeExtraLargeIcon,
+            testId: "fontSize-veryLarge",
+          },
+        ]}
+        value={getFormValue(
+          elements,
+          appState,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.fontSize;
+            }
+            const boundTextElement = getBoundTextElement(
+              element,
+              app.scene.getNonDeletedElementsMap(),
+            );
+            if (boundTextElement) {
+              return boundTextElement.fontSize;
+            }
+            return null;
+          },
+          (element) =>
+            isTextElement(element) ||
+            getBoundTextElement(
+              element,
+              app.scene.getNonDeletedElementsMap(),
+            ) !== null,
+          (hasSelection) =>
+            hasSelection
+              ? null
+              : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+        )}
+        onChange={(value) => updateData(value)}
+      />
+    </fieldset>
+  ),
+});

packages/excalidraw/actions/actionDecreaseFontSize.ts

@@ -0,0 +1,26 @@
+import { KEYS } from "../keys";
+
+import { register } from "./register";
+import { changeFontSize, FONT_SIZE_RELATIVE_INCREASE_STEP } from "./utils";
+
+export const actionDecreaseFontSize = register({
+  name: "decreaseFontSize",
+  trackEvent: false,
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, (element) =>
+      Math.round(
+        // get previous value before relative increase (doesn't work fully
+        // due to rounding and float precision issues)
+        (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize,
+      ),
+    );
+  },
+  keyTest: (event) => {
+    return (
+      event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      // KEYS.COMMA needed for MacOS
+      (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA)
+    );
+  },
+});

packages/excalidraw/actions/actionIncreaseFontSize.ts

@@ -0,0 +1,21 @@
+import { KEYS } from "../keys";
+import { register } from "./register";
+import { changeFontSize, FONT_SIZE_RELATIVE_INCREASE_STEP } from "./utils";
+
+export const actionIncreaseFontSize = register({
+  name: "increaseFontSize",
+  trackEvent: false,
+  perform: (elements, appState, value, app) => {
+    return changeFontSize(elements, appState, app, (element) =>
+      Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
+    );
+  },
+  keyTest: (event) => {
+    return (
+      event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      // KEYS.PERIOD needed for MacOS
+      (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD)
+    );
+  },
+});

packages/excalidraw/actions/actionProperties.tsx

@@ -525,76 +525,6 @@ export const actionChangeOpacity = register({
   ),
 });
 
-export const actionChangeFontSize = register({
-  name: "changeFontSize",
-  trackEvent: false,
-  perform: (elements, appState, value, app) => {
-    return changeFontSize(elements, appState, app, () => value, value);
-  },
-  PanelComponent: ({ elements, appState, updateData, app }) => (
-    <fieldset>
-      <legend>{t("labels.fontSize")}</legend>
-      <ButtonIconSelect
-        group="font-size"
-        options={[
-          {
-            value: 16,
-            text: t("labels.small"),
-            icon: FontSizeSmallIcon,
-            testId: "fontSize-small",
-          },
-          {
-            value: 20,
-            text: t("labels.medium"),
-            icon: FontSizeMediumIcon,
-            testId: "fontSize-medium",
-          },
-          {
-            value: 28,
-            text: t("labels.large"),
-            icon: FontSizeLargeIcon,
-            testId: "fontSize-large",
-          },
-          {
-            value: 36,
-            text: t("labels.veryLarge"),
-            icon: FontSizeExtraLargeIcon,
-            testId: "fontSize-veryLarge",
-          },
-        ]}
-        value={getFormValue(
-          elements,
-          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.fontSize;
-            }
-            const boundTextElement = getBoundTextElement(
-              element,
-              app.scene.getNonDeletedElementsMap(),
-            );
-            if (boundTextElement) {
-              return boundTextElement.fontSize;
-            }
-            return null;
-          },
-          (element) =>
-            isTextElement(element) ||
-            getBoundTextElement(
-              element,
-              app.scene.getNonDeletedElementsMap(),
-            ) !== null,
-          (hasSelection) =>
-            hasSelection
-              ? null
-              : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
-        )}
-        onChange={(value) => updateData(value)}
-      />
-    </fieldset>
-  ),
-});
-
 export const actionChangeFontFamily = register({
   name: "changeFontFamily",
   trackEvent: false,

packages/excalidraw/actions/index.ts

@@ -14,16 +14,16 @@ export {
   actionChangeFillStyle,
   actionChangeSloppiness,
   actionChangeOpacity,
-  actionChangeFontSize,
   actionChangeFontFamily,
   actionChangeTextAlign,
   actionChangeVerticalAlign,
 } from "./actionProperties";
 
-export {
-  actionDecreaseFontSize,
-  actionIncreaseFontSize,
-} from "./actionFontSize";
+export { actionDecreaseFontSize } from "./actionDecreaseFontSize";
+
+export { actionIncreaseFontSize } from "./actionIncreaseFontSize";
+
+export { actionChangeFontSize } from "./actionChangeFontSize";
 
 export {
   actionChangeViewBackgroundColor,

packages/excalidraw/actions/utils.ts

@@ -1,12 +1,11 @@
-import { newElementWith } from "..";
+import { mutateElement, newElementWith } from "..";
 import { isTextElement, redrawTextBoundingBox } from "../element";
+import { isBoundToContainer } from "../element/typeChecks";
 import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
-import { KEYS } from "../keys";
 import { AppClassProperties, AppState } from "../types";
 import { changeProperty } from "./actionProperties";
-import { register } from "./register";
 
-const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
+export const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
 const offsetElementAfterFontResize = (
   prevElement: ExcalidrawTextElement,
@@ -32,7 +31,7 @@ const offsetElementAfterFontResize = (
   );
 };
 
-const changeFontSize = (
+export const changeFontSize = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   app: AppClassProperties,
@@ -79,43 +78,3 @@ const changeFontSize = (
     commitToHistory: true,
   };
 };
-
-export const actionDecreaseFontSize = register({
-  name: "decreaseFontSize",
-  trackEvent: false,
-  perform: (elements, appState, value, app) => {
-    return changeFontSize(elements, appState, app, (element) =>
-      Math.round(
-        // get previous value before relative increase (doesn't work fully
-        // due to rounding and float precision issues)
-        (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize,
-      ),
-    );
-  },
-  keyTest: (event) => {
-    return (
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      // KEYS.COMMA needed for MacOS
-      (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA)
-    );
-  },
-});
-
-export const actionIncreaseFontSize = register({
-  name: "increaseFontSize",
-  trackEvent: false,
-  perform: (elements, appState, value, app) => {
-    return changeFontSize(elements, appState, app, (element) =>
-      Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
-    );
-  },
-  keyTest: (event) => {
-    return (
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      // KEYS.PERIOD needed for MacOS
-      (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD)
-    );
-  },
-});

packages/excalidraw/element/textWysiwyg.tsx

@@ -36,14 +36,12 @@ import {
   computeBoundTextPosition,
   getBoundTextElement,
 } from "./textElement";
-import {
-  actionDecreaseFontSize,
-  actionIncreaseFontSize,
-} from "../actions/actionFontSize";
+import { actionDecreaseFontSize } from "../actions/actionDecreaseFontSize";
 import { actionZoomIn, actionZoomOut } from "../actions/actionCanvas";
 import App from "../components/App";
 import { LinearElementEditor } from "./linearElementEditor";
 import { parseClipboard } from "../clipboard";
+import { actionIncreaseFontSize } from "../actions";
 
 const getTransform = (
   width: number,