fix: show text properties button states correctly for bounded text (#4542)

* fix: show text properties button states correctly for bounded text

* rename

src/actions/actionProperties.tsx

@@ -42,6 +42,7 @@ import {
   redrawTextBoundingBox,
 } from "../element";
 import { newElementWith } from "../element/mutateElement";
+import { getBoundTextElement } from "../element/textElement";
 import { isLinearElement, isLinearElementType } from "../element/typeChecks";
 import {
   Arrowhead,
@@ -495,7 +496,16 @@ export const actionChangeFontSize = register({
         value={getFormValue(
           elements,
           appState,
-          (element) => isTextElement(element) && element.fontSize,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.fontSize;
+            }
+            const boundTextElement = getBoundTextElement(element);
+            if (boundTextElement) {
+              return boundTextElement.fontSize;
+            }
+            return null;
+          },
           appState.currentItemFontSize || DEFAULT_FONT_SIZE,
         )}
         onChange={(value) => updateData(value)}
@@ -567,7 +577,16 @@ export const actionChangeFontFamily = register({
           value={getFormValue(
             elements,
             appState,
-            (element) => isTextElement(element) && element.fontFamily,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.fontFamily;
+              }
+              const boundTextElement = getBoundTextElement(element);
+              if (boundTextElement) {
+                return boundTextElement.fontFamily;
+              }
+              return null;
+            },
             appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
           )}
           onChange={(value) => updateData(value)}
@@ -633,7 +652,16 @@ export const actionChangeTextAlign = register({
         value={getFormValue(
           elements,
           appState,
-          (element) => isTextElement(element) && element.textAlign,
+          (element) => {
+            if (isTextElement(element)) {
+              return element.textAlign;
+            }
+            const boundTextElement = getBoundTextElement(element);
+            if (boundTextElement) {
+              return boundTextElement.textAlign;
+            }
+            return null;
+          },
           appState.currentItemTextAlign,
         )}
         onChange={(value) => updateData(value)}

src/element/textElement.ts

@@ -3,6 +3,7 @@ import {
   ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawTextElement,
+  ExcalidrawTextElementWithContainer,
   FontString,
   NonDeletedExcalidrawElement,
 } from "./types";
@@ -408,3 +409,16 @@ export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
 export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
   return container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id;
 };
+
+export const getBoundTextElement = (element: ExcalidrawElement | null) => {
+  if (!element) {
+    return null;
+  }
+  const boundTextElementId = getBoundTextElementId(element);
+  if (boundTextElementId) {
+    return Scene.getScene(element)!.getElement(
+      boundTextElementId,
+    ) as ExcalidrawTextElementWithContainer;
+  }
+  return null;
+};