fix: center align text when wrapped in container via context menu (#6480)

* rename action to wrapTextInContainer

* fix: center align text when wrapped in container via context menu

* revert translation key

* fix tests

src/actions/actionBoundText.tsx

@@ -196,8 +196,8 @@ const pushContainerBelowText = (
   return updatedElements;
 };
 
-export const actionCreateContainerFromText = register({
-  name: "createContainerFromText",
+export const actionWrapTextInContainer = register({
+  name: "wrapTextInContainer",
   contextItemLabel: "labels.createContainerFromText",
   trackEvent: { category: "element" },
   predicate: (elements, appState) => {
@@ -286,6 +286,7 @@ export const actionCreateContainerFromText = register({
             containerId: container.id,
             verticalAlign: VERTICAL_ALIGN.MIDDLE,
             boundElements: null,
+            textAlign: TEXT_ALIGN.CENTER,
           },
           false,
         );

src/actions/types.ts

@@ -115,7 +115,7 @@ export type ActionName =
   | "toggleLinearEditor"
   | "toggleEraserTool"
   | "toggleHandTool"
-  | "createContainerFromText";
+  | "wrapTextInContainer";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];

src/components/App.tsx

@@ -295,7 +295,7 @@ import {
 } from "../actions/actionCanvas";
 import { jotaiStore } from "../jotai";
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
-import { actionCreateContainerFromText } from "../actions/actionBoundText";
+import { actionWrapTextInContainer } from "../actions/actionBoundText";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 
 const deviceContextInitialValue = {
@@ -6364,7 +6364,7 @@ class App extends React.Component<AppProps, AppState> {
       actionGroup,
       actionUnbindText,
       actionBindText,
-      actionCreateContainerFromText,
+      actionWrapTextInContainer,
       actionUngroup,
       CONTEXT_MENU_SEPARATOR,
       actionAddToLibrary,

src/element/textWysiwyg.test.tsx

@@ -1506,7 +1506,7 @@ describe("textWysiwyg", () => {
         expect.objectContaining({
           text: "Excalidraw is an opensource virtual collaborative whiteboard",
           verticalAlign: VERTICAL_ALIGN.MIDDLE,
-          textAlign: TEXT_ALIGN.LEFT,
+          textAlign: TEXT_ALIGN.CENTER,
           boundElements: null,
         }),
       );

src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -121,7 +121,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -4518,7 +4518,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -5068,7 +5068,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -5917,7 +5917,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {
@@ -6263,7 +6263,7 @@ Object {
       },
       Object {
         "contextItemLabel": "labels.createContainerFromText",
-        "name": "createContainerFromText",
+        "name": "wrapTextInContainer",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": Object {

src/tests/binding.test.tsx

@@ -4,7 +4,7 @@ import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
 import { KEYS } from "../keys";
-import { actionCreateContainerFromText } from "../actions/actionBoundText";
+import { actionWrapTextInContainer } from "../actions/actionBoundText";
 
 const { h } = window;
 
@@ -277,7 +277,7 @@ describe("element binding", () => {
 
     expect(h.state.selectedElementIds[text1.id]).toBe(true);
 
-    h.app.actionManager.executeAction(actionCreateContainerFromText);
+    h.app.actionManager.executeAction(actionWrapTextInContainer);
 
     // new text container will be placed before the text element
     const container = h.elements.at(-2)!;