feat/ability to change the alignment of the text (#1213)

* feat: add the ability to change the alignement of the text

* test: update the snapshots to included the newely textAlign state

* style: use explicit key assignment to object

* test: add missing new key textAlign to newElement.test.ts

* style: make the text on the buttons start with uppercase

* Update src/locales/en.json

* add types

* add migration

* remove incorrect update

Co-authored-by: Youness Fkhach <younessfkhach@porotonmail.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/actions/actionProperties.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+  TextAlign,
+} from "../element/types";
 import {
   getCommonAttributeOfSelectedElements,
   isSomeElementSelected,
@@ -361,3 +365,47 @@ export const actionChangeFontFamily = register({
     </fieldset>
   ),
 });
+
+export const actionChangeTextAlign = register({
+  name: "changeTextAlign",
+  perform: (elements, appState, value) => {
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            textAlign: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }
+
+        return el;
+      }),
+      appState: {
+        ...appState,
+        currentItemTextAlign: value,
+      },
+      commitToHistory: true,
+    };
+  },
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <fieldset>
+      <legend>{t("labels.textAlign")}</legend>
+      <ButtonSelect<TextAlign | false>
+        group="text-align"
+        options={[
+          { value: "left", text: t("labels.left") },
+          { value: "center", text: t("labels.center") },
+          { value: "right", text: t("labels.right") },
+        ]}
+        value={getFormValue(
+          elements,
+          appState,
+          (element) => isTextElement(element) && element.textAlign,
+          appState.currentItemTextAlign,
+        )}
+        onChange={(value) => updateData(value)}
+      />
+    </fieldset>
+  ),
+});

src/actions/index.ts

@@ -16,6 +16,7 @@ export {
   actionChangeOpacity,
   actionChangeFontSize,
   actionChangeFontFamily,
+  actionChangeTextAlign,
 } from "./actionProperties";
 
 export {

src/actions/types.ts

@@ -49,6 +49,7 @@ export type ActionName =
   | "zoomOut"
   | "resetZoom"
   | "changeFontFamily"
+  | "changeTextAlign"
   | "toggleFullScreen"
   | "toggleShortcuts";