feat: implement textAlign property (#11790)

for paragraph blocks, image blocks, list blocks, and table blocks

Should fix #8617 and #11254.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added text alignment options (left, center, right) for paragraph,
list, image, note, and table blocks.
- Introduced alignment controls in toolbars and slash menus for easier
formatting.
- Enabled keyboard shortcuts for quick text alignment changes (supports
Mac and Windows).
- **Localization**
- Added English, Simplified Chinese, and Traditional Chinese
translations for new alignment commands and shortcuts.
- **Style**
  - Blocks now visually reflect selected text alignment in their layout.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: L-Sun <zover.v@gmail.com>

blocksuite/affine/blocks/image/src/configs/toolbar.ts

@@ -1,4 +1,5 @@
-import { ImageBlockModel } from '@blocksuite/affine-model';
+import { updateBlockAlign } from '@blocksuite/affine-block-note';
+import { ImageBlockModel, TextAlign } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
   blockCommentToolbarButton,
@@ -12,6 +13,9 @@ import {
   DeleteIcon,
   DownloadIcon,
   DuplicateIcon,
+  TextAlignCenterIcon,
+  TextAlignLeftIcon,
+  TextAlignRightIcon,
 } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
@@ -51,7 +55,55 @@ const builtinToolbarConfig = {
       },
     },
     {
-      id: 'c.comment',
+      id: 'c.1.align-left',
+      tooltip: 'Align left',
+      icon: TextAlignLeftIcon(),
+      run(ctx) {
+        const block = ctx.getCurrentBlockByType(ImageBlockComponent);
+        if (block) {
+          ctx.chain
+            .pipe(updateBlockAlign, {
+              textAlign: TextAlign.Left,
+              selectedBlocks: [block],
+            })
+            .run();
+        }
+      },
+    },
+    {
+      id: 'c.2.align-center',
+      tooltip: 'Align center',
+      icon: TextAlignCenterIcon(),
+      run(ctx) {
+        const block = ctx.getCurrentBlockByType(ImageBlockComponent);
+        if (block) {
+          ctx.chain
+            .pipe(updateBlockAlign, {
+              textAlign: TextAlign.Center,
+              selectedBlocks: [block],
+            })
+            .run();
+        }
+      },
+    },
+    {
+      id: 'c.3.align-right',
+      tooltip: 'Align right',
+      icon: TextAlignRightIcon(),
+      run(ctx) {
+        const block = ctx.getCurrentBlockByType(ImageBlockComponent);
+        if (block) {
+          ctx.chain
+            .pipe(updateBlockAlign, {
+              textAlign: TextAlign.Right,
+              selectedBlocks: [block],
+            })
+            .run();
+        }
+      },
+    },
+    {
+      id: 'd.comment',
       ...blockCommentToolbarButton,
     },
     {

blocksuite/affine/blocks/image/src/image-block.ts

@@ -143,6 +143,15 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
       width: '100%',
     });
 
+    const alignItemsStyleMap = styleMap({
+      alignItems:
+        this.model.props.textAlign$.value === 'left'
+          ? 'flex-start'
+          : this.model.props.textAlign$.value === 'right'
+            ? 'flex-end'
+            : undefined,
+    });
+
     const resovledState = this.resourceController.resolveStateWith({
       loadingIcon: LoadingIcon({
         strokeColor: cssVarV2('button/pureWhiteText'),
@@ -162,6 +171,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
             html`<affine-page-image
               .block=${this}
               .state=${resovledState}
+              style="${alignItemsStyleMap}"
             ></affine-page-image>`,
           () =>
             html`<affine-image-fallback-card