Add text alignment to the Text node (#2920)

* Add text alignment to Text node

* Lots of renames and improvements

* Add text alignment to the Text tool

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
Salman Abuhaimed
2025-07-25 22:04:12 -07:00
committed by GitHub
co-authored by Keavon Chambers
parent 91156d295c
commit 85021fd9e0
14 changed files with 92 additions and 28 deletions
@@ -343,6 +343,7 @@
textInput.style.lineHeight = `${displayEditableTextbox.lineHeightRatio}`;
textInput.style.fontSize = `${displayEditableTextbox.fontSize}px`;
textInput.style.color = displayEditableTextbox.color.toHexOptionalAlpha() || "transparent";
textInput.style.textAlign = displayEditableTextbox.align;
textInput.oninput = () => {
if (!textInput) return;
@@ -774,7 +775,6 @@
.text-input {
word-break: break-all;
unicode-bidi: plaintext;
text-align: left;
}
.text-input div {
@@ -789,7 +789,6 @@
white-space: pre-wrap;
word-break: normal;
unicode-bidi: plaintext;
text-align: left;
display: inline-block;
// Workaround to force Chrome to display the flashing text entry cursor when text is empty
padding-left: 1px;
+4
View File
@@ -814,6 +814,8 @@ export class UpdateDocumentLayerStructureJs extends JsMessage {
readonly dataBuffer!: DataBuffer;
}
export type TextAlign = "Left" | "Center" | "Right" | "JustifyLeft";
export class DisplayEditableTextbox extends JsMessage {
readonly text!: string;
@@ -831,6 +833,8 @@ export class DisplayEditableTextbox extends JsMessage {
readonly maxWidth!: undefined | number;
readonly maxHeight!: undefined | number;
readonly align!: TextAlign;
}
export class DisplayEditableTextboxTransform extends JsMessage {