diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index 4b3b63387..0d02e2a41 100644 --- a/src/actions/actionProperties.tsx +++ b/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)} diff --git a/src/element/textElement.ts b/src/element/textElement.ts index 96fe125c1..3e25d1a12 100644 --- a/src/element/textElement.ts +++ b/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; +};